typography part2ss 090930125220 phpapp01

typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01 typography part2ss 090930125220 phpapp01

Understanding Typography

Part Two

Legibility issues and typographic design principles

Leading: The space in between lines of text

Term refers to lead pieces inserted in between lines of type

to add more space on old fashioned printing presses

Adjusting Text Spacing

Leading and Kerning

Kerning: Spacing in between individual letters and words in a single line of text

Adjusting Text Spacing

Leading and Kerning

Legibility: Making sure the audience can read your text

Similarity, alignment: Creating organization of information

Uniformity and consistency: Repeating elements in a composition

to direct the viewer s attention and create design harmony

Hierarchy: Organizing information in terms of its importance to the viewer

Contrast: Creating interest and distinguishing different types of information with different typefaces

Typographic Design Principles

Legibility is a combination of factors:

Font family Font size Letter, word, and line spacing Alignment

Font and background colors

Typographic Design Principles

Legibility

Typographic Design Principles

Legibility

Font sizes above 14 points break down the continuity of large blocks of text, making words difficult for readers to follow

Typographic Design Principles

Legibility

Other Legibility Issues: If letters, words, or lines are too close together, readers have a hard time because text blocks tend to look too dark

Typographic Design Principles

Legibility

Other Legibility Issues: If letters, words, or lines are too far apart, readers

have a hard time because blocks of text tend to look too light, causing

readers to lose a sense of continuity

Typographic Design Principles

Legibility

Other Legibility Issues: Spacing between words should be consistent to promote legibility; too much variation in letter and line leads to eyestrain

Typographic Design Principles

Legibility

Other Legibility Issues: White type on a black background can also make

large blocks of text difficult to read

This type of typographic treatment usually works best on headline or subhead areas of a layout

Typographic Design Principles

Legibility

Other Legibility Issues: Certain color combinations, particularly those lacking strong contrast (such as yellow type on white background) are difficult to read

Typographic Design Principles

Legibility

To maintain overall uniformity, limit the number of different font families per page to two or three at most

Use the same font for headings and body text to produce a uniform look; this is known as concordance

Typographic Design Principles

Unity and Concordance

Using the same font family throughout a layout creates uniformity but may make documents seem visually boring

To add contrast, combine two font families (for example, one serif and one sans serif

or script font) Heading and body type can use different fonts to separate information and create

visual interest

Typographic Design Principles

Contrast

Hierarchy helps your audience distinguish between levels

of information, such as title, header, subhead and body Information can be set apart by changing font family, font type, size, color

To maintain unity, keep typographic choices consistent

for each section throughout a layout

Typographic Design Principles

Hierarchy

Top-level headings can use unconventional

typographic treatments

Different levels use different font sizes, families, colors, and leading to arrange and separate information

Typographic Design Principles

Hierarchy

Copy length: Choose fonts that will allow for the best readability and flexibility

of arrangement (kerning, leading, etc) when typesetting large amounts of text

Line length: Blocks of text that are either too long or too short are difficult to read

Character count should be between 35 to 70 characters long as general rule of thumb

Type should not be adjusted by stretching it on the computer; this distorts its appearance Use the kerning and leading tools available in computer software instead

Typographic Design Principles

Other Things to Consider

Type lines up on the left with ragged the right margin

Advantage: Easy to read in large blocks

Disadvantage: Pay attention to the shape made

by the right edge of the text

Text shape should be convex (curve outward) rather than concave (curve inward)

Avoid putting very short lines of text next to long ones

Text Alignment

Flush Left

Aligns text to the right; leaves ragged left edge

Advantage: Allows designer control over kerning spacing of text on individual lines

Disadvantage: Can be hard for the reader to follow lines of type if they don t line up under one another

on the left Best used for small amounts of type

Text Alignment

Flush Right

Text Alignment

Centered

Type that aligns along the middle axis in a composition

Advantage: Just like with left and right justification, designer can control word spacing for good legibility

Disadvantage: Can be difficult for the reader to find the beginning of the next line of text when lines don t justify left

Works best using small areas of type, such as lists, headlines, etc

Aligns type on both the left and right edge

Advantage: If done correctly, this can make areas of text appear uniform and clean, giving crisp edges on both sides of an area of text

Disadvantage: Harder to control word spacing

Text Alignment

Justified

No apparent structure to type

Advantage: Can be used to create unusual

or unexpected effects

Disadvantage: Can be extremely difficult for readers

to follow due to lack of apparent structure

Text Alignment

Random Asymmetrical

Aligned text creates a visual line in a design; such lines help readers draw connections between different parts of a document

Text Alignment

Organization with Alignment

Rivers: Bad words spacing can create rivers,

or unintentional areas of white space that flow down

a page and create a visual distraction for the reader

Text Alignment

Other Considerations

Orphan: An orphan is a short line that appears at the top of a column

Occurs when the last word of a paragraph continues onto the next page

A word that floats on a page by itself is distracting and confuses the reader

Also applies to paragraphs- bad typography to begin first sentence of

a paragraph at the end of a page

Text Alignment

Other Considerations

Widow: A very short line at the end of a paragraph

Can be a single word, short phrase or the last syllable

of a hyphenated word

Text Alignment

Other Considerations