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 10 resources that can prove to be useful in your own work. Some of them are free and others are commercial.
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.
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.
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 $ 24.99 per year, or if you are a Creative Cloud member you can access it through your account.
Fontdeck is another option for getting more font choices for your web design projects. They offer a library of thousands of professionally-designed fonts available for their users, and implementing fonts to a website is easy using @font-face. You can preview fonts on your site and pay only for fonts that you need. Pricing starts at $ 2.50 per year per font with the typical price being $ 7.50 per year per font.
Webtype, like Fontdeck and Typefkit, is another premium option for using professional fonts in your web designs. They offer an impressive library of fonts, and a free one-month trial. Pricing then starts at $ 20 per year per font, and can go up depending on the number of pageviews. 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.
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 23,000 different web fonts and compare fonts side by side. Typecast will create the CSS to be used in your web designs. Pricing starts at $ 29 per month, which includes a free fonts.com subscription.
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 speficy 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.
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.
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.
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.