46 resources & tools to improve your web typography

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:

• Fonts For Flash

• Fonts by Cal Henderson

• MiniFonts

• 25 License Free Pixel Fonts

• 04 Bitmap Fonts

• Semplice Pixelfonts

• The Pixel Plant

• Orgdot open source pixel and led fonts

• miniml

• dafont

• Pixelate

Pixel Font Editors

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

• FontEditor BitfontMaker
  A nice web-based bitmap font editor

• BitFonter
  BitFonter is “a professional bitmap font editor” and “turns anything into fonts”

• defontPixel
  A nifty utility for anti-aliasing pixel fonts

• SimpleFont
  A windows bitmap font editor

Tutorials & Articles

• Fine Tuning Web Typography

• The Elements of Typographic Style Applied to the Web
  Based on Robert Bringhurst’s classic, this site applies his principles to the web

• Setting Type on the Web to a Baseline Grid
  How to create typographic harmony and rhythm with a baseline grid

• Elastic Design
  How to make type on your site scalable and accesable

• The Anatomy of Web Fonts
  A nice article on what makes a good web font

• Erik’s Typo Tips Erik Spiekermann’s classic list of type mistakes, and how to fix them. Most apply to both print and on-screen

• Five simple steps to better typography Mark Boulton’s short and sweet intro to typography

• Microsoft Typography Surprisingly, Microsoft’s Typography site has a wealth of articles and tutorials dedicated to on-screen typography.

• Common fonts to all versions of Windows & Mac equivalents A handy list of safe fonts to use for both Mac and PC

• Code Style font sampler and survey
  “The Code Style font sampler is a guide to the most common Web fonts”

• Fonts Included in Common Microsoft Products
  List of fonts installed with Microsoft apps

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