12 typography resources to enhance your projects

When you first start a new project – what font do you use?

Typography can be one of the most overlooked parts of your own web projects and a good font can make your site instantly look awesome.

If you rely on using the fonts that a visitor has access to (think Arial, Helvetica, Garamond) then you are limiting yourself to fairly un-exciting styles.

I do quite like Garamond though.

What you can do instead, is use a web-font which is basically a font you load yourself.

With the @font-face CSS rule being widely supported for a while now it’s pretty easy to get creative with your type.

But where’s the best place to get fonts for web pages?

There are loads of places to get fonts; some of the good, some not so good.

There are also different approaches to accessing fonts which can be categorised in two ways:

• Download the font
• Use a web font service

The first option gives you the best selection as any font you can download can be used in your projects. The only downside is that you need to copy the font to your project directory and link it via CSS. Not complicated, but another bit of work to do.

Web font services, embed the font to your web pages usually via a piece of JavaScript. This makes it much easier to get using custom fonts on your site and usually provides better compatibility and performance.

I have selected the following resources as I think they are the most useful for someone learning to code. They are mostly free and i’ve noted whethere they offer either a web font service or a download site.

Enjoy!

1. Google Fonts

Type: Web font service
Price: Free

You know this one right?

Google Fonts is such an awesome place to find free web fonts for your projects. It falls in to the second category of font providers I mentioned above. That is you simply embed the fonts directly from Google without having to download them.

With 815 fonts currently available there’s a huge selection covering professional and fun designs. There are some cool new ones recently added such as Overpass.

Some of the fonts may be a bit dull for some uses but there are some real workhorse fonts that will make your projects look professional without spending a penny.

2. Adobe Edge Web Fonts

Type: Web font service
Price: Free

A service provided by Adobe is the totally free Edge Web Fonts. This is kinda like Adobe’s version of Google Fonts – no account required, just embed the required scripts to access their fonts.

With over 500 fonts available, you can find some alternatives to quickly style your web pages. Maybe the quality is not quite up to the standard you’ll find on Typekit but definitely worth a look if you want to move past an overused Google Font.

3. Typekit

Type: Web font service
Price: Free accounts (upgrade for $49.99 a year)

Typekit is a premium service provided by Adobe which also provides font embedding to make it easy to add some style to your projects. If you couldn’t find something from Google Fonts or Edge Web Fonts then this is the next best place to look.

You need to create an account to access the fonts and there is a free subscription where you can access 940+ fonts. Alternatively, you can upgrade your account and pay $49.99 per year to acccess 5660+ fonts.

Although the upgrade is quite reasonable I think the free account is sufficient for your personal projects. The only problem is you’re only allowed to use their fonts on one website unless you upgrade.

4. Font Squirrel

Type: Downloads
Price: Free & paid for (various prices)

FontSquirrel is a large resource for fonts that can be downloaded to your computer and then used in your projects.

In order to use the fonts, you’ll need to download a zip file which contains a particular font file e.g. OTF / TTF. These then need to be copied in to your project directory and linked to in your css.

The only problem with FontSquirrel is that even though the headline on the site says ‘100% for commerical use’ some are not quite that free.

For a lot of the fonts you are directed to another website to acess and download the font. For example, clicking on the Acherus Grotesque font takes you to an external site which requires payment to get the font.

5. The League of Moveable Type

Type: Download
Price: Free

Although it doesn’t have a huge selection, all of the Fonts from the The League of Moveable Type site are completely free to download and use.

The fonts are subject to the Open Font License which means they can be used freely, modified etc.

The fonts are laid out nicely on the home page giving you an idea on how they might be used in a project. There is a quick download button on each individual font’s page once you have selected one from the home page.

6. Fonts.com

Type: Web font service
Price: Free accounts (with limitations) or premium upgrades

You can get 3000 web fonts for free at Fonts.com and it works by embedding them directly in your web pages rather than having to download anything.

There are a couple of snags with this free account though.

First, you can only apply the fonts to two web projects. The other is that you need to display a ‘site badge’ to the pages where you use the fonts. It’s like an attribution, some recognition that you’re cheap and don’t want to pay for your fonts!

They do offer upgrades for a few dollars / pounds per month to remove this badge and also permit more projects, should you like their fonts.

7. Losttype

Type: Download
Price: Pay what you want (for personal projects)

If you are looking for some more exotic fonts then Losttype is a good place to look.

All the fonts are nicely presented in a way in which you might like to use them. The fonts are subject to fees if you are going to use them in a commercial project.

Alternatively, if it’s just for a personal project then you can ‘pay what you want’ to access each font.

Once you’ve downloaded your font, you’ll need to copy it and link it in your project.

8. Font Fabric

Type: Download
Price: Various prices

Despite the slightly clunky layout there are some exceptional fonts at Font Fabric.

Unfortunately it can be a bit like a needle in a haystack if you are looking to find a completely free font. A lot of the fonts, even when they appear free, link to external websites which then have their own fees applied.

Still, if you are prepared to sort through or pay a small amount (the Madelyn font is $17) for an beautiful font then it’s worth taking a look.

9. Font Spring

Type: Download
Price: Various prices (some free)

At Font Spring you can download a wide selection of fonts. There is also a handy search facility if you know the name of a font you are after.

Most of the fonts will cost you around $20-25 to download however a lot of them have a couple of free version that you can download. For example, you might get a font that has 16 styles and 2 of them with a particular font weight will be free to download.

If you have time to look through, definitely worth a look through.

10. Da Font

Type: Download
Price: Free (for personal projects)

There is an awesome selection of more outlandish fonts to download at Da Font. You can search or browse by category.

They are pretty much all free for any of your personal projects but it’s probably worth quickly checking the license file that comes included with the downloaded font.

If you want to use them in commercial projects then it can be a bit tricky to work out if you are permitted to. You’ll need to figure out how to pay for it or contact the author if you’re not sure which you are kinda left on your own to do!

11. Hype For Type

Type: Downloads
Price: Various prices (some free)

There is a great selection of contemporary and modern fonts at Hype For Type. Prices are typically in the range of $20-$30 (£15-£25).

Similar to Font Spring, there are some free versions available and you can sort fonts by price to find these on the site.

12. Urban Fonts

Type: Download
Price: Free (for personal projects)

There are some more creative, display and handwriting style fonts available at Urban Fonts.

There is a direct download to the fonts which in a similar way to Da Font, are free for personal use however there may be a donation if you want to use them comercially.

You can check how to pay for the fonts if you need to by reading the included license file that comes with each font.

Conclusion

There are hundreds of places to access fonts on the web but the above list represents the most useful resources for your personal projects.

Are you working on commercial projects for customers?

Lucky you!

If you are building sites for clients then probably the most cost effective service available to do give you a wide selection of premium fonts is Typekit. That way you don’t need to worry that your not licensed to use that font.

You might want to budget for the purchasing of some fonts in the same way you might budget for images when providing a quote to a customer.

Have you got an awesome font resource you like to use? Share it below!