 Differentiate the various font formats.
In This Chapter, you’ll learn on:
 The Hierarchy of Typography
 The Difference between a Type and a Font
 Compare the V...
The Hierarchy of Typography
 Words are communication. What do they say? The
meaning should come before the look of the ty...
From the top down: Places in the hierarchy
 Headlines: Headlines work best when they're both visually and
verbally intere...
The Difference between a Type and Font
 To begin with, it’s important to understand the difference
between a typeface and...
Bitmap Fonts [Postscript Type 1]
 Bitmap font is also known as the PostScript Type 1.
 PostScript Type 1 font for Macint...
 The screen font is a set of characters saved as bit-
mapped fonts: small, pixel-based images used to
display the typefac...
 Screen fonts are usually stored in a few smaller sizes (10,
12, 14, 16, 18 and 24 points, for example). If you enlarge
t...
TrueType
 TrueType fonts consist of one single font file completely
based on bezier curves. TrueType does not have
separa...
ATM utility
 Adobe Type Manager, or ATM, is utility software from
Adobe, used primarily to improve the screen display of
...
 ATM also makes it possible to convert characters to
character outlines which can be modified in
PostScript based program...
Bezier Curves
 All characters in printer fonts are created using bezier
curves. As a result, printer fonts are not depend...
Serif Fonts
 Serif fonts are marked by little 'feet' that extend from
the stem of the letter. All fonts were Roman (serif...
 Transitional
o Smaller curves connect the serifs. Examples: Baskerville,
Century, Tiffany, Times.
 Modern
o The stems a...
Sans-Serif Fonts
 For sans-serif fonts, they are no 'feet'. Clean, simple
lines, less traditional looking. Hugely popular...
Display/Decorative
 Script Calligraphic (think Wedding invitations),
rounded hand (think cursive, with connected
letters)...
Comparing types of
Typefaces
Choosing and Using Appropriate Type
 Every font has a character, or tone, which
communicates on a visual level.
 Once yo...
 Avoid so-called free fonts you can get from the Internet. Most
are terribly gimmicky. Plus, you'll probably have to spen...
Font Families
 Most serif and san serif fonts come with variations of
weight (boldness), width (condensed or extended) an...
Part of the
Univers family
What’s Appropriate?
 You don't have to choose an obvious font, such as a flowery
script for a perfume ad or a blocky san ...
Text Formatting Choices
 These variables are the key to differentiating the
levels of typographic hierarchy. They work pr...
 Alignment: (Flush left, rag right): Remember that in
the West, we read from left to right, so our eyes
prefer a hard edg...
 Alignment: Justified, or force justified: Pushes type to
both edges of margin. Makes nice, straight
columns, but there's...
 Space: Use air around words for emphasis, to set them
of, especially if they're bold. Keep spacing consistent,
such as t...
Upcoming SlideShare
Loading in...5
×

Chap7

459
-1

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Chap7

  1. 1.  Differentiate the various font formats.
  2. 2. In This Chapter, you’ll learn on:  The Hierarchy of Typography  The Difference between a Type and a Font  Compare the Various Font Formats such as o Bitmap Fonts o TrueType Fonts  Identify the decorative, serif and sans-serif fonts  Identify some commonly used typefaces  Compare the characteristics and the use of various typefaces  Choosing and Using Appropriate Type  Tools for Emphasis, Contrast and Legibility
  3. 3. The Hierarchy of Typography  Words are communication. What do they say? The meaning should come before the look of the type is considered.  Remember: The primary task of graphic design is to create a strong, consistent visual hierarchy, where important elements are emphasized, and content is organized logically and predictably.  Therefore, choose typographic styles and sizes that are appropriate to the meaning and will serve the text's relative importance in the hierarchy.
  4. 4. From the top down: Places in the hierarchy  Headlines: Headlines work best when they're both visually and verbally interesting. The largest type on the page, heads should always stand out from subheads and body copy., although they don't have to be located at the top.  Subheads: Engage the users into reading more, by expanding and explaining the basic idea of the headline. Distinguish from heads and copy.  Body text: Make sure it's both legible and inviting.  Captions: Connect readers to pictures and story. Often a bit larger than body text. Be consistent.  Pull quotes and other breakouts: Add interest. Be creative.
  5. 5. The Difference between a Type and Font  To begin with, it’s important to understand the difference between a typeface and a font. As mentioned in the previous chapter, a typeface is the term for the design of a set of characters. Typefaces can come in a number of typestyles, such as bold, narrow or light. Font refers to the character set in its physical form – metal type or digital type files, for example. On your computer, a font consists of a set of typeface in a particular typestyle stored in a file. Font Types  There are several font types: TrueType, Bitmap [PostScript Type 1], Multiple Master and Open Type are a few examples. For now, you just need to concentrate on the TrueType and Bitmap fonts. The most widely used and the safest for rasterizing is Bitmap font [Postscript Type 1].
  6. 6. Bitmap Fonts [Postscript Type 1]  Bitmap font is also known as the PostScript Type 1.  PostScript Type 1 font for Macintosh actually consists of two fonts: a screen font and a printer font. The screen font is used when the typeface is displayed on the screen and the printer font when the typeface is printed.  Screen fonts are not necessary when working in Windows because the printer font is used for both screen and printing.
  7. 7.  The screen font is a set of characters saved as bit- mapped fonts: small, pixel-based images used to display the typeface on the screen  The screen font also contains information needed to link it to the printer font for printing. In other words, if you choose a bold font from the screen font menu in a program, it will link to a bold printer font when printing. This also means that if you do not have the bold version of that printer font installed, you will get an undesired result as a printout – the thin version of the font you selected will most likely be used instead.
  8. 8.  Screen fonts are usually stored in a few smaller sizes (10, 12, 14, 16, 18 and 24 points, for example). If you enlarge these pixel-based characters to a bigger size than any of the stored screen fonts, the edges will appear jagged. This can be avoided by using the ATM utility*. The printer fonts are structured with bezier curves* and consist of PostScript information. See Figure 1. Postscript Type 1 fonts consist of two parts, one object-based printer font and a second pixel-based screen font. By using ATM, you can use the printer font as a screen font.
  9. 9. TrueType  TrueType fonts consist of one single font file completely based on bezier curves. TrueType does not have separate screen fonts like PostScript Type 1.  This type of font is supported by the Macintosh graphic system. Therefore, ATM is not required to create characters on the screen. Unfortunately, TrueType tends to cause problems when rasterizing. As a result, PostScript Type 1 fonts are primarily used in graphic production. TrueType fonts are most commonly used in Windows.
  10. 10. ATM utility  Adobe Type Manager, or ATM, is utility software from Adobe, used primarily to improve the screen display of large letters.  It also facilitates the printout of PostScript typefaces on non-PostScript based printing units.  ATM is more or less a requirement for doing graphic production work on Macintosh systems.  ATM enables a user to use PostScript Type 1 printer fonts as screen fonts on a Macintosh, which means that characters on the screen maintain their correct appearance even when greatly enlarged.
  11. 11.  ATM also makes it possible to convert characters to character outlines which can be modified in PostScript based programs like Adobe Illustrator and Macromedia Freehand.  Even with ATM installed, however, you will need to use screen fonts. For example, without screen fonts, the computer cannot locate the corresponding printer fonts.  In addition, bit-mapped characters generated by screen font files look better on the screen in smaller sizes than the corresponding characters generated by ATM.
  12. 12. Bezier Curves  All characters in printer fonts are created using bezier curves. As a result, printer fonts are not dependent upon the resolution of the printer and can be enlarged without taking on a jagged appearance. Printer fonts are not stored in any fixed size (10 point, 12 point, etc.) and can be scaled up or down as necessary [See Figure 2].  The Decorative, Serif, Sans-Serif Fonts, its commonly used Typefaces and its uses and characteristics Bezier Curves This is how a Bezier curve is created. A number of anchor points determine the shape of the curve. Object graphics are mainly based on bezier curves.
  13. 13. Serif Fonts  Serif fonts are marked by little 'feet' that extend from the stem of the letter. All fonts were Roman (serif) until the 20th century. Serifs say tradition, elegance, and formal. Serifs enable reading of large blocks of printed text; hence most books, magazines, etc. use it for body text. Types of serif fonts:  Old Style o With some of the earliest fonts, the serifs flow out in simple, graceful curves. o Examples: Caslon, Caxton, Garamond, Goudy, Oldstyle, Palatino, Early Roman.
  14. 14.  Transitional o Smaller curves connect the serifs. Examples: Baskerville, Century, Tiffany, Times.  Modern o The stems are thick and the serifs thin, contrasting with each other. Example: Bodoni.  Egyptian o Slab Serifs. Thick. Think Circus, Westerns. Examples: Clarenden, Lubalin, Memphis.
  15. 15. Sans-Serif Fonts  For sans-serif fonts, they are no 'feet'. Clean, simple lines, less traditional looking. Hugely popular in the mid-century Swiss design movement. Examples: Helvetica, Univers, Futura, Avant Garde. Gill Sans.  Studies show that reading on-screen is easier with sans-serif typefaces. So designers have been charged with creating new, easy to read styles for Web use: Verdana, Arial, and Trebuchet are a few.
  16. 16. Display/Decorative  Script Calligraphic (think Wedding invitations), rounded hand (think cursive, with connected letters), and brush (Think brush painting). Examples: Brush, Zapf Chancery, Commercial Script.  Decorative. This category includes everything from historical styles such as Art nouveau and Art Deco to high tech to wacko and fun to creepy. Choose with caution. Examples: Balloon, Klang, Lithos.
  17. 17. Comparing types of Typefaces
  18. 18. Choosing and Using Appropriate Type  Every font has a character, or tone, which communicates on a visual level.  Once you are clear on the tone of the message, look for fonts that communicate the same qualities: Is it light, serious, wry, nostalgic, upbeat, spiritual, technical, and fun?  There are so many fonts available, but few are good, well-designed fonts.  Use fonts from established type houses such as Bitstream and Adobe. Although they are expensive, these fonts should read well in all sizes and uses, with good letterspacing.
  19. 19.  Avoid so-called free fonts you can get from the Internet. Most are terribly gimmicky. Plus, you'll probably have to spend extra time trying to make the spacing between the letters look right. It’s the qualities type suggest
  20. 20. Font Families  Most serif and san serif fonts come with variations of weight (boldness), width (condensed or extended) and italics.  Consistent, clean type is often achieved by staying within a family, especially one with a lot of variants such as Univers.  The Rule of Two. As a general rule of thumb: for unity and clarity, use no more than two font families in a project. Exploit the variations to establish the hierarchy.
  21. 21. Part of the Univers family
  22. 22. What’s Appropriate?  You don't have to choose an obvious font, such as a flowery script for a perfume ad or a blocky san serif for auto parts.  The important thing is to serve the values that the text stands for.  Tools for Emphasis, Contrast and Legibility Which looks best to you?
  23. 23. Text Formatting Choices  These variables are the key to differentiating the levels of typographic hierarchy. They work pretty much the same for print or web design. Just remember to use consistent formatting at each level, e.g., all subheads should look the same, all body copy the same, etc.  Size: The larger the type the more it jumps out (but if body text is too large it looks like it's intended for the blind).  Weight: Use light against bold for emphasis.
  24. 24.  Alignment: (Flush left, rag right): Remember that in the West, we read from left to right, so our eyes prefer a hard edge along the left side. Most body copy these days is set flush left.  Alignment: Centered: Don't center body copy or much text at all. Great for big, bold headlines.  Alignment: (Flush right, ragged left): Use only in rare circumstances. Reader's eyes have a hard time finding the next line.
  25. 25.  Alignment: Justified, or force justified: Pushes type to both edges of margin. Makes nice, straight columns, but there's a tradeoff: uneven letter spacing that can create rivers of white space, especially if the column width is narrow.  Case: ALL CAPS IS HARD TO READ IN LARGE DOSES but grabs attention with its authority. Lower case connotes friendly, low stress, easy text.  Leading: The space between lines. Open it up to invite busy readers into your text. With too much leading, our eyes have to leap from line to line.
  26. 26.  Space: Use air around words for emphasis, to set them of, especially if they're bold. Keep spacing consistent, such as the amount of added "air" between chunks of text.  Text width: Legibility studies show that the ideal column width is about 36 characters, or 1-1/2 times the alphabet. Small amounts of text can be placed in narrower columns.  Indents: Use indents to set off a subhead/category by leaving extra space to the left and/or right margin of the text below.  Tracking is the process of loosening or tightening the spacing between the characters in a selected text or entire block of text.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×