I’m Chanpory, and this is my site on how to live and work better as a designer.

You should follow me on Twitter here.

For more, check out the archives.

Who says type on the web has to look wretched? Sure, there are annoying constraints like low-resolutions, limited font choices, and browser incompatibilities. But with the right tools and a little bit of guidance, you can absolutely make on-screen typography beautiful.

Here’s 46 resources to help you create, find, and code great looking type for the web. This list is geared towards web designers and developers, but print designers will also find many of the resources useful:

CSS, HTML, & Flash

Ah, the joy of coding a site and making the type look consistent, legible, and readable. These tools will help:

  • Typetester
    Compare screen fonts set with various CSS attributes. Only uses fonts that are installed on Macs and Windows by default

  • Font Tester
    Similar to Typetester above, but doesn’t look as nice

  • CSSType
    Like Typetester and Font Tester, but only one font at a time.

  • Em Calculator
    Converts pixel sizes into ems for scalable and accessible CSS

  • Baseline Rhythm Calculator
    Calculates font size and line-height for body and headings for consistent baselines

  • CSS with vertical rhythm
    Another baseline rhythm calculator

  • Colour Contrast Check
    Checks different color combinations for text and background colors

  • Text sizing methods by browser
    A nice table showing how different browsers interpret type sizes

  • HTML Entities Chart
    A table of special characters and their HTML entity equivalents

  • Blueprint: A CSS Framework
    A CSS Framework with good typography. Uses incremental leading, so the line heights follow a rhythm

  • sIFR
    Tired of using default fonts like Verdana, Georgia, and Arial for your headlines? Use sIFR to embed and font on a web page

Font Identification

Need help identifying or finding the right typeface? Try one of these sites:

  • Identifont
    A step-by-step wizard to help you identify a mysterious font

  • Linotype Font Identifier
    Another version of the same tool above

  • WhatTheFont?!
    Upload a scanned sample of a font and WhatTheFont will tell you its name

  • Font Classification
    A nice tool which lists type categorizations with a brief description and history of each

  • TypeNavigator
    Use characteristics and attributes to find the right typeface

Font Previewers

The sites below let you to preview any sample text in a chosen typeface before you buy. These previews are useful for setting and creating graphic type, because you can see how they anti-alias on-screen:

  • FontShop
    One of the largest, if not THE largest, font distributors in the world

  • MyFonts
    Boasts over 55,1777 fonts available for preview and purchase

  • Phil’s Fonts
    Think MyFont’s collection of 55k is impressive, check out the 100,000 fonts on Phil’s font

  • Emigre
    A pioneer in low-resolution fonts

Pixel Font Collections

There’s a gazillion pixel fonts being created out there already. But here are a few collections:

Pixel Font Editors

Can’t find the right pixel font, try making your own:

Tutorials & Articles

Did I miss anything? Let me know in the comments!

9 Comments

  • Stephen

    gravatarAug 13, 2007
    8:32 am

    I believe your link to Spiekermann’s tips is broken. More tips on the FontShop blog too.

  • Stephen

    gravatarAug 13, 2007
    8:34 am

    Also: Hoefler’s typography tutorials and piles of other info at Typophile.

  • sergio

    gravatarAug 13, 2007
    11:14 am

    Great! Other article for the list: 42 sites to download free fonts

  • Carl of PseudoPower

    gravatarAug 13, 2007
    9:43 pm

    Fonts and I are not in good terms. Grrr.

    Anyway, nice list to keep in mind.

  • David Conrad

    gravatarAug 14, 2007
    12:53 am

    Note really a tip, but regarding Microsoft’s typography site, it actually shouldn’t really be too surprising that they have invested so heavily in on-screen type. We recently held a gallery showing as part of Typecon for Matthew Carter’s work for Microsoft (http://designcommission.com/matthewcarter/) and it was a fascinating process to put this show together. We’re an all Mac studio, but we all really came to a new level of appreciation for MS as part of the process. People like Bill Hill, Virginia Howlett, and heck, event Bill Gates, have been HUGE proponents of good, legible type. There’s a real focus there on recognizing that people will read on-screen more and more in the future.

    In any case – great collection of links. Thanks for the fantastic info, as usual.

  • Michael from Pro Blog Design

    gravatarAug 14, 2007
    6:31 am

    Great tools! Definitely a few bookmarks to be had here. Thanks. :)

  • Chanpory

    gravatarAug 14, 2007
    11:01 am

    @Stephen, the Spiekermann link is now fixed! And thanks for the pointing out Hoefler’s tutorials. Also go to see that you got the Typographica domain now. Sweet!

  • Matthew

    gravatarOct 8, 2007
    3:04 am

    Thought you might like to add this site to the list. A colour and typography picker that also checks for w3c contrast level recommendations.

    http://www.designerplaything.co.uk

  • Stephen

    gravatarMay 17, 2009
    6:46 am

    Veer is also another company that could go under your Font Previewers list. Their other stuff is great too… heaps of inspiration there. http://www.veer.com