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:

Free Fonts:

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

Typography Resources

One of the biggest selections of free fonts.

Typography Resources

Urban Fonts
Another leading resource for free fonts.

Typography Resources

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

Typography Resources

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.

Typography Resources

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

Typography Resources

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:

Forums, articles, and a large community of users.

Typography Resources

I Love Typography
A leading typography-focused blog.

Typography Resources

“An odyssey in Typography.”

Typography Resources

Fontlover.com showcases current trends in typography.

Typography Resources

Online Tools:

Easily convert pixels to ems.

Typography Resources

Em Calculator
Another tool for converting pixels to ems.

Typography Resources

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

Typography Resources

Test font styles before using them and save time.

Typography Resources

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.

Typography Resources

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

Typography Resources

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.

Typography Resources

An online tool for creating a font.

Typography Resources

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

Typography Resources

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

Typography Resources

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

Typography Resources

Another tool for finding and identifying fonts.

Typography Resources

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.

Typography Resources

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.

Typography Resources

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

Typography Resources

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.

Typography Resources

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

Typography Resources

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”.

Typography Resources

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 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 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.

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 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.

Typography Resources

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

Typography Resources

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

Typography Resources

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


Typography Glossary

Typography Resources

Common Fonts to All Versions of Windows and Mac Equivalents

Mac OS X 10.4: Fonts List

Windows Font List

Stephen Snell is the owner and editor of Vandelay Design, a popular design blog.
  1. February 10, 2009

    Now that’s a type-rush!

    I just had a look at ‘flipping typical’. Very nice idea. It’d be even better if it showed the full font families, rather than just normal, bold and italic, but I guess it’s more for web use than print.

  2. Pingback: Inspiring Links for 2009-02-10 | This Inspires Me

  3. February 10, 2009

    This has to be the most comprehensive typography resource going around. Thanks Steven!

  4. February 10, 2009

    Great post thanks for the resource

  5. February 10, 2009

    I agree with Craig, comprehensive! Floated and blog’d

  6. Pingback: lkhdesigns.com/blog » More Great Web Typography

  7. Pingback: links for 2009-02-10 « Mandarine

  8. Pingback: Caja de herramientas tipográfica | Isopixel

  9. Pingback: Daily Digest for 2009-02-10 | Midlife Manifesto

  10. Pingback: Enlaces del 12-02-09 | evelio.info

  11. Pingback: Recursos tipogràfics

  12. February 12, 2009

    Well researched. Nice job.

    Thanks for sharing.

  13. February 12, 2009

    Don’t forget the Mac OS X Font Management Best Practices guide from Extensis:


  14. February 13, 2009

    Thanks for the addition Jim.

  15. Pingback: Links about Typography | vitali software

  16. Pingback: Daily 5 from February 20, 2009 « StartAhead

  17. February 20, 2009

    Great list. I come across a lot of web only designers who have no concept of typography. I’ll send them to this post 😉

  18. Pingback: Colección de recursos tipográficos | Punto Geek

  19. Pingback: Mundo Tipografía «

  20. Pingback: Fonts 101 - Tips, categories, tools, tutorials and more

  21. July 8, 2010

    Thank you for the information……….

  22. July 17, 2010

    Thank you so much for putting all these information together!

  23. August 8, 2010

    nice job~

  24. November 13, 2010

    Nice Post… Excellent…

  25. March 11, 2011

    thanks nice post mate

  26. July 28, 2011

    Excellent sources to use and start designing. I thank you for bring them from here.

Leave a Reply

Your email address will not be published. Required fields are marked *

30 More Portfolio Sites for Your Design Inspiration