Presentation on theme: "Typography Typography exists to honor content. — Robert Bringhurst,"— Presentation transcript:
1Typography Typography exists to honor content. — Robert Bringhurst, The Elements of Typographic Style
2Why is it vital to look at Typography? Typography plays a dual role in both verbal and visual communication.Good typography establishes visual organization.It provides visual punctuation and graphic accents that assists readers in understanding relationships among objects on the page.“In reviewing more than 100 Web sites from the night President Bush announced the start of the Iraq war, I was struck by the almost boring typographic treatment. Typography is not just about "looks," it is about content. Good typography provides visual information. It makes a statement; it sets the tone. And typography can provide this content even before a single word of the story is read on a page or the screen.”Howard I. Finberg
3Typography is Made of. . . Characteristics of type on the web Cascading style sheetsLegibilityAlignmentTypefacesCaseEmphasisConsistency
4Characteristics of type on the Web Typefaces are rendered at a much lower resolution than that found in books, magazines, and the printed page.Magazine and book typography is rendered at dpi, computer screens rarely show more than 85 dpi.The useable area of typical computer screens is smaller than most magazine and book pages, limiting the information delivered on a Web page, without scrolling.The most distinctive characteristic of Web typography is its variability.You never know how your web pagewill look on the reader’s screen.
5The text was 18 pt Comic Sans on one computer but 12 pt Comic Sanson another home computer
6Cascading Style Sheets CSS lets site authors and users determine the size, style, and layout details for each standard HTML tag.With CSS, one master style sheet can control the visual styling of every page in a site that is linked to that master style sheet.
7Cascading Style Sheets Style sheets provide control over the visual style of headers, paragraphs, lists, and other page elements.For example, if youprefer H3 headersto be set in 12-pointArial bold type,you can specifythose details ina style sheet.
8Once all the copyhas been styled, you canchange the look of eachoccurrence of every elementsimply by changing thestyle information.
9LegibilityGood typography depends on the visual contrast between one font and another and between text blocks, headlines, and the surrounding white space.When content is primarily text, typography is the tool used to “paint” patterns of organization on the page.The first thing the reader sees is not the title or other details on the page, but the overall pattern and contrast of the page elements.
10A bad example would be most of the “my space” pages. This is a good exampleof a site usinga lot of textbut still beinginterestingand legible.A bad examplewould be mostof the “my space”pages.
11AlignmentMargins define the reading area of the page by separating the main text from the surrounding environment.Margins provide unity throughout a site by creating a consistent structure and look to the site pages.Centered and right-justified text blocks are difficult to read.Left-justification of text is the most legible option for Web pages – people generally read from right to left.Titles and headings over left-justified body text should also be flush left, since the “center” is not always at the center point.
12See how “justifying left” the information works well on this page.
13Making everything “centered” is boring. It is also harder to read because your eyehas to scan to find the next line.
14Typefaces Designers can specify the typeface. Typefaces should be selected from the resident default fonts for most operating systems.Some typefaces are more legible than others on the screen.Sans serif fonts are recommended for use on the Web.Times New Roman isconsidered to be one ofthe most legible on paper,but at screen resolutionits size is too small andits shapes look irregular.
15CaseWhether you choose uppercase or lowercase letters has a strong effect on the legibility of your text.Sentence Case (capitalizing only the first word and any proper nouns) is recommended for your headlines, subheads, and text.If you use initial capital letters in your headlines, you disrupt the reader's scanning of the word forms.
16There are time-honored typographical devices for adding emphasisto a block of text,but be sure to usethem sparingly.EmphasisUse italics for convention — when listing book or periodical titles, for example — or within text for stressed or foreign words or phrases.Section subheads work well set in bold.Underlining text on a Web page causes confusion with hypertext links.Colored text work nicely as a subtle means to distinguish section heads.Use dark shades of color that contrast with the page background. Avoid using colors close to the default Web link colors of blue and violet.Capitalization of text is one of the most common and least effective methods for adding typographical emphasis.
17This is a good exampleof poor use of colorin Typography.
18ConsistencyHigh-quality Web sites adhere to use consistent type style settings throughout the site.Consistency gives polish to a site, encouraging visitors to stay by creating an expectation about the structure of a text.Consistency is especially critical for large sites incorporating numerous pages.CSS give a Web designer powerful tools to maintain the consistency of styles throughout the site.
19A good example ofthe poor use of colorand inconsistencyin layout and design.
20This site is agood exampleover-all ofPresenting alot of text.It is a lot ofinformation.Color was usedfor emphasis.Text was boldedand aligned ina way thatmakes iteasy to read.
21Typography —the perfect way to make a Web site readable! For more informationcheck out theWeb Style Guide at