Type COM 366 Web Production & Design. Measurement 12 points = 1 pica 6 picas = 1 inch 72 points...

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– Lines that are drawn to form letters

• Serifs– Lines some designers used to finish off strokes– Flat, rounded and bracketed serifs

A Serif

Serif (Goudy)

Think and thin strokes

San Serif (Helvetica)

AhNo serifs

Monotonal strokes

Type categories

• Basic categories– 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

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

BaskervilleGaramondPalatinoTimes

Sans Serif

• Have no serifs• Have a more modern look

Gill SansOptimaHelveticaNews Gothic

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

CourierRockwell

Cursive

• Resemble handwriting• Not italic• Not very readable, used for

invitations• or as in the case of Mistral,

to convey sense of casualness

MistralBrushGiddyup

Decorative

• Include types designed for special effect

• Very specific in the meaning they convey

• Also called decorative

CrackedMarker FeltStencil

Expressing meaning with type

dis uptionrFragile Psyche

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

Pa

Computer set

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

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

Flush left/ ragged right

Type crime: Bad RagAn ugly wedge-shape spoils the ragged edge.

A bad rag will fall into weird shapes along the rightedge, insteadof looking random

Vertical type

STACKED LETTERS

Roman letters are designed to sit side by side, not on top ofone 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!

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 point16 point

Type crime:

Too many signals. Emphasis can be created with just one signal.

BOLD, ITALIC, UNDERLINED CAPS!