39 Cutting-Edge Web Typography Tools | HOW Interactive Design

A lot of the current hype about web typography is centered around the ways of embedding custom type in websites. But there’s much more going on to be excited about. Developers are building lots of incredible things, and I’ve collected here what I believe are best web type tools around. If you’re a designer new to the web, this resource can help you capitalize on the progress the industry is making. (And only learn JavaScript if you really want to.) Long gone are the days of web-safe fonts. Consider yourself typographically liberated.

6 Steps to Better Web Typography

In Jason Cranford Teague’s design tutorial, you’ll learn how to find, choose and use web fonts that suit your projects best. Download it today!

Typography and JavaScript

JavaScript lets you control your web typography in a way that wasn’t possible 10 years ago. Some of these tools are built on jQuery, and all of them let you implement great effects while still keeping your code manageable.

Lettering.js

This slick plugin allows custom control of individual letters. Want to custom kern large, bold text? This is the plugin for you.

FitText

If you’re working with a responsive layout that resizes itself to fit various devices, FitText will save the day. This easy-to-use plugin will scale your text, allowing you to keep your text easily editable.

Kerning.js

While very similar to Lettering.js, Kerning.js offers up some unique options. If you want total control over your type, I highly encourage you to try this plugin.

Airport

Airport allows you to reveal text using a flickering effect, much like you would see on an airport flight status board.

Shuffle Letters

With this plugin you can reveal text via a sequence of random letters that ends with the correct letter, creating a shuffle effect.

SlabText

A popular style in print design is to have large bold text that fills a space. With this plugin you can automagically format text as a beautiful set of slab text.

textualizer

This interesting plugin creates a cool transition between blocks of text by animating individual letters in and out.

Arctext.js

While it’s super easy to put text on a curve in Photoshop or Illustrator, it isn’t nearly as simple in HTML and CSS. This great resource allows you to convert live HTML text into curved blocks of type.

Rotating Words

Another incredibly specific plugin: You can flag a specific word or set of words to rotate though a series of options. Might be great for a main home page marketing blurb, for example.

jqIso Text

While this effect isn’t the most beautiful, if you need to do it, this plugin will be a huge timesaver.

jQuery Glow

This jQuery plugin easily creates animated-on-hover text that seems to glow.

Big Text

Very similar to the FitText plugin, this alternative has some additional sizing and orientation options that make it an appealing alternative.

WebTypographyForTheLonely.com

This collection of custom text styles produces some really beautiful interactive text effects. Still not super common, interactive text can give your page extra oomph.

Typesetting

If you’re writing the CSS for the type on your website, these tools are helpful for visualizing and tweaking your desired type styles.

CSStypeset.com

lamb.cc/typograph

Bookmarklets

Bookmarklets are indispensable when working on the web. Basically, a bookmarklet is a favorite you save in your browser. But instead of simply linking to a page, the bookmarklet contains JavaScript that’s executed on the page you’re currently viewing in your browser.

WhatFont

When you’re looking at a website and want to know what font was used, you can inspect the source code to try and figure it out, but why not use this super simple bookmarklet instead? You get all the juicy details in one nice organized block.

Fount

Another font-inspecting tool that can be a nice alternative to WhatFont.

ffffallback

When writing CSS we can specify a list of fonts for any set of text. This way, if the user doesn’t have the first font, the page renders using the next one on the list. But how do you test these backup fonts? With ffffallback, of course!

Font services

Services that dynamically inject custom fonts into your website are dead simple to use and offer up thousands of font choices. These are the best options for web font services:

Defaults and frameworks

The web design community produces powerful frameworks, but few of these are really focused on designers. These resources provides tools to help you make beautiful things very quickly.

Typography CSS Boilerplate

Need a quick set of CSS to setup a great set of default type styles? This is a perfect place to start.

BaselineCSS.com

Quickly build a grid based site with delicious typography.

Atatonic

While I prefer BaselineCSS, this is another solid option with some additional options.

Icon fonts

Another interesting trend in the industry is to use icon fonts. These are fonts that have vector icons embedded in them. There are pros and cons to using icon fonts:

The icons can scale to any size because they’re vector-based
You can make them any color—but they can only be a single color
You can style them with drop shadows, borders and any other CSS tricks you can apply to text
They can accept CSS transitions and transforms

Some notable icon font sets include:

Coding

Finally, are a couple helpful tools for serious coding. These might not be everyday resources, but if you need to write custom script against text for formatting or other purposes, these two utilities will be very useful: