9 Free Typography Tools You Didn’t Know You Needed

That’s quite a leap from the early days of HTML, when browsers could only display a few fonts like Arial, Helvetica, and Times New Roman.

Fortunately, amidst the thousands of fonts, there are also several resources that filter fonts, spark your imagination, and connect you with the best ones for your website.

Whether it’s displaying fonts, identifying the fonts you love, or figuring out how best to combine your typeface choices, working with fonts can be easier — and cheaper — than you might think. Let’s dive right into it!

The 9 Tools

Spoiler Alert: If you’re already in design, you’ll likely know how to display webfonts — so skip ahead to #3!

How to Display Fonts on Your Website

In order to use beautiful fonts on your site, you need to find them first. Conveniently, there are two major databases full of magnificent, beautiful fonts, and they are both easy to access and use.

Google Fonts

Google Fonts has over 800 fonts that are free to use, and they host the actual fonts — which means you can display them across your sites with minimal bandwidth issues. You can plug your new, open-source fonts into your site very quickly and easily.

Some website builders allow for a quick and easy HTML copy and paste, or drag and drop, for maximum efficiency. Check out Type Hero, a tool that enables you to test out any Google Font with more white space and customizations.

Adobe TypeKit

Adobe’s TypeKit collection is extremely powerful, with many more fonts to choose from than Google Fonts. In order to access the database, simply create a TypeKit account, build your kit, and select the fonts you’d like for your site.

Once you name the kit and attach your domains, you’re good to start working with TypeKit’s fonts. Then it’s a simple matter of embedding the code on each page that requires the fonts (similar to Google Fonts).

How to Identify Fonts You Like

If you have a cool font idea in mind, the odds are that you came across a site that uses it, but you might not know what it’s called, or where the typeface comes from. Fortunately, there are resources available to help sift through the murk and solve this issue…

With a comprehensive set of search functions, Indentifont offers to help you find your typeface by looking at names, similar fonts, appearances, pictures, or publishers. Identifont lists their most popular fonts, as well as newer typefaces.

If you have an idea for a font you want, but not the actual typeface, this handy search engine might be worth your while. Be sure to check out their free fonts section, too.

WhatFont

Independent developer Chengyin Liu created the WhatFont app (Bookmarklet, Chrome Extension, or Safari Extension) so everyone can easily figure out a website’s fonts. He also created a mobile app.

The tool is simple: Click the section with your mystery font, and the tool will tell you its name. Additionally, this tool will tell you the family that the font is from, so you have to option to search a collection related to a font you like rather than taking directly from it.

In recent updates, WhatFont now displays the font provider, like Google Fonts or Adobe TypeKit, to further ease the process. This tool is a fast, efficient way to quickly find and source fonts that catch your eye.

Type Sample

Similar to WhatFont, Type Sample allows for painless identifying and sampling of webfonts through a bookmarklet or an extension. This tool can be used for casually pinning fonts you like as you browse, just to make sure that you don’t forget any of your favourites.

How to Pair Fonts Together

Matching fonts up is no easy task. Whether you want to stick with the same font families, or match serif and sans, the possibilities are endless. We’d previously talked about pairing fonts, but here are some tools to make the pairing process easier:

MixFont

MixFont pairs random fonts with each other to give you an idea of how they might work together. The site’s generated pairs can be somewhat eclectic, but it’s got an easy swap tool and embedding devices in the toolbar.