Transcript Typography
Typography Typography exists to honor content. — Robert Bringhurst, The Elements of Typographic Style Why 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 http://www.poynter.org/column.asp?id=47&aid=26102 Typography is Made of. . . • • • • • • • • Characteristics of type on the web Cascading style sheets Legibility Alignment Typefaces Case Emphasis Consistency Characteristics 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 1200+ 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 page will look on the reader’s screen. The text was 18 pt Comic Sans on one computer but 12 pt Comic Sans on another home computer Cascading 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. Cascading Style Sheets • Style sheets provide control over the visual style of headers, paragraphs, lists, and other page elements. For example, if you prefer H3 headers to be set in 12-point Arial bold type, you can specify those details in a style sheet. Once all the copy has been styled, you can change the look of each occurrence of every element simply by changing the style information. Legibility • Good 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. This is a good example of a site using a lot of text but still being interesting and legible. A bad example would be most of the “my space” pages. Alignment • Margins 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. See how “justifying left” the information works well on this page. Making everything “centered” is boring. It is also harder to read because your eye has to scan to find the next line. Typefaces • 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 is considered to be one of the most legible on paper, but at screen resolution its size is too small and its shapes look irregular. Case • Whether 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. Emphasis There are time-honored typographical devices for adding emphasis to a block of text, but be sure to use them sparingly. • Use 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. This is a good example of poor use of color in Typography. Consistency • High-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. A good example of the poor use of color and inconsistency in layout and design. This site is a good example over-all of Presenting a lot of text. It is a lot of information. Color was used for emphasis. Text was bolded and aligned in a way that makes it easy to read. Typography —the perfect way to make a Web site readable! For more information check out the Web Style Guide at http://www.webstyleguide.com/type/index.html