If you’re a web designer this scenario probably sounds familiar… You’ve met with your client and they clearly state that they’re looking for a “clean“, “simple” design that feels modern and business-like. And why shouldn’t they want this? 9 times out of 10, I agree with them (though not always… truly daring design still has its place when used correctly).
As designers, this puts us in a bit of a bind. They’ve hired us to do something unique and compelling, but also want it to be clean and simple. In these cases I usually lean on the following major design elements: Photography (and or illustration), color, and typography.
Today, we’re focusing on typography.
In the earlier days of web design we were limited to Arial, Times New Roman, Georgia and a handful of others for HTML text. These were referred to as “web safe” fonts. Anything beyond that had to be converted to a graphic first which obviously hurt the ability to keep a site updated (among other things).
Of the many things included in the HTML5 spec, CSS3 support is one of my favorites. One thing really nice about it, is that though many features of HTML5 are still in a “use at your own risk” era, pretty much ALL modern browsers support CSS3 and more specifically the @font-face property (which allows you to embed custom fonts).
Of course with any new technology there are inherent things to watch out for. The two primary things with using custom fonts are:
File Size: Though bandwidth today is less of a concern then it was 10 years ago we still shoot to make the most efficient web sites possible. Using custom fonts means that a user’s browser has to download the entire typeface before it can display. In addition to this different browsers need different file formats (don’t get me started on the browser wars…) so each typeface does add some load time. So while many typefaces include 5+ versions I usually try to keep to no more then 3 (example a regular version, a bold version, and an italic version).
Legality: The other overarching issue that comes in to place is legality. Before using a custom font for on your website you need to check with the font foundry to make sure it’s licensed for embedding into a website. The good news hear is that there are now plenty of free and open source fonts available.
While there are now a few techniques available for embedding custom fonts I want to talk about my two favorite.
1. Font Squirrel
Was one of the early @font-face resources on the internet and has a library of free to use fonts on their site. They have nice categorization and keep tallies of the most popular fonts. However, the most powerful thing about Font Squirrel isn’t the free fonts they have available but rather the “@font-face Generator” which allows you to build custom font kits from fonts you upload. These fonts can be from Font Squirrel or any other site so long as they are in OpenType or TrueType (oh and licensed to embed of course). In the case of Font Squirrel font kits are place on your web server and loaded directly from there.
2. Google Web Fonts
Is there any web technology that Google ISN’T involved with these days? I’m not sure, but what I am sure of its that Google Web Fonts is an excellent (and free) service. Unlike Font Squirrel there is not a font kit generator so you’re limited to using what’s available on their site. However the library is ever-growing and a nice advantage to using Google Web Fonts is that they host the actual files so you get to piggy back on their lightning fast servers.
The free version of fonts.com webfont plan has over 3,000 fonts available (400+ of them are hand-turned by their typography experts). The font has no limitations and you can use it on any number of sites you would like. The caveats with the free version are that you must display the fonts.com badge and your website traffic is limited to 25K page views per month.
4. Adobe Edge Web Fonts
With a vast font library, backed by Adobe and Google, this free service is a great option if you’re already using the other Adobe Edge products. But even better, the fonts aren’t just limited to the use of edge tools. Nope, you’re free to use your font with any tool you would like!
Topics: Demand Generation