wsg ch08 - typography

© 2004 Ken Baldauf, All rights reserved.

Typography

CGS2826 Web DesignProgram in Interdisciplinary ComputingFlorida State University

From Web Style Guide, Chapter 8: Typography


Typography exists to honor content.

Typography 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.


CAPITAL LETTERS CAN BE DANGEROUS.

Ban Comic Sans

Links

OBAMA LIKES GOTHAM


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.


When your content is primarily text, typography is the tool you use to “paint” patterns of organization on the page.


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.


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


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


Paragraph indents and spacing


Type facesTimes 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.


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


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)


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


With semantic techniques and css you can add context and meaning to your words and visually style them at the same time.


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:

wsg ch08 - typography

Education

ken baldauf

good typography

resizable text

text variants

body text

large text blocks use

default text size

subordinate blocks of