typography & wordpress
DESCRIPTION
A quick overview of typography concepts and dynamic font usage.TRANSCRIPT
Typography
&
WordPress
by C H E L S E A O TA K A N
Legibility
vs
Readability
The
of Words
The
shape
of Words
Legibility
the ability to recognize and
understand individual letters
Readability
the ease of reading and
understanding text
Readability
TrackingThe amount of universal
space between letters
CSS Property
letter-spacing
This is the normal amount of tracking for this
font. Tracking uniformly adjusts the spacing
between letters.
This is an example of positive tracking.
This is an example of negative tracking.
Kerning, unlike tracking, is the amount of
space between specific letters designed by the
type designer. Kerning attempts to distribute
whitespace evenly between letters.
Readability
LeadingThe amount of space
between lines of text
CSS Property
line-height
This is a nice spacey amount of leading. The
lines still read as the same paragraph, but do
not interfere with the shapes of the words.
Leading is set at 1.5. That’s halfway between
single and double spaced.
This is a very small amount of leading. The leading is set at 1.0, equivalent to single spaced. At this point the descenders and ascenders begin running into each other, compromising word shapes.
Readability
LeadingThe amount of space
between lines of text
CSS Property
line-height
This is a very large amount of leading. The
leading is set at 3.5, equivalent to triple
spaced. At this point the lines begin to look as
if they are separate paragraphs is more
difficult to read as a continuous block of text.
Readability
Orphanswords by themselves at
the end of a paragraph
Not only is it a wholly remarkable book, it is
also a highly successful one - more popular
than the Celestial Home Care Omnibus, better
selling than Fifty More Things to do in Zero
Gravity, and more controversial than Oolon
Colluphid's trilogy of philosophical blockbusters
Where God Went Wrong, Some More of God's
Greatest Mistakes and Who is this God Person
Anyway?
Douglas Adams
The Hitchhiker’s Guide to the Galaxy
Readability
Orphanswords by themselves at
the end of a paragraph
Not only is it a wholly remarkable book, it is
also a highly successful one - more popular
than the Celestial Home Care Omnibus, better
selling than Fifty More Things to do in Zero
Gravity, and more controversial than Oolon
Colluphid's trilogy of philosophical blockbusters
Where God Went Wrong, Some More of God's
Greatest Mistakes and Who is this God Person
Anyway?
Douglas Adams
The Hitchhiker’s Guide to the Galaxy
Typography exists to
honor content.
Robert BringhurstThe Elements of Typographic Style
Stop!
Get content first!
Read and interpret
meaning and tone.
Determine content
hierarchy and form.
1
2
3
Get content first!
Read and interpret
meaning and tone.
Determine content
hierarchy and form.
1
2
3
Get content first!
Read and interpret
meaning and tone.
Determine content
hierarchy and form.
1
2
3
Choosing
Typefaces
Handwritten
Humanist
Geometric
Transitional
Slab Serif
Sans Serif
via comicsanscriminal.com
Respect your content
DEFIBRILLATOR
DEFIBRILLATOR
Combining Typefaces
Same Family
VitesseThis is Vitesse Sans. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus. Ut scelerisque imperdiet neque ac consectetur. Vivamus hendrerit, quam faucibus porttitor accumsan, ligula metus vulputate mi.
Combining Typefaces
Same Designer
This is St TransmissionThis is St Ryde. Both these fonts were designed by
Sascha Timplan. In eu leo neque, ut porta ipsum. Integer
congue nibh sed eros viverra convallis. Nam venenatis
vehicula mi, ac vestibulum ipsum viverra et. Donec
libero mauris, rutrum nec porttitor vitae, pretium ac
magna. Vestibulum vitae leo ac eros porta porta.
Vivamus dictum tellus at ante convallis id vestibulum
lectus molestie. Aenean sit amet diam elementum risus
adipiscing luctus.
Combining Typefaces
Same Classification
This is Otari.This is PMN Caecelia. Both these typefaces are considered to be Humanist typefaces. In eu leo neque, ut porta ipsum. Integer congue nibh sed eros viverra convallis. Nam venenatis vehicula mi, ac vestibulum ipsum viverra et. Donec libero mauris, rutrum nec porttitor vitae, pretium ac magna. Vestibulum vitae leo ac eros porta porta. Vivamus dictum tellus at ante convallis id vestibulum lectus molestie. Aenean sit amet diam elementum risus adipiscing luctus.
Combining Typefaces
Same Typeface
THIS IS ARCHER SEMIBOLDThis is Archer Book. The Archer typeface has several
variations: book, light, thin, hairline, bold, semibold,
medium, and italic styles. In eu leo neque, ut porta ipsum.
Integer congue nibh sed eros viverra convallis. Nam
venenatis vehicula mi, ac vestibulum ipsum viverra et.
Donec libero mauris, rutrum nec porttitor vitae, pretium
ac magna. Vestibulum vitae leo ac eros porta porta.
Vivamus dictum tellus at ante convallis id vestibulum
lectus molestie.
Combining Typefaces
Too similar
This is Times New RomanThis is Century Schoolbook. In eu leo neque, ut porta
ipsum. Integer congue nibh sed eros viverra
convallis. Nam venenatis vehicula mi, ac vestibulum
ipsum viverra et. Donec libero mauris, rutrum nec
porttitor vitae, pretium ac magna. Vestibulum vitae
leo ac eros porta porta. Vivamus dictum tellus at ante
convallis id vestibulum lectus molestie. Aenean sit
amet diam elementum risus adipiscing luctus.
Dynamic Type
on the Web
Embedding Fonts
@font-faceUses CSS to load font
files for display in the
end-user’s browser
Compatibility
IE4+ Firefox 3.5+ Safari 3.1+
Opera 10+ Chrome 4.0+
Bulletproof Syntax
@font-face {
font-family: 'StRyde';
src: url('fonts/stryde-webfont.eot');
src: local('?'), url('fonts/stryde-webfont.woff') format('woff'), url('fonts/stryde-webfont.ttf') format('truetype'), url('fonts/stryde-webfont.svg#webfontFGe3Ckun') format('svg');
font-weight: normal;
font-style: normal;
}
Embedding Fonts
@font-faceUses CSS to load font
files for display in the
end-user’s browser
Compatibility
IE4+ Firefox 3.5+ Safari 3.1+
Opera 10+ Chrome 4.0+
FontSquirrel @font-face generator
fontsquirrel.com/fontface/generator
FontSquirrel @font-face Kits
fontsquirrel.com/fontface
Embedding Fonts
Hosted Services
Uses CSS or JavaScript
to load font files hosted
by a service
Compatibility
IE6+ Firefox 3.5+ Safari 3.1+
Opera 10+ Chrome 4.0+
Google Font Directory
code.google.com/webfonts
TypeKit
typekit.com
Fonts.com
fonts.com
Embedding Fonts
cufónUses JavaScript to replace text with canvas or vml
rendering of a font
github.com/sorccu/cufon/wiki/about
Compatibility
IE6+ Firefox 1.5+ Safari 3+ Opera 9.5+ Chrome 1.0+
FOUT
flash of unstyled text
when the browser
shows the web-safe font
for a split second before
loading the external
font file
Google WebFont Loader
google.com/apis/webfonts/docs/webfont_loader.html
Adds javascript events and CSS classes for
different stages in the loading process.
Font Hinting
Font Hinting
Old Windows
Windows 98
ClearType
DirectWrite
More on font hinting
damieng.com/blog/2007/06/13/font-rendering-philosophies-of-windows-and-mac-os-x
Bring on Retina Displays!
Displays that have more pixels per inch than the human
eye can perceive will make font-hinting obselete
Useful WP Stuff
<?php
wp_register_script(‘cufon’, bloginfo(‘template_directory’) . ‘/scripts/cufon.js’);
wp_enqueue_script(‘cufon’);
wp_enqueue_script(‘jquery’);
?>
wp_enqueue_script
via codex.wordpress.org/Function_Reference/wp_enqueue_script
<?php
wp_register_style(‘mycss’, bloginfo(‘template_directory’) . ‘/styles/mycss.css’);
wp_enqueue_style(‘mycss’);
?>
wp_enqueue_style
via codex.wordpress.org/Function_Reference/wp_enqueue_script
adds CSS classes to &,
uppercase words, numbers,
and quotations
smart replacement for marks,
quotes, dashes, elipses,
fractions, ordinal suffixes,
mathetmatical symbols etc.
protects against orphans
forces wrapping of long,
unbroken lines of text
supports over 40 languages
wp-typography
wordpress.org/extend/plugins/wp-typography
WP Google Fonts
wordpress.org/extend/plugins/wp-google-fonts
TypeKit Fonts for WordPress
wordpress.org/extend/plugins/typekit-fonts-for-wordpress