Intro to basic typography

Terms to know
Anatomy of type
Classifying type by style
Classifying type by size
New Web fonts
Charactertistics of different fonts
Type (link to “Resources for Web Workers” by Mindy McAdams)
Color on the Web (link to “Resources for Web Workers” by Mindy McAdams)
Layout (link to “Resources for Web Workers” by Mindy McAdams)
Design (link to “Resources for Web Workers” by Mindy McAdams)

Terms to know
• Typeface: A style of lettering, such as Helvetica, Comic Sans, Times New Roman, Papyrus, Apple Chancery, Sand, Lucida Calligraphy

• Type family: A group of similar typefaces, such as Interstate light, Interstate Light Compressed, Interstate Bold, and Interstate Black

Source: http://www.thinkingwithtype.com/

• Font: A complete set of characters (A-Z, plus numbers, symbols) of one specific size, style, and weight of a typeface

• Reverse type: The type is white; the background is black or some other color

• Outline type: white type outlined in a color

• ALL UPPERCASE: same as ALL CAPS

• Boldface: darker type

• Italic: Type slants to the right

Case
• lowercase = younger audience

• UPPER CASE = SHOUTS

• upper and lower case = traditional

Jump to top

Anatomy of type
• Ascender: The part of a letter that extends above the body (b, d, h, k, etc.)

• Descender: The part of a letter that drops below the body (on g, p, y)

• Counter: The empty spaces in letters, such as b, o, p, and g

Source: http://www.thinkingwithtype.com/

Jump to top

Classifying type by style
• Serif: This is Times New Roman, one of the most common serif typefaces; in print, serif type is easier to read

• Sans serif: This is Verdana, a sans serif typeface; on a computer screen, sans serif type is easier to read(no serifs, therefore cleaner letters)

Jump to top

Classifying type by size
• Type is measured in points (72 points in an inch)

Source: http://www.thinkingwithtype.com/

• Body type: Type used for the text or “body” of articles (10 to 12 points online)

• Display type: Type that is larger than body type, such as titles and subheads

Relative sizes of type
• x-height: The height of a lowercase x

• Fonts with tall x-heights, such as Scala, look bigger than those with short x-heights, such as Bodoni, even when they’re the same size

Source: http://www.thinkingwithtype.com/

Jump to top

New Web fonts
• Renowned type designer Matthew Carter took two years to design two screen-based font families: Verdana and Georgia

• The space between characters is much looser, making it easier to scan quickly on the computer screen

Source: http://www.thinkingwithtype.com/

Jump to top

Characteristics of different fonts (these fonts will load only if they’re on your computer)

The computer is a tool . . .
• . . . to help you create your site

• The important ingredients are the content and your creativity!

Jump to top