8 Typography Notes
- 1. Typography CGS2826 Web Design Program in Interdisciplinary Computing Florida State University From Web Style Guide, Chapter 8: Typography
- 2. T ypography exists to honor content. T ypography plays a dual role as both verbal and visual communication. Good typography establishes a visual hierarchy for rendering prose on the page by providing visual punctuation and graphic accents that help readers understand relations between prose and pictures, headlines and subordinate blocks of text.
- 3. CAPITAL LETTERS CAN BE DANGEROUS. Ban Comic Sans Links OBAMA LIKES GOTHAM
- 4. Type on the Web Most magazine and book typography is printed at 1200 dots per inch (dpi) or greater, whereas computer screens rarely show more than about 85 pixels per inch (ppi). Anti-aliasing helps.
- 5. When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page.
- 6. Whitespace Margins provide unity throughout a site by creating a consistent structure and look to the site pages. If you want any understanding of graphic design or page layout, learn to see and appreciate the power and utility of “white space,” the ground field behind page elements. The spaces within the ground field are as important as any other element on the page.
- 7. Paragraph Alignment Avoid justified text – it created word spacing issues Centered and right-justified should be used unly for short passages For large text blocks use left-justified and left justified headers
- 8. Line lenghth & spacing 45 – 75 characters per line is ideal Fixed width containers can assist with maintaining control over line length Set columns to 365px max. Increasing line spacing helps with longer line length
- 9. Paragraph indents and spacing
- 10. Type faces Times Roman is designed for paper with a small x height that is difficult to read on displays. Georgia and Verdana were designed for displays, with exaggerated x heights, but may not look so good on paper. Times New Roman is redesigned to look good on both the display and paper. Sans-serif fonts, like Arial, are most readable, and make good headings and may be mixed with Serif fonts for paragraphs.’ – Many Web pages use Arial for everything. Don’t use more than two font types per page.
- 11. Specifying Font Type & Size Provide a choice, in order of preference Scalable text is essential to universal usability. We recommend setting the body text to the default text size defined in users’ browser settings and setting all text variants (such as headings, captions, and links) using relative units, such as ems or percentages. For best results with resizable text, use a flexible layout that transforms gracefully to accommodate larger type sizes
- 12. Readers like large type more than most designers do. Generous leading (line spacing) is a key to legibility. 11px/13px most comfortable (font/line spacing)
- 13. Emphasis Use itals to emphasize single words, not paragraphs. Bold is good for subheads Underlined words will be confused with links. Same with colored words . AVOID USING ALL CAPITALS, and Title Capitals
- 15. With semantic techniques and css you can add context and meaning to your words and visually style them at the same time.
- 16. When using graphics for text, always provide the equivalent text using the “alt” attribute of the <img> tag so that the text is available to nonvisual users, users with images disabled, and software such as search engines: