Typography Typography exists to honor content. Robert Bringhurst, The Elements of Typographic Style.

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

http://www.poynter.org/column.asp?id=47&aid=26102Howard I. Finberg

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 agood exampleof a site usinga lot of textbut still beinginterestingand legible.

A bad examplewould 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 eyehas 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 ofthe 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

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

There are time-honored typographical devices for adding emphasis to a block of text, but be sure to use

them sparingly.

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 theWeb Style Guide athttp://www.webstyleguide.com/type/index.html