2.3 Awesome Font Stacks

Typography is one of the fundamental aspects of any web page. It determines how that page will look like, and let's face, if you have a poor choice of fonts, then whatever it is you're making will look bad. For example, imagine using Comic Sans for an entire website. That's probably taken to the extreme but you get my point. On top of that you have to ensure some sort of cross browser compatibility for your fonts. This is where font stacks come in. Basically, in CSS you can specify a list of fonts the browser can use to render text. Now depending on whether or not the visitor has those fonts installed will determine how the page will eventually be rendered. So let me give you an example of a typical font stack and how it works. So let's jump back to our code editor. I have some simple paragraphs here and I'm just gonna target the body, right. So we're gonna say font family, we'll do Helvetica, Arial, let's also do Lucida Grande, and sans-serif. Alright, save, and now the font is Helvetica. Now how exactly does this work? Well, the browser will read from left to right. So first a rendered font using Helvetica. If the visitor has Helvetica installed, it's all good. If not, move on to the next font, which is Arial. If he doesn't have Arial installed, move to Lucida Grande. If he doesn't have Lucida Grande, then move to the first sans-serif font he can find. And this is a great approach because by doing it, you ensure you keep a consistency with your fonts, no matter what browser is being used. Right, you won't have any funny looking fonts as long as you provide the proper fallback. Right, this is for example Arial. This is called a fallback. So if Helvetica isn't there, fall back onto Arial. However, you can take this a step further. And I'm gonna give you an example for the Helvetica font. So let's label this as before and after. Right, so again, body, font family, and let's start with the typical font stack we have here, all right? And work our way backwards. We're gonna add Helvetica Neue and then we're gonna add another one that says Helvetica Neue Light and then the last one, which is HelveticaNeue-Light. These are all variations basically of the same font. But what happens is, it first searches for the HelveticaNeue-Light, this variation, and then moves on to this if the previous one is not found, then to normal Helvetica Neue, Helvetica, Arial, and and so on. On top of that, let's add a font weight of 300. So we'll make the font really thin. So as you can see this kind of changes this entire page. The font is now smoother, lighter, and just better looking over all. Now, there are loads of font stacks you can use. A simple Google search for font stack or font stacks example will give you a bunch of results which you can use in your own projects.