Presentation on theme: "10. Typography The basic terminology & concepts of working with type"— Presentation transcript:
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 typeA dozen typefaces and their characteristicsWhat screen-friendly fonts are & 3 examplesHow typography on the Web differs from typography in printHow—using guidelines provided—to design typography for the Web that is readable, effective, and attractiveThe 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 charactersFont: set of all characters in a specific style and sizeTypeface: design for a set of fontsTypeface (Font) Family: all the sizes & variations of a typeface (bold, italic, etc.)
3 Concepts and Terminology Uppercase and LowercaseSerif: decorative line, circle, or flourish at the end of the stroke of a letterSans 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 distance72 points per inch (vertical)Picas used to measure horizontal distance6 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 linesThis 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 serif6 sans serif2 monospaced1 script1 Wingdings1 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.
18 Comparison of some sans serif fonts Arial bold and Arial BlackArial and ImpactArial and Comic SansArial 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 SpacingProportional Spacing: each character is allotted width proportional to it’s natural geometryMost fontsMonospacing: each character is allotted exactly the same widthComputer 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.
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 FontsDesigned to look like handwriting or to have the formal appearance of engraving
26 Nuptial ScriptAlthough 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 WebdingsWell, 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 monitorThe size of the user’s browser windowThe text size: users can change itThe settings and quality of the user’s monitor, in terms of brightness, contrast, & color balanceThe fonts available to a userVery 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 itI 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 TypeDisplay: Headers, titles, etc.Body: Main content of your text
33 Guidelines: Body Type on the Web Use Georgia or VerdanaUse 10 point or 12 point typeAvoid bold or italic in body type, except for a few words for emphasisUse upper case only for the first word of sentences, proper names, etc.Use left alignmentUse dark text on a light backgroundNever use underlining for emphasisI 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 beautifulUse any typeface that is legible—if your users have it; insert as a graphic if they don’tUse the HTML line-height attribute for control of line spacingUse HTML letter spacing and word spacing to get effects you wantDon’t use any form of animation of text—everOK, 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 typographyA dozen typefaces and their characteristicsWhat a screen-friendly font is, and how it worksHow typography on the Web differs from typography in printGuidelines for text and display type on the Web