Safe Typography on the Web

Posted on

Estimated reading time: 5 minutes, 28 seconds

Lets have a a talk about Typography on the Web. We have all seen websites that look as though they were created by someone with no sense of colour and on which some if not all of the text is barely legible. Most of us tend to spend very little time on such sites, hitting the back button in our web browsers in a matter of moments. In fairness to the authors of many of these sites, many web design firms have traditionally attempted to replicate offline marketing material in online media, often under protest and as a result of client pressure. Some of the larger client firms with strong brand identities and rigid branding guidelines were historically susceptible to this migration issue, many only recognising it after multiple refinements to their online presence and often then only as a result of consumer feedback.

In an ideal world – or perhaps on an ideal World Wide Web – web designers would be able to design web pages using whatever font or fonts they wanted, safe in the knowledge that pages would appear exactly as intended to each and every user. In reality, however, computers from different manufacturers, running different operating systems, have different font sets installed. In addition, modern liquid crystal (LCD) monitors and the vagaries of various graphics cards may sometimes compound the issue. Web designers thus need to be very careful in their selection of fonts.

Typography on the Web

Web typography differs from other types of typography insofar as a CSS (“Cascading Style Sheet”) font rule – the recommended means by which to control the appearance of a font to a human visitor – is not a hard and fast rule, per se. If the specified font is unavailable and an appropriate substitute is not specified, a Web browser may arbitrarily select its own substitute font. This may display differently and unattractively, sometimes completely wrecking a finely tuned page layout.

There are a small number of fonts that are considered “safe” to use for web design. These are joined by a wider range of related fonts considered to be safe to use under most circumstances. Amongst the so-called “sans serif” fonts – that is fonts without serifs or “feet” – Helvetica is a popular choice for short paragraphs of text. Helvetica has the advantage of being installed, by default, on Macintosh or Linux computers. Arial is an updated version of Helvetica and is used in its place on Windows computers. Arial Black and Impact are fonts designed specifically for headings, while other popular sans serif fonts include the relatively recent additions Verdana and Tahoma, the latter being somewhere between Arial and Verdana in style.

Times New Roman is the Microsoft replacement for the traditional Times Roman font. Times was originally designed for newspaper columns and rules the roost as far as safe serif fonts are concerned. Similar comments apply to Courier New which has largely replaced Courier, the traditional monospace font, used to mimic typewriter output. Few, however, would consider Courier to be an attractive or an appropriate font for a site.

Rendering as Images

One possible solution to the problem of creating specific fonts that look identical, regardless of installed fonts and the visitor’s browser, is to use a graphical image. This may be, for example, a GIF or a JPEG depicting the required text in precisely the size and font required. Whilst this is a “known quantity” in the sense that it will appear almost uniformly on any computer, it has a number of inherent limitations. Firstly and perhaps most importantly the text it represents is not in a form whereby it can be read or “indexed” by the search engines. This has significant negative implications for search engine optimisation (SEO). Secondly, the management of image-based text requires graphics software and its integration with the remainder of the text and other elements on the page can be complex and in some cases unreliable when it comes to layout. Perhaps the most extreme example would be an entire page rendered as a graphic or series of graphics: beautifully controllable, utterly unreadable for the search engines. Thirdly and of equal significance is the fact that the use of images compromises accessibility: users on low bandwidth connections may have their browsers set not to display images; and images do not always scale well when browser zoom functionality is used. Images must also have ALT text and Title text defined to ensure the display of text when the image is turned off or whilst the page is loading. Ultimately, imaging is a last resort option.

Rendering via sIFR

A more recent alternative to imaging is the use of sIFR, or “Scalable Inman Flash Replacement”. This is an innovative open source solution which uses a combination of JavaScript, CSS and Flash to closely control the way in which a font is rendered in a browser. sIFR addresses many of the shortcomings of the imaging approach in that it scales well; allows for copy and paste; and presents fewer barriers to accessibility. That said, sIFR requires that JavaScript is enabled and that the user has the relevant browser Flash plug-in. In the absence of this, standard CSS styling will be applied in the usual way. sIFR also requires fairly heavy processing and its use should be restricted to essential headings and a small overall percentage of the page to avoid unduly compromising page load times.

Rendering via FLIR

FLIR is conceptually similar to sIFR but replaces the sIFR Flash element with images that are generated on the fly from the page’s text, removing the need for the Flash plug-in. FLIR requires a web host with PHP scripting enabled.


The very presence of complex solutions such as sIFR and FLIR indicates that there is a significant issue here. Naturally there are certain sectors and sites that are particularly sensitive to typography and for these, the judicious use of sIFR and FLIR type solutions may be appropriate. However, much lies within the control of both clients and their web designers alike. A clean, simple design with the appropriate use of safe fonts, decent imaging (for images themselves, not to create text) and CSS styling should be able to address the needs of the vast majority of clients. A CSS-driven approach, if the technology is used to its fullest, can create remarkably attractive yet browser friendly sites. Most importantly, truly effective use of CSS allows for the creation of search engine friendly code. Thus you can be not only the most attractive but also the most popular site in your sector, all using standard technology!


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top