Your SlideShare is downloading. ×
© 2012 Adobe Systems Incorporated. All Rights Reserved.© 2012 Adobe Systems Incorporated. All Rights Reserved.INTRODUCTION...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Goals of typographic design Typography plays an important role in ...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Design principles for typography Legibility: Making sure the audie...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Typography and legibility Legibility is a combination of factors:...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and font families5StrokeLineStrokeOnline PrintSerifs cre...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and body text size Legibility of body text varies for d...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and spacing If letters, words, or lines are too close t...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and alignment Left-aligned text is most legible,because...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and alignment Center-aligned and right-alignedtext is g...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Font families and audience Each font family has a different “perso...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Font families for headings For body text, you may want to use some...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Similarity and alignment Aligned text creates a line in yourdesign...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Uniformity and font families To maintain overall uniformity, limit...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and font families Using the same font family throughout c...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and font families To create contrast, youcould use two fo...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Conflict and font families To avoid conflict, manydesigners avoid ...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and tracking Tracking refers to thespace between all of t...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and baseline shift Designers shift baseline to create int...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Hierarchy and typography Use typography to guide readers through t...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Hierarchy and typography Hierarchy helps your audience distinguish...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Example of hierarchy21These headings look the samebecause they expr...
© 2012 Adobe Systems Incorporated. All Rights Reserved.Summary Typography can play a key role in design. Good typography...
Upcoming SlideShare
Loading in...5
×

P3 typography preso

611

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
611
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Font family: A font family is a typeface and all its variants—such as Palatino regular, italic, and bold. Whether a font is serif or sans-serif makes it more or less legible, depending on the text ’s medium—online or print Font size: Your audience may have trouble following text that is too small or too large. Letter, word, and line spacing: In order for your audience to follow lines of text, they need to be close enough together. If they are too close, however, you risk straining your audience ’s eyes. Alignment: For body text, readers of English are used to seeing text left-aligned. Body text refers to all text that is read in blocks, as opposed to heading text.
  • For body text displayed in print, it ’s often best to use a serif font. Serifs help create distinctions between characters, such as between upper case “I” and lower case “L.” However, with online text (which appears at a lower resolution), serifs may make text appear blurry. Serif fonts also have strokes and lines that contrast, which help readers ’ eyes move from character to character. Examples of serif font families include Garamond, Times, Palatino, and Georgia. Sans-serif fonts, like Tahoma, often have uniform strokes throughout. With print, audiences can find these hard to follow. With online, audiences may find sans-serif fonts easier to read.
  • Audiences under 25 may be able to read fonts sized at 8 or 9 points. For older audiences, it might be better to use font sizes around 10 points or above. (That said, you can still use smaller font sizes for information that will read less frequently, such as footnotes.) Font sizes above 14 points will break down the continuity of the text, making text appear too gray.
  • Transcript of "P3 typography preso"

    1. 1. © 2012 Adobe Systems Incorporated. All Rights Reserved.© 2012 Adobe Systems Incorporated. All Rights Reserved.INTRODUCTION TO TYPOGRAPHY DESIGN
    2. 2. © 2012 Adobe Systems Incorporated. All Rights Reserved.Goals of typographic design Typography plays an important role in how audiences perceive yourdocument and its information. Good design is about capturing your audience’s interest and helping your audience gather information quickly and accurately. Typography creates relationships between different types of information,both organizing this information and keeping it interesting.2
    3. 3. © 2012 Adobe Systems Incorporated. All Rights Reserved.Design principles for typography Legibility: Making sure the audience can read and understand your text. Similarity, alignment: Using typography to create relationships betweensimilar kinds of information. Uniformity or consistency: Repeating familiar elements to focus youraudience’s attention. Contrast: Creating interest and distinguishing different types ofinformation with different typefaces. One element of contrast is hierarchy—making sure the audience understands that information has differentlevels of importance.3
    4. 4. © 2012 Adobe Systems Incorporated. All Rights Reserved.Typography and legibility Legibility is a combination of factors: Font family Font size Letter, word, and line spacing Alignment4
    5. 5. © 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and font families5StrokeLineStrokeOnline PrintSerifs createdistinctionsbetween characters(uppercase “I” andlowercase “L” )AppearsblurryHelps thereader followtext easilySerif fonts havecontrasting strokesand linesHelps movereader’s eyecharacter tocharacterHelps movereader’s eyecharacter tocharacterSans serif fontshave uniformstrokes throughoutHelpsreaderseasily readtextMakes wordsin a sentencehard to follow
    6. 6. © 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and body text size Legibility of body text varies for different audiences: Younger audiences may be able to read fonts sized at 8 or 9 points. Older audiences may be able to read font sizes around 10 points orabove. Font sizes above 14 points break down the continuity of the text,making text appear too gray.6
    7. 7. © 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and spacing If letters, words, or lines are too close together, readers have a hard timebecause text blocks tend to look too dark. If letters, words, or lines are too far apart, readers have a hard timebecause blocks of text tend to look too light, causing readers to lose asense of continuity. Spacing between words needs to be consistent to promote legibility;too much variation leads to eyestrain.7
    8. 8. © 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and alignment Left-aligned text is most legible,because spacing between wordsis uniform. Justified text is also legible, thoughless so with shorter line lengthsbecause it tends to create unevenspaces between words.8
    9. 9. © 2012 Adobe Systems Incorporated. All Rights Reserved.Legibility and alignment Center-aligned and right-alignedtext is generally harder to read,because your readers’ eyes areused to following text from leftto right.9
    10. 10. © 2012 Adobe Systems Incorporated. All Rights Reserved.Font families and audience Each font family has a different “personality.” Use different font families to evoke tone and mood. An advertisement for a school, for example, might use an “elegant” fontsuch as An advertisement for a financial firm, on the other hand, might use amore “modern” font such as10
    11. 11. © 2012 Adobe Systems Incorporated. All Rights Reserved.Font families for headings For body text, you may want to use something fairly conventional andlegible. For headings, consider audience: teenagers respond to different fontsthan businesspeople or academics. Choose font families that support your subject matter, or deliberately usea contrasting font to create interest.11
    12. 12. © 2012 Adobe Systems Incorporated. All Rights Reserved.Similarity and alignment Aligned text creates a line in yourdesign; such lines help readersdraw connections betweendifferent parts of a document.12
    13. 13. © 2012 Adobe Systems Incorporated. All Rights Reserved.Uniformity and font families To maintain overall uniformity, limit the number of different font familiesper page to one or two. Use the same font for headings and body text to produce a uniform look;this is known as concordance.13
    14. 14. © 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and font families Using the same font family throughout creates uniformity but may makedocuments seem “flat” or uninteresting. You can add interest by contrasting the display type and body type.14
    15. 15. © 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and font families To create contrast, youcould use two fontfamilies, one serif andone sans serif.15Heading is set inImpact—a sansserif fontSubheading isset in Georgia—aserif font
    16. 16. © 2012 Adobe Systems Incorporated. All Rights Reserved.Conflict and font families To avoid conflict, manydesigners avoid using twofont families of the samevariety, such as two seriffonts.16Heading is set inPalatino—a seriffontSubheading isset in Georgia—also a serif font
    17. 17. © 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and tracking Tracking refers to thespace between all of theletters in a line. Font families have built-intracking that works well forbody text. For headings, you canchange tracking to createcontrast.17Heading is setwith wide tracking
    18. 18. © 2012 Adobe Systems Incorporated. All Rights Reserved.Contrast and baseline shift Designers shift baseline to create interest:18Dropping the firstletter adds a playfullook.Moving other lettersaround creates a“jittery” effect.
    19. 19. © 2012 Adobe Systems Incorporated. All Rights Reserved.Hierarchy and typography Use typography to guide readers through the levels of your document. Use different headings by changing font family, font type, font size, fontcolor. To promote uniformity and help your audiences navigate, keeptypographic choices consistent for each subsection throughout thedocument.19
    20. 20. © 2012 Adobe Systems Incorporated. All Rights Reserved.Hierarchy and typography Hierarchy helps your audience distinguish between levels of information,such as headings versus body text. Many documents are divided into hierarchical sections:Main titleSectionSubsectionOrBookChapterSubheadingSub-subheading20
    21. 21. © 2012 Adobe Systems Incorporated. All Rights Reserved.Example of hierarchy21These headings look the samebecause they express the samelevel of hierarchyDifferent levels use differentfont sizes, font families, fontcolors, and leading.Top-level headings can useunconventional fonts
    22. 22. © 2012 Adobe Systems Incorporated. All Rights Reserved.Summary Typography can play a key role in design. Good typography starts with font family; choose these to meet yourdesign goals, but keep them limited. Use text alignment to create relationships between different kinds ofinformation. Create contrast by using a serif font for headings and a sans serif fontfor body text (or vice versa). You can also use italics, bold, tracking, orcolor to create contrast. Use contrast to indicate hierarchy.22

    ×