100%

Web Typography №1

Websafe Font Stacks

R Proffitt
by Richard Proffitt
iopan design

Maecenas volutpat, diam enim sagittis uam, id porta ulamis. Sed id dolor consectetur fermentum nibh vomat, ata umasnu purus. Maecenas volutpat, diam enim sagittis quam, id prta quam. Sed id dolor consectetur. Loremus fermentum nibh volutpat, accumsan purus.

Perspiciatis unde omnis iste natus error sit voluptatem accus anum doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

What is a Font Stack?

A font stack is a list of fonts in the CSS font-family declaration. 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 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.

/* 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.

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 Web Fonts.

img
Convallis nisl

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

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cras tellus enim, sagittis aer varius faucibus, molestie in dolor. Mauris molliadipisg elit, in vulputate est volutpat vitae.

Sed vitae fermentum diam, eget sollicitudin felis. Vestibulum massa arcu, tempor sit amet mollis ac, eleifend auctor turpis Pellentesque feu giat quis turpis quis bibendum

Someone famous in Source Title

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.

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.

Nullam vel tellus

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. ❧

 


Articles