LearnDan Rubin on Web Typography


writes on October 28, 2009

Next up in our series of web design focused interviews is Dan Rubin, you’ll frequently find him waxing educational about a cappella jazz and barbershop harmony, interface design, usability, web standards, typography, and graphic design in general.

Editor’s Note: Dan will be hosting a workshop on “Web Typography” at The Future of Web Design New York on November 16-17 2009. Buy your ticket online now.

Why do you think that Web typography is a current hot topic?

Especially among designers, having more control over type on the web has *always* been a hot topic — though usually in the form of complaints about the lack of support in browsers and CSS. The current interest is primarily due to recent solutions for expanding the list of fonts designers can use without resorting to bitmaps (using images of text to replace HTML text via CSS) or Flash (e.g. sIFR), such as Typekit, Cufón, and @font-face, as well as the heightened interest of foundries, font designers and browser developers to establish a common format for web fonts.

There’s an emerging set of rival technologies that @font-face web fonts. Do you think we will see a “winner” or will the foundries look towards a standard?

The foundries already seem to be leaning toward the .webfont proposal — also written as WebOTF or WOFF (Web Open Font Format) depending on where you’ve read about it — and Mozilla is already implementing support in a near-future version of Firefox. Rumor has it that Microsoft may even support it, and I’m sure Apple won’t be too far behind with Safari/Webkit if that’s the case (if not beating Microsoft to the punch).

CSS support via @font-face should require no changes to the current syntax, and solutions that provide their own font selection (such as Typekit) shouldn’t be affected, or may even be able to take advantage of the new format to improve their fledgling services.

If someone is realigning their site what are the three key typographic ideas they should bear in mind?

In no particular order:

  • Limit your usage to two fonts (three at the absolute most) to help viewers focus on the words, not how many different fonts are saying them.
  • If you need to show emphasis or convey hierarchy, make as few changes as needed to create contrast (e.g. style, color or size: not all three)
  • Understand that type is often the primary content of your site *and* the main navigational elements: treat it with the utmost respect and give it the attention it deserves.

Can you give a couple of examples of sites that use web typography really well and how?

In this context, “web typography” simply means “type on the web” rather than a specific technology or method to use that type. So much can be done (and has) with the existing capabilities of browsers and CSS that we can see good examples of type being used online in any number of places:

What do you think is the Future of Web Design?

We will have reached the next evolution of the web when we no longer sign into specific sites and apps, but instead simply sign into the web as a whole, and use applications that freely exchange data and work more as a team than separate players.

As practitioners, we can help reach that point by viewing ourselves not as designers or developers, but as product designers: our products are virtual, but the interactions we are supporting are helping shape the world around us — we must take our jobs as seriously as the design teams who create cars, ambulances, airplanes, medical instruments and the tools that run governments.


Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Get Started

0 Responses to “Dan Rubin on Web Typography”

  1. Anthony Brewitt on November 27, 2010 at 10:38 am said:

    With over 500 million users and growing I wonder what part Facebook will play in realising your future of the web. It seems it’s here to stay.

  2. Thanks for great informative article and especially for those last 2 paragraphs – can’t agree more!

  3. That was really insightful, I think the three key ideas are especially helpful.

    Could someone explain the need for a web font standard?
    Why not just use TTF or OTF like everything else already does?
    Sorry if I am missing something.

  4. This post was very informal. Thank you for this information!

  5. The vision of the web being a place where several entities are exchanging data within themselves and are accessible through a single login into the web as the main door seems like a near-future reality. Really insightful writing there. Thanks!

  6. Thanks for the article, really inspiring!

  7. Interesting – viewing ourselves as product designers rather than just designers or developers is a point of view which I hadn’t considered, now considered, it’s a point I agree with.

  8. simply loved the 2 last paragraphs, exactly my vision.

  9. Thank’s for your post, very interesting

  10. That’s a very informative thing to know especially with those people whose a very computer enthusiasts.

Leave a Reply

You must be logged in to post a comment.

man working on his laptop

Are you ready to start learning?

Learning with Treehouse for only 30 minutes a day can teach you the skills needed to land the job that you've been dreaming about.

Start a Free Trial
woman working on her laptop