1. COM 366 Web Production & Design
Type
COM 366
Web Production & Design

2. Measurement
12 points = 1 pica
6 picas = 1 inch
72 points = 1 inch

3. Type size Point is smallest unit of measurement
thickness of rules
space between lines
height of type
If type is 36 point, about 1/2 inch high
72 points, about 1 inch high

4. Strokes Serifs Lines that are drawn to form letters
Lines some designers used to finish off strokes
Flat, rounded and bracketed serifs

5. Serif (Goudy) A
Think and
thin strokes
Serif

6. San Serif (Helvetica) Ah
Monotonal
strokes
No serifs

7. Type categories Basic categories Families Roman Sans Serif
Egyptians (square serifs)
Cursives (scriptives)
Novelty
Black letter (Old English)
Families
Goudy family, Bodoni family
Named after the designer

8. Type families

9. Fake!
Fake!
Fake!

10. Font All characters available in one style and size
48 Goudy Italic
Usually about 125 characters in a font
Includes all lowercase letters, uppercase letters, numbers and special symbols

11. Baskerville Garamond Palatino Times Roman Have serifs
Strokes have contrast (thick and thin)
Old style > less contrast in strokes
Modern > a lot of contrast in strokes
Thinner serifs
Convey tradition, distinction
Baskerville
Garamond
Palatino
Times

12. Gill Sans Optima Helvetica News Gothic Sans Serif Have no serifs
Have a more modern look
Gill Sans
Optima
Helvetica
News Gothic

13. Courier Rockwell Slab serif Also known as Egyptian or block serifs
Evenness of weight, stroke
Square serifs
Not meant to be used for text
Headlines, ads, posters
Also called Egyptian because convey image of that part of world
Courier
Rockwell

14. Mistral Brush Giddyup Cursive Resemble handwriting Not italic
Not very readable, used for invitations
or as in the case of Mistral, to convey sense of casualness
Mistral
Brush
Giddyup

15. Cracked Marker Felt Stencil Decorative
Include types designed for special effect
Very specific in the meaning they convey
Also called decorative
Cracked
Marker Felt
Stencil

16. Expressing meaning with type
Fragile Psyche r
dis uption
everywhere
water, water

17. Black letter or Old English Sort of Gothic, medieval looking
Used sparingly
Newspapers use for nameplates

18. Anti-aliasing
ANTIALIASING is a technique for making the edges of letters look smooth on screen by rendering some pixels in shades of gray. Antialiasing is generally helpful for presenting text on screen at large sizes (12 pixels and higher), but it can make small text difficult to read.

19. When preparing images for the Web in Photoshop, you can select among several anti-aliasing settings, from “none” (which generates bitmapped letters), to “smooth” (which works best at large sizes).

20. Kerning Allows designer to adjust spacing between letters and words
Computer programs automatically set kerning
Controlled by a table of kerning pairs, which specify spaces between different letter combinations.

21. Page
Computer set P a
Kerned

22. If letters in a typeface are spaced too uniformly, they make a pattern that doesn’t look uniform enough. Gaps occur, for example, around letters whose forms angle outward or frame an open space (W, Y, V, T, L). Because the space between characters expands as the type size increases, designers often fine-tune letterspacing when working with large letters. As the word “rub” gets bigger, the gap between u and b grows more obvious.

23. Tracking
Adjusting the spacing across a word, line, or column of text is called tracking, also known as letterspacing. It is common practice to letterspace capitals and small capitals, which appear more regal when standing apart. By slightly expanding the tracking across a body of text, the designer can create a more airy field.
Type crime: negative tracking Make the shoe fit, not the foot. Don’t use negative tracking to save space.

24. Leading (or line spacing)
Distance between each line of text
Term comes from inserting lead bars between lines of text
From baseline to baseline
Measured in points
Use this equation to specify type
Point size of type over leading
12 / 14
12 point type, 14 points of leading

26. Alignment Flush left/ ragged right Type crime: Bad Rag
Newspaper circulation fell 2.6 percent in the six-month period ending in March, according to data released Monday, as more people turned to the Internet and other media outlets for news and information.
The decline in average paid weekday circulation was about the same as the previous six-month reporting cycle for the period ending last September, according to the Newspaper Association of America, a trade group.
Average paid circulation at Sunday newspapers fell 3.1 percent versus the same period a year ago, also a comparable decline with the last time circulation tallies were reported, the NAA said. The figures were based on NAA's analysis of circulation figures
Type crime:
Bad Rag
An ugly wedge-shape spoils the ragged edge.
A bad rag will fall into weird
shapes along the right
edge, instead
of looking
random

27. Vertical type

28. In other words, avoid stacked type at all costs!
STACKED LETTERS
Roman letters are designed to sit side by side, not on top of
one another. Uppercase letters form more stable stacks than lowercase letters. Centering the column helps to even out the differences in width. (The letter I is a perennial problem.) Stacks of lowercase letters are especially awkward because the ascenders and descenders make the vertical spacing appear uneven, and the varied width of the characters makes the stacks look precarious.
It is more common in the U.S., to run text on the spines of books from top to bottom.
In other words, avoid stacked type at all costs!

29. BOLD, ITALIC, UNDERLINED CAPS!
CREATING EMPHASIS WITHIN RUNNING TEXT
Emphasizing a word or phrase within a body of text usually only requires only one “signal.” Italic is the standard form of emphasis. There are many alternatives, however, including boldface, SMALL CAPS, or a change in color. You can also create emphasis with a different font, just adjust the sizes so the x-heights align.
18 point
16 point
BOLD, ITALIC, UNDERLINED CAPS!
Type crime:
Too many signals. Emphasis can be created with just one signal.