Graphic design for the web - Fonts

Font usage on the web is a critical matter. Well I guess it’s critical while working with other media too, but if you’re a graphic designer and you’re not that familiar with the best practices of website creation, you might come up with something rude to web designers, be it beautiful or not.

The #1 thing to keep in mind is that text is the core of most websites. In fact, websites are often comparable to newspapers since both media feature categorized articles, with headings, paragraphs, etc. In short: information.

Information also consists of images but here comes rule #2: information must be accessible to anyone. And while text can be accurately reproduced as sound by software known as screen readers (Jaws, Orca, etc.), images can not. Thus, for the blind to access the information transmitted through images we add an “alternative” text description to them, but it’s often limited. We could also put on a more complete description and then hide it to users who can see the image, yet that may require additional work.

Choosing the right fonts

Why, if today’s topic is “Fonts”, am I talking about images? Simply because in order to reproduce some fancy fonts on the web, we have no choice but to use images. Yes, a title reading “My Awesome Website” rendered using a font by Ray Larabie in Adobe Photoshop will not be displayed the same on the end user’s browser if it can’t find the exact same font on the computer.

Solutions? Sure, there are several, as can be seen in this article by Shaun Cronin.
To sum up:

• some solutions require additional javascript (that impaired users might disable)
• others require Adobe Flash (heavy, and disabled by even more people)
• most make use of the @font-face property, which is somewhat new and won’t work with obsolete browsers still in use (think Internet Explorer < 9)
• the old and dirty solution: using images, meaning that you have to make a new image for every element in each language, and change them all everytime you want to modify the wording. Plus, it won’t resize nicely and need intelligent text alternatives

In addition, Google and other search bots love real text that you can copy/paste so if the text is rendered via an image or a flash object, most of the time these bots won’t catch and index the information… not very SEO friendly.

Therefore I’m sorry to say that (at least until IE 6, 7 and 8 are all below 5% in usage statistics) the best thing to do is to find elegant ways to integrate standard fonts, also referred to as web safe fonts. They simply are the most common fonts to be expected on everybody’s computer. In that bunch you’ll find Arial, Times New Roman, Courier New, then Verdana, and to a lesser extent Georgia, Impact, and some other native Microsoft fonts (sadly…).

Also, you know that fonts can be sorted in 3 categories: serif, sans-serif and monospace fonts.
This is important because web developers/designers will call fonts like this:

font-family: helvetica, arial, sans-serif;

If the font “helvetica” is not found, then it will search for “arial”, and again, if it’s nowhere to be found then it will use the default sans-serif font defined by the browser. Therefore we must ALWAYS list at least 2 fonts: the desired one and the default font type. 3 is better.

So, in addition to working with a limited set of standard fonts, I advise graphic designers to make sure that their layout doesn’t fall apart when switching the font to Arial (a good default sans-serif font) or Times New Roman (a good default serif font). Monospace fonts are mainly used to display code so you should not have to use them a lot, but if you do, then Courier New is a good default monospace font.

If you really need a fancy font, then I would recommend choosing one from Google Web Fonts and/or to provide the said font files along with the rest of your work.

That’s all for the choice of fonts - the big part actually, but there’s more to talk about.

Styling your fonts

Because a font is not only a “font-family” affair, it’s also about the size, the color, the style you give your font.
A rather complete font declaration by a web designer would look like this:

font-family: helvetica, arial, sans-serif; font-style: bold; font-size: 12px; line-height: 16px; text-transform: uppercase; color: #000000;

Or in a more compact way:

font: bold 12px/16px helvetica, arial, sans-serif; text-transform: uppercase; color: #000000;

One thing you don’t see here because it doesn’t really exist in the web world but does in Photoshop is the anti-aliasing setting (None, Sharp, Crisp, Strong, Smooth). Therefore, I beg you not to use different anti-aliasing levels and to keep it to the Crisp level.

Now, 2 things are important, mainly in order to grant the website a sufficient accessibility level:

• consistency
• readibility

Consistency means that elements that are to be found in different pages should be identical. For fonts, it implies for instance that the title of the page is always at the same place, using the same font at the same size, with the same color, etc.

At times you may need to lower the size to be able to insert a longer title in the same area. Should this happen, either change all titles or find another solution because this one is not acceptable. Also, you should always take into account this situation where a title or any other text variable could expand beyond the limit of its container, and suggest a solution (such as truncation).

To ensure more visual consistency, please limit yourself to 3 or 4 different font declarations.

All these measures help in not confusing readers and thus improve the readibility of the site. We can do more by making sure the text is actually visible to everyone (rule #2), and this time I’m talking about people who are not blind but still suffer from troubled vision.

For these people, we should ensure that the font size is not ridiculously small (in pixels, I would set the limit to 9) and the contrast between the text and the background is strong enough. There are precise recommendations established by the W3C addressing this concern. And hopefully a lot of tools allow you to check the validity of the chosen colors, such as Colour Contrast Check by Jonathan Snook.

Links are also interesting. One should be able to distinguish a link just by looking at the text, with no need to hover the mouse to find them. To achieve this, it is recommended to apply a different color to links AND to underline them.
Alterations in size or style (bold and italic) are to be avoided since these distinctions can apply to normal text as well, with a proper meaning.

Another thing is the letter case. You need not write titles directly in uppercase and should use the “All Caps” transformation in the Character tool panel in Photoshop instead. That’s also what web designers do thanks to the “text-transform” property. This way, we can copy/paste content text in readable form - the real content being the unformatted text, the switch to capital letters is only part of the style, the decoration. Plus, this kind of transformation preserve accents, if needed.

Visualize the site like end users would

Last and not so trivial, I know some of you are crazy about Apple products. It doesn’t matter what my opinion on these are, but it can lead to confusion and frustration since you might present your work to the client, and they will be enthustatic about it - that’s cool. But then we present them with the web rendition of your mockups and they don’t understand why the scrollbars are so ugly compared to what they had seen on the static pages you designed - showing Safari Mac like scrollbars.
Same for fonts, that are notoriously “bolder” on a Mac than they are on Linux or Windows - the OS the client and the end users are most expected to use (and thus why you shouldn’t never use the confusing “Strong” anti-aliasing).

So when dealing with fonts, you should preferably:

• choose standard fonts
• illustrate what happens with shorter/longer text
• be consistent
• make it readable

I am well aware that the points I make in this article can be regarded as restrictive to your creative spirit but please do not think of them as constraints, they’re meant as guidelines to a more efficient and “web ready” layout, for the World Wide Web to a better place for everyone :)

#content #because-we-need-to-redo-the-blog { line-height: 20px; } #content #because-we-need-to-redo-the-blog .conclusion { margin-top: 50px; } #content #because-we-need-to-redo-the-blog h4 { margin-top: 25px; } #content #because-we-need-to-redo-the-blog h4, #content #because-we-need-to-redo-the-blog p, #content #because-we-need-to-redo-the-blog pre, #content #because-we-need-to-redo-the-blog ul { margin-bottom: 15px; } #content #because-we-need-to-redo-the-blog li { margin-bottom: 10px; }