How we read

It’s easy to think that reading is just a matter of scanning each letter in a smooth, straight line, viewing each letter and assembling the words as we go. The fact is we read with our eyes jumping forwards and back .

Because the central, high resolution part of the retina is so small it needs to be constantly moving in order to perceive and assemble objects and words. These fast movements are called saccades (around 7-9 letters) and when the eye comes to rest it’s known as a fixation (lasting about 250 milliseconds).

Saccades and fixations

 

It’s only during the fixations that our eyes take in the small area around it during saccades we don’t see anything. Our peripheral vision glances forward to get a sense of the letters to come and the eye jerks forward with another saccade and sometimes moves back again.

Legibility and Readability

Though we often use them interchangeably there is a difference between legibility and readability. Where the former deals with how well your text can be read (are there any hindrances like  being too small, too difficult to make out against a background colour etc.?), the latter concerns itself with whether anyone wants to read it – an enormous block of text set in a tiny type size with negligible spacing between the lines looks forbidding to most particularly if you just want to glean a couple of pieces of information.

Alignment

Because in the west we read left to right, left aligned text is easier to read since the starting point of each line is uniform. That way when the eye gets to the end of a line it knows where to go to pick up the next line. Contrast that with right-aligned text where the starting point is different on each line.

Left vs Right aligned text
Left vs Right aligned text

It’s for that reason that right-alignment is used for small amounts of text like captions.

Size

These days the ideal starting point for text on screen is 14px – that’s a sweeping generalisation since it pertains mainly to desktops. Mobile devices, which are held closer to the face, can tolerate a smaller text size.

Leading

To give your text the opportunity to breathe it’s important that there’s enough distance between the lines. This is referred to as leading (pronounced like bedding rather than bleeding) and derives its name from the strips of lead that were placed between lines of text in printing presses – the thicker the strip the greater the leading.

Many applications default to 120% which is fine for print but for text on screen a good size is 150% meaning that if our text size is 14px then the leading value would be the 14 plus 7.

Size is not always the measure

Setting a number value on our font size doesn’t tell us the whole story. Consider Font A (Open Sans –designed for screen use) and Font B (Gill Sans – design precedes screens)  which we’ve put sized both as 14pt:

X-heights compared – Open Sans vs Gill Sans
X-heights compared – Open Sans vs Gill Sans

If we take a look at the size of the x we can see that there’s a large difference. The size of the x is a good way of understanding the proportions of a font; because of that x-height is a term used to make judgements on a fonts suitability. Fonts with large x-heights tend to be better for screen use since they are more legible at smaller sizes.

The web is still typography

Type is the most important aspect of your site – it’s fair to say that 95% of the web is still typography so it’s important to have at least a basic appreciation of that dark art as well some of the terms that crop up around it.

Leave a Reply

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