10 Super Useful Tools for Better Web Typography

By / Oct 17, 2013 / Tools
shares

It’s been said that web design is 95% typography. So as a web designer, getting the typography right is a must. Today with the growing popularity of web fonts and modern CSS techniques, this task has become easier, but it never hurts to have all the help you can get with something so critical. That’s why we’ve rounded up some useful tools to help you create better web typography.

Typewolf

Typewolf is a curated design showcase that identifies the fonts used in the design. Our goal is to serve as a one-stop resource for designers seeking typographic inspiration for the modern web.

10 Tools for Better Web Typography

Tiff

A type diff tool that visually contrasts the differences between two fonts.

10 Tools for Better Web Typography

TypeWonder

TypeWonder helps you to test web fonts on any website on the fly!

10 Tools for Better Web Typography

FFFFALLBACK

Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

10 Tools for Better Web Typography

Fontdeck

Fontdeck is standards compliant, accessible and uses a pure CSS @font-face solution. No JavaScript required.

10 Tools for Better Web Typography

Typecast

Use Typecast to create visual and semantic designs. Check for readability, rendering and beauty then share a working prototype of your design.

10 Tools for Better Web Typography

FontFriend

Font­Friend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.

10 Tools for Better Web Typography

Typekit

The easiest way to use real fonts on your website.

10 Tools for Better Web Typography

WhatFont

WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.

10 Tools for Better Web Typography

Font Combinator

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

10 Tools for Better Web Typography

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.

7 Comments

  1. Dana Rockel
    October 17, 2013

    Another typography tool I like to refer to is the Interactive Guide to Blog Typography – http://www.kaikkonendesign.fi/typography/

    Reply
  2. Michael Greenwood
    October 19, 2013

    Very useful typography tools. Thanks a lot Web Design Ledger!

    Reply
  3. desmondthompson
    October 24, 2013

    these are very useful online tools for sourcing that perfect font for your web project. Nice share!

    Reply
  4. Ceba
    October 30, 2013

    Handy list, would definitely give a try to it.

    Reply
  5. Kreativ Font
    November 1, 2013

    Useful tools, so I knew some I didn’t. TypeWonder is great :)

    Also, have you seen WhatFonIs (www.whatfontis.com)? It’s has the ability of recognizing fonts from pictures … ;)

    Reply
  6. Barata
    November 12, 2013

    I’ve tried Typecast and Font Combinator – it’s a great tools. You may try http://www.fooont.com- You can download a free CSS Code for font combinations.

    Reply
  7. Erica
    January 10, 2014

    These are great resources! I think typography is one of those fragile elements that can make or break a design.

    Reply

Leave a Reply