Presentation is loading. Please wait.

Presentation is loading. Please wait.

TYPOGRAPHY.

Similar presentations


Presentation on theme: "TYPOGRAPHY."— Presentation transcript:

1 TYPOGRAPHY

2 [ THE PURPOSE OF DESIGN ]
Attract an audience, then Provide a strong visual hierarchy for messages The primary task of graphic design is to create a consistent hierarchy, where important elements are emphasized and content is organized logically. Graphic design is visual information management. Using the tools of layout, typography, and illustration, design leads the reader's eye through the page. Readers see pages first as large masses of shape and color with foreground elements contrasted against a background. Next, we seek information, first from graphics. Finally, we parse the "harder" medium of text, tread individual words and phrases.

3 [ THE PURPOSE OF DESIGN ]
Successful design is appropriate to the goals of the piece. To serve the goals well, you must, Establish and prioritize the purpose. Why are you doing this? Understand the needs/expectations of your audience Develop appropriate content: words and pictures that will support the goal

4 THE HIERARCHY OF TYPOGRAPHY
Intoduction 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.

5 THE HIERARCHY OF TYPOGRAPHY
Places in the hierarchy Headlines: Stop 'em and grab 'em, fast. 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: Hook'em 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. Pullquotes and other breakouts: Add interest Be creative. Design with these relative positions in mind, exploiting all the variations used for emphasis and legibility

6 THE ANATOMY OF TYPOGRAPHY
The body of type

7 THE ANATOMY OF TYPOGRAPHY
The body of type Legibility of text is affected by the parts of the anatomy. A higher x-height, relative to the cap height, generally means greater legibility. Multiple lines of text are measured from baseline to baseline - see leading Watch out for ascenders of one line touching the descenders of another.

8 THE ANATOMY OF TYPOGRAPHY
Type sizes Traditional text is measured in points, the standard unit of measure in software programs for creating printed documents. There are 72 points to an inch and 12 points to a pica (picas are typically used to measure text widths, images, etc.) Typical body copy sizes are 8 to 12 points, headlines from points and up. Web type doesn't use these traditional units of measure within the HTML tags: <H> (headline), <P> (paragraph) and <FONT>. This is changing, however, with Cascading Style Sheets (CSS). The suggested unit of measure for most consistent display across platforms and browsers is pixels.

9 THE ANATOMY OF TYPOGRAPHY
Leading (line spacing) Leading is space between lines of text. Extra leading aids body copy a great deal by making type look more open and friendly, less daunting. Too much leading makes it hard to 'jump' from line to line. Leading is expressed in a ratio of size to leading, e.g., ' on 12.' Typical leading, or 'auto' settings in most page layout programs, is around 20% more than the size of the type, such as 10 on 12. HTML type typically doesn't typically give control over line spacing. This is changing, however, with Cascading Style Sheets (CSS).

10 THE ANATOMY OF TYPOGRAPHY
Spacing between letters Tracking or letterspacing applies to whole lines of text. Add or subract tracking to give text a looser or tighter feel. Letterspacing may be controlled in all graphics programs. Kerning applies to the space between individual letters. Certain combinations of letters typically leave too much space between the characters, such as capital "A" and "W." These examples have already been kerned, bringing the letters closer together:

11 THE BRIEF HISTORY OF TYPOGRAPHY
Introduction The design of type began with early cuneiform images carved into stone or painted on cave walls. The tradition expanded into blackletter calligraphy in the middle ages, then flourished in the industrial age with the development of Roman (serif) and then Gothic (san serif) letterforms. Now, with the advent of PCs, anyone can create a typeface; there are literally thousands available. But that doesn't mean they are all GOOD.

12 THE BRIEF HISTORY OF TYPOGRAPHY
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, 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. With some of the earliest fonts, the serifs flow out in simple, graceful curves. Examples: Caslon, Caxton, Garamond, Goudy, Oldstyle, Palatino, Early Roman. Transitional: Smaller curves connect the serifs. Examples: Baskerville, Century, Tiffany, Times. Modern: The stems are thick and the serifs thin, contrasting with each other. Example: Bodoni. Egyptian: Slab serifs. Thick. Think Circus, Westerns. Examples: Clarenden, Lubalin, Memphis.

13 TYPOGRAPHY T Y P O G R A P H Y THE BRIEF HISTORY OF TYPOGRAPHY
San Serif 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. TYPOGRAPHY T Y P O G R A P H Y

14 THE BRIEF HISTORY OF TYPOGRAPHY
San Serif Script: calligraphic (think Wedding invitations), roundhand (think cursive, with conected 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.

15 CHOOSING & USING APPROPRIATE TYPE
How to pick a font 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, 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. 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.

16 CHOOSING & USING APPROPRIATE TYPE
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 heirarchy.

17 CHOOSING & USING APPROPRIATE TYPE
What 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.

18 SAMPLES OF TYPOGRAPHY

19

20

21

22

23

24

25

26

27

28

29

30

31


Download ppt "TYPOGRAPHY."

Similar presentations


Ads by Google