Blog

Best techniques for modern font implementation

Great designs take advantage of typography. The days of limited font choices and poor anti aliasing by browsers are long gone. Here are four modern font implementation techniques as well their pros & cons, examples & resources. All of which allow for proper semantic markup of content.

Font Stack

Pros
Works in all major browser
Cons
Extremely Limited Font Choices

We all know about the font stack and probably use the same 8 fonts time and time again. Technically you can throw as many fonts as you want in the font stack it’s just that the odds a user is going to have that font on their system could be slim to none. But some fonts such as palatino and century gothic are on around 80% of users computers, the full list of 8 fonts you should be using in CSS and few others you could be using like futura (for mac users) and garamond as well. Smashing magazine also has great article providing some better font stacks you could be using as well.

Code Example:


<html>
<head>
<style type="text/css">
.garamond { font-family: garamond, century-gothic, palatino; }
.centuryGothic { font-family: century-gothic, garamond, palatino; }
.palatino { font-family: palatino, garamond, century-gothic; }
</style>
</head>
<body>
<h4 class="garamond">Garamond</h4>
<h4 class="centuryGothic">Century Gothic</h4>
<h4 class="palatino">Palatino</h4>
</body>
</html>

Rendering:

Garamond

Century Gothic

Palatino

Image Replacement

(the right way)
Pros
Guaranteed to display desired font (as long as images are turned on)
Cons
Extra span tag
Text shows through transparent images
Desired font is not displayed if images are turned off

The benefits definitely out way the extra mark up due to the empty span tag. The only issue I’ve come across using this technique is the text peaking through transparent images. You have to use a different image replacement technique in those cases. Here is a tutorial for 9 image replacement techniques. But don’t forget this technique will get the content across to a user under all circumstances including adaptive technologies.

This technique works under the following circumstances:
CSS and Images On
CSS On and Images OFF
CSS OFF and Images On
CSS and Images OFF

Code Example:


<html>
<head>
<style type="text/css">
h2 {
width: 351px; height: 65px;
position: relative;
font-size: 100%;
overflow: hidden;
}
h2 span {
background: url(images/logo-example.jpg);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>3.7 Designs<span></span></h2>
</body>
</html>

Rendering:

3.7 Designs

Font Embedding

Pros
Guaranteed to display desired font (with css turned on)
Cons
It’s illegal to embed purchases fonts
Limited font choices

This is the future of fonts on the web. Along with some CSS3 techniques and the increase in free fonts typography can be designed using code instead of Photoshop skills. Nice Web Type’s article on How to use @font-face is great introduction to this technique. Take advantage of the @font-face Kit Generator to generate all the formats necessary to display your desired font face. Just make sure you have the right to embed the font type on your website. Or choose from hundreds of free to use, open source @font-face kits available at Font Squirrel.

Code Example:


<html>
<head>
<style type="text/css">
@font-face {
font-family: 'MinotaurPhatte';
src: url('minotaur-webfont.eot');
src: local('minotaur'), url('minotaur-webfont.woff') format('woff'), url('minotaur-webfont.ttf') format('truetype'), url('minotaur-webfont.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
}
#minotaur { font-family: 'MinotaurPhatte'; }
</style>
</head>
<body>
<h2 id="minotaur">Embedded Font</h2>
</body>
</html>

Rendering:

Embedded Font

Cufon

Pros
Use any font you want
Guaranteed to display desired font (with javascript turned on)
Cons
Font can’t be highlighted (copy and paste)
Can be slow to load
Doesn’t work with javascript turned off

This approach is the only technique that uses javascript and you don’t have to be skilled programmer to get it functioning. Following the cufon usage guide is a simple 3 step process. Download the cufon javascript file, generate the fonts and typefaces from files on your computer, then link to the files and declare which elements you want replace.

Code Example:


<html>
<head>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Modeno_LX_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('.font-replace');
</script>
</head>
<body>
< h2 class="font-replace">Cufon Replaced Font<h2>
</body>
</html>

Rendering:

Cufon Replaced Font



Conclusion
With these four tools in your arsenal you can help make the web a better place by using new fonts and experimenting with typography. These techniques also allow you to maintain proper markup for accessibility and SEO with out slapping images all over your sites.