Typography Essentials Part 2

The Evolution of 20th Century Type Design 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. Typographic Design Principles

Adjusting Text Spacing: Leading and Kerning Kerning: Spacing in between individual letters and words in a single line of text. “ Tight kerning” refers to packing letters more closely together. “ Loose kerning” refers to wider spaces between letters. “ Normal spacing” is the standard setting for the font.

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 to follow.

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

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 needs to be consistent to promote legibility; too much variation in letter and line leads to eyestrain.

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 a strong contrast (such as yellow type on a white background) can be difficult to read. Typographic Design Principles Legibility

Typographic Design Principles Unity and Concordance

To maintain overall uniformity, limit the number of different font families per page to one or two.

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

Typographic Design Principles Contrast

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

Heading and body type can use different fonts to separate information and create visual interest.

Typographic Design Principles Hierarchy

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 fonts

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

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, because this distorts font’s appearance. Use the kerning and leading tools available in computer software instead.

Adjusting Text Spacing: Other Things to Consider

Type lines up on the left with “ragged” the right margin. Advantage: Easy to read in large blocks. Disadvantage: Designer must pay attention to the shape made by the right edge of the text. Shapes should be convex (Curve outward) rather than concave (Curve inward). Avoid putting very short lines of text next to very long ones. Text Alignment Flush Left

Aligns text to the right side; leaves “ragged” left edge. Advantage: Allows designer good control over kerning and word-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

Type that aligns along the middle axis in a composition. Advantage: Just like with left and right justifies, designer is able to 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. Text Alignment Centered

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. Adjusting Alignment and Spacing: Other Things to Consider

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. Adjusting Alignment and Spacing: Other Things to Consider

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. Adjusting Alignment and Spacing: Other Things to Consider