Let’s talk about Typography on the Web. Typography itself is an art form, just ask any print designer. Part of me (okay, *all* of me) loves to giggle at the designers who muse over the differences in font styles as if each letter is a special Christmas present, running their fingers over the letters, remarking at the paper on which it’s printed, visually fondling each letter’s weight and slant and flourish… But there is a point to be made here: Typography is visual. Typography is an experience.
Enter the Web.
In contrast to the printed page, the Internet is all about supplying information, and fast. No need to turn pages, just scroll or click a link. No need for fancy type treatments, we just want to glean the information we need, quickly. Black text, white page. Simple!
Boring.
Currently, in order to give everyone a (nearly) identical visual reading experience on the Web, we, as designers, have to settle on about 5 fonts common to both Windows and Macintosh platforms: Arial, Georgia, Verdana, Times New Roman, Courier and Helvetica. In order to afford maximum readability we must recognize that, behind the scenes, default font sizes are different on a Macintosh machine versus a Windows machine. One must also consider line height and line length when optimizing website readability.
Enter the “reset” CSS file.
A CSS “reset” file standardizes all fonts to a base font size (as well as a few other things, but we’re talking about typography here), which are then resized based on a percentage of the base font size. Richard Rutter wrote a fantastic article in November of 2007 on A List Apart, in which he lists six specific ways of sizing fonts, showing a screenshot of how each browser renders the font sizing. I must also give a shout out to Eric Meyer, from whom I’ve learned so much, and whose reset CSS file is widely used across the Internet.
Reset CSS file
Now we have a standard font size across platforms, affording everyone a virtually identical experience. But everything looks the same: default Times New Roman font, black text, white background. Ick! Studies have shown that serif fonts like Georgia and Times New Roman work best as main headers, while sans-serif fonts are best for body content readability. So we’ll pick Georgia for our headers and Arial or Verdana for the content.
But what do we do if we’re unsatisfied with the fonts available? There are a few techniques that satisfy Accessibility requirements while still displaying a “designer” font of choice.
Font Cascade
The “C” in CSS stands for “cascading”, and that is one way we can attempt to choose more creative fonts, but only for those whose machines have those fonts installed. Boo. For example, one can specify that they would like the text on a website to be in “Lucida Grande”, but that is a font only available (for free) on the Macintosh. Verdana would have to also be specified as a fallback for Windows machines, like so: {font-family: “Lucida Grande”, Verdana, sans-serif;}. If Verdana was not available, the browser would choose a default sans-serif font to use. An 8 out of 10 on the “Creativity Restrictibility Meter”, it still more than satisfies Accessibility requirements by having the styled text in the code itself and not using images of any sort.
Image Replacement
This technique, originally spawned from an idea by Todd Fahrner, involves replacing text with an image. The technique I like to use involves (in a nutshell) putting text in the HTML file and then moving it off the visual screen with CSS positioning. In its place, a background image is inserted. Bam! Sweet! The text in the HTML file is readable by persons using assistive technologies to browse the Web (and search engine robots), and visual users see an image of the stylized text. However, I would argue that this technique be used sparingly; ideally, only used for main navigation and for H1 tags. The main reasons behind this statement are page weight and ease of updating – more images equal bigger file size, which equals slower page load time. Secondly, think of the client (or yourself, the developer) trying to update the website and having to produce an image for every header, subhead, sidebar title and whatever else has been produced in a decorative font.
In addition, there has been some question about what Google and other search engines “think” about image-replaced text, as it could be easily misconstrued (and abused) as keyword stuffing or other black-hat SEO techniques. The short answer is that Google understands what we are trying to do, as long as you are showing Google the same thing you’re showing your visitors. As long as you’re not using an image that is replacing long strings of keyword-rich, but otherwise irrelevant text, it’s all good. Awsum!
Flash-Replaced Text
Flash, you say? ZOMG!!1! Flash has gotten a bad rap, somewhat rightfully, for being overly abused. But it’s great for displaying the exact font you’d like your users to see, thus, affording the visual user the designer’s exact envisioned experience. Flash-Replaced Text, or siFR (Scalable Inman Flash Replacement) as it’s commonly known, giving a nod to its developer, Shaun Inman, involves a bit of Flash and a bit of JavaScript to display the font of the developer’s choosing. It displays any font seamlessly, and the text is selectable, unlike IR text. If the end-user does not have Flash or JavaScript, a fallback font is specified. Easy!
Each of these methods depends on the audience, the mood and the message of the website. We are not just restricted to the default machine fonts — consider the experience the visual Web user has become accustomed to, and use these techniques to enhance that experience.
So go out there and visually fondle some fonts!
Jennifer Siegfried - Senior Front End Developer — Jen has been with Foraker Design since 2007, and has been working in the industry for over 10 years. A self-proclaimed Web Standardista, she effortlessly codes table-less layouts with careful attention to both accessibility and usability concerns. Hobbies include linguistics, photography, LOLcats and hunting elk with bow and arrow.
