![Page 1: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/1.jpg)
Typography
Chapter 10: Typography Copyright © 2004 by Prentice Hall
![Page 2: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/2.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Concepts and Terminology
![Page 3: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/3.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
A sans serif font, Arial
![Page 4: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/4.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
What does the size of a font mean?
![Page 5: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/5.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
These letters are all 72 points; the lines are one inch (= 72 points) apart
How big type is depends on the font size How big type is depends on the font size and and on the design of the font family.on the design of the font family. Don’t forget Don’t forget the “little bit”!the “little bit”!The fonts are Garamond, Goudy, Bookman The fonts are Garamond, Goudy, Bookman Old Style, AlleyCat ICG, Caslon Open Face, Old Style, AlleyCat ICG, Caslon Open Face, Arial Black, Park Avenue, and Ultra Arial Black, Park Avenue, and Ultra Condensed Sans TwoCondensed Sans Two
![Page 6: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/6.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Some text with reduced line spacing, to show what happens without the “little bit”
![Page 7: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/7.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Times New Roman, 10 point, with 1pt leading and with 3pt leading
![Page 8: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/8.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
A (Bakers) Dozen Font Families
2 serif 6 sans serif 2 monospaced1 script1 Wingdings1 Symbol (Greek)
![Page 9: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/9.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Times New Roman and its screen-friendly cousin Georgia—in same font size
![Page 10: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/10.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Times Roman letters have oblique stress; Georgia has vertical stress
![Page 11: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/11.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
The pixel view: how Georgia gets vertical stress (and the letters are bigger)
![Page 12: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/12.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Times New Roman and Georgia
![Page 13: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/13.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Six sans serif fonts
![Page 14: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/14.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Comparison of some sans serif fonts
Arial bold and Arial Black
Arial and Impact
Arial and Trebuchet
Arial and Comic Sans
![Page 15: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/15.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Arial and its screen-friendly cousin Verdana—in same font size
![Page 16: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/16.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Courier New and Times New Roman
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.
![Page 17: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/17.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
A bit of C++ code in Courier
![Page 18: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/18.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
In Times New Roman the same thing seems strange—to a programmer
![Page 19: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/19.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Andale Mono is a screen-friendly version of Courier
![Page 20: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/20.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Nuptial Script
![Page 21: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/21.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
Webdings
![Page 22: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/22.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
The Greek alphabet in the Symbol font
![Page 23: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/23.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
A Web Page is Not a Printed Page
Some things a Web designer can’t be sure of:The resolution of the user’s monitor The size of the user’s browser window The text size: users can change itThe settings and quality of the user’s monitor, in terms of brightness, contrast, and color balanceThe fonts available to a userVery different from print design!
![Page 24: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/24.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
10.5 Text in graphicsWhat if you want to use a font your users probably don’t have? Answer: make a graphic of it
With a drop shadow
![Page 25: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/25.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
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 emphasis
![Page 26: Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall](https://reader035.vdocument.in/reader035/viewer/2022062302/5a4d1aea7f8b9ab05997a49c/html5/thumbnails/26.jpg)
Chapter 10: Typography Copyright © 2004 by Prentice Hall
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’tUse 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