1. 10. Typography The basic terminology & concepts of working with type
In this chapter you will learn about:
The basic terminology & concepts of working with type
A dozen typefaces and their characteristics
What screen-friendly fonts are & 3 examples
How typography on the Web differs from typography in print
How—using guidelines provided—to design typography for the Web that is readable, effective, and attractive
The absence of a gray background here is deliberate. Too many of the examples are black type on a white background. With a gray background the slides would look very strange, in some cases, and details would be lost. I still recommend dark text on a light (but not white) background for Web use, but that doesn’t work here. And although you are reading this on a monitor, the students see it on a screen, where the contrast issue may be different.

2. 10.2 Concepts & Terminology
Type: any set of characters
Font: set of all characters in a specific style and size
Typeface: design for a set of fonts
Typeface (Font) Family: all the sizes & variations of a typeface (bold, italic, etc.)

3. Concepts and Terminology
Uppercase and Lowercase
Serif: decorative line, circle, or flourish at the end of the stroke of a letter
Sans Serif: “without” serif

4. Concepts and Terminology
These are the basic terms. Every educated person should know the terms uppercase and lowercase, and know the difference between serif and sans serif. In my experience and informal surveys, only a few students know the serif/sans serif terminology. To test this, give a quiz: show a few lines of each in a variety of fonts, mixed up, and ask students to identify the serif examples and the sans serif examples. If you want to ruin your day, give that quiz immediately after this lecture. Students do need to know this knowledge; they can’t make any sense of the HTML defaults without it.
If they can’t tell you what the midline is, or the x-height, well, life will go on. Most students don’t find typography nearly as fascinating as I do. 
This is a serif font. Times New Roman.

5. A sans serif font, Arial Note: The above is an image, not text.
Note how the first letter y sits under the bar of the T. This is an example of kerning. Many fonts have built-in kerning tables for some letter pairs, but careful work with large type sizes requires manual kerning. Algorithms for kerning are not very satisfactory. Too much depends on the eye of the skillful designer. We do not treat kerning in the chapter.
If at some point you wish to demonstrate why it’s needed, produce the word “Typography” in 72 point Arial and notice how there is an unsightly gap between the T and the y. But do that in Word, which gives you control over character spacing in the Format/Font dialog. PowerPoint does not have that option; apparently it has tables of kerning pairs for large type sizes.)
Note also: all type specimens in this PowerPoint presentation are displayed from bitmap screen grabs. If I had used actual type and your machine doesn’t have the font I used, chaos & confusion would reign.
Note: The above is an image, not text.

6. What does the size of a font mean?
Points used to measure vertical distance
72 points per inch (vertical)
Picas used to measure horizontal distance
6 picas per inch (horizontal)
Point size: vertical distance between the bottom of the lowest descender & top of highest ascender – plus a little bit

7. What does the size of a font mean?
Wrong definitions creep out of the woodwork in the best of homes. The most common error is to define the font size as the vertical distance between the lowest descender and the highest ascender. That is, they leave out the “little bit.” This definition was in the manual for the first Apple laser printer I bought. Trust me: it’s wrong.
I tried to devise a demonstration of what type would look like without the “little bit,” but it’s built into the way the letterforms fit in their bounding boxes. Shove the lines too close together, and Microsoft Office products simply cut off the tops of the ascenders and the bottoms of the descenders. The slide after the next makes the point.

8. These letters are all 72 points; the lines are one inch (= 72 points) apart
How big type is depends on the font size and on the design of the font family. Don’t forget the “little bit”!
A capital B in Park Avenue is obviously a much smaller graphic than a cap B in Ultra Condensed Sans Two. Another demonstration that the “highest ascender/lowest descender” definition of point size is wrong.
How far apart are the lines? Sigh. On the screen they may be two feet apart. They were 72pts apart when I constructed this line in Word, with my monitor settings.
(And then grabbed it and made a bitmap of it. Your computer almost certainly does not have Caslon Open Face, which I bought from Adobe for $29.)
The fonts are Garamond, Goudy, Bookman Old Style, AlleyCat ICG, Caslon Open Face, Arial Black, Park Avenue, and Ultra Condensed Sans Two

9. Some text with reduced line spacing, to show what happens without the “little bit”
See?
This is a bitmap, not actual type. If you are showing this on a Mac, you definitely don’t have Arial, and I don’t what it would look like. The point might be entirely lost.

10. Leading (pronounced ledding)
The added space between successive lines
This is in addition to the little bit

11. Times New Roman, 10 point, with 1pt leading and with 3pt leading
If you ever have to produce grabs like this, consider producing the text in a browser window instead of in Word. I’m not at all sure why, but the Word grabs were rather blurry.

12. A (Bakers) Dozen Font Families
2 serif
6 sans serif
2 monospaced
1 script
1 Wingdings
1 Symbol (Greek)
Something got lost on the cutting room floor. It was a dozen when I counted at some stage, but there are 13 here. I seem to recall some confusion about which 12 or 13 type families are more or less guaranteed to be on all Windows machines.

13. Times New Roman & its screen-friendly cousin Georgia—in same font size
The first indication that Georgia is more readable on the screen—in the same font size—in part because the letters are bigger. The Georgia letters don’t take any more space vertically, but they do take more space horizontally.
Georgia and Verdana were created by Matthew Carter, on commission from Microsoft.
Microsoft commissioned the design of Georgia to be a screen-friendly font similar to Times New Roman.

14. Times Roman letters have oblique stress; Georgia has vertical stress
To me, there is a strong illusion that the line on the right is not vertical. It is. Get a pen tool (Ctrl-p), hold down the shift key, and draw a vertical line.

15. The pixel view: how Georgia gets vertical stress (the letters are bigger)
Font design is a fascinating field. People spend lifetimes in it. There must be dozens of trade-offs in designing a good screen font. Part science, part geometry, part monitor wizardry, and a whole lot of esthetic good judgment. My hat is off to font designers.

16. Times New Roman and Georgia
One reviewer, a man with a great deal of print experience, said that he doesn’t particularly like Georgia. It’s a free country, there’s no accounting for taste, and all that—but I think he was talking about Georgia in print. I don’t like it for print either. But printing is done at a minimum of 600 dots per inch; monitors today are more like a 100 dpi. When the predicted 300 dpi monitors get here, maybe some new fonts will be designed.
In the meantime, Georgia is a good default font for Web text.

17. Six sans serif fonts

18. Comparison of some sans serif fonts
Arial bold and Arial Black
Arial and Impact
Arial and Comic Sans
Arial and Trebuchet

19. Arial and its screen-friendly cousin Verdana—in same font size
Georgia and Verdana were created by Matthew Carter, on commission from Microsoft. Carter also designed Tahoma, the font in these PowerPoint presentations.
What are the discernible differences?

20. Horizontal Spacing
Proportional Spacing: each character is allotted width proportional to it’s natural geometry
Most fonts
Monospacing: each character is allotted exactly the same width
Computer programming code

21. Courier New and Times New Roman
In the text I said just “Courier.” Some reviewers pointed out that in fact this is Microsoft’s version, which is Courier New.
For many years, until fairly recently, almost all courts required Courier. A holdover from typewriter days, presumably. The preferred font is now Times Roman, 12 point. Or Times New Roman, of course, since the big law firms ( lawyers) are entirely Windows shops. (My wife trains people at law firms.)
Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise.

22. A bit of C++ code in Courier

23. In Times New Roman the same thing seems strange—to a programmer

24. Andale Mono is a screen-friendly version of Courier
Looks good to me, but I don’t recall seeing it much.

25. Script Fonts
Designed to look like handwriting or to have the formal appearance of engraving

26. Nuptial Script
Although you can find fonts that look closer to real handwriting than this. Still, nobody is fooled. Form letters printed in some script font to try to look like a personal note are insulting, and fool no one.

27. Miscellaneous & Decorative Fonts
Various symbols an specialty fonts

28. Webdings
Well, I love New York. (Not that it’s perfect.) Or at least I like it. On balance. Of course, Boston is nice, too.
Incidentally, the Webdings sampler is not a bit map here. I captured it as a bitmap, of course, then took it into Photoshop and saved it as a 1-bit GIF. With 1-bit color, you can have any two colors you like; I chose black and white, naturally. There isn’t enough regularity in the image to get a really small file, but 4.3K for a GIF sure beats 288K for the bitmap.

29. Greek alphabet in the Symbol font
Useful for setting very small amount of math. For serious work, look into XML and MathML.

30. A Web Page is Not a Printed Page – Things you don’t know
The resolution of the user’s monitor
The size of the user’s browser window
The text size: users can change it
The settings and quality of the user’s monitor, in terms of brightness, contrast, & color balance
The fonts available to a user
Very different from print design!
One Web design book, popular some years ago, said, essentially, “Don’t worry about the Web. It’s pretty much like print.” Wrong.

31. Text in graphics Some things a Web designer can’t be sure of:
What if you want to use a font your users probably don’t have? Answer: make a graphic of it
I am told (this was before my time) that in the 1920’s there were a number of such expressions. Others: “23 skiddoo!” and “Oh, you kid!” Things we say today will seem as strange in 80 years. Things that our students say sometimes seem pretty strange to me right now.
With a drop shadow

32. Body vs. Display Type
Display: Headers, titles, etc.
Body: Main content of your text

33. Guidelines: Body Type on the Web
Use Georgia or Verdana
Use 10 point or 12 point type
Avoid bold or italic in body type, except for a few words for emphasis
Use upper case only for the first word of sentences, proper names, etc.
Use left alignment
Use dark text on a light background
Never use underlining for emphasis
I omitted the recommendation to add leading—it’s mostly automatic, I think.
Underlining for emphasis is wrong for two reasons: 1) people will assume it’s a link, and, 2) the underline cuts off the bottoms of the descenders in most fonts.

34. Guidelines: Display type on the Web
Big is beautiful
Use any typeface that is legible—if your users have it; insert as a graphic if they don’t
Use the HTML line-height attribute for control of line spacing
Use HTML letter spacing and word spacing to get effects you want
Don’t use any form of animation of text—ever
OK, so I’m rabid about text animation. I am not alone!
If students think it isn’t so bad, try putting up a page from some Internet source that has major flashing text, and just leave it up for half an hour while you lecture. See if they don’t beg you to turn it off.

35. Summary In this chapter you learned:
The basic terminology and concepts of typography
A dozen typefaces and their characteristics
What a screen-friendly font is, and how it works
How typography on the Web differs from typography in print
Guidelines for text and display type on the Web