5. PROS
๏ We have more fonts to use!
(that means we aren’t limited to the verdana, arial,
georgia basics)
๏ Dynamic, selectable, printable, and easily edited text
๏ Easy to implement
๏ Smaller and faster loading pages than images
6. CONS
๏ Easy to overuse. Lots of funs fonts don’t make good
designs, good designers make good designs
๏ Licensing - if it’s not open sourced and you don’t
have a license - don’t use it
๏ FOUT (flash of unstyled text)
๏ Rendering differences
(pixel perfection should be a thing of the past)
9. @FONT-FACE
๏ Adds “font-family” fonts you can use with CSS
๏ Currently you need to provide 4 different versions
of the same font to cover all browsers
๏ Don’t worry about the specifics
use a generator like fontsquirrel.com
or use a hosting service
10. RAW CODE
@font-face {
font-family: "Your typeface";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
@font-face {
font-family: "Your italic typeface";
src: url("type/filename-ital.eot");
src: local("☺"),
url("type/filename-ital.woff") format("woff"),
url("type/filename-ital.otf") format("opentype"),
url("type/filename-ital.svg#filename-ital") format
("svg");
}
DON’T WRITE THIS - CUT AND PASTE FROM YOUR GENERATOR
28. Complete Sets
Reklame
I’d Love to Go!
Reklame DEMO
FREE
I’d Love to Go!
29. font hinting
A font test with hinting (lower rows) and without hinting (upper rows) at 100% (above)
and 400% (below). Note the increased edge contrast with the hinted text but more
faithful character shape and more natural inter-character spacing in the unhinted text.
http://en.wikipedia.org/wiki/Font_hinting
30. Kerning
VARIATION League Gothic
VARIATION BEBAS
Spaces between ALL letters should be even
31. MY LAST 2 CENTS
๏ Make sure you own the license
๏ Read the EULA
๏ Desktop licenses are not the same as web
๏ Avoid liability issues
34. Old Style
Slanted serifs, a moderate transition between the thick and
thin strokes of a le erform, and a diagonal stress (the angle of
a line drawn through the thinnest parts of curved le ers).
Handgloves Goudy Old Style
Handgloves Palatino
35. Modern
Thin, horizontal serifs, a radical difference between the thick
and thin strokes of a le erform, and a vertical stress.
Handgloves Bodoni
Handgloves Didot
36. Slab Serif
Thick, horizontal serifs, li le to no difference between the
thick and thin strokes, and a vertical stress.
Clarendon
Handgloves
Handgloves Archer
37. San Serif
No serifs, and most o en monoweight (the strokes are pre y
much one thickness)
Handgloves Helvetica
Handgloves League Gothic
39. Decorative
Whimsical and fun. Grunge faces are a subcategory in that
they are definitely decorative, but lawless and edgy, breaking
the rules, trashy and trendy.
Handgloves HandCancelled
Handgloves Stencil
41. Large x-height &
counters for body text
the larger the bowls on le ers like “b” and “h” the easier your
text will be to read on a screen, especially at small sizes.
hobo hobo
Small x-height & counters Large x-height & counters
Cochin Georgia
42. Check your 1, I, and l
the number one, capital “i”, and lowercase “L” should be
distinct.
1Il 1Il 1Il
Gill Sans Georgia Museo
43. Readability
At small sizes fonts with larger variation in weights will be
harder to read.
Handgloves Bodoni 80px
Bodoni 24px
Handgloves
Handgloves Verdana 80px
Verdana 24px
Handgloves
44. Headline Vs. Text
Five quacking zephyrs Five quacking
jolt my wax bed. zephyrs
Flummoxed by job, kvetching W. zaps Iraq.
Cozy sphinx waves quart jug of bad milk. A
very bad quack might jinx zippy fowls. Few
jolt my wax bed.
quips galvanized the mock jury box. Quick Flummoxed by job, kvetching W. zaps Iraq. Cozy sphinx waves
brown dogs jump over the lazy fox. The jay,
quart jug of bad milk. A very bad quack might jinx zippy fowls.
pig, fox, zebra, and my wolves quack! Blowzy
Few quips galvanized the mock jury box. Quick brown dogs jump
red vixens fight for a quick jump. Joaquin
Phoenix was gazed by MTV for luck. A
over the lazy fox. The jay, pig, fox, zebra, and my wolves quack!
wizard’s job is to vex chumps quickly in fog.
Blowzy red vixens fight for a quick jump. Joaquin Phoenix was
Watch "Jeopardy! ", Alex Trebek's fun gazed by MTV for luck. A wizard’s job is to vex chumps quickly in
TV quiz game. Woven silk pyjamas exchanged fog. Watch "Jeopardy! ", Alex Trebek's fun TV quiz game. Woven
for blue quartz. silk pyjamas exchanged for blue quartz.
League Gothic as headline Droid Serif as headline
Droid Serif as body League Gothic as body
45. Appropriate
Always honor your content and audience first.
Choose fonts that are relevant to your subject before choosing
what’s new and trendy.
S ,N .
Y ’ L r
vr w r.
48. COMBINING
FONTS
๏ KISS (Keep It Simple Stupid)
๏ Don't over complicate: limit yourself to 2 Styles
๏ San Serif + Serif always works
๏ avoid similar styles/classifications
50. The Golden Ratio
Heading to Body font size
Heading font size ÷ Body copy font size = 1.96
What this really means is that if you double your body size
you will almost always have enough contrast in weight from
the heading.
62. Good typography is the easiest way
to quickly make your site look good.
But most importantly, it will make
your site easier to read and navigate
for users.
63. HIERARCHY
๏ Decide what is most important
and NOT everything can be important.
๏ Make more important things are bigger.
๏ Make less important smaller.
๏ Add emphasis with color, weight and style.
67. big headline
med body
small detail
red box for emphasis
red type for emphasis
creativemornings.com
68. emphasis
Giving emphasis to a word without interrupting the reader is
important. Italic is widely considered to be the ideal form of
emphasis. Some other common forms of emphasis are: bold,
caps, small caps, type size, color, underline or a different
typeface. No ma er which you choose, try to limit yourself to
using only one. Combinations such as caps-bold-italic are
disruptive and look clumsy.
69. Good
The quick, brown fox jumps over a lazy dog. DJs flock by when
MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds
jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs
vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy
veldt fox. Bright vixens jump; dozy fowl quack.
Bad
The quick, brown fox JUMPS OVER A LAZY DOG. DJs flock
by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps.
Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick
jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs
jumpy veldt fox. Bright vixens jump; dozy fowl quack.
70. SPACE
๏ Keep line length readable, not too long or short.
๏ Adjust the line-height to give more
๏ White space
71. How Many Characters
Per Line?
According to Robert Bringhurst, who wrote my typography
bible, 45 to 75.
Recent web studies show that 66 might be the “web ideal”
72. Line Height
NO The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for
quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox.
Bright vixens jump; dozy fowl quack.
YES The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for
quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox.
Bright vixens jump; dozy fowl quack.
NO
The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk
MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for
quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox.
Bright vixens jump; dozy fowl quack.
73. Letter Spacing
NO Cozy sphinx waves quart jug of bad milk.
YES Cozy sphinx waves quart jug of bad milk.
NO Cozy sphinx waves quar t jug of bad milk.
OK C O Z Y S P H I N X WAV E S
74. embrace white space
Not every pixel needs to be covered in text or graphics.
White space doesn’t have to be white, it can be red, green,
black, or pa erned. It’s simply space that is le vacant.
The vacant space makes it easier for the reader to navigate
through the content of your site.
76. Read
Stop Stealing Sheep The Elements of
& find out how type works Typographic Style
by Erik Spiekermann & E.M. Ginge by Robert Bringhurst
77. - hyphen
used to separate the words in a compound adjective, verb, or
adverb.
The friendly-looking man in the front is waiting for a much-
needed break.
78. – The en dash
(–)
used to express a range of values or a distance
The Red Sox beat the Yankees 4–0.
79. — The em dash
(—)
used to indicate a break in thought
The pizza—with warm cheese and spicy pepperoni—was
delicious.
80. Be Smart not Dumb
‶dumb double quotes‶ #8216; = opening single quote
“smart double quotes” ’ = closing single quote
‵dumb single quotes‵ “ = opening double quote
“smart single quotes” ” = closing double quote
81. thirty-four
h p://www.jimgodfreydesign.com/typeSins.pdf
Two spaces between sentences. Indenting a paragraph too far.
Repent of this sin by using only one space. The standard indent for a paragraph is 1 em, not ½ inch. Most software has
default tabs set for ½ inch, so adjust the tabs.
Dumb quotes instead of smart quotes.
Evil: "Thou shalt not misuse type" Good: “Thou shalt not misuse type” Failing to hang punctuation into the margin.
Punctuation has less visual weight than letters or numbers.
Dumb apostrophe instead of a smart apostrophe. Compensate for this in display text by hanging the punctuation into the margin.
Profane: Don't use prime marks Sacred: Don’t use prime marks
By the way, apostrophes always face this way: Pot o’ gold. Failing to use or create fractions.
They never face this way: Pot ‘o gold. Wicked: 1/2 Righteous: ½
Failing to tuck periods/commas inside quotes marks. Incorrectly abbreviating AM and PM.
Immoral: “I love type so much”, she confessed. Unclean: am, AM, A.M. Relatively Clean: a.m. Clean: a.m. or AM
Chaste: “I love type so much,” she testi ed.
Failing to provide margins for type in a box.
Failing to kern display type.
Unseemly gaps can impede readability and be distracting to the reader.
Adjusting the spacing between letters will assuage your guilt.
Faux italic/oblique, bold and small cap type.
Impure: Italic Pure: Italic
Using a hyphen instead of an en dash.
Sinful: Bold Virtuous: Bold
Use an en dash to indicate a duration of time instead of the word “to”:
Unkosher: SMALLCAPS Kosher: Smallcaps
the 8–10 commandments, not 8-10 commandments.
Using two hyphens instead of an em dash. Strokes that encroach upon letterforms.
An em dash signi es a change in thought—or a parenthetical phrase—within Hellacious Heavenly Thiry-Four Typographic Sins by Jim Godfrey
