Type

what you don't know can hurt you

Alix Fraser

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?

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

Categorize

The shape of a font's glyph's determines its category

Some basic and common font categories are:

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

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

•

•

•

•

•

•

•

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

•

•

•

•

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

Choose, use, and don’t abuse

Do not go wild choices.

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)

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

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!

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

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

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

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

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

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

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

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

Tweet three examples, print or web, where using tabs would help your message

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

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

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 information rop D

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

Open your mind

OpenType fonts have more than the standard 265 characters

They are functional across Macs and PCs and may have up to 65 000 characters, such as:

Specially designed letter pairs called ligatures (æ)

Decorative alternatives to traditional italic letterforms called swash alternatives ( )

Adjusted numerals to blend in with the rest of the font called old style figures (1234)

Decorative ornaments called dingbats ()

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

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

Courier new

Comic sans MS

Ingleby regular Wingdings 2