2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO TYPOGRAPHY DESIGN.

Slides:



Advertisements
Similar presentations
Typography Typography exists to honor content. — Robert Bringhurst,
Advertisements

The Key Element in Desktop Publishing Design
Definition: The style, arrangement, and appearance of text on a page.
Typography Selecting appropriate typefaces for a document. Typography.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO TYPOGRAPHY DESIGN.
More Information on Graphic Design & Color: A few pointers for your websites & other e- publications Dr. Jennifer Bowie.
Typography (The study of font).
WORKING with TYPOGRAPHY The art of skillfully arranging and presenting type to gain attention.
The art or process of printing with type Typography.
Typography Typogra Typography Typogra. Designers use typography to communicate a client's message to an audience. They explore the creative possibilities.
Principles of Typography
Page Design. Overall design issues u Know audience expectations u Know client expectations u Maintain a consistent look and feel u Consider how each page.
Chapter Concepts Discuss Fonts Understand Fonts
Typography Principles Communications 320 Desktop Publishing.
Design Principles 3.02 Understand business publications.
The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit.
content/uploads/2010/03/Death_by_Typography_by_GCORE1.jpg.
7 Selecting Design and Color Section 7.1 Identify presentation design principles Use a custom template Add pages to a navigation structure Section 7.2.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO TYPOGRAPHY DESIGN Vocabulary and Guidelines.
Categories TYPE of Text is the most essential ingredient in design communication. With type you communicate in two distinct ways. The first message your.
Typography and Space for Web Design Important Issues From Web Style Guide.
Web Design – Sec 4-6 and 4-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Chapter 4 Typography Objectives (1 of 2) Differentiate among calligraphy, lettering, and typography. Gain knowledge of type definitions and nomenclature.
C.R.A.P.   Color balance : The colors of the entire illustration- grey, black, white and the contrast orange, seem like they were chosen without much.
Typography Conveys mood Communicates attitude. The Letters X-height –the height of the main body of a lower case letter (literally, the x) x j Cap height.
Unit 4 – Multimedia Element: Text
TYPOGRAPHY.
Typography Terms. o.php?viewkey=d26eb03e91d5741a4a 3b.
Type Anatomy of Click anywhere on the screen to view the next slide,
Chapter 12 Designing the Document. 1. To make a good impression on readers Documents should reflect your own professional standards and those of your.
MODULE 16: TYPOGRAPHY Typography Type selection starts with the BASICS of style and size. GROUPS OF TYPEFACES SHARE SIMILAR CHARACTERISTICS. TYPEFACES.
Design  Good design is good because of its fitness to a particular user fitness to a particular task  In general, you are not your user!  Our class.
INTRODUCTION TO TYPOGRAPHY WHAT IS TYPOGRAPHY? Typography: The study of all elements of type including the shape, size and spacing of the characters.
Basics of Typography. Typography (“type”) concerns the appearance of characters (letters), words, paragraphs, columns, etc. By comparison, the term “text”
Desktop Publishing Review. What is a rough sketch used in planning a layout and design?
Design Principles 3.02 Design Principles revised 9/24/09.
Subject Name: Graphic Design Subject Code: 9642 Md. Ataur Rahman Instructor (Design & Printing) M.CSE, B.CSE.
Graphic Design  Graphic Design is a form of visual communication.  Communicate a message  Using typography and graphic elements.
VISUAL RHETORIC All the C.R.A.P. you need to know… The Purdue Writing Lab.
Design and Typographic Principles. The Joshua Tree Principle Joshua Tree story example The four basic principles Contrast Repetition Alignment Proximity.
Desktop Publishing & Design. Baseline The invisible grid line the characters sit on.
UNIT 4 - TYPOGRAPHY Digital Communications I. 3-D  an effect that gives the illusion of depth.
Chapter 8 Print Type © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
What are we interested in? 1. Understand Design 0 2. Digital Image design 3 3. Time-based media Webpage design 2 1.
Typography A Key Element in Design A. Definition of Typography Typography is the appearance and arrangement of the characters that make up text on a page.
Words are communication. What do they say? The meaning should come before the look of the type is considered. Choose typographic styles and sizes that.
TGJ3MO COMMUNICATIONS TECHNOLOGY DESIGN AND LAYOUT PRACTICES - USING PHOTOSHOP ELEMENTS WORKING WITH F O N TS.
Design and Typography Chapter Designing a Publication Designing is the process of determining the format and layout, then creating Format: how and.
TYPOGRAPHY in Design. OBJECTIVES 1. Understand typographic terms and measurement systems. 2. Learn how to select typefaces appropriate to a project's.
Graphic Design Mrs. Lacks. Typography Is the art and skill of arranging text so that language is visible Essentially, all forms of writing are typography.
Principles of Typography
Introduction to typography
Typography Design.
Understanding and Applying Typography in CSS
Chapter 8 Print Type © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
INTRODUCTION TO TYPOGRAPHY DESIGN
google. ca/imgres. imgurl= braincrumbtrail
Basic Desktop Terminology
Applying Typography in CSS
Understanding and Applying Typography in CSS
Chapter 8 Print Type © 2013 Cengage Learning. All Rights Reserved. May not be scanned, copied or duplicated, or posted to a publicly accessible website,
INTRODUCTION TO TYPOGRAPHY DESIGN
Principles of Typography
Source: Digital Desktop Publishing--Font Basics
Desktop Publishing Terminology
INTRODUCTION TO TYPOGRAPHY DESIGN
INTRODUCTION TO TYPOGRAPHY DESIGN
INTRODUCTION TO TYPOGRAPHY DESIGN
INTRODUCTION TO TYPOGRAPHY DESIGN
INTRODUCTION TO TYPOGRAPHY DESIGN
Presentation transcript:

2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO TYPOGRAPHY DESIGN

2006 Adobe Systems Incorporated. All Rights Reserved. 2 Typography

2006 Adobe Systems Incorporated. All Rights Reserved. 3 Typography  Baseline: The line on which all letters rest.  Beardline: The line reached by the descenders of lowercase letters.  Bowl: The round or elliptical parts of a letterform.  Cap line: The line reached by the top of uppercase letters.  Counter: The white space enclosed by a letterform, whether completely or partially.  Extenders: Extenders are the parts of letters that extend either below the baseline (descenders) or above the midline (ascenders).  Midline: The top of lowercase letters such as a, c, e and the top of the torso of lowercase letters such as b, d.  Serif: A stroke added to either the beginning or end of one of the main strokes of a letter.  Stem: The main stroke of a letter that is generally straight and not part of a bowl.  Topline: The line reached by the ascenders of lowercase letters.  X-height: The distance between the baseline and midline of an alphabet. The x-height is usually the height of the unextended lowercase letters.

2006 Adobe Systems Incorporated. All Rights Reserved. 4 Goals of typographic design  Typography plays an important role in how audiences perceive your document 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.

2006 Adobe Systems Incorporated. All Rights Reserved. 5 Design principles for typography  Legibility: Making sure the audience can read and understand your text.  Similarity, alignment: Using typography to create relationships between similar kinds of information.  Uniformity or consistency: Repeating familiar elements to focus your audience’s attention.  Contrast: Creating interest and distinguishing different types of information with different typefaces. One element of contrast is hierarchy—making sure the audience understands that information has different levels of importance.

2006 Adobe Systems Incorporated. All Rights Reserved. 6 Typography and legibility  Legibility is a combination of factors:  Font family  Font size  Letter, word, and line spacing  Alignment

2006 Adobe Systems Incorporated. All Rights Reserved. 7 Legibility and font families Stroke Line Stroke OnlinePrint Serifs create distinctions between characters (uppercase “I” and lowercase “L” ) Appears blurry Helps the reader follow text easily Serif fonts have contrasting strokes and lines Helps move reader’s eye character to character Sans serif fonts have uniform strokes throughout Helps readers easily read text Makes words in a sentence hard to follow

2006 Adobe Systems Incorporated. All Rights Reserved. 8 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 or above.  Font sizes above 14 points break down the continuity of the text, making text appear too gray.

2006 Adobe Systems Incorporated. All Rights Reserved. 9 Legibility and spacing  If letters, words, or lines are too close together, readers have a hard time because text blocks tend to look too dark.  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.  Spacing between words needs to be consistent to promote legibility; too much variation leads to eyestrain.

2006 Adobe Systems Incorporated. All Rights Reserved. 10 Legibility and alignment  Left-aligned text is most legible, because spacing between words is uniform.  Justified text is also legible, though less so with shorter line lengths because it tends to create uneven spaces between words.

2006 Adobe Systems Incorporated. All Rights Reserved. 11 Legibility and alignment  Center-aligned and right- aligned text is generally harder to read, because your readers’ eyes are used to following text from left to right.

2006 Adobe Systems Incorporated. All Rights Reserved. 12 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” font such as  An advertisement for a financial firm, on the other hand, might use a more “modern” font such as

2006 Adobe Systems Incorporated. All Rights Reserved. 13 Font families for headings  For body text, you may want to use something fairly conventional and legible.  For headings, consider audience: teenagers respond to different fonts than businesspeople or academics.  Choose font families that support your subject matter, or deliberately use a contrasting font to create interest.

2006 Adobe Systems Incorporated. All Rights Reserved. 14 Similarity and alignment  Aligned text creates a line in your design; such lines help readers draw connections between different parts of a document.

2006 Adobe Systems Incorporated. All Rights Reserved. 15 Uniformity and font families  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.

2006 Adobe Systems Incorporated. All Rights Reserved. 16 Contrast and font families  Using the same font family throughout creates uniformity but may make documents seem “flat” or uninteresting.  You can add interest by contrasting the display type and body type.

2006 Adobe Systems Incorporated. All Rights Reserved. 17 Contrast and font families  To create contrast, you could use two font families, one serif and one sans serif. Heading is set in Impact—a sans serif font Subheading is set in Georgia—a serif font

2006 Adobe Systems Incorporated. All Rights Reserved. 18 Conflict and font families  To avoid conflict, many designers avoid using two font families of the same variety, such as two serif fonts. Heading is set in Palatino—a serif font Subheading is set in Georgia— also a serif font

2006 Adobe Systems Incorporated. All Rights Reserved. 19 Contrast and tracking  Tracking refers to the space between all of the letters in a line.  Font families have built-in tracking that works well for body text.  For headings, you can change tracking to create contrast. Heading is set with wide tracking

2006 Adobe Systems Incorporated. All Rights Reserved. 20 Contrast and baseline shift  Designers shift baseline to create interest: Dropping the first letter adds a playful look. Moving other letters around creates a “jittery” effect.

2006 Adobe Systems Incorporated. All Rights Reserved. 21 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, font color.  To promote uniformity and help your audiences navigate, keep typographic choices consistent for each subsection throughout the document.

2006 Adobe Systems Incorporated. All Rights Reserved. 22 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 title Section Subsection Or Book Chapter Subheading Sub-subheading

2006 Adobe Systems Incorporated. All Rights Reserved. 23 Example of hierarchy These headings look the same because they express the same level of hierarchy Different levels use different font sizes, font families, font colors, and leading. Top-level headings can use unconventional fonts

2006 Adobe Systems Incorporated. All Rights Reserved. 24 Summary  Typography can play a key role in design.  Good typography starts with font family; choose these to meet your design goals, but keep them limited.  Use text alignment to create relationships between different kinds of information.  Create contrast by using a serif font for headings and a sans serif font for body text (or vice versa). You can also use italics, bold, tracking, or color to create contrast.  Use contrast to indicate hierarchy.