14 Best Online Typography Tools for Web Designers

By / Sep 28, 2009 / Tools
shares

Since typography is one of the most challenging and important aspects of web design, it’s important to have useful tools that can make things easier. Here’s a list of tools that will be a big help in making your typography beautiful, and you won’t even have to leave your browser.

CSS Type Set

Typography Tools

CSS Type Set allows you to visually and interactively style text and it generates the CSS.

Typetester

Typography Tools

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Typechart

Typography Tools

Typechart lets you flip through, preview and compare web typography and then grab the CSS.

WhatTheFont

Typography Tools

WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is.

Fontstruct

Typography Tools

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

Baseline Rhythm Calculator

Typography Tools

Baseline Rhythm Calculator generates CSS from a base font size and line height entered by the user.

PXtoEM

Typography Tools

PXtoEM is a calculator that does conversions of pixels, em’s, points, and percentages.

Font Burner

Typography Tools

Font Burner gives you a simple block of code to put in your webpages so you can transform your headlines from boring system fonts to any of the quality fonts in their archives.

TypeNavigator

Typography Tools

TypeNavigator is the world’s first interactive visual font search system.

Font Tester

Typography Tools

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.

Flipping Typical

Typography Tools

Flipping Typical allows you to enter text and then preview it in many different fonts at one time.

Identifont

Typography Tools

Identifont lets you identify a typeface from a sample by answering a series of questions about key characteristics.

STC FontBrowser

Typography Tools

STC FontBrowser lets you preview all of the fonts active on your computer.

Convert TrueType Font to Sifr Flash File

Typography Tools

The name of this one is self explanatory, plus it emails the Sifr file to you.

About the Author

Henry Jones is a web developer, designer, and entrepreneur with over 14 years of experience. He is the founder of WDL and ThemeTrust.

28 Comments

  1. Designect.Com
    September 28, 2009

    Very nice!!! Thank you!!!

    Reply
  2. danny
    September 28, 2009

    no Cufón or Kernest??

    Reply
  3. Paul Olyslager
    September 28, 2009

    I really love whatthefont but doesn’t always come up with the right result. And thank you Danny, for the two other ones.

    Reply
  4. Sean Hurley
    September 28, 2009

    Great post! Some new sites I haven’t seen before.

    Reply
  5. Jeremy Pass
    September 28, 2009

    Great stuff man!

    Reply
  6. 1001fonts.com
    September 28, 2009

    The TypeNavigator services are not available in Germany :( Anyone know of an anonymous proxy that lets one use this site within Germany?

    Reply
  7. typegoodness
    September 28, 2009

    typetester is for sure the most useful one. you forgot to mention http://www.webtypography.net/ which is a great resource for more detailed web typography.

    Reply
  8. theComplex
    September 28, 2009

    Wow… I can’t wait to test these out. Thanks so much!

    Reply
  9. Brad McCall
    September 28, 2009

    Great list of resources. I’ve used a couple of these, but others I hadn’t run across. Timely too, as I’m working on a new version of my portfolio website. Thanks!

    Reply
  10. Quicken Websites
    September 28, 2009

    “What the font” definitely goes onto my favorite apps list. Thanks!

    Reply
  11. Bendesign
    September 29, 2009

    Great Collection. Thank you.

    Reply
  12. Grafiker
    September 29, 2009

    Nice Sites. “What the font” is my favourite

    Reply
  13. Web 2.0
    September 29, 2009

    Great tools, thanks…

    Reply
  14. squareart
    September 30, 2009

    bookmarking right now, I use a few already, but some nice additions

    Reply
  15. cypherbox
    September 30, 2009

    Awesome cool. Thanks for the share!

    Reply
  16. alaJoAnn
    October 1, 2009

    Even an amateur like myself can use these tools. They all are free – I’ll add them to my list of free online resources. Thanks!

    WhatTheFont! reminds me of I+Like+Your+Colors. Same idea, only with website color codes.

    Reply
  17. Mark Carter
    October 6, 2009

    Baseline Rhythm Calculator is really useful, and hadn’t encountered it before … many thanks for the resource link

    Reply
  18. Web Design Singapore
    October 8, 2009

    what more can i say?

    yet another cool post by webdesignledger!

    Reply
  19. Thomas Knoble
    October 17, 2009

    These resources are terrific. I particularly like the application for finding a typeface that’s in your imagination and now you have a tool for going out to find it on the web.

    Thanks so much.

    Reply
  20. Webdesign Koblenz
    October 21, 2009

    Thanks, Awesome tools we will use next time. Font Tester rocks!

    Reply
  21. Bjoern
    October 22, 2009

    Hi,

    nice list. But “Convert TrueType Font to Sifr Flash File” is 404 ;-)

    Greetings

    Reply
  22. The Four Key Components of a Great Web Design | Web Design Ledger
    November 24, 2009

    [...] If you want to learn more about typography, we’ve compiled a list of great sites about the subject, and we’ve also go a list of tools to help you with typography on the web. [...]

    Reply
  23. Dan Mitchell
    November 27, 2009

    Great stuff! Chicken Dinner!

    Reply
  24. Nilimesh
    January 20, 2010

    “This is a best station for such kind of articles,your site is a inspiration for me.
    i got so much benefits and good results after visiting here and the grace is increasing
    day by day in your posts”
    the above information is extremly essential……

    Reply
  25. Ruben
    January 24, 2010

    TypeDNA offer a lot of cool font tools. http://www.typedna.com they have font recognition, font manager and the coolest plugins for Adobe CS!

    Reply
  26. mysuperwoofer
    July 15, 2010

    thanks for these 14 online typography tools, I think it will very useful for online editing.

    Reply
  27. Chris Brown
    June 18, 2011

    I think that good online typography will be the next big thing in the next five years. It will massively change the look of the internet forever.

    Reply
  28. Design Nirvana
    April 16, 2013

    Very useful st of tools… Thanks for this wonderful roundup.

    Reply

Leave a Reply