Breadcrumb
Level 2 navigation
The selection and use of differing fonts online is frequently forgotten in usability and user-centred design.
More often than not, the choice of font can make or break a website’s success – many users leaving a site if they cannot read or adjust the text. However, by remembering a few simple rules, you can ensure your website is usable, readable and accessible to all users.
Font-size
When it comes to web design, there is no optimal font size.
While guidelines suggest for maximum legibility font size should not be set too small, there is no encompassing solution for the most appropriate size for text online. In reality, it is dependent on a number of variables. An individual user’s personal preference and or the screen resolution of the device they’re viewing your site with are all contributing factors. With an ever-growing number of people accessing websites through a variety of web-enabled devices the fundamental thing to remember is to never absolutely ‘fix’ font size.
Font sizes should never be specified in the fixed unit pixels (px), but rather in the relative units of percentages or em. 100% or 1em can be considered the default size of your user’s text – the actual size will be dependent on their own personal setup. Having text specified in relative units is a simple way to ensure your text will automatically resize according to your user’s personal browser settings and screen resolution. With this in mind, it’s a good idea to check with your web developer relative terms are always used in your source code when font size is specified.
Although mobile internet browsing is growing rapidly, many sites have not taken the simple steps to ensure their websites are mobile device compatible. Relative font size is just one simple way to assist in cross-device and cross-browser compatibility.
Font-family
It is also worthwhile putting some thought into the fonts used on your website.
As varying font families have different aspect values, readability can be dependent on default sizes. Many unusual fonts are not installed on the average users’ computer. This means text will often revert back to the default browser setting, negatively affecting the usability and readability of a site.
The sans-serif fonts (those without embellishment or ‘feet’) such as Verdana and Tahoma are generally regarded as the most legible, web-safe fonts, retaining readability across all sizes. They were both specifically designed for screen reading and legibility and are installed on all Windows and Mac systems. The fonts Arial and Helvetica are also commonly used online – however these were not specifically designed for screen reading and are not as legible in small or large font sizes. If you do decide to use an unusual font on your site, ensure you or your developers are familiar with its particular behaviour and ‘quirks’ and adjust the tracking (spacing between letters and leading height between lines) accordingly to ensure it is legible at all sizes.
It is also good practice to use a minimal range of fonts on your website. Too many fonts can clash and confuse users, having an overall negative impact on the usability of your site. Clean, legible fonts work best to ensure good levels of readability and accessibility across your site. For a great description of the top 15 web safe fonts, check out this blog post by Vision Widget, http://visionwidget.com/inspiration/web/286-web-safe-fonts.html
White space
White or negative space is another vital element of typography crucial to creating a usable website.
Not enough space around your text and elements makes them difficult to read, and can create problems for users with visual impairments. White space should be used to balance the elements on your page and assist users in intuitively moving from one element to the next. Space in-between lines should be adjusted to ensure it is optimised for maximum legibility, using the leading or line-height property, margins and padding in your website’s CSS stylesheet.
Take the time to have a look at your website and observe the space in-between your elements. Does it seem too crowded? Is everything readable? Don’t fall into the trap of cramming too much content into your page – without adequate spacing, users will become over-stimulated, have trouble finding content and probably leave your site frustrated or disgruntled, which is not desirable.
Conclusion
From both an accessibility perspective, as well as a general user perspective, typography is important. It helps your text to be more scannable, readable and attractive – contributing to the overall usability of your website. Taking the time to consider appropriate font-size, family and space ensures your website is maximising traffic and your users are getting the most out of your site.