Designing for Online Content: Typography

Author:  Simon Hawkesworth – TELT

‘Typography is the craft of endowing human language with a durable visual form …’

Robert Bringhurst (2008)

Working with type online can be a deeply frustrating process for content developers, particularly if you’re used to the enormous range of options available in the world of print design, which generally don’t apply online. This is true of both content layout and formatting. To get the most from typography, the way in which text is laid out and how it’s formatted, is integral to the effect that’s produced. Working with online platforms, when one has been used to the layout capabilities of something like Adobe InDesign, can feel – to use Robert Bringhurst’s language analogy – a little like trying to write a novel with a limited vocabulary and few rules of grammar. One of the other challenges of the digital world, is that unlike a printed item, the ‘durability’ of the content – that the designer’s chosen approach is maintained – is subject to an increasing range of user decisions, including browser and device choice.

If you’re background is non-digital design, there’s always going to be a point at which you’re going to want to kick something, because it’s never going to look like the book design you want it to be. Once you’ve taken a few deep breaths and accepted this, the task it to try and make the best typographic content you can. Attractive content can still be created, and with it, be more useful to the user. Some of the things you might want to consider are outlined here.

Typeface Options

Some platforms come with limited typeface options; some allow you to upload your own; and those where you have most control – as in a website – will enable you to take advantage of the Adobe Fonts (formally, Typekit) tool.

Adobe Fonts

Adobe Fonts allows you to use any typeface on your website that is in the Adobe Fonts system – which is a lot, and includes some that you can only dream of using in print because the cost of licensing would give you a coronary. With Adobe Fonts, you pay an annual subscription and can code your text to utilize the typefaces you want, at a fraction of print licensing. As the typeface are being accessed online, the user will see these – they don’t have to have them installed. It’s a great approach if you can stretch to the cost or you can control the site characteristics.

To Serif or not to Serif

Whether you’re employing Adobe Fonts or not, one question you may come to ask is, are serif or sans serif typefaces better for legibility?¹

Letters with serifs and without (sans) serifs.

So, it’s worth stating that there’s no reliable evidence that either of these two forms of typeface are generally any more legible than the other. In fact, the weight of evidence suggests that there’s no discernible difference.² Despite this, the myth persists that sans serif typefaces are preferable for online resources because they believed to be more legible. This perception is probably because sans serifs have typically been seen as more ‘modern’, and therefore more suited to the digital era. It’s also because of some often-quoted (actually, rarely quoted but usually hinted at) research on typeface legibility that suggested sans serif are preferable for use online. However, this research has been challenged by a wider body of work.³

¹ Legibility refers to how a typeface is designed and how well one individual character can be distinguished from another. Readability refers to the way in which words and blocks of type are arranged on a page, and that can include the size and the space of the letters.

² Burt, 1959, Robinson et al., 1971, Weildon, 1995.

³ Bernard et al., (2001), Coghill (1980), Lund (1997, 1998, 1999), Moriarty & Scheiner (1984), Poulton (1965) and Tullis et al. (1995).

While the research on serifs is related to print design, it’s not an unreasonable assumption that the general findings can also be applied to online media. The one area where anecdotal evidence suggests that sans serifs are easier to read, is for dyslexia. However, there’s no guidance available as to which specific typefaces might help such users, and it’s as likely that some serif typefaces may be more legible than some sans serifs. It would be great if someone did some actual verifiable research and helped content creators understand what’s happening on the typeface front, but it’s yet to appear.

What is known from the research, is that typeface legibility depends on a number of factors, including the specific characteristics of the text, not just absence or presence of serifs. So – and this is just my personal view – use a typeface that suits the work you’re developing, and is both legible and readable, and is as aesthetically appealing as possible, regardless of whether it has serifs or not.

 Text Characteristics

It’s worth noting that the degree to which you can adjust text characteristics will depend on the application your using. The multiplicity of platforms and devices, also means that your content may get displayed differently depending on the devise used – and over which, you may have limited control. But considering these text features can have a positive impact on the value and use of the resource.

 Font size

While there is no minimum required font size for text used online, body text sizes of between 12pt and 16pt have become the norm. Guidelines set by internationally recognised organisations such as W3C make no recommendations for body text size, other than to recognise that it’s dependent on the typeface used – because of how the x-height affects text size (see Fonts.com for an explanation of what x-height is and why it’s important).

X-height: the distance between the baseline of a line of type and the tops of the main body of lower case letters (i.e. excluding ascenders or descenders).

X-height: the distance between the baseline of a line of type and the tops of the main body of lower case letters (i.e. excluding ascenders or descenders).

If you’re designing websites, then instead of point size, type is often set with HTML code using a feature called the ‘em’ size. This is a relative value that’s more responsive to different screen sizes and resolutions. When the website is designed, the font size element (font-size) is set to a specific point value, which is then equivalent to 1 em. Other text elements, such as headers, are then given values of em, such as 2 em. So, if the em value is 14pt, then a header of 2em will be 28pt. Using em values can give the user the option to increase the type size on their device or browser. If you don’t specify a font size in your HTML code, the size for body text, defaults to 16px.

 Line Length

The length of a line or block of text can affect the readability. Very long or very short lines can result in content that’s hard to read – as well as producing unsightly gaps if the column is very narrow – with Research at the University of Reading suggesting that line length is important in affecting the ability of the eye to ‘return sweep’ to the beginning of the next line (Dyson, 2004). For online content, a line length of no more than 80 characters, including spaces, is recommended (W3C, 2008a).

 Line Spacing, or Leading

The space between lines of text is called leading. Leading that is too tight or too loose can affect readability. In many applications you won’t have control over this, but where you can, W3C guidelines (W3C, 2008a) suggest leading is at least a line space-and-a-half within paragraphs, and spacing between paragraph is at least 1.5 times larger than the line spacing. Work by Lund (1999) notes the interrelationship between text characteristics, suggesting that leading should increase as line length increases, However, there’s no ‘mathematical formulae’ to work from, so it’s a question of testing and adjusting to see what’s best. If you’re putting print documents online, leading of around 4 points is generally about right for body text, or for Word documents, a space-and-a-half would seem to coincide with W3C’s guidelines. But view the item on screen and print it out, and make a judgement.

 Text Alignment

The most widely used alignment for body text is left-aligned, unjustified, though the available research suggests that there’s no significant difference between unjustified and justified text in terms of readability.⁴ However, anecdotal evidence again suggests that justified text can reduce readability for those with dyslexia, and justified text, particularly when the text column is narrow, can result in unsightly gaps between words, which itself can reduce readability.⁵  For online content, you may therefore want to avoid this kind of line formatting.

⁴ Becker et al (1970), Zach­risson (1965), and Gregory and Poulton (1970).

⁵ Schriver (1997).

 Text Colour and Contrast

When we consider text colour, what we are mainly concerned with is creating good contrast between the text and the background, because this aids readability. The vast majority of text found in a range of appli­cations is defaulted to black.

Contrast Ratio

The contrast between text and background is sometimes described as the contrast ratio. Black text on a black background is clearly unworkable and gives a ratio of 1:1. By comparison, black text on white has a ratio of 21:1. For online content, the W3C guidelines for body text recommends a minimum contrast ratio of 7:1. For larger text, a ratio of 4.5:1 is acceptable (W3C, 2008b). WebAim is a useful application for checking the contrast ratio.

Text with different contrast ratios.

 Colour Vision Deficiency (Colour Blindness)

People with colour vision deficiency (CVD), or colour blindness, find it difficult to identify and distinguish between cer­tain colours. The variants on this condition can include the inability to distinguish between shades of red, yellow and green, or that colours seem much duller than they would appear to someone with normal vision. Around one in twelve men, and one in 200 women have CVD (CBA, 2019), so it’s important to consider this and to check for it when you create content. A number of applications can be used test if your design is likely to be problematic, including, Colblindor.

Text Structure

Ordering the content of an online resource can help both the usability and aesthetics of the material. A text hierarchy, in which content is organised using headers that have a logical, distinguishable order, alongside body text that is arrayed in paragraphs, will help the user to navigate the site and make sense of the material. With websites, where you can control the HTML code, the ‘H’ and ‘p’ mark-up values not only create this order, but can allow users with visual impairments and screen reader devices to more easily understand the content. The principles of good print design can often be translated to online resources in this respect, and here the characteristics of good line spacing and line length that we mentioned earlier, can also help to create a more usable resource.

Text is a key component of online content, and taking time to consider its construction and delivery can help the user and improve the value of the material. Like any skill, it takes time to develop and apply effectively. It needs some practice, research, an understanding of what works within the context of what we already know about the impact and principles of typography, alongside a consideration of the needs of the user. As the typographer, Hermann Zapf said, ‘Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability.’

 References

 Becker, D., Heinrich, J., von Sichowsky, R. and Wendt, D. (1970). Reader preferences for typeface and leading. Journal of Typographic Research, 4, 61-66.

Bernard, M., Mills, M., Peterson, M., Storrer, K. (2001). A Comparison of Popular Online Fonts: Which is Best and When? Usability News 3.2 [Online] Available at: http://psychology.wichita.edu/surl/usabilitynews/3S/font.htm (Accessed on: 15^th December, 2019).

Bringhurst, R. (2008) The Elements of Typographic Style. Dublin: Hartley and Marks Publishers.

Burt, C. (1959) A psychological study of typography. Cambridge: Cambridge University Press.

Coghill, V. (1980) Can children read familiar words in unfamiliar type? Information Design Journal, 1(4), 254-260.

Colour Blindness Awareness (CBA) (2019) Colour Blindness [Online] Available at: http://www.colourblindawareness.org/colour-blindness/ (Accessed on: 19^th December, 2019).

Dyson, M. C. (2004) How physical text layout affects reading from screen. Journal of Behaviour and Information Technology, Vol. 23, No. 6, 377-393.

Gregory, M. and Poulton, E. C. 1970. Even versus uneven right-hand margins and the rate of comprehension in reading. Ergonomics, 13.4, 427-434.

Lund, O. (1997) Why serifs are (still) important. Typography Papers, 2, 91-104.

Lund, O. (1998) Type and layout: how typography and design can get your message across – or get in the way. Review article. Information Design Journal, 9(1), 74-77.

Lund, O. (1999. Knowledge Construction in Typography: The case of legibility research and the legibility of sans serif typefaces. Thesis submitted for the degree of Doctor of Philosophy. Reading: The University of Reading, Department of Typography & Graphic Communication.

Moriarty, S., Scheiner, E. (1984) A study if close-set type. Journal of Applied Psychology, 69, 700–702.

Poulton, E.C. (1965) Letter differentiation and rate of comprehension in reading. Journal of Applied Psychology, 49(5), 358-362.

Schriver, K. A. (1997) Dynamics in document design: creating texts for readers. New York: John Wiley & Sons.

Tullis, T. S., Boynton, J. L., Hersh, H. (1995) Readability of Fonts in the Windows Environment (Interactive Poster). Proceedings of ACM CHI’95 Conference on Human Factors in Computing Systems, 2, 127-128.

Robinson, D. O, Abbamonte, M., Evans, S.H. (1971) Why serifs are important: the perception of small print. Visible Language, 4, 353-359.

Weildon, C. (1995) Type and layout: How typography and design can get your message across or get in your way. Berkeley: Strathmoor.

(W3C, 2008a) 1.4.8 Visual Presentation. [online] Available at:

https://www.w3.org/WAI/WCAG21/Understanding/text-spacing.html (Accessed on: 12^th December, 2019).

(W3C, 2008b) 1.4.3 Contrast (Minimum). [online] Available at:

https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast (Accessed on: 12^th December, 2019).

Zachrisson, B. (1965) Studies on the legibility of printed text. Stockholm: Almqvist and Wiksell.