Typography Toolbox

Typography is one of the fundamental elements of web design. A site that makes excellent use of typography will often have a subtle elegance to the design. Fortunately, there are plenty of great resources and tools, informative articles, and sources of inspiration that are available. In this post we’ll feature some of the best items that should be bookmarked for future use in your own work.

For more design toolboxes, please see:

• Photoshop Toolbox
• Illustrator Toolbox
• Freelance Web Designer’s Toolbox

Free Fonts:

Font Squirrel
A great resource for finding free fonts with commercial-use licenses.

Dafont
One of the biggest selections of free fonts.

Urban Fonts
Another leading resource for free fonts.

Fawnt
Fawnt is a font resource for designers, developers, and anyone that appreciates the web’s highest quality fonts.

Better Fonts
Thousands of free fonts (or you can get the 500 most popular for $2.77).

Clean Font Showcase
A huge collection of free clean fonts.

40+ Excellent Freefonts for Professional Design
A great collection from Smashing Magazine.

45 Beautiful Free Fonts for Modern Design Trends
A collection put together by Six Revisions.

50 Most Extreme Free Grunge Fonts
A collection from Web Design Ledger.

37 Free Must Have Fonts
A collection from Francesco Mugnai.

50+ Fonts for Big, Bold Headlines
Our own collection of fonts. Not all are free, but most are.

Premium Fonts:

My Fonts
A large selection of fonts for sale.

Fonts.com
The Fonts.com™ store from Monotype Imaging offers more than 100,000 font products for you to preview, purchase and download.

80 Beautiful Typefaces for Professional Design
This list from Smashing Magazine is a few years old, but highly useful.

60 Brilliant Typefaces for Corporate Design
Another collection of great premium fonts from Smashing Magazine.

30 Fonts That ALL Designers Must Know & Should Own
A list put together by Jacob Cass of Just Creative Design.

13 Typefaces Every Graphic Designer Needs
This list from David Airey includes some information about each of his choices.

Typography-Related Websites, Blogs and Communities:

Typophile
Forums, articles, and a large community of users.

I Love Typography
A leading typography-focused blog.

TypeNeu
“An odyssey in Typography.”

FontLover
Fontlover.com showcases current trends in typography.

Online Tools:

PXtoEM
Easily convert pixels to ems.

Em Calculator
Another tool for converting pixels to ems.

Typechart
Lets you flip through, preview and compare web typography while retrieving the CSS.

Typetester
Test font styles before using them and save time.

CSSTYPE
With CSSTYPE you can preview your text according to font, size, spacing, line height and a few other variables. It’s a quick way to test font styling.

CSSTXT
Quickly test and create CSS to achieve the styles that you want.

Fontifier
Fontifier lets you use your own handwriting for the text you write on your computer. It turns a scanned sample of your handwriting into a handwriting font that you can use in your word processor or graphics program, just like regular fonts such as Helvetica.

BitFontMaker
An online tool for creating a font.

CSS Type Set
This tool will create the CSS coding for you as you test you typography with sample text that you enter.

What the Font?
Upload a scanned image of the font and instantly find the closest matches in their database.

Identifont
Identify a font by answering a series of simple questions about its appearance.

TypeNavigator
Another tool for finding and identifying fonts.

Font Tester
Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

Font Picker
This simple tool shows you all the fonts installed on your computer and helps you choose which one is most suitable for a particular project.

Flipping Typical
Enter some sample text and it will show you the text in different fonts that you have on your machine.

FontStruct
A free tool that lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

HTM-Ipsum
Provides filler text with HTML tags for different formats, including paragraphs, lists, tables and more.

Color Contrast Check
The Colour Contrast Check Tool allows to specify a foreground and a background colour and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.

Designer Plaything
A tool that allows designers and clients to experiment with different web typography and colour combinations on a page as well as check for color accessibility level.

Baseline Rhythm Calculator
An online tool to help you create baseline rhythm.

Lorem Ipsum
Tool for creating dummy text.

abcTajpu Firefox Extension
Type in accented letters, international characters or symbols into Firefox or Thunderbird, either simply by using a context menu (there being support for many languages), or quickly by keyboard macro (you can even define your own).

Font Replacement:

sIFR
sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems. It accomplishes this by using a combination of javascript, CSS, and Flash.

FLIR
FLIR is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers.

How to Use Any Font Use Wish with FLIR
A tutorial from NETTUTS for using FLIR on your site.

Typeface.js
Instead of creating images or using flash just to show your site’s graphic text in the font you want, you can use typeface.js and write in plain HTML and CSS, just as if your visitors had the font installed locally. This is a work in progress, but functional enough at least to render the the graphic text on this site.

sIFR Lite
sIFR Lite is a bit easier to read, and more intuitive to use. The only drawbacks are that it is currently unproven on a large scale in the real world.

sIFRvault
sIFRvault is a collection of pre-generated Flash SWFs that can be used with sIFR.

jQuery sIFR Plugin
It gives you a function in javascript to replace text in a web page dynamically with sIFR text, using native jQuery functionality along with the jQuery Flash Plugin.

sIFR Generator
sIFR Generator is an online tool that allows you to create sIFR .swf files with a few clicks of your mouse. Simply upload the TTF font of the font you want to convert, preview and download.
Font Burner
Font Burner uses sIFR to change the fonts in the headlines of your site.

Convert TrueType Font to sIFR Flash File
Upload your font and it will send the sIFR file to you.

Typography Inspiration:

Typography Served
An excellent source of typography inspiration powered by the Behance Network.

Typesites
A web design gallery of sites with exemplary use of typography.

Typography Inspiration Showcase
Our own collection of inspirational pieces from various designers.

Typographic Madness: 30 Brilliant Pieces of Work
A collection from Noupe of typographic poster design.

45 Beautiful 3D Typography Designs For Inspiration
An awesome collection put together by Dzine Blog.

We All Love Typography
A big collection put together by Inspiredology.

17 Stimulating Flickr Groups to get You Typographically Inspired
An article from Bittbox that lists the best Flickr groups for typography inspiration.

20 Websites with Beautiful Typography
This collection was put together by Jacob Gube of Six Revisions.

25+ Sites that Use Typography as the Only Design Element
A collection that shows the impact typography can have on design.

15 Excellent Examples of Web Typography
A collection from I Love Typography.

The Showcase of BIG Typography
An accurately titled collection from Smashing Magazine.

Typography for Headlines
A collection of example headlines from various websites.

Articles and Tutorials:

10 Examples of Beautiful CSS Typography and How They Did It

Advanced Typography Techniques Using CSS

On Choosing Type

15 Tips to Choose a Good Text Type

Web Typography Cheat Sheet

Top 10 (Web Safe) Fonts

Fonts on the Web and a List of Web Safe Fonts

The Non-Typographer’s Guide to Practical Typeface Selection

Typography Essentials: A Guide to Getting Started

Five Simple Steps to Better Typography

A Guide to Web Typography

10 Web Typography Rules Every Designer Should Know

Compose to a Vertical Rhythm

How to Size Text in CSS

How to Size Text Using Ems

Power to the People: Relative Font Sizes

Typography Matters

Typographic Contrast and Flow

12 Examples of Paragraph Typography

10 Common Typography Mistakes

Rendering Complex Type – Who’s Got the Love?

Typography: Serif vs. Sans Serif

Don’t Be Afraid of Serif Fonts

Better Font Management

It’s All About Legibility

Reference:

Typography Glossary

Common Fonts to All Versions of Windows and Mac Equivalents

Mac OS X 10.4: Fonts List

Windows Font List