Tell us more and we can tailor a more detailed response to your enquiry

Yes

As a globalized resource of information, text makes up the fabric of the internet. But the considerations we make and technologies we use to present text on screen is still in many ways behind that of traditional printed media.

Correctly framing text improves reading speed and reduces eye fatigue, but has also shown to impact the readers understanding of the content itself. Books and papers have a fixed page size which gives the editorial team complete control of the layout ensuring content is easy to read. But modern responsive websites don't have this luxury, as content needs to flow dynamically based on the reader's screen size, which presents many challenges when trying to make the content as readable and approachable as its printed counterpart.

 

Readability

The retina of the eye has two types of photo-receptor cells which each perform a unique role when reading. Cones are concentrated towards the center of the iris and pick up fine detail and edges (photopic vision) whereas rods are more predominant towards the edge of the iris and are used to detect general shape and movement (scotopic vision).

When reading, your photopic vision will be on the current word and letter, but subconsciously your brain will be using scotopic vision to evaluate the shape of the upcoming words, helping to preempt words and punctuation.

If your lines are too wide then the readers eyes will get fatigued and have a hard time focusing on the text.  The reader may also lose awareness of the text and accidentally skip or re-read lines. If your lines are too narrow the eyes will have to track back too often, breaking rhythm and decreasing reading speed.

The general consensus is that somewhere between 45 to 75 characters (including spaces) is the ideal range to aim for. The best technical way of achieving this line-length is by enforcing the width based on the font-size you are using. On average a character width is around half its height and by using this fuzzy logic ,you can calculate the ideal width of the content container: 75 * (font-size / 2). There are also JavaScript libraries to help do this more accurately, such as FlowType.JS.

 

Fonts

The next issue is font usage and choice of font-face. What works for print, may not work on a screen. Mobile phones now have incredibly high dpi screens that rival printed text, but most desktop monitors and TVs are still 72dpi or lower which needs to be taken into account when choosing font face and text size for small body copy.

Popular opinion states that sans-serifs are easier to read when small, but personally I think that modern rendering techniques (anti-aliasing, proper hinting) have mostly resolved any issues with serif fonts and so both can be considered for the web.

An increasing number of font-families now have screen optimized alternatives, so it's worth researching these and for example, use Georgia instead of Palatino or Verdana/Tahoma instead of Helvetica/Arial.

If your not sure if the font is suitable for the web, the main things to look for are a tall X height and well hinted.

 

Content

The biggest fundamental problem to overcome is the delivery of the content itself, often the content is worked on during development or post development, which means that the designers have to use placeholder lorem ipsum text and therefore picking fonts and column sizes that may not suit the final content.

Ideally designers should be provided with the content at the start of the project, so they can use an intimate knowledge of the text to ensure the pages frame it correctly, and ultimately increase the readers comprehension of the site.

Nudge Digital Logo

Generate results using digital