COM 366 Web Production & Design Type COM 366 Web Production & Design

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

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

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

Serif (Goudy) A Think and thin strokes Serif

San Serif (Helvetica) Ah Monotonal strokes No serifs

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

Type families

Fake! Fake! Fake!

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

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

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

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

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

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

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

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

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.

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).

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.

Page Computer set P a Kerned

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.

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.

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

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

Vertical type

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!

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.