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!
This slick plugin allows custom control of individual letters. Want to custom kern large, bold text? This is the plugin for you.
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.
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 allows you to reveal text using a flickering effect, much like you would see on an airport flight status board.
With this plugin you can reveal text via a sequence of random letters that ends with the correct letter, creating a shuffle effect.
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.
This interesting plugin creates a cool transition between blocks of text by animating individual letters in and out.
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.
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.
While this effect isn’t the most beautiful, if you need to do it, this plugin will be a huge timesaver.
This jQuery plugin easily creates animated-on-hover text that seems to glow.
Very similar to the FitText plugin, this alternative has some additional sizing and orientation options that make it an appealing alternative.
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.
If you’re writing the CSS for the type on your website, these tools are helpful for visualizing and tweaking your desired type styles.
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.
Another font-inspecting tool that can be a nice alternative to WhatFont.
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!
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.
Need a quick set of CSS to setup a great set of default type styles? This is a perfect place to start.
Quickly build a grid based site with delicious typography.
While I prefer BaselineCSS, this is another solid option with some additional options.
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:
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: