TextPrefs Survey Report Part 5

Written by Jamie Freeman

User preferences for reading text on the web

Line height

Line height is the vertical distance between rows of text. We have used a relative measure of line height, based on the font in question.

A line height value of '1' is the same as the distance from the top of the ascenders (e.g. a lower-case 'd') to the bottom of the descenders (e.g. a lower-case 'g'). So setting the line height to '1' or '100%' would result in no space between the lines; the descenders in the first line would touch the ascenders in the line below. The degree of overlap will vary somewhat from font to font, but as a general rule it holds.

If you make the line height value '2' then you would expect to see a space between descenders and ascenders equal in value to the distance from the top of the ascenders to the bottom of the descenders. Got that? :-)

And leading?

In the traditional print world of hand-set type, the typesetter would add strips of lead in between the rows of types in order to increase the vertical space. Hence the name, leading. So line height, leading; same thing. Forgetaboutit.

Results

There's very little real difference in the figures for preferred line heights from one font to another, which should come as no real surprise. For example, Arial is basically a screen-specific version of Helvetica. The variation between x-height (the height of a character minus the descenders/ascenders) and the descenders/ascenders is pretty similar from font to font. So the amount of clear space we like to see around them is unlikely to vary much.

(An exception to this is Courier. It is designed with a smaller relative x-height than the other fonts, but a similar ratio between x-height and descender/ascender. This results in it having more 'line height' built in, and hence less requirement to add more. Thats why the results show readers preferring it with a lower line height value.)

Between Times and Georgia - the two main serif choices - a similar difference occurs. Georgia, with its slightly heavier appearance and greater relative size (perhaps caused by its larger, open face) requires greater additional line height to remain readable. Those who preferred Times were able to tolerate it with lower line height values, where Georgia-lovers added more line height.

Arial and Helvetica are separated by not much more than a cigarette paper (despite an anomolous bump around the 8pt Arial preferences) because of their obvious visual similarities.

Verdana, a bit of an ugly sister in my book, has very standard line height requirements across the readable zone, but markedly larger height required a smaller sizes.

As Lucida's font size results err towards the smaller sizes they show a now predictable preference for ever-so-slightly greater line heights.

As for Trebuchet, it's pretty much in line with the other sans-serif fonts, but larger sizes show a more marked drop in required line-height compared to some others.

Arial: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: 1.7
  • 10pt: 1.3
  • 11pt: 1.3
  • 12pt: 1.2
  • 13pt: 1.3
  • 14pt: 1.3
  • 15pt: 1.3
  • 16pt: 1.4
  • 17pt: 1.5
  • 18pt: 1.5
  • 19pt: 1.3
  • 20pt: 1.3
  • 21pt: 1.0
  • 22pt: 1.3

Helvetica: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 1.2
  • 11pt: 1.4
  • 12pt: 1.3
  • 13pt: 1.3
  • 14pt: 1.3
  • 15pt: 1.3
  • 16pt: 1.3
  • 17pt: 1.3
  • 18pt: 1.4
  • 19pt: 1.5
  • 20pt: 1.2
  • 21pt: 1.3
  • 22pt: 1.3

Lucida: Line Heights per Font Size

  • 8pt: 1.4
  • 9pt: 1.8
  • 10pt: 1.4
  • 11pt: 1.4
  • 12pt: 1.3
  • 13pt: 1.4
  • 14pt: 1.3
  • 15pt: 1.4
  • 16pt: 1.3
  • 17pt: 1.2
  • 18pt: 1.2
  • 19pt: no preferences
  • 20pt: no preferences
  • 21pt: 1.3
  • 22pt: 1.3

Trebuchet: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 1.4
  • 11pt: 1.4
  • 12pt: 1.3
  • 13pt: 1.3
  • 14pt: 1.3
  • 15pt: 1.2
  • 16pt: 1.5
  • 17pt: 1.3
  • 18pt: 1.2
  • 19pt: 1.3
  • 20pt: 1.2
  • 21pt: 1.3
  • 22pt: 1.2

Verdana: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: 1.5
  • 10pt: 1.4
  • 11pt: 1.5
  • 12pt: 1.3
  • 13pt: 1.3
  • 14pt: 1.3
  • 15pt: 1.3
  • 16pt: 1.3
  • 17pt: 1.3
  • 18pt: 1.3
  • 19pt: 1.5
  • 20pt: 1.0
  • 21pt: 1.6
  • 22pt: 1.3

Times: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 1.5
  • 11pt: 1.1
  • 12pt: 1.0
  • 13pt: 1.2
  • 14pt: 1.3
  • 15pt: 1.3
  • 16pt: 1.3
  • 17pt: 1.2
  • 18pt: 1.2
  • 19pt: 1.1
  • 20pt: 1.0
  • 21pt: 1.4
  • 22pt: 1.2

Georgia: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 1.6
  • 11pt: 1.5
  • 12pt: 1.4
  • 13pt: 1.4
  • 14pt: 1.4
  • 15pt: 1.4
  • 16pt: 1.4
  • 17pt: 1.0
  • 18pt: 1.4
  • 19pt: 1.3
  • 20pt: 1.4
  • 21pt: 1.2
  • 22pt: 1.6

Courier: Line Heights per Font Size

  • 8pt: no preferences
  • 9pt: 1.0
  • 10pt: 1.2
  • 11pt: 1.3
  • 12pt: 1.2
  • 13pt: 1.2
  • 14pt: 1.3
  • 15pt: 1.2
  • 16pt: 1.3
  • 17pt: 1.0
  • 18pt: 1.3
  • 19pt: no preferences
  • 20pt: no preferences
  • 21pt: no preferences
  • 22pt: no preferences

Combined figures

combined line height preferences showing overlap based around 1.3 through the readable zone of 12pt to 15pt font size.

Looking at the combined figures (see above) it paints a very clear picture. At 'readable' sizes (around 12pt to 15pt) a line height value of 1.3 is a strong favourite across all fonts.

There is a clear peak towards greater line-heights at smaller sizes, but at the other end of the scale the data get a bit scrappy to draw too many conclusions from.

The 'readable zone'

The purpose of this entire project was to give web designers some practical, evidence-based help when setting text for on-screen reading. I think it's been possible, when putting all of the above conclusions together, to create a 'readable zone' to act as a rule of thumb guide; something simple that you can remember easily enough for it to be practical and helpful in everyday situations.

The most readable typefaces, by far, are Arial and Verdana. Helvetica and Lucida make a pretty strong showing too.

As for size, 12pt to 15pt is where it's at, set at a line height of around 1.3.

Column widths should be in the 450px to 675px range, the higher end being more suited to Arial.

So here it is folks; I proudly present the 'readable zone':

Type face:Arial, Verdana
Font size:12pt to 15pt
Line height:1.3
Column width:450px to 675px

If you have a website where the text settings fall within this 'readable zone' it's probably safe to say your users, on the whole, find it readable. If you're designing with accessibility high on the agenda (where it should always be, in my opinion) then you probably don't want to stray too far from the readable zone.

< Read Part 4

Comments

  • Jamie Freeman -

    With thanks to: Joe Holdcroft, Mark Hurrell, Lynda Thain, Danny Hannah, Melita Ogden and Adam Ellingford at Message who helped design it, built it, tested it, promoted it and number-crunch it, and to the many thousands of people who took part in the survey, especially Stevie.

  • Mike Cooter -

    I’m really impressed with this. I've seen loads of web typo tips over the years but none that go quite as deep into user testing and draw out the results so well.

    The 'readable zone' summary at the end is pure gold - as a typography and accessibility fan/geek this is going to be my default recommendation for some time to come.

    These few simple rules could quite easily be added to where Jakob Nielsen left off - and make the web a whole lot nicer to look at.

    Thanks, Mike

  • Emma -

    Have you also seen the research that SURL have done - they've done assorted research into fonts & "readability" over the years, but one that I've found useful & refer people to (though it is now rather dated) was some 2002 research ( http://surl.org/usabilitynews/31/fontSR.asp ) in which they asked people which fonts they preferred - and then compared the speed of reading.
    Interestingly, at that time (n.b. would have been using CRT monitors, not LCD ones I assume) - it wasn't always the fastest to read that they liked the best.

Any questions? Please get in touch…

We'd love to talk to you about your web project, e-commerce, EPOS system or bespoke web application.

Message Digital Design Ltd

+44 (0)1273 772247

© Message Digital Design Ltd. 2017