Awesome Font and Typography Resources for Web Designers

Fonts and typography are an important part of any web design, and in recent years the possibilities have increased dramatically for web designers. There are a number of great tools and resources out there that can help you in various ways related to web design and typography. In this post we’ll showcase resources that can prove to be useful in your own work. Some of them are free and others are commercial.

Font Squirrel

Font Squirrel is probably the font resource that I use the most in my own work. It is a site where you can download hundreds of free fonts, and best of all, they focus only on fonts that are licensed for commercial use. While there are plenty of sites out there that offer fonts for free download, if you have ever paid much attention to the licensing details you know that many of them are free for personal use only. Just when you think you’ve found the right font for your project it often turns out to be free for personal use only. You can avoid this frustration by using Font Squirrel.

The fonts at Font Squirrel are categorized by type, with categories like serif, sans serif, slab serif, grunge, handdrawn, and more. You can also download @font-face kits for fonts that are licensed accordingly, and they also offer a webfont generator.

Font Squirrel

Google Fonts

Google Fonts is another excellent source for finding fonts that are free to use for your commercial projects. All of the fonts available at Google Fonts are open source, and they have a huge selection, currently over 600 fonts. You can download the fonts to your own computer or you can simply get the code to use them in your web designs. Implementing Google Fonts with a website is very easy, it just involves copying and pasting a few lines of code that they provide.

As you browse through the fonts you can narrow it down by category and by popularity. You can also preview and compare several fonts, which is very handy when you are trying to decide which font to use.

Google Fonts

Typekit

Typekit, by Adobe, will allow you to choose from hundreds of fonts for use in your web design projects. Using the fonts is as easy as adding a line of code. Typekit offers an excellent library of professional fonts that can help to make your web designs look great. To use Typekit you will need a subscription, starting at $49.99 per year, or if you are a Creative Cloud member you can access it through your account.

Typekit

Webtype

Webtype, like Fontdeck and Typefkit, is another premium option for using professional fonts in your web designs. Webtype offers quick and easy setup, and they also have a pretty interesting Font Swapper tool. With Font Swapper you can preview how websites will look with different fonts from Webtype.

Webtype

Typecast

Typecast is a helpful app that allows you to quickly style type in the browser, checking for readability, rendering, and beauty. You can choose from 90,000 different web fonts and compare fonts side by side. Typecast will create the CSS to be used in your web designs.

Typecast

WhatTheFont

WhatTheFont is an excellent resource for identifying fonts. If there is an image that uses a font and you would like to know what that font is, you can upload the image or specify the URL of the image and WhatTheFont will attempt to identify the font for you. Other options for a similar task include Identifont and What Font Is.

WhatTheFont

Adobe Edge Web Fonts

Adobe Edge Web Fonts is a free hosted service that allows you to add fonts to your websites. It’s powered by Typekit, but without all of the commercial fonts that Typekit users enjoy. Still, it is a viable free option. One of the most noteworthy benefits of using Edge Web Fonts is that it integrates with Adobe’s other Edge tools and services like Edge Animate, Edge Reflow, and Edge Code.

Adobe Edge Web Fonts

Awesome Fontstacks

Awesome Fontstacks is a great free resource that can help to make your font choices easier and quicker. They provide over 600 different font stacks (combinations of fonts) that well-suited for use together. You can select the bundle of fonts that you want to use and download the CSS right from the site. You can also create your own fontstack from the selection of free fonts.

Awesome Fontstacks

Wordmark.it

Wordmark.it is an app (also available as a Google Chrome add-on)  that helps you to choose fonts by allowing you to preview words and phrases using those fonts. You can preview text in any font that is installed on your computer, so if you have a large number of fonts that you’ve downloaded and installed it can be a real time saver.

Wormark.it

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.