Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10. Typography In this chapter you will learn about: The basic terminology and concepts of working.

Slides:



Advertisements
Similar presentations
More Information on Graphic Design & Color: A few pointers for your websites & other e- publications Dr. Jennifer Bowie.
Advertisements

Exploring Web Design Chapter 3 Web Typography. The goal of any web page is to communicate.
Chapter 10: TypographyCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
Week 7 Web Typography. 2 Understanding Type Design Principles.
Typography Basic terminology/concepts
Chapter Concepts Discuss Fonts Understand Fonts
1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.
Part 3: Design Chapter 8: Work Reengineering and Conceptual Design Chapter 9: Design Guidance and Design Rationale Chapter 10: Interaction Design Chapter.
Chapter 10: TypographyCopyright © 2004 by Prentice Hall User-Centered Website Development: A Human- Computer Interaction Approach.
The Use of Typography in Print and Electronically. [typography] “exists to honour content” Robert Bringhurst, The Elements of Typographical Style.
SM5312 week 2: web design1 Web Typography Nick Foxall.
TYPOGRAPHY vasuki belavadi reader dept. of communication s n school university of hyderabad.
1.01 Investigate typefaces and fonts.
1.01A – What typefaces should be used for various displays?????
1.01 Investigate typefaces and fonts.
Multimedia & Webpage Design
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.
Font Families By: Jonathan Bird. What is a font? First, what is a font? A font is a grouping of the same type and style of characters, often in the same.
Typography and Space for Web Design Important Issues From Web Style Guide.
Typography is the strategic use of type to create texture, hierarchy, organization, and clear communication.
Multimedia: Making it Work
2.1 Different Text Attributes Font A set of printable or displayable text characters with its style and size specified Arial 16 point bold Arial 32 point.
10. Typography The basic terminology & concepts of working with type
Fall Unit 2. Development Module 8: Typography & Design.
Unit 4 – Multimedia Element: Text
Typography 2.01 Investigate typefaces and fonts..
Chapter 9 Text. So, chapter 10 is about Photography, now Chapter 9 is about text What should it look like, how big should it be, how do colors contrast,
Text Text. Multimedia Elements u Text u Graphics u Animation u Sound u Video.
Typography-- Using Text Typography -- Using Text There are two basic types of fonts: Sans Serif Serif.
Art 368 WEB Design 1 Spring 2002 Type Two basic families:  Serif and Sans Serif Parts of all type Ascenders, descenders, baseline, etc. Leading= linespacing/paragraph.
Typography Concepts Typeface Anatomy Typeface Categories –Text –Display –Decorative Emphasis Strategies Point size/ Measure/ Leading.
Answer question 1. Answer question 2.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
Q: Invitation to the prom A. Decorative/Ornamental B. Sans Serif C. Script D. Serif.
All of the following terms describe parts of a font that give the eye visual clues to decoding the letters while reading. Many of these terms stem from.
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.
Text and Fonts in CSS. Customizing fonts In CSS, fonts are divided into “font families” Only certain fonts are commonly installed on most computers Therefore.
Typography (Fonts). Type type = any set of printed characters font = a set of printable or displayable characters with a specific style and size typeface.
Prioritizing Web Usability Nielsen and Loranger Chapter 7: Typography: Readability and Legibility Paul Ammann SWE 432 Design.
 The typeface or design of a set of characters  Examples: letters, numbers, symbols, punctuation marks Fonts.
Fonts and Typography Section 7.3. Typography Typography: the style, arrangement, and appearance of text Well designed text makes your page more readable.
TYPOGRAPHY 1.01 INVESTIGATE TYPEFACES AND FONTS..
Typography Graphic Design Fundamentals
Typography The Science of Text. Fonts Style of type How many fonts in a document? Conservative--one font Typical--two fonts Use a third for emphasis.
Typography 1.01 Investigate typefaces and fonts. (Rev. 2011)
Headings and Text What makes headings stand out?.
Typography Chapter 10: TypographyCopyright © 2004 by Prentice Hall.
Fine Tuning Basic HTML CGS3066. Some HTML Tags and Their Defaults default = What will happen in the absence of instructions to the contrary from you.
Typography Vocabulary and Guidelines This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory.
Typography. The Target Audience Publications are created to convey a message to the intended audience, called the target audience. The target audience.
Color Aesthetics Weinman, chapter 2 Terms, color themes and relationships, type, layout Aesthetics a guiding principle in matters of artistic beauty and.
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.
Graphic Design Tricks Good ideas for Powerpoint presentations.
The designer crafted word
The 5 minute design & layout
Readability and Legibility
Tips for Effective PowerPoint Presentations
Typography Basics 2.01 Investigate typefaces and fonts.
Unit 2.1: Identifying design elements when preparing graphics
2.01 Investigate typefaces and fonts.
1.01 Investigate typefaces and fonts.
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
CSS – Properties & Values
2.01 Investigate typefaces and fonts.
Design and Implementation of Software for the Web
Multimedia & Webpage Design 1.01 Investigate typefaces and fonts.
CSS Styles Fonts and Colors.
Lesson 5 – Controlling fonts with CSS
Typography.
Presentation transcript:

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10. Typography In this chapter you will learn about: The basic terminology and concepts of working with type A dozen typefaces and their characteristics What screen-friendly fonts are, and three examples How typography on the Web differs from typography in print How—using guidelines provided—to design typography for the Web that is readable, effective, and attractive

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Terminology Font : any set of all printable or displayable text characters in a specific style and size. Typeface: The design for a set of fonts. Font family: It consists of all the sizes and variations of a typeface.

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Terminology Typefaces: serif, sans serif, script, blackletter, ornamental, monospace, and symbol.

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.2 Concepts and Terminology

Chapter 10: TypographyCopyright © 2004 by Prentice Hall A sans serif font, Arial

Chapter 10: TypographyCopyright © 2004 by Prentice Hall What does the size of a font mean?

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Point 72 points = 1 inch 1 inch = 2.54 cm 1 point = 127 / 360 mm = mm 12 points = 1 pica

Chapter 10: TypographyCopyright © 2004 by Prentice Hall These letters are all 72 points; the lines are one inch (= 72 points) apart How big type is depends on the font size and on the design of the font family. Don’t forget the “little bit”! The fonts are Garamond, Goudy, Bookman Old Style, AlleyCat ICG, Caslon Open Face, Arial Black, Park Avenue, and Ultra Condensed Sans Two

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Some text with reduced line spacing, to show what happens without the “little bit”

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman, 10 point, with 1pt leading and with 3pt leading

Chapter 10: TypographyCopyright © 2004 by Prentice Hall A Dozen Font Families 2 serif 6 sans serif 2 monospaced 1 script 1 Wingdings 1 Symbol (Greek)

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman and its screen-friendly cousin Georgia—in same font size

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times Roman letters have oblique stress; Georgia has vertical stress

Chapter 10: TypographyCopyright © 2004 by Prentice Hall The pixel view: how Georgia gets vertical stress (and the letters are bigger)

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Times New Roman and Georgia

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Six sans serif fonts

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Comparison of some sans serif fonts Arial bold and Arial Black Arial and Impact Arial and Trebuchet Arial and Comic Sans

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Arial and its screen-friendly cousin Verdana—in same font size Web Typography

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Courier New and Times New Roman Courier New is a monospaced font: the comma gets as much horizontal space as the W. For program listings, this is exactly what we want. Seldom desirable otherwise.

Chapter 10: TypographyCopyright © 2004 by Prentice Hall A bit of C++ code in Courier

Chapter 10: TypographyCopyright © 2004 by Prentice Hall In Times New Roman the same thing seems strange—to a programmer

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Andale Mono is a screen-friendly version of Courier

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Nuptial Script

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Webdings

Chapter 10: TypographyCopyright © 2004 by Prentice Hall The Greek alphabet in the Symbol font

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.4 A Web Page is Not a Printed Page Some things a Web designer can’t be sure of: The resolution of the user’s monitor The size of the user’s browser window The text size: users can change it The settings and quality of the user’s monitor, in terms of brightness, contrast, and color balance The fonts available to a user Very different from print design!

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.5 Text in graphics What if you want to use a font your users probably don’t have? Answer: make a graphic of it With a drop shadow

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.6 Guidelines: Body Type on the Web Use Georgia or Verdana Use 10 point or 12 point type Avoid bold or italic in body type, except for a few words for emphasis Use upper case only for the first word of sentences, proper names, etc. Use left alignment Use dark text on a light background Never use underlining for emphasis

Chapter 10: TypographyCopyright © 2004 by Prentice Hall 10.7 Guidelines: Display type on the Web Big is beautiful Use any typeface that is legible—if your users have it; insert as a graphic if they don’t Use the HTML line-height attribute for control of line spacing Use HTML letter spacing and word spacing to get effects you want Don’t use any form of animation of text—ever

Chapter 10: TypographyCopyright © 2004 by Prentice Hall Summary In this chapter you learned: The basic terminology and concepts of typography A dozen typefaces and their characteristics What a screen-friendly font is, and how it works How typography on the Web differs from typography in print Guidelines for text and display type on the Web