.. Your Daily Design Dosis

A Typographer’s Guide to WebTypography

| 12 Comments

Just when I was getting a little too comfortable with the thrilling world of printed type I became interested in web design. Of course, achieving exquisite typography in web design is a whole new ball game—one in which I was all too eager to participate.

Typography on the web presents many new limitations and challenges to the seasoned print designer. Font choices are restricted to just a handful of standard, web-safe fonts. All of the useful text-formatting tools of InDesign are out the window. You can say good bye to full-justified text—it doesn’t stand a chance of surviving the lack of hyphenation on the web! Yes, the web is truly an unforgiving place for typography. But this setback only serves to make it more rewarding when you make stunning, print-worthy web typography. 8 Steps to Great Typography on the Web:

Bring on the HTML entities

HTML entities are necessary for incorporating proper punctuation and special characters into your web site. Hatch marks just don’t cut it for a serious typographer, and using the correct HTML entity to represent opening () and closing ()  quotation marks is a must. Beyond that, simply browsing a chart of HTML entities offers great inspiration for the use of potential characters you may not have considered before. The WDG Special Entities chart is a great resource.

CSS is a powerful typographic tool for the web

It provides the means to format your typography in a multitude of ways. CSS can be used to do everything from specifying leading and tracking to achieving drop caps. Some properties you should make use of include:

font-variant: smallcaps/normal;
text-transform: capitalize/uppercase/lowercase;
letter-spacing: em;
line-height: em;
p:first-letter {font-size: 300%;}

Use italics for variety

The italic variations of certain fonts are often more interesting than the regular faces. Two of my favorites include Georgia Italic and Cambria Italic (a Windows Vista system font that will hopefully be gaining in popularity in the next few years). These stylish variations on web fonts make for great headers and add a touch of variety to your web site. Check out Typechart to preview other system fonts and their variants that you might not have typically considered.

typechart

Have some fun with your Ampersands

If you are familiar with Robert Bringhurst’s Elements of Typographic Style, you may remember his insistence on using the best available ampersand at all times. These words of wisdom can and should be applied to web typography as well. Get creative and explore your options for ampersands! There is a great post on SimpleBits about ampersands on the web that you should check out.

Be creative with font choices, create a good Font-Stack

Use CSS to specify a few fonts rather than just one web-safe font for your text. While everyone will not have your ideal font choice on their computers, at least those that do will be in for a treat. Specifying your font choices in order from your ideal font candidate to a standard font choice gives your design greater flexibility.

font-family: baskerville,palatino,'palatino linotype',
georgia,serif;

Use border-bottom rather than the underline property on links

The underline property is commonly used to format links on a page. While this format is a widely recognized symbol for a link, it is not kind to the descenders of letters. Rather than using this property and having your y’s and g’s cut through by the underline, make use of the border-bottom property. Simply use the following CSS to create a type-friendly underline effect:

border-bottom: 1px;
padding-bottom: 1px;

Make use of the numerous typographic tools on the web

WP Typogrify is a very useful WordPress plugin that automatically converts common typographic faux pas (such as hatch marks and double-dashes) to the formatting of a true typographer. sIFR is another useful script used for inserting rich typography into your site while maintaining search engine friendliness and accessibility. A very helpful sIFR tutorial can be found on CSS-Tricks.

Form follows function

The idea that form should follow function is more important than ever on the web; web standards and accessibility should always be a priority. Luckily, a truly beautiful design can be achieved when you take advantage of the capabilities of CSS and use your own creativity to achieve professional and artful typography.

 

Author: Jan Rajtoral

Jan Rajtoral AKA Gonzo the Great is the Founder of and Designer at gonzodesign, providing design services across the full spectrum of Brand Identity, Graphic Design, Print and Advertising Design & Website Design.

12 comments

on this article: “A Typographer’s Guide to WebTypography”
  1. Hi oneleunrend,

    thanks for the kind words, visit us the next time too! Cheers & ciao …

  2. Great blog! Very interesting posts. I will often read it. May i post your site link on my page?

  3. Excellent blog! Very interesting themes. I will allways read it. Also e-mailed on rss.

  4. Hi Fubantyabramy & bliceawlinand,

    thanks for the visit! In an later article here on the gonzoblog.nl, Improve Typography In Webdesign, we also cover this subject. See ya next time, ciao ….

  5. Your blog is so interesting! I have subscribed on rss and I will read it regullary/

  6. Hi Freezelight,

    …. klassyes?? Ciao …

  7. Hi Dofus,

    thanks for your cool comment! Ciao …

  8. hello so cool! gonzoblog!

  9. Hi Elcorin,

    thanks for your compliment, visit our gonzoblog.nl as often as you like.

    See ya next time, ciao!