9 Free Typography Tools You Didn’t Know You Needed

Oct 6, 2017 // Henry Brown

As I write this, there are just over 26,000 webfonts on MyFonts.com. New ones are cropping up every day.

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.

  

screencast-small.gif

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.

Typography-Tools-Google-Fonts.jpg

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.

Typography-Tools-AdobeTypeKit.jpg

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…

What the Font

Myfonts’ What the Font tool offers a database search based on an image of a font, along with suggestions for taking the best screenshots.

Typography-Tools-WhatTheFont.jpg

In case the image service doesn’t work, What the Font also has a forum full of typeface experts for tougher fonts.

Identifont

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.

Typography-Tools-Identifont.jpg

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.

Typography-Tools-WhatFont.jpg

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.

Typography-Tools-Mixfont.jpg

MixFont also has a rated collection of the most popular pairs, for your browsing pleasure. So if you’re stuck, pick your initial fonts and see what MixFont suggests.

Canva Font Combinations

Canva’s Font Combinations draw inspiration from around the web. Based on the initial font you select, the tool picks a set of possible matches and corresponding sample screenshots as evidence.

Typography-Tools-Canva.jpg

The combination might not be what first comes to mind, but might give you an idea or direction for future use.


Typ.io

Typ.io is a database of other designers’ font pairings, and it’s a great source of information and inspiration for finding out which fonts work well with others.

Typography-Tools-Typio.jpg

Think of it liked a crowdsourced version of Canva’s Font Combinations tool.

Final Thoughts

Don’t get caught up by the sheer volume of new fonts.

Leverage these tools to make the most of your time and help you make smart font selection choices with the experience these sites will bring to your design game.

As you experiment with all your new fonts, you can manage them either through your web services, or locally with services like FontBase, or Typeface.

Be creative, take your time, and have fun customizing your website’s typography!

 Build a website with PageCloud's website builder

Frustrated by font management when building websites? See how PageCloud makes adding fonts to a website as easy as copy + paste. Start your free trial today.

Rubik Cubes make a perfect gift for any occasion. Learn more about this entertaining puzzle visiting ruwix.com.

PUBLISHED:Oct 6, 2017

Web Design, Website Creator, Apps and Integrations, Online Tips

Get Expert Tips to Improve your Website