2. Let's get defining
A font is a complete set of characters in a particular size and style of type
A font family (also called a typeface) contains a series of fonts
A glyph is an individual character of a font
A serif is a flourish (little "feet") at the tip of glyphs
Can you name any font families?
3. Type sets the tone
Badly chosen font and typesetting can leave you with little or no audience
Well-styled type impacts readability, legibility, visual hierarchy, and tone
Properly paired fonts are harmonius, not discordant
4. Categorize
The shape of a font's glyph's determines its category
Some basic and common font categories are:
5. Old Style and Transitional
Classic and traditional serif fonts
• Old style serifs start thick and taper
to thin
• They contain thick stem strokes and
thin hairline strokes
• A diagonal line can intersect the
thinnest part of most O-shaped old
style glyphs
• Transitional fonts evolved from old
style and share many of the same
characteristics
• Both font categories are best for
print body copy
• Both font categories can get lost on
television and computer screens if
they aren't big and bold
6. Sans Serif
Contemporary fonts
• Sans serif fonts have no serifs
• Variations include Grotesque
(uniform thickness), Humanist
(variations in thickness),
Geometric (geometric
shapes)
• Sans serif fonts are best used
in print for headlines and brief
amounts of side text
• Sans serif fonts are the best
choice for readability on
television and computer
screens
7. Script
Formal and old-fashioned fonts
•Script fonts tend toward
formality
•Glyphs tend to be connected on
the downstroke
•Due to their low legibility, script
fonts are best limited to small
amounts in print and onscreen
•Script fonts can add decorative
flair when individual characters
are used
8. Decorative
Novelty fonts
•Decorative fonts vary widely
depending on design needs
•Decorative fonts should be limited
to headlines, decorative details,
ornaments, or very small amounts
of type
•Some decorative fonts are more
legible than others, but they are all
bad choices for reading copy
9. Slab Serif
Uniformly thick sans serif fonts
•A slab serif font looks
like a hybrid between old
and style and sans serif
fonts
•Slab serif fonts were
made for bold retail
displays
•A slab serif font is good
for print headlines, but
not for body copy
10. Modern
Contemporary serif fonts
•Modern fonts have very thin serifs
•They differ from old style by
putting their stress vertically
•Modern fonts are best in print for
headlines, decorative details, and
ornaments
•The thin serifs make modern fonts
bad choices for reading copy or
television and computer screens
11. Choose one of the following and tweet what kinds of fonts you would
use for the titles, body paragraphs, and ornamental flourishes:
1. An online wedding invitation for a young couple having a classic wedding
2. A local print magazine for indie music fans
3. A flyer for print and email advertising discounts on furniture for seniors
12. Choose, use, and don’t abuse
Do not go wild with your font choices.
13. Pair carefully
Make sure you avoid using too many competing font styles
Pick one font for your body copy that is appropriate for the medium (old style for
print, sans serif for onscreen)
Body fonts are best selected from a larger typeface
The best way to keep your body copy harmonious is to pick fonts from the same
family (Garamond regular, italic, and bold)
14. Keep on pairing carefully
Pick a second font for contrasting headlines
If you’ve used an old style font for your body, you can use a font from almost any
category for a harmonious pair
You can pick a font from the same font family for your body, but you want to make
sure you have clear visual contrast with the headline
Sans serif fonts are neutral and pair well with other fonts
15. Out of tune fonts
Don’t pair decorative fonts together
Don’t pair script fonts together
Don’t pair modern or slab serif fonts with old style fonts if you want contrast
Don’t choose fonts with a lot of fine detail for onscreen projects
Don’t ever, under any circumstance, in any context, use comic sans
Tweet if you know why comic sans is a bad choice!
16. A tangled web
When picking fonts for reading onscreen, you need to keep in mind the basics of
harmonious font pairings and the limitations of web fonts
There is a much smaller pool of fonts to choose from with web design, because if a
designer not using CSS uses a specialized font your computer doesn’t have, you’ll see
only a boring default font
Cascading Style Sheets is a language for web styling that is helping expand the fonts
available for online use, but not all fonts translate well from print to screen
Choose your web fonts carefully, and keep in mind trying to find the best design for
web design may take a lot of trial and error
17. Not all tens are made equally
Points are how the size of a font is measured
Not every font will be the same size at 10 points
In print, 10 or 11 point old style fonts are a safe choice for reading copy
Onscreen and for other font categories, you will have to use your best judgement
This is 18 points
This is 18 points
This is 18 points
This is 18 points
18. Extra style options
Once you’ve chosen your fonts, you can vary them further using different font sizes
for emphasis and context
Remember your audience, because older readers might prefer larger fonts
Use font sizes to further contrast your header and body copy fonts in a harmonious
way
Keep in mind that there are factors beyond your control that will impact some font
sizes on the web and design accordingly
To counteract any unwanted font size changes onscreen, use web fonts set in ems
instead of points, as ems adjust the font by percentage
19. Even more extra options
Bold and italic type can add variation without making your design too busy with too
many font choices
Keep reliance on these variations for contrast to short copy situations, as bold and
italic fonts are not appropriate for entire pages or paragraphs
Keep in mind that not all bolds are equal, and adjusting font size may have a better
impact
When designing professionally, avoid faux bold and italic by not using automatic bold
and italic buttons (such as the ones in Word or PowerPoint) as these only distort your
font
Remember font families? If you need to bold your Garamond type, use Garamond bold
instead of automatically bolding your Garamond regular
20. Caps are extra
The practice of using all caps for emphasis is an old-school style
All caps type is harder to read for extended periods of time
Readers take all caps as shouting and this can distort your message
You should reserve all caps for areas where it won’t change your purpose and
meaning, and use it sparsely
21. Give yourself some space
Line spacing is called leading (pronounced “ledding”)
Although your computer does most of the work with leading, you may still need to
adjust the spacing manually sometimes
The adjusting of spacing between a string of characters is called tracking
If you want to change the effect your font has, try adjusting the tracking
The adjusting of the space between individual glyphs is called kerning
Always make sure your font choice has good kerning, or awkward spaces between
your letters can happen
22. More space isn’t always best
Extra space between lines can drastically improve your legibility, but too much can
make your type read disjointedly
Fonts with inconsistent kerning will lower readability of your copy
You can manipulate tracking to control how tight or lose your words are and if a word
stays on one line, but going so overboard that the tracking is noticeable will confuse
your audience
Web applications of spacing can be hard, even with CSS, so use your best judgment
23. Put it on my tab
You can use tabbing to keep your font aligned, organize columns, and group
information
Bullet points/dots help the eye jump the space of the tab
Tabs assist flow
Gather together thoughts
Keep information sectioned off neatly
Help readers understand order
25. Break it up
Pages full of unformatted words will turn your audience away
You can carve your content into smaller pieces using a few formatting tricks
Paragraph indicators like tabs and extra lines break up text, but you should manually adjust
these spaces
Headings and subheaders provide contrast and can create a hierarchy of content using font
size
Display fonts for headlines move the eye through the page
Bullet lists give readers eye entry points and easily digested chunks of information
26. Newspaper killed the
internet star
Headlines
Well-styled headlines are eye catching “Read me!”
signs
Graduated headlines make a hierarchy of
information
A condensed font for headlines can give you more
space for your message
Columns
Columns make it easier for the eye to track back
and forth
Two inches is a good column width, and in print,
10-12 inches max for length
Justification
Justification refers to forms of copy alignment
Left justified (flush left with ragged right) is best
for reading
Poorly handled justification can lead to awkward
gaps
Full justification (right and left edges perfectly
squared) is a bad idea for web design
Newspapers have perfected effective
formatting and can be great places
to look for tips both for print and
web
27. Creative communication
Bold and italic fonts make interesting pull quotes, decks, cutlines, headlines, and
other short blocks of type
SMALL CAPS ARE ALL UPPERCASE LETTERS WITH A LARGER FIRST LETTER, AND CAN BE USED IN SHORT
COPY SITUATIONS
Reversed type is light type against a dark background, and is a common technique in
headlines, sidebars, and other layout elements—but be careful, as thin serif fonts are
not near as good as thick sans serif fonts for this
Initial and caps create dynamic eye entry points for lead informationrop
D
28. Advanced Punctuation 265
Most fonts have 265 characters, meaning there are a lot more extra punctuation than
there are letters and numbers
Within these characters there are punctuation marks specifically drawn and spaced to
match the rest of the glyphs in the font
... are manually typed ellipses, and … are properly formatted ellipses
Different punctuation marks have different uses
Smart quotes are for “quotations”, but straight quotes are for notating inches and feet (5'3")
Hyphens (-) make compound words, en dashes (–) punctuate things such as the “to” in “3–4
weeks”, and em dashes (—) replace commas, colons, and parentheses
29. Openyour mind
OpenTypefonts havemore than thestandard 265characters
Theyare functionalacross Macs and PCs and may haveup to 65000 characters, such as:
Specially designed letter pairs called ligatures(æ)
Decorative alternatives totraditional italic letterforms called swash alternatives (A )
Adjusted numerals toblend in with the rest ofthe font called old style figures (1234)
Decorative ornaments called dingbats ()
30. Tweet one of the following:
1. If you’ve ever used any OpenType special characters, tell us
which characters and why
2. If you’ve never used any OpenType special characters, tell us
where you might need to use one
31. Resources used
White Space Is Not Your Enemy by Rebecca Hagen and
Kim Golombisky
Verdana regular
Verdana italic
Verdana bold
Garamond regular
Garamond italic
Garamond bold
Century Gothic
Brush Script STD
CabinSketch
Courier new
Modum
Comic sans MS
Source sans pro
Charlemagne STd
Inglebyregular
Wingdings 2