Typography

2.01 Investigate typefaces and fonts.

Where’d they come from?

• Times - developed for newspaper text, books, magazines, office documents, display, and advertising • Courier New - designed to emulate a typewriter • Comic Sans MS - originally created for comic books • Century Schoolbook - originally created for magazines and later widely used in reading primers and texts • Tahoma – created for small-sized text in dialog boxes and menus; can be rotated and scaled • Trebuchet MS , Georgia , and Century Gothic were created to optimize digital display

Typefaces, Fonts, and Font Families

• A typeface is a specific style applied to a font • A font is a specific size, weight, and style applied to a character (letter, number, symbol) • A font style is a specific slant and weight of a character, such as bold or italics • A font family is a group of similarly formatted characters • Four Families of Fonts: • Serif  Ornamental or Decorative • Sans Serif  Script or Cursive

Serifs

• Contain attributes/strokes at the tips of a letter • Examples of Serif Fonts: • Goudy  Times • Bodini  Modern No. 20 • Courier  Rockwell • Century Schoolbook k • Uses • Newspaper text • Books • Display    Office documents Magazines Advertising

Sans Serifs

No attributes (serifs) at the tips of a letter – Mono-weight appearance • Examples of Sans Serif Fonts – Arial - Berlin Sans – Gill Sans - Verdana k • Uses – Web pages – Headings - Digital display - Captions

Ornamental or Decorative

Designed strictly to catch the eye – Should be used sparingly • Examples – Chiller – Webdings • Uses – Headlines on flyers – Symbols used in logos

Script or Cursive

All typefaces that appear to have been written by hand, with a calligraphy pen or a brush – Should never be used to key in all caps • Examples • Brush Script • French Script • Uses – Invitations – Calling cards – Poetry

Three Cs of Typography Design

• Concord • Conflict • Contrast

Concord

• A calm and harmonious layout • In this example – Initial cap is larger than the rest of the type – Words "full of sound and fury" have been italicized – Resulting effect is subdued

Conflict

• Using two different typefaces that are similar, but not different enough to stand apart from each other • In this example, the words “full of sound and fury” are in a different typeface

Contrast

• Effects on typeface, size, and/or weight to – Direct reading patterns – Organize information – Emphasize information

Type Effects

• Monospace • Proportional • Leading • Kerning • Tracking • Punctuation

Monospaced Fonts

• Each letter takes up the same amount of space • Advantages – Easier to see thin punctuation marks – Similar characters look more different – If limited to a certain number of characters per line, each line will look alike • Used often in computer programming and biology Courier is monospaced

Proportional Fonts

• Proportional – The amount of space each character takes up is adjusted to the width of that character – Therefore, an

i

is not as wide as an

m.

• Advantages – Does not take up as much space as monospaced fonts – Easier to read • Used in publications Times New Roman is proportional

Leading

• Vertical spacing between lines of text • Also referred to as expanded or condensed • Measured from the top of the capital of one line to the top of the capital of the next. • Uses – Slightly increase or decrease the length of a column of text so that it is even with an adjacent column – To make a block of text fit in a space that is larger or smaller that a text block

Kerning

• Horizontal spacing between pairs of letters • Used to add or subtract space between pairs of

l e t t e r s

to create a more visually appealing and readable text

Tracking

• The adjustment of space for groups of letters and entire blocks of text • Makes a block of text more open and airy or more dense.

• Used to expand or contract a block of text for the purpose of aligning two columns

Typographical Punctuation

• Curly quotes (also called smart quotes) can add interest to pull-quotes in a design • En dashes – for showing duration or range as in 9:00 –5:00 or 112–600 or March 15–31. • Em dashes — the proper dashes to use in place of single or double hyphens (--) • Hyphens – used to separate numbers and/or letters, such as in a phone number