typography 2.01 investigate typefaces and fonts

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

• Uses • Newspaper text Office documents• Books Magazines• Display Advertising

k

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

• Uses– Web pages - Digital display– Headings - Captions

k

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 letters 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