Order of Business

1. Review Homework

2. History of Type on the Web

3. CSS3 & @font-face

4. Licensing vs Free

5. Choosing Fonts

6. Combining Fonts

7. Typography

8. Tips & Tricks

9. Trends

In the past you were limited too...

• Web-safe fonts (working with the same 5 fonts)

  • Arial

  • Georgia

  • Verdana

  • Times

  • Trebuchet

• Image Replacement, sIFR, Cufon,...

  • accessibility issues

  • a pain to maintain

  • flash of content

  • dependent on Javacript or Flash

  • Way more painful to implement

Pros

Cons

@font-face

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

Link Code

<link href='http://fonts.googleapis.com/css?family=FontName&v2' rel='stylesheet' type='text/css'>

Example from Google Fonts

Your CSS

h2 { font-family: "Your typeface", Georgia, serif; }

Style as Usual

Exercise 1: Load Some Google Fonts

Load a different font for your H1, and your P from Google Fonts

Free Problems

Licensing

Old Style (serif)

Slanted serifs, a moderate transition between the thick and thin strokes of a letterform, and a diagonal stress (the angle of a line drawn through the thinnest parts of curved letters).

Modern (serif)

Thin, horizontal serifs, a radical difference between the thick and thin strokes of a letterform, and a vertical stress.

Slab Serif

Thick, horizontal serifs, little to no difference between the thick and thin strokes, and a vertical stress.

Sans Serif

No serifs, and most often monoweight (the strokes are pretty much one thickness)

Script

Anything with a flowing, handwritten style.

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.

Large x-height & counters for body text

the larger the bowls on letters like “b” and “h” the easier your text will be to read on a screen, especially at small sizes.

Check your 1, I, and l

the number one, capital “i”, and lowercase “L” should be distinct.

Readability

At small sizes fonts with larger variation in weights will be harder to read.

Headline vs Text

Appropriate

Always honor your content and audience first.
Choose fonts that are relevant to your subject before choosing what’s new and trendy.

Combining Fonts

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.

Hierarchy

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 matter which you choose, try to limit yourself to using only one. Combinations such as caps-bold-italic are disruptive and look clumsy.

Space

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”

Line Height

Letter Spacing

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 patterned. It’s simply space that is left vacant.

The vacant space makes it easier for the reader to navigate through the content of your site.

Read

- 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.

– the en dash

used to express a range of values or a distance

The Red Sox beat the Yankees 4–0.

— the em dash

used to indicate a break in though

The pizza—with warm cheese and spicy pepperoni—was delicious.

Be Smart not Dumb

'dumb double quotes'
“smart double quotes”

&#8220 = opening double quotes &#8221 = closing double quotes

'dumb single quotes'
‘smart single quotes’

&#8216 = opening single quote &#8217 = closing single quote

Exercise 2: Lettering JS

Let's load in some google fonts and style the gettysburg address with lettering js

useful tools

Trends

Exercise 3: Font Effects

Tutorial

Resources