20 Useful Typography Tools

Mar 19 2009 by Jacob Gube | 35 Comments

Typography is a crucial component of a design. When used effectively, it sets the mood and solicits emotion about the design. Working with typography can be challenging, but fortunately, there is a plethora of free tools on the web that can help you work with type.

In this article, you’ll find 20 tools for working with typography. You’ll find an assortment of tools that’ll help you with testing, identifying, sizing, and even making, fonts.

1. Typetester

Typetester - screen shot.

Typetester allows you to compare various fonts and styles on one page. You can try out different looks for your sample text by changing its styles and attributes.

2. FontStructor

FontStructor - screen shot.

FontStructor is a free, web-based tool for creating your own fonts. It has an intuitive interface so don’t expect a high learning curve.

3. Font Tester

Font Tester - screen shot.

Font Tester is a free web-based tool for comparing different fonts. It shows you various fonts that you’ve selected side-by-side with their respective CSS style rules.

4. Typechart

Typechart - screen shot.

Typechart lets you quickly evaluate an assortment of web typography. Once you’ve discovered the font you like, you can use the Get CSS button to obtain the style rules for it.

5. OpenType Font Tester

OpenType Font Tester - screen shot.

OpentType Font Tester is a web-based tool that allows you to test over 20 OpenType fonts.

6. CSS-Typoset Matrix

CSS-Typoset Matrix - screen shot.

CSS-Typoset Matrix is a matrix that displays font sizes, line-heights, and margins (in pixel and em units) for various base font sizes. It also outputs the CSS code for you based on your inputs.

7. CSS Type Set

CSS Type Set - screen shot.

CSS Type Set lets you experiment with different styles and attributes (such as font size, font weight, font family) of web typography. Once you’re satisfied with your tweaking, it’ll generate the appropriate CSS code for you.

8. TypeNavigator

TypeNavigator - screen shot.

TypeNavigator is a simple and intuitive visual font search tool. It presents a series of images so that you can try and identify the name of the font you’re looking at. What’s great about visual search is that you don’t have to be familiar with the typography terms and the anatomy of type to be able to successfully find the font you want.

9. Hi-Res FontTester

Hi-Res FontTester - screen shot.

Hi-Res FontTester is a simple and straightforward tool for testing various fonts. You can create as many samples as you want, and then when you’re finished, you can export your tests in a PDF file for storing and sharing.

10. Font Burner

Font Burner - screen shot.

Font Burner lets you search for fonts that you can embed in your site. You can embed the font you’ve chosen on your web pages by copying-and-pasting the code they provide (which uses sIFR).

11. PXtoEM

PXtoEM - screen shot.

PXtoEM is simple web tool that gives you a matrix for pixel, em, percent, and point units based on your <body>’s font size. If you’re used to working with pixels but see the value in using em as your size unit, PXtoEM will lessen the need for you to reach for your calculator.

12. WhatTheFont

WhatTheFont - screen shot.

With WhatTheFont, you upload an image or screenshot of the font you’re trying to make out, and then it attempts to deduce the name of it.

13. Linotype Font Finder

Linotype Font Finder - screen shot.

Linotype Font Finder helps you identify a font through a series of questions like "What type of tail does the upper-case ‘Q’ have?" or "Does the upper-case ‘U’ have a stem?".

14. Identifont

Identifont - screen shot.

Identifont is a large online database of fonts that’s searchable. They also help you identify fonts by asking you a series of questions.

15. CSSTYPE

CSSTYPE - screen shot.

CSSTYPE is a free tool for experimenting with web-safe typography.

16. Fontifier

Fontifier - screen shot.

Fontifier is a tool for generating usable fonts based on your handwriting. This can be a great way to create a truly unique font for your designs.

17. Designer Plaything

Designer Plaything - screen shot.

Designer Plaything lets you experiment with different web typography and color combinations. It also allows you to check color accessibility. There’s a web-based version and a downloadable version which you can grab on this page.

18. Serif Font Identification Guide

Serif Font Identification Guide - screen shot.

Serif Font Identification Guide is a visual font identification tool that presents a series of images that you pick from to closely match the font you’re trying to recognize.

19. Font Picker

Font Picker - screen shot.

Font Picker is a simple web tool for browsing all the fonts available on your computer. It can be a useful tool for quickly previewing and selecting what font you want to use for a design.

20. CSSTXT

CSSTXT - screen shot.

CSSTXT is an uncomplicated web tool for generating CSS style rules for web typography.

Missed your favorite?

If your favorite typography tool isn’t on the list, share it with us in the comments, we’d love to hear your thoughts.

Related content

35 Comments

Andrew Odri

March 19th, 2009

Thanks Jacob! I think some of these will become a fixture in my design toolkit :)

Chris Wallace

March 19th, 2009

I LOVE TYPOGRAPHY. And Pumas.

Matt

March 19th, 2009

I like Your Fonts (http://www.yourfonts.com) for handwriting to fonts personally. What the Font is a _great_ tool and fontstruct looks like fun. I’ll be sure to try it out. Thanks for the list.

Jim Gaudet

March 19th, 2009

I just love it when I can find a use for the word plethora! :)

So, what is your default font configuration in css?

Matt

March 19th, 2009

These seem like good tools for beginners. You get what you want and you learn more at the same time.

Jim Reppond

March 20th, 2009

I think this one is especially cool.

Create a font of 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.

http://www.fontifier.com/

Nick

March 20th, 2009

I highly recommend yourfonts.com. It is an online font generation service that produces high quality fonts.
YourFonts.com

Jeremy

March 20th, 2009

You might add http://www.myfontbook.com, a super fast online font viewer.

Alfonso de Tomas

March 20th, 2009

You can add http://www.yourfonts.com/. Another website for create your own fonts (free).

How to (in spanish) in my blog http://desfaziendoentuertos.prepress.es/2009/02/crea-tu-propia-tipografia-online-y-gratis.html

I hope you enjoy it

Dietmar

March 20th, 2009

Really nice list! Especially point 18 and 19 for playing with my beloved serif-types. Really cool!!!

Danh ba web 2.0

March 20th, 2009

Great list. Thanks a lot !

Breaking News---FIRST

March 20th, 2009

oooh great set of tools, css typo is pretty nice. I’ll be using font picker as well.

Patternhead

March 20th, 2009

Great resource.

Hadn’t seen some of these. Thanks for sharing.

Jacob Gube

March 20th, 2009

@Andrew Odri: Great to hear, they’re all very useful.

@Jim Gaudet: Yes, I love the word “plethora”. :) For CSS? Typetester is very easy to use. When I’m working on em’s, CSS-Typoset Matrix or PXtoEM is very helpful to have open in a browser tab.

@Matt and @Alfonso de Tomas: Thanks the Your Fonts link, it looks very interesting.

Wade Jackman

March 20th, 2009

I love type navigator! Such a time saver, I wish it was a desktop application.

Andy Ford

March 20th, 2009

I created a pixels to ems lookup table called EmChart. Hopefully some of your readers will find it useful

jack

March 20th, 2009

love the list. i primarily use css typeset. but indeed, it’s a plethora of type bling!

jack

March 20th, 2009

Andy Ford: thanks for the em chart. i’m going to use it for something interesting, i’ll let you know if it works out!

William Simms

March 20th, 2009

This is outstanding!! As a newbie in design, I need all the “good help” I can get. I’ll check out many of the tools listed. Thanks

PeHaa

March 20th, 2009

Great list thanks! I’d like to add http://www.yourfonts.com – free and great for handwriting and doodle fonts. And here is what I got: http://pehaa.com/2009/02/my-first-doodle-font/

Clint Kolodziej

March 20th, 2009

You might check out http://flippingtypical.com/ as well, it has a nice and simple layout that lets you see a short text sample in each font you have installed on your system. Definitely a time saver over scrolling through large horizontal lists to find a font you like for a logo.

Andy Ford

March 20th, 2009

@jack – I’d love to see what you come up with. I’m looking forward to it =)

Kayla

March 20th, 2009

Great list of tools! I didn’t know about most of these before, so thank you!

ProjectCenter

March 20th, 2009

Some good tools here. I am indebted to you.

Jams

March 24th, 2009

Hi! I’ve read this article and it’s very useful. I’ve translate it into spanish for the people who read my blog, making clear that you are the author. I hope you don`t care about this. AdiĆ³s!

Jennyy

April 6th, 2009

I love htt[://www.fontgarden.com as an alternative to Fontifier… Elinor’s fonts come out beautifully and there are tons of free handwriting fonts if you don’t want to submit your own.

Css developers

April 16th, 2009

Nice collection there but do these fonts work on all browsers by default or the users have to download something etc ?

Unoblogger

May 8th, 2009

A wonderful list….. i never knew such a tool existed….How simple do these tools make of the job of getting the right font, font size and spacing.
Thanks to you for this wonderful write up

Aneslin

May 28th, 2009

excellent collection
thanks a lot

Rapid

June 9th, 2009

Next time I will already know

Chuck Lasker

August 26th, 2009

Great tools – I’ll be busy for a couple hours now.

I’d like to see some comparisons of font management programs for Windows (Vista, in particular). I mainly need something that lets me have a base set of fonts installed, then lets me add categories of fonts quickly when I’m in design mode. Having 900 fonts running in Vista is a resource killer.

Mark Morcom

September 4th, 2010

Thank you for this. Trying fontstruct now

shong

October 7th, 2011

I agree with the few commenters on how handwriting may be a better start for
building your own fonts. It’s easy to produce unnatural or generic graphic design when you don’t start from sketch.

Leave a Comment

Subscribe to the comments on this article.