sccc.premiumdw.com

WEB200 » Typography Design for the Web

Typography is the art and technique of arranging type, type design, and modifying type glyphs. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).

Roles of Web Type

As you get to know the world of typography design for the web you will soon realize that the font you have always been in love with maybe inappropriate to use in certain instances. Yes, I am talking to you Papyrus lovers.

However, using a mixture of size, contrast and color in your web type will enable you to create a hierarchy, a sense of interest and an over all ergonomic look and feel to your page.

(Sinkula) Example White Board Drawing

Generally speaking, your web page typography (text) can be broken into three main components:

1) Header Text

Header text is used to denote sections within a written document. The more significant the header, the stronger the visual presence should be. Giving  your headers a bit of style will:

• add meaning for the visitor
• strengthen your design
• create a sense of hierarchy

Headers should be:

• a strong color from your palette
• limited to short lines of text
• a bigger size than the body copy

2) Body Text

Body text is the text that will make up the majority of your editorial content and should (first and foremost) follow the principals of readability.

Body text  (paragraphs) should:

• be kept to a line length of approximately 66 (plus/minus 10) characters
• have plenty of contrast between the text and the background
• not use (odd) colors or underlines unless it is a link

3) Accent Text

Accent text is usually set apart from the main content that is being read. It is used to call attention away from the body text for a special purpose. It is generally text that is used in:

• sidebars
• navigation
• block-quotes
• captions
• spotlights

Accent text should:

• use shorter line lengths
• be limited to only a few lines
• not interrupt the flow of body text—rather it should enhance it

See Also:

• The Rules of Setting Readable Type | Premium Design Works
• Setting Type for the Web | Premium Design Works

Choosing a Typeface

OK… I have realized that I just should not use Papyrus anymore. So, what typeface do I use and why should I use it?

When considering a typeface, you should keep in mind the purpose that is it serving. Some factors in your decision may be:

1. Brand: using a typeface consistent with the typeface of the logo and brand of the company
2. Genre: using a typeface popular during a specific era or in a geographical location
3. Readability: choosing a typeface in order for it to be easily read in a paragraph
4. Emphasis: choosing a typeface for visual punctuation
5. Display: using a typeface to express emotion

See Also: Choosing a Typeface | Premium Design Works

Putting it all together…

Lets take a look at some CSS Zen Garden examples:

Zen Army

Start Listening!

Spring 360

Lonly Flower

45 RPM

Uh, oh… Limited Font Choices?

The most troubling aspect of using type on the web is that the list of usable fonts is both small and unpredictable.

See: Common Fonts for Windows & Mac | Web Design Tips & Tricks

Then See: Web Font Linking | Premium Design Works