I was working on a web application with a visual designer. He handed off the design for the site to me and it looked killer. I went ahead and coded the change up in HTML & CSS. When I thought I was done, I was super stoked and I showed it to him. His response?
That’s completely wrong.
The one thing I had skipped was getting the fonts to match the mock-ups perfectly. It was a big enough of a problem he called me out on it. How do I fix it?
I have no idea, but it’s wrong how it is now.
I’ve spent a long time working on different websites, and since working with this particular designer I started to focus my attention on a handful of small, but important details. Among them, fonts.
As a little bit of background, all websites and web applications are built up of a combination of HTML and CSS. If you don’t have any experience building HTML webpages by hand, you may want to get your hands dirty with this free, hands-on intro course that we built to give people a good feel for the basics of what makes up a web site.
Here’s everything I wish my visual designer taught me
Font Specifications
The easiest way to change a font is to adjust the font-family CSS property of the item to specify the font to use. It will pull it from on the user’s computer, and is something most web developers are familiar with. There’s a ball park of 12 fonts give or take that are commonplace enough you can use on websites safely. Among them is Comic Sans, so I guess that means there’s around 11 fonts you could potentially want to use.
If you’re limited to a dozen fonts, you don’t have a ton of room for variation. If you’re clever though and adjust the weight of the font (either super light, bold, or normal) and letter-spacing you can make your site look passable. For example if you play with it, super bold, and a negative letter-spacing will give your font a professional but cartoony look to it. Super light will make the page look crisp.
Another trick that will get your fonts looking better is the CSS property for text-shadow.
Here’s an example of specifying the font to the Helvetica and adjusting the font to be super thin.
Note – the examples of the font changes in the wild come from the step-by-step beginner-friendly guide to building the Nomster Application we put together.
Font Stacks
When you specify fonts, you can specify them in the order of importance, and if the font isn’t available it will fallback to a lesser preferred one. You could go through all the fonts that exist on all machines across different operating systems and come up with font-stacks that are reasonably consistent yourself. Lucky for us, other people have done the hard work for us, and we can use the font stacks they’ve developed. Here’s a few:
CSS Tricks – Font Stacks – this has a list of 8 font stacks you can test out. If you grab one of these font stacks from CSS Tricks, you’re guaranteed your site won’t look like you’re designing websites back in 1995.
CSSFontStack.com – is another website that has a lot more (~40) font stacks you can try out.
Also if you search around Google around you can see a handful of different font stacks that will suit your needs.
Here’s an example of the “modern Georgia-based serif font stack” from CSS tricks we used on our Nomster web application. This is one of my favorite font stacks to use on websites to encourage readability.
Loading in a specific web font
It’s possible to find specific fonts and pull them into your application and use them on the text a website. This means instead of having to fallback to a “close enough” font, you can always use the exact font you want. There are a couple of different ways you can go about this.
Hosted Font Services
There are a few things that are tricky when it comes to loading a font from a file into your website. The hosted web services out there do all the heavy lifting for you. Some of them for free, some require you to pay.
Google Web Fonts (free) – is a directory of fonts to use that are hosted and ready to pull into your web application. Getting these fonts into your application is a breeze. Follow the step-by-step instructions and you’ll be using these specific fonts in your application in no time.
For example, if you want to use the font Garamond in your application, it’s not websafe, and font-stacks will be a little inconsistent across browsers, but if you use the font “EB Garamond” from Google Fonts, everyone who sees your application will see the same font.
So if Google Web Fonts is free, easy to use and will give you a consistent look across all different browsers, why would anyone consider using an alternative? Well, Google Fonts will only accept fonts that have a very open and permissive license. Since building fonts is hard work, there are a lot of really killer font foundries out there that are license that restricts it from being in Google Fonts, but still could be pulled into your application.
TypeKit – this is a website you shouldn’t even go to. Trust me don’t look around there, you’ll regret it. Why you ask? The fonts there are so good, and it’s hosted so it’s (presumably – I’ve never used it first hand) as easy to add to your website as Google Fonts. The down side is you have to pay a subscription for access. They have a free trial version if you add a TypeKit badge to the site, and have plans starting at $25/year, and go up to $100/year.
Keep this one a secret from your visual designer, otherwise they’ll convince you to buy a subscription!
Don’t be fooled. There are a ton of different font hosting services out there. Google Fonts is the most popular free service out there and TypeKit is one of the most popular paid services out there. Check out this (slightly dated) comparison of the different font embedding services out there from 2010. Most of the companies are still around, but a lot of the details have changed.
Self hosting fonts
This is a trickier situation. The complicated part of dealing with the fonts all yourself isn’t the technical aspect but understanding all the font licensing details and legal implications.
When we load the fonts directly from the user’s machine, or use a hosted service we don’t have to worry about the legal implication of using a font. All we need to do is drop a couple lines of CSS in our application and the font is there. If we’re going to self-host our fonts we’re going to have to deal with the nitty gritty details.
A high level overview of what you’ll need to do is provide the browser a place to find the font file (or multiple versions of the font files), and then give it information about the name, etc. There are a few different versions font files that depending on how you get the font you could potentially have. The most common ones are: eot, otf, woff, ttf, svg. Different browsers are better at rendering different versions of fonts, so it’s encouraged that you provide multiple versions to keep everyone’s browser happy.
So the first step is to convert a single font file (for example a *.ttf) into all then corresponding font types you can (*.otf, *.svg, etc), and then providing a place that the browser can download and use the fonts from.
Here’s where things get dicey. Since you’re giving everyone in the world access to download the font from your website, as soon as you pull it onto your site, there’s nothing stopping anyone else from just downloading and pulling the fonts onto their computer, or website (technically speaking, not legally). This means that a lot of font developers are reluctant to give people permission to use the font they built on websites.
So if you’re looking to download a font to put on your website you’re going to want to look for something that is licensed to be a web font (not a desktop font).
FontSquirrel – This is one of my favorite sites to get free fonts from. They have a handful of super high quality free fonts on their main page (and they have the font license restrictions clear from the font that you select).
Another awesome tool with FontSquirrel is their WebFont Generator. If you upload a single font file to them, they’ll automatically convert it to all the other types you need as well as give you the CSS code you’ll be able to drop right into your website. You can even use their WebFont generator with fonts that you grab from other sources.
In addition to free fonts, FontSquirrel sells a ton more fonts.
These are solid fonts. Here’s an example of their font “Pacifico” out in the wild on the Nomster application:
MyFonts.com is another example of a font website that will give you some fonts for free (but it will charge for most fonts). If you do a search for web font support and some free – you’ll see a list of fonts. Almost all of them require you to pay, but there will be a few font weights or styles that they offer for free. Depending on your luck you might be able to find something awesome.
TheLeagueOfMovableType has a handful of solid opensource, and ready for the web fonts out there you can use (with the FontSquirrel WebFont Generator) you can add to your website no problemo.
The three most important things you should know about fonts…
- The fonts you use will be the difference between a slick, polished, professional looking website and just a decent looking site. Take your take and get the fonts right.
- There are a bunch of different ways you can load in fonts to your web application.
- While looking sleek and awesome is important, whats more important is that people can actually read the words you write. After you learn everything you need to use awesome fonts, take a step back and make sure people can read what you want them to.
Happy hacking, font geeks!
