980px

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:

Headers should be:

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:

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:

Accent text should:

See Also:

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

Zen Army

Start Listening!

Start Listening!

Spring 360

Spring 360

Lonley Flower

Lonly Flower

45 RPM

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

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

  1. Anna Sabo says:

    Great resource for helping you visualize your type scale (and it gives you the css):
    http://type-scale.com/

  2. Chris Morda says:

    In class we were talking about 16/24 for type size and line height and the golden mean came up. Here are a couple of links on “divine” proportion and web design. http://www.vanseodesign.com/web-design/golden-section-proportions/

    http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

  3. Jake Stolte says:

    I’m a big ol’ @font-face and free creative commons fonts fan. These are the two sites I use most often for some pretty cool free fonts.

    http://www.fontsquirrel.com

    http://www.theleagueofmoveabletype.com/

    word.

  4. Tim Garret says:

    If you want to learn how to establish effective visual hierarchy, Carnegie Mellon has a short (free) online course in Visual Communication Design.

  5. Corey says:

    Average number of characters per line of text (including punctuation and spaces)=66

    From: Robert Bringhurst, The Elements of Typographic Style
    http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/dp/0881792063/ref=sr_1_1?ie=UTF8&qid=1297136723&sr=8-1

  6. Sean says:

    I think this is the coolest. Rather then the user having to have your particular font installed to view it properly or making various pesky graphic images, use this site.
    You can pick from 1000 fonts and simply embed their tiny snippet of code in you r page and voila! The user can read it as you intended regardless if they have that particular font installed.. Pretty cool i thought..

    http://www.fontburner.com/

  7. Mike,

    Since you mentioned it in WEB 200 today, have some of your students check this out: http://www.helveticafilm.com/

    Excellent film!!!

  8. Erik says:

    I found this great resource for some basics of typography (includes html solutions)

    http://www.aisleone.net/2009/design/8-ways-to-improve-your-typography/

  9. Trevor says:

    If you find yourself gathering fonts for use in your web designs (graphic text) check out this list of options:

    (Some are free, others require purchase)
    http://webdesignledger.com/freebies/40-super-sleek-fonts-for-clean-web-design

Trackbacks:

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php