Typography Essentials: Part 2


Published on

Understanding typography in design, part two of two. Legibility issues, alignment, leading and kerning.

Published in: Design, Business, Technology
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Typography Essentials: Part 2

  1. 1. The UnderstandingCentury Type Design Evolution of 20th Typography Part Two Legibility issues and typographic design principles
  2. 2. Adjusting Text Spacing Leading and KerningLeading: The space in between lines of textTerm refers to lead pieces inserted in between lines of typeto add more space on old fashioned printing presses
  3. 3. Adjusting Text Spacing Leading and Kerning Kerning: Spacing in between individual letters and words in a single line of text
  4. 4. Typographic Design PrinciplesLegibility: Making sure the audience can read your textSimilarity, alignment: Creating organization of informationUniformity and consistency: Repeating elements in a compositionto direct the viewer s attention and create design harmonyHierarchy: Organizing information in terms of its importance to the viewerContrast: Creating interest and distinguishing different types of informationwith different typefaces
  5. 5. Typographic Design Principles Legibility Legibility is a combination of factors: Font family Font size Letter, word, and line spacing Alignment Font and background colors
  6. 6. Typographic Design Principles Legibility
  7. 7. Typographic Design Principles LegibilityFont sizes above 14 points break down the continuity of large blocks of text,making words difficult for readers to follow
  8. 8. Typographic Design Principles LegibilityOther Legibility Issues: If letters, words, or lines are too close together,readers have a hard time because text blocks tend to look too dark
  9. 9. Typographic Design Principles LegibilityOther Legibility Issues: If letters, words, or lines are too far apart, readershave a hard time because blocks of text tend to look too light, causingreaders to lose a sense of continuity
  10. 10. Typographic Design Principles LegibilityOther Legibility Issues: Spacing between words should be consistent topromote legibility; too much variation in letter and line leads to eyestrain
  11. 11. Typographic Design Principles LegibilityOther Legibility Issues: White type on a black background can also makelarge blocks of text difficult to readThis type of typographic treatment usually works best on headline or subheadareas of a layout
  12. 12. Typographic Design Principles LegibilityOther Legibility Issues: Certain color combinations, particularly those lackingstrong contrast (such as yellow type on white background) are difficult to read
  13. 13. Typographic Design Principles Unity and ConcordanceTo maintain overall uniformity, limit the number of different font families perpage to two or three at mostUse the same font for headings and body text to produce a uniform look;this is known as concordance
  14. 14. 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 font) Heading and body type can use different fonts to separate information and create visual interest
  15. 15. 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
  16. 16. 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
  17. 17. Typographic Design Principles Other Things to ConsiderCopy length: Choose fonts that will allow for the best readability and flexibilityof arrangement (kerning, leading, etc) when typesetting large amounts of textLine length: Blocks of text that are either too long or too short are difficult to readCharacter count should be between 35 to 70 characters long as general rule of thumbType should not be adjusted by stretching it on the computer; this distorts its appearanceUse the kerning and leading tools available in computer software instead
  18. 18. Text Alignment Flush Left 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
  19. 19. Text Alignment Flush Right 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
  20. 20. 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.
  21. 21. Text Alignment Justified 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
  22. 22. Text AlignmentRandom Asymmetrical 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
  23. 23. Text Alignment Organization with AlignmentAligned text creates a visual line in a design; such lines helpreaders draw connections between different parts of a document
  24. 24. Text Alignment Other ConsiderationsRivers: Bad words spacing can create rivers,or unintentional areas of white space that flow downa page and create a visual distraction for the reader
  25. 25. Text Alignment Other ConsiderationsOrphan: An orphan is a short line that appears at the top of a columnOccurs when the last word of a paragraph continues onto the next pageA word that floats on a page by itself is distracting and confuses the readerAlso applies to paragraphs- bad typography to begin first sentence ofa paragraph at the end of a page
  26. 26. Text Alignment Other ConsiderationsWidow: A very short line at the end of a paragraphCan be a single word, short phrase or the last syllableof a hyphenated word