FONTS FOR WEB PROJECTS

This info is a little outdated, now that various online fonts are available, but may be useful as a reminder that fonts aren't always the same size.

Font Use on the Web

To keep things simple on the Web, use only the seven fonts listed below under "Readability" for website body copy. These are fonts that everyone has on their computers; if you try to use other fonts, your Mac customers may not have the PC fonts you are using, or your PC customers may not have the Mac fonts you are using, leaving you with a website whose appearance is nothing like you intended. If you want to use other fonts for headlines, etc., create image files of your headlines and use them. (There are other fonts that are cross-platform, but they aren't recommend for body copy.)

Note: Georgia uses oldstyle numbers rather than lining numbers; this can give a very elegant look to a website, but won't work as well in tables and number lists.

Readability of 12px type on the Web

At the same pixel size, the physical sizes of the fonts below are very different. Times is much smaller than Georgia; Verdana is much wider than Helvetica. (Arial and Helvetica are almost exactly the same; again, Arial was created because Microsoft didn't want to license the font Helvetica.) Keep this in mind when designing; default fonts could dramatically alter how your site looks. (How this list looks to you depends on the fonts active on your computer; if you don't have a font installed, it will likely display in Courier; if you don't have Courier installed, your default font will be shown in place of Courier.)

Times 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Georgia 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Arial 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Helvetica 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Trebuchet MS 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Verdana 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890

Courier 12px
Vix quinquennalis suis neglegenter conubium santet parsimonia cathedras, quod perspicax fiducias agnascor Octavius, ut plane utilitas zothecas insectat gulosus rures. Verecundus cathedras vocificat gulosus chirographi, utcunque Medusa circumgrediet quinquennalis catelli. Cathedras amputat catelli. 1234567890