T ypography Style and Substance in the Design of Words.

TTypographyypographyStyle and Substance inStyle and Substance inthe Design of Words.the Design of Words.

The Art of Typography.The Art of Typography.

Words can be expressive in both their Words can be expressive in both their meaning meaning andand their form. their form.– The medium may not be the only message, but The medium may not be the only message, but

it surely is one of them.it surely is one of them. Typography can be Typography can be

Change the Initial Letter.Change the Initial Letter.

Consider the use of an initial Consider the use of an initial letter that is...letter that is...

–LLarger.arger.

–BBolder.older.

–UUnique.nique.

Emphasize One Letter.Emphasize One Letter.

Can the letter chosen Can the letter chosen somehow contribute to somehow contribute to the meaning of the word?the meaning of the word?

Contrast in Size Can Make a Picture.Contrast in Size Can Make a Picture.

Good Typography Good Typography Will Lead the Eye.Will Lead the Eye.

Use Other Devices for Emphasis.Use Other Devices for Emphasis.

Reverse One Word or One Line.Reverse One Word or One Line.

Match the Mood.Match the Mood.

Contrast in TypographyContrast in Typography

Contrast in typography is one of the Contrast in typography is one of the designer’s greatest tools for effective designer’s greatest tools for effective communication.communication.– If you look at any magazine or book layout, If you look at any magazine or book layout,

you will see examples of contrast in typography you will see examples of contrast in typography

at work.at work.

Contrast in TypographyContrast in Typography

Large headlines.Large headlines.– and smaller subheads.and smaller subheads.

» Contrast can be used to guide the reader’s eye. Contrast can be used to guide the reader’s eye. That is why the headline is typically larger than the That is why the headline is typically larger than the body copy.body copy.

Photo captions and body copy.Photo captions and body copy.

Type Contrast Continued...Type Contrast Continued...

If a headline is If a headline is not bold enough, not bold enough, there is a risk of there is a risk of confusing confusing the reader.the reader.

Contrasting Contrasting typefaces provide typefaces provide a way to add a way to add interest to your interest to your design.design.

Here are examples of pages where two type faces on each page work well together.


Until you feel confident in type useage, Until you feel confident in type useage, it is best to stick with it is best to stick with no more than two no more than two different fonts on any one pagedifferent fonts on any one page..

– Or, use just one font with variations in Or, use just one font with variations in size and style.size and style.


Create contrast by varying the:Create contrast by varying the:– SizeSize

– Type style or weight (bold or light).Type style or weight (bold or light).

– Vary the leading.Vary the leading.

– Adjust kerning.Adjust kerning.

– Different type positions or Different type positions or column widths.column widths.


Contrast should be Contrast should be considered when thinking considered when thinking about the density of type.about the density of type.

Along with contrasting typefaces, sizes, and column width, youcan use different “densities” of type.

Some Contrast Guidelines.Some Contrast Guidelines.

Density can mean the amount of type in Density can mean the amount of type in an area.an area.

All contrasts do not have to be dramatic... a All contrasts do not have to be dramatic... a subtle approach may be more effective in subtle approach may be more effective in communicating your message.communicating your message.

If the contrast is subtle, If the contrast is subtle, it still must it still must be noticeablebe noticeable..

Avoid the Long and Narrow.Avoid the Long and Narrow.

A very long and narrow column of A very long and narrow column of text can be annoying for readers text can be annoying for readers and cause them to lose interest or and cause them to lose interest or become fatigued as the eyes must become fatigued as the eyes must constantly scan back and forth.constantly scan back and forth.

Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country.

Avoid the Wide, Wide, Paragraph.Avoid the Wide, Wide, Paragraph.

Similarly, a excessively-wide column can Similarly, a excessively-wide column can cause fatigue and cause the readers to loose cause fatigue and cause the readers to loose their place. As the eye travels across the page their place. As the eye travels across the page at the end of each line it can become confused at the end of each line it can become confused and jump to a line of text out of sequence.and jump to a line of text out of sequence.


Avoid Pages of Solid Body Type.Avoid Pages of Solid Body Type.

Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country.

Avoid Pages of Solid Body Type.Avoid Pages of Solid Body Type.

Where possible, break Where possible, break up large text blocks up large text blocks with graphics, section with graphics, section headlines, or headlines, or paragraph spaces.paragraph spaces.

GeographyEncompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country.



Avoid Widows, Orphans, Avoid Widows, Orphans, and Single-Word Lines.and Single-Word Lines.

Widows, Orphans, and a line of just one Widows, Orphans, and a line of just one word interrupt the natural flow of text for word interrupt the natural flow of text for the reader.the reader.– Eliminate the single-word line by using a Eliminate the single-word line by using a

“manual line break” (shift - return) within “manual line break” (shift - return) within preceding non-justified text so that there are at preceding non-justified text so that there are at least two words on the line.least two words on the line.

Avoid Avoid Ladders.Ladders.

LaddersLadders occur when there are occur when there are more more than three than three consecutive lines ending consecutive lines ending with hyphens.with hyphens.

Avoid Avoid laddersladders by changing the line spacing by changing the line spacing or by inserting manual hyphenation in or by inserting manual hyphenation in another line.another line.

Decrease Leading.Decrease Leading.

When creating headlines or other uses of When creating headlines or other uses of display type, you will generally want to display type, you will generally want to reduce the leading from its default setting.reduce the leading from its default setting.

Use Single Space Only.Use Single Space Only.

Contrary to what you may have learned Contrary to what you may have learned using a typewriter, with computer using a typewriter, with computer typography you should use only a typography you should use only a single single space space at the end of a sentence, or after any at the end of a sentence, or after any punctuation.punctuation.

Use Tabs Instead of Spaces.Use Tabs Instead of Spaces.

For reliable and repeatable spacing within a For reliable and repeatable spacing within a line, use line, use tabstabs instead of multiple spaces. instead of multiple spaces.– Using tabs, you can easily change the settings Using tabs, you can easily change the settings

for an entire paragraph at once.for an entire paragraph at once.

Use Curly Quotes and Apostrophes.Use Curly Quotes and Apostrophes.

If your software does not automatically insert If your software does not automatically insert them, you should replace straight quotes and them, you should replace straight quotes and apostrophes with (curly) typographic equivalents.apostrophes with (curly) typographic equivalents.

–“ “ (option / left-bracket key)(option / left-bracket key)

– ” ” (shift-option / left-bracket key)(shift-option / left-bracket key)

– ‘‘ (option / right-bracket key)(option / right-bracket key)

– ’’ (shift-option / right-bracket key)(shift-option / right-bracket key)

Use Use em dash em dash and and en dashen dash..

Use the proper Use the proper emem and and enen dashes dashes where appropriate.where appropriate.Em dash Em dash (option-shift-hyphen):(option-shift-hyphen): ——

» used to separate parts of a sentence.used to separate parts of a sentence.

En dash En dash (option-hyphen): (option-hyphen): ––» used as a symbol in place of the word used as a symbol in place of the word toto, as in a , as in a

range of time: 5 P.M. – 6 P.M.range of time: 5 P.M. – 6 P.M.

Use the True Ellipsis.Use the True Ellipsis.

For better typography, don’t use three For better typography, don’t use three periods for an periods for an ellipsisellipsis..

Instead, use the actual Instead, use the actual ellipsisellipsis character character ((option-semicolonoption-semicolon), which has ), which has better spacing.better spacing.

Three periods:Three periods: ......

True ellipsis:True ellipsis: ……

Don’t Confuse Your Subheads.Don’t Confuse Your Subheads.

Leave more space before a subhead than after it. A Leave more space before a subhead than after it. A subhead logically goes with the text that follows, subhead logically goes with the text that follows,

not the text beforenot the text before..Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the

Geography


incorrect correct

Encompassing 110,000 square miles, Nevada is the seventh largest state in the Union. It’s home to huge hunks of the Great Basin and Mojave deserts and boasts more than 200 individual mountain ranges, half a dozen rivers to nowhere, and the majority of the wild horses in the country. Encompassing 110,000 square miles, Nevada is the


Avoid Excessive Capitalization.Avoid Excessive Capitalization.

Words using ALL CAPITAL LETTERS are the Words using ALL CAPITAL LETTERS are the typographic equivalent of “yelling,” and should typographic equivalent of “yelling,” and should be used sparingly.be used sparingly.– Never use an ornate display font all caps:Never use an ornate display font all caps:

– Also, don’t use a display font in a (small) body-text Also, don’t use a display font in a (small) body-text size.size.

Use Bold Sparingly.Use Bold Sparingly.

Limited use of Limited use of boldbold text can be effective if text can be effective if used sparingly.used sparingly.

Avoid using Avoid using underlinedunderlined text. text.

Symbol Characters.Symbol Characters.

In Microsoft Word, you can insert “symbol In Microsoft Word, you can insert “symbol characters” by selecting characters” by selecting Symbol... Symbol... from the from the InsertInsert menu. Some examples: menu. Some examples:

• • , ©, ∆, ˚, ÷, ≥, ≤, ®, ™, £, ¢, ∞, ©, ∆, ˚, ÷, ≥, ≤, ®, ™, £, ¢, ∞.. Most of these can also be created by Most of these can also be created by

holding down the holding down the OptionOption key and typing key and typing specific characters.specific characters.

Key Caps.Key Caps.

To see the entire To see the entire character set character set for any font, select for any font, select Key Caps Key Caps from from the the Applications Folder Applications Folder : : Utilities Utilities :: Key Caps Key Caps. . – If you hold down the If you hold down the ShiftShift and/or the and/or the OptionOption keys, you will see keys, you will see

additional characters.additional characters.

T ypography Style and Substance in the Design of Words.

Documents

Transcript of T ypography Style and Substance in the Design of Words.