10. typography in this chapter you will learn about: the basic terminology & concepts of working...
TRANSCRIPT
10. TypographyIn this chapter you will learn about:
The basic terminology & concepts of working with type A dozen typefaces and their characteristicsWhat screen-friendly fonts are & 3 examplesHow 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
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.)
Concepts and Terminology
Uppercase and LowercaseSerif: decorative line, circle, or flourish at the end of the stroke of a letter Sans Serif: “without” serif
Concepts and Terminology
This is a serif font. Times New Roman.
A sans serif font, Arial
Note: The above is an image, not text.
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
What does the size of a font mean?
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 on the design of the font family.and on the design of the font family. Don’t Don’t forget the “little bit”!forget 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
Some text with reduced line spacing, to show what happens without the “little bit”
Leading (pronounced ledding)
The added space between successive lines
This is in addition to the little bit
Times New Roman, 10 point, with 1pt leading and with 3pt leading
A (Bakers) Dozen Font Families
2 serif 6 sans serif 2 monospaced1 script1 Wingdings1 Symbol (Greek)
Times New Roman & its screen-friendly cousin Georgia—in same font size
Microsoft commissioned the design of Georgia to be a screen-friendly font similar to Times New Roman.
Times Roman letters have oblique stress; Georgia has vertical stress
The pixel view: how Georgia gets vertical stress (the letters are bigger)
Times New Roman and Georgia
Six sans serif fonts
Comparison of some sans serif fonts
Arial bold and Arial Black
Arial and Impact
Arial and Trebuchet
Arial and Comic Sans
Arial and its screen-friendly cousin Verdana—in same font size
What are the discernible differences?
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
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.
A bit of C++ code in Courier
In Times New Roman the same thing seems strange—to a programmer
Andale Mono is a screen-friendly version of Courier
Script Fonts
Designed to look like handwriting or to have the formal appearance of engraving
Nuptial Script
Miscellaneous & Decorative Fonts
Various symbols an specialty fonts
Webdings
Greek alphabet in the Symbol font
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 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!
Text in graphicsSome 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
With a drop shadow
Body vs. Display Type
Display: Headers, titles, etc.Body: Main content of your text
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
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
Summary
In this chapter you learned:The basic terminology and concepts of typography A dozen typefaces and their characteristicsWhat a screen-friendly font is, and how it worksHow typography on the Web differs from typography in print Guidelines for text and display type on the Web