100%

Web Typography №1

Websafe Font Stacks

R Proffitt
by Richard Proffitt
iopan design

As Jeffrey Zeldman said “90 percent of design is typography...” That goes for web design too. If you get the text looking well proportioned and well placed then you've almost won the battle. You may have observed, however, that many web pages can use different type depending on which operating system they are viewed on, and worse, it can vary from device to device depending on what fonts are installed on that particular machine.

So how do we avoid or reduce such uncertainty? The common method used is to upload the font files to the server and have the web page import them via your CSS stylesheet, but this will use up some of your valuable bandwidth, slightly slowing down loading times. If the speed of your page-load is very important to you, then you may wish to consider using web-safe font stacks.

What is a Font Stack?

A font stack is a list of fonts in the CSS font-family declaration. The idea is that the fonts you call for are already installed on the users machine. The fonts are listed in order of preference that you would like them to appear on the site in case of a problem like a font missing or not loading. A font stack allows a designer to control the look of the fonts on the web page even if the computer doesn't have the initial font that you called for.

In the following three examples you see the CSS code needed to request the appropriate font, in order of preference.

/* Example 1, The "Sans Serif" Stack */
.sans {
font-family: Arial,Helvetica Neue,Helvetica,sans-serif; }

/* Example 2, The "Serif" Stack */ .serif { font-family: Georgia,Times,Times New Roman,serif; }

/* Example 3, The "Monospace" Stack */ .mono { font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace; }

You can add as many fonts as you'd like, as long as they are separated by a comma. The browser will try to load the first font specified first. If that fails, it will run down the line trying each font until it finds one that it can use. In the first example "Arial" will likely be found on the person's computer who is visiting the site.

In the second example we have placed some popular serif fonts. The browser will try to load Georgia first. If that fails, it will try the next font, Times, and again, if this fails it will try to find Times New Roman. Finally, if all of the suggested fonts fail (unlikely) the browser comes to ‘serif’ and it will finally load whatever it's default serif font may be.

img
Convallis nisl

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos

Pre-installed Fonts on Windows PCs & Macs.

The table below shows the probability (as a percentage) that a particular font will be installed on either a Windows or an Apple Mac PC. In the final column you can see an ideal fontstack for each specific font (which you can copy and paste into your CSS code).

Sans-serif Fonts

Fontface Fontstack
Arial 99.84% 98.74% Arial, "Helvetica Neue", Helvetica, sans-serif;
Arial Black 98.08% 96.22% "Arial Black", "Arial Bold", Gadget, sans-serif;
Calibri 83.41% 38.74% Calibri, Candara, "Segoe UI", Arial, sans-serif;
candara 83.08% 34.41% Candara, Calibri, Geneva, Arial, sans-serif;
century Gothic 87.62% 53.15% "Century Gothic", Futura, "Trebuchet MS", sans-serif;
futura 1.26% 94.41% Futura, "Trebuchet MS", Arial, sans-serif;
Gill Sans 58.54% 95.5% "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
Helvetica 7.34% 100% Helvetica, "Helvetica Neue", Arial, sans-serif;
Tahoma 99.95% 91.71% Tahoma, Verdana, "Segoe UI", sans-serif;
Trebuchet MS 99.67% 97.12% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
Verdana 99.84% 99.1% Verdana, Geneva, sans-serif;

Serif Fonts

Fontface Fontstack
Arial 99.84% 98.74% Arial, "Helvetica Neue", Helvetica, sans-serif;
Arial Black 98.08% 96.22% "Arial Black", "Arial Bold", Gadget, sans-serif;
Calibri 83.41% 38.74% Calibri, Candara, "Segoe UI", Arial, sans-serif;
candara 83.08% 34.41% Candara, Calibri, Geneva, Arial, sans-serif;
century Gothic 87.62% 53.15% "Century Gothic", Futura, "Trebuchet MS", sans-serif;
futura 1.26% 94.41% Futura, "Trebuchet MS", Arial, sans-serif;
Gill Sans 58.54% 95.5% "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
Helvetica 7.34% 100% Helvetica, "Helvetica Neue", Arial, sans-serif;
Tahoma 99.95% 91.71% Tahoma, Verdana, "Segoe UI", sans-serif;
Trebuchet MS 99.67% 97.12% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
Verdana 99.84% 99.1% Verdana, Geneva, sans-serif;
img

Fusce in augue

Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae. Pellentesque convallis nisl sit amet lacus luctus vel consequat ligula suscipit. Aliquam et metus sed tortor eleifend pretium non id urna. Fusce in augue leo, sed cursus nisl. Nullam vel tellus massa. Vivamus porttitor rutrum libero ac mattis. Aliquam congue malesuada mauris vitae dignissim.

<div class="logo-footer-cont">
  <a href="index.html">
     <img class="logo-footer" src="images/logo-footer.png" alt="logo">
  </a>
</div>

Pellentesque venenatis tellus non purus tincidunt vitae ultrices tellus eleifend. Praesent quam augue, accumsan nec tempus dapibus, pharetra ac lacus. Nunc eleifend consequat justo id dapibus. In ut consequat massa. Nunc scelerisque suscipit leo nec imperdiet.

Why ‘Websafe’?

Web safe fonts are fonts that are pre-installed by many operating systems. While not all systems have the same fonts installed, you can use a web safe font stack to choose several fonts that look similar, and are installed on the various systems that you want to support. If you want to use fonts other than ones pre-installed, as of CSS3, you can use alternative methods, explained in the following articles:.

With many fonts being so similar to one another it takes a keen eye to notice the difference sometimes. You should certainly find a font combination that will retain your design's good appearence across devices, operating systems and browsers. ❧

 


Articles