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.
UPDATE: We recently launched a gallery site to showcase excellent sources of typography inspiration – TypeInspire.
For more design toolboxes, please see:
A great resource for finding free fonts with commercial-use licenses.
One of the biggest selections of free fonts.
Another leading resource for free fonts.
Fawnt is a font resource for designers, developers, and anyone that appreciates the web’s highest quality 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.
A large selection of fonts for sale.
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:
Forums, articles, and a large community of users.
I Love Typography
A leading typography-focused blog.
“An odyssey in Typography.”
Fontlover.com showcases current trends in typography.
Easily convert pixels to ems.
Another tool for converting pixels to ems.
Lets you flip through, preview and compare web typography while retrieving the CSS.
Test font styles before using them and save time.
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.
Quickly test and create CSS to achieve the styles that you want.
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.
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.
Identify a font by answering a series of simple questions about its appearance.
Another tool for finding and identifying fonts.
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.
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.
Enter some sample text and it will show you the text in different fonts that you have on your machine.
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.
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”.
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.
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).
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 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
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 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.
An excellent source of typography inspiration powered by the Behance Network.
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
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
Common Fonts to All Versions of Windows and Mac Equivalents
Mac OS X 10.4: Fonts List
Windows Font List