Typography 101

29
design 101 design 101

description

Basics of typography and relevant considerations for print and web designers

Transcript of Typography 101

Page 1: Typography 101

design 101design 101

Page 2: Typography 101

Presentation SynopsisPresentation Synopsis

• Historical development

• Technical information

• Guidelines and hints

• Ideas

• Historical development

• Technical information

• Guidelines and hints

• Ideas

Page 3: Typography 101

Historical Development of the

Art & Craftof

TYPOGRAPHY

Historical Development of the

Art & Craftof

TYPOGRAPHY

Page 4: Typography 101

From inscriptions in stone

to printed pages and digital

images on the web ...

From inscriptions in stone

to printed pages and digital

images on the web ...

Page 5: Typography 101

...typography is still all about

the effective transfer of

information.

...typography is still all about

the effective transfer of

information.

Page 6: Typography 101

Two important guysTwo important guys

• Gutenberg’s

invention of

movable type

allowed the first

mass production

of books in

history.

• Gutenberg’s

invention of

movable type

allowed the first

mass production

of books in

history.

• Mergenthaler’s

invention of the

Linotype machine

industrialized the

setting of type for

newspapers and

book publishing.

• Mergenthaler’s

invention of the

Linotype machine

industrialized the

setting of type for

newspapers and

book publishing.

Page 7: Typography 101

Letterforms have evolved through

history as the available technologies

have evolved.

Stone-chiseled inscriptions and

calligraphy on parchment gave way to

the automated transfer of ink to paper

as the related technologies of

typesetting and printing matured.

Letterforms have evolved through

history as the available technologies

have evolved.

Stone-chiseled inscriptions and

calligraphy on parchment gave way to

the automated transfer of ink to paper

as the related technologies of

typesetting and printing matured.

Page 8: Typography 101

• SERIF -- short cross-strokes on the

tips of letters, thick and thin strokes,

cursive italics

– Old Style: oblique angled stress,

ascenders taller than capitals

– Transitional: vertical stress, stronger thick and

thin contrast, wider counters

– Modern: severe horizontal stress, severe

thick and thin, precise cut

• SERIF -- short cross-strokes on the

tips of letters, thick and thin strokes,

cursive italics

– Old Style: oblique angled stress,

ascenders taller than capitals

– Transitional: vertical stress, stronger thick and

thin contrast, wider counters

– Modern: severe horizontal stress, severe

thick and thin, precise cut

Page 9: Typography 101

• SANS SERIF -- “sans” is the

French word for “without”

– Letters have no projecting serifs

– Italic faces are simply oblique versions of roman faces -most slanted at 12 degrees

– Little variation of stroke weight

– lncreased use with advent of photo-typesetting and offset printing

• SANS SERIF -- “sans” is the

French word for “without”

– Letters have no projecting serifs

– Italic faces are simply oblique versions of roman faces -most slanted at 12 degrees

– Little variation of stroke weight

– lncreased use with advent of photo-typesetting and offset printing

Page 10: Typography 101

• DECORATIVE -- typefaces

designed for decorative or

attention-getting use.

– Script faces add a touch of elegance

– Bold, brassy fonts grab the reader’s

attention

– Faces designed to evoke a certain atmosphere

• DECORATIVE -- typefaces

designed for decorative or

attention-getting use.

– Script faces add a touch of elegance

– Bold, brassy fonts grab the reader’s

attention

– Faces designed to evoke a certain atmosphere

Page 11: Typography 101

A Short Review of

Typographic Terminology

A Short Review of

Typographic Terminology

Page 12: Typography 101

Elements of Letter FormsElements of Letter Forms

• Stroke - actual drawn lines of the letters

• Counter - white space inside and between

letters

• X-height - the height of lowercase letters that

don’t extend up or down. A measure of the

relationship between capital and lowercase

letters within a font.

• Ascender - the part of a lowercase letter that

extends above the x-height.

• Descender - the part of a lowercase letter that

extends below the base line.

Page 13: Typography 101

Basic Type SpecsBasic Type Specs

• Point size - the size of a font measured in

points (12 points per pica/6 picas per inch)

which includes an amount of line space above

and below the font.

• Leading - the addition of any space between

lines of type. Term originated in use of lead

strips inserted between lines of hand-set type.

• Column Width - the measure of horizontal

space the type is set within. A page may be

set up for single column or multiple column

layout. Column width correlates to font size.

Page 14: Typography 101

Fine-tuningFine-tuning

• Tracking - the ability of the eye to track

along a line and easily recognize letter

forms in sequence. Track values are

adjusted to optimize legibility.

• Kerning - the increase or decrease of

space between individual characters to

enhance legibility

• Justification - the setting of type columns

flush left (right-ragged), flush right (left-

ragged), centered, or justified (both sides

flush), depending on appropriateness.

Page 15: Typography 101

Stylistic Considerations,

Guidelines and Hints

Stylistic Considerations,

Guidelines and Hints

Or… how to set type so Koloff won’t

proofread while reading...

Or… how to set type so Koloff won’t

proofread while reading...

Page 16: Typography 101

HyphensHyphens

• Avoid if at all possible, use sparingly and

with great discernment otherwise. Never

more than one hyphen per 5 lines of type,

and never less than 3 characters before or

after the hyphen.

• Never (ever) hyphenate the first or last line

of a column. Absolutely no hyphenated

left-overs on lines by themselves.

Page 17: Typography 101

Rag ControlRag Control

• Watch the way your line endings flow.

Make the line lengths even up as best you

can on short column widths and no more

than 4-5 picas difference on longer line

widths. Sometimes this requires bouncing

a word down to the next line to cause

re-wrapping of text lines that follow.

• Watch for “rivers” or “holes” in your columns

of justified text. Some track adjustment,

kerning, even a well-placed hyphen can

usually fix these unsightly spots.

Page 18: Typography 101

White SpaceWhite Space

• Remember, white space is your friend.

• Get to know where that point of balance

is between the strokes and counters,

between the columns and the gutters,

and between the page and the image area.

• When setting up a folded piece, remember

to double the margins for the gutter space

so that the columns center between folds.

• Leave the printer enough margin for the

gripper to pull the sheet through the press.

Page 19: Typography 101

LegibilityLegibility

• Headlines are road maps for your pages.

Make them clear, crisp and easy to read.

• Subheads guide the reader through text

blocks, giving them structure and definition.

Use more leading before a subhead than

after so that it flows naturally into the text

block that it pertains to.

• Body text is the main communication

within the document. Make sure it is highly

legible and doesn’t stress the reader. Limit

the use of all-caps and italics.

Page 20: Typography 101

Font CompatibilityFont Compatibility

• Avoid the “ransom note” look, unless that’s

what you want your piece to look like! For

most purposes, two type families are plenty

per document.

• Use complementary fonts that harmonize.

A delicate script and a big bold headline

font won’t usually work well together.

• Avoid all-caps settings when possible,

especially on script and italic faces.

• Serif type usually works better for body text

in long documents as it is more legible.

Page 21: Typography 101

ProofreadProofread

• Spell check your document, then proofread

a hard copy, because spell checkers don’t

catch everything.

• Have someone else read your hard copy

proof as well because they may see

something you’ve overlooked.

• Check the legibility of your text in relation

to the colors used in your document. Make

sure you have good contrast and definition.

Page 22: Typography 101

Special ConsiderationsSpecial Considerations

• If your document is targeted to senior adults

or children, be sure to use larger font sizes

and typefaces with well-defined letter forms.

• Type set for large displays or billboards

should be tracked and kerned (TNT).

• Type set for television should have the

tracking loosened up to allow a bit more

space between letters.

• Type set for signage should be large

enough to be read from a distance and

kerned carefully but not too tightly.

Page 23: Typography 101

Be Creative!

Page 24: Typography 101

Drop caps are fun!

L arge capital letters set within the length

of the column width serve to set off a

new paragraph. They are specified as an initial

cap (one line) or as a 2-line drop cap (like this

example), or however many lines you wish to

drop it into. The use of decorative ornamental

caps and complementing colors is highly

appropriate for this type of treatment.

Page 25: Typography 101

Use leading creatively!

Sometimes

you want to draw attention

to a specific block of text,

such as a pullout quote,

or a scholar’s column.

Exaggerated leading can

help achieve this effect.

Page 26: Typography 101

Adjust indent values for effect!

Most programs have an automatic half-inch

indent pre-programmed as the default value.

Don’t accept defaults so easily, though.

Narrow column widths need narrow indents,

while wider columns need wider indents.

But feel free to use reverse indents on

occasion, also, as I’ve done here.

• Always use hanging indents on bulleted text

so that sections align accordingly.

Page 27: Typography 101

Borders, rules, & dingbats...

❇ ❇ ❇ ❇ ❇ ❇ ❇

Borders, rules and

decorative dingbats

to offset text blocks

are great fun to use,

but exercise caution

so you don’t confuse

your message.

❇ ❇ ❇ ❇ ❇ ❇ ❇

Page 28: Typography 101

Clip art and more clip art...

Yes, clip art is a wonderful thing, in moderation, and if it is of good quality. But be careful not to overload, or your message will get lost in there somewhere.

Page 29: Typography 101

Above all...

• Have fun

• Find your “ah”

• Try something new each

week

• Learn from the past, go

forward with the future