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

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

3. Typography is Made of. . . Characteristics of type on the web
Cascading style sheets
Legibility
Alignment
Typefaces
Case
Emphasis
Consistency

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

5. The text was 18 pt Comic Sans on
one computer but 12 pt Comic Sans
on another home computer

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

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

8. Once all the copy
has been styled, you can
change the look of each
occurrence of every element
simply by changing the
style information.

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

10. A bad example would be most of the “my space” pages. 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.

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

12. See how “justifying left” the information works well on this page.

13. Making everything “centered” is boring.
It is also harder to read because your eye
has to scan to find the next line.

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

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

16. There are time-honored typographical devices
for adding emphasis
to a block of text,
but be sure to use
them sparingly.
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.

17. This is a good example
of poor use of color
in Typography.

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

19. A good example of
the poor use of color
and inconsistency
in layout and design.

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

21. Typography —the perfect way to make a Web site readable!
For more information
check out the
Web Style Guide at