Typography on the web has previously been confined to a set of web-safe fonts due to their dependance of being on every computer but now that has changed. It’s one of the most satisfying and rewarding aspects of web design when you get it right but can also be one of the most difficult to do so. Here are some tools, resources and free fonts to help you on your quest for quality typography.
Font Embedding
Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.
@font-face
Advantages:
- Easy to setup (see previous post)
- Behaves exactly the same as regular text
- Even works in IE6+ (albeit through Microsoft’s proprietary format)
Disadvantages:
- Limited use of fonts due to no form of copy protection
TypeKit
Advantages:
- Huge selection of commercial fonts to choose from
- All the benefits of @font-face but with copy protection
Disadvantages:
- You don’t own the font for use in Photoshop designs etc.
- Relies on JavaScript
- Isn’t free (although it isn’t expensive)
Typotheque
Advantages:
- Doesn’t use JavaScrip, only CSS
- All the benefits of @font-face but with copy protection
Disadvantages:
- Seemingly expensive
Cufon
Advantages:
- Works across all browsers
Disadvantages:
- Requires JavaScript
- Can’t select text
sIFR
Advantages:
- Works across all browsers
Disadvantages:
- Requires Flash
Font Discovery
WhatTheFont
Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.
MyFonts
MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.
FontShop
Online font store founded by extremely well respected typographer and designer Erik Spiekermann.
I Love Typography
You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.
Education
Typedia
As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.
Free Fonts
Fonts available for @font-face embedding
You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.
The League of Moveable Type
The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.
exljbris Font Foundry
Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.
dafont
On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.
Font Squirrel’s Free @font-face Kits
A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.
One more thing…
Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.
Tweet
Thanks for this. Lately I have neglected my typography when designing so it’s good to have a article that reminds you of its importance. Also, I’m loving that Dafont link. Thanks.
Ascender Fonts have a CSS-only solution as well: http://www.ascenderfonts.com/webfonts/
Nice article, thanks.
There has been a lot of talk about web fonts lately, but what I kind of miss is even just a basic article on how and when to use which font. Yes, I know sans serif is better for on-screen texts and I also know a lot of the art of using fonts (as is the art of anything else design-related) is not easily told in a single article. Still, there must be some basic principles people could/should keep in mind when working with fonts. I’d love an article on that somewhere/sometime
Looks like I overlooked typedia. Will start there
One big disadvantage you’ve overlooked is the the rise of fancy type abuse that is showing up everywhere. While I love to use these technologies for headers and such (simple @font-face with open source fonts) I can’t stand seeing sites that put everything in a novelty font these days. I hear now even WordPress has a plugin ready…
One source you might add is A Way Back’s font stack article which shows some decent options with more regularly installed fonts: http://www.awayback.com/revised-font-stack/
Still, good roundup article. I did take away something from it. Cheers.
I agree with you totally Nils and it was something I overlooked. Remember to use fonts responsibly!
Hey there, I just wanted to add Kernest as a kick ass, free and css only font service that I have been very very happy with.
Nice article Tom, thanks
good tips for every webdesigner. Now i love sans serif fonts for my project. Also i playing with spacing and bolding. My fav fonts are Diavlo, Oceania, Antigoni and Comfortaa http://www.fonts2u.com/comfortaa.font
Nice post. Great selection of resources. My del.icio.us just got bombarded with bookmarks! There are so many top quality free fonts out there these days. People are finally beginning to realise it’s not about quantity!
There is a number of articles describing a CSS method, in which you specify your non-standard font in several formats, so it suits all browsers. Well, except Firefox 2 and Opera 9, if anyone still uses them.
For this method I use http://www.fontsquirrel.com/fontface/generator. You just upload your font, and it generates all needed formats and a style-sheet.
Great article! I love seeing non-standard fonts on the web
Nice post. I’ve recently started using Typekit for my portfolio website and while I think the services you mentioned above are fantastic for allowing the designer to be more creative, personally the only disappointment I have is being a mac user and seeing the way fonts can render always seems disappointing when I look at my website in Internet Explorer.
I love typography…