Debating web type

This seems to be an ongoing issue—I‘d almost call it an obsession—with centre-aligning all text. Please, pretty please with a cherry on top, do not set the alignment of paragraphs and main copy to centred. It's just bad practice!

When we work on a webpage, its layout of both textual and visual elements, our focus should be on creating a nice flow of content. The design should be engaging but primarily it should be easy to understand and easy to skim read. Our page should show a clear hierarchy, aided by headings and sub-headings, and make reading a pleasure which requires little effort.

We will consider our audience carefully, including those who might have trouble reading, like those with any degree of dyslexia. This means well formatted text, set at decent size with appropriate line spacing ~ as well as easy-to-read alignment. For longer passages, this generally means avoiding centre alignment as well as avoiding justified text (which can cause difficulties for some due to the uneven word spacing).

If we compare the two preceding paragraphs side-by-side and highlight the start of each line, we can clearly see that more effort will be required from our readers when the text is centre-aligned. This is also referred to as ‘cognitive load’, as discussed by NN/g (Nielsen Norman Group) in their article “Minimize Cognitive Load to Maximize Usability”.

An additional issue will arise with a change in viewport width, i.e. when our text reflows for different screensizes on the different devices people will use to view our webpage. This is unpredictable and can result in even more varied distances to the first word on a new line for the centre aligned text.

This tends to be a common mistake by many who are new to web design and feel like experimenting - looking at the text rather than reading it. Novice web designers often feel centred text looks nicer, gives a text-heavy page a more engaging and interesting look. Experimenting with layout and type is great, and you should absolutely have a play and see what work and what does not. But let's remember that the most important aspect of good typesetting is legibility, and to create a nice reading experience for all.

Effective uses for centre-aligned text

There are, of course, instances when centre-aligned text can be an effective means to draw attention, to make a text element stand out and break up a text-heavy page. Good examples are the sub-/headings and blockquotes which are usually quite short. In this case, we might opt to add in line breaks to control how the text is displayed and to aid legibility.

Quick tip: To check legibility, read the text out loud.
This will highlight how well it flows.

When we design, our focus is on the overall appearance of our page. We tend not to read the copy consciously as we are familiar with it and are busy with the visual aspects of the design. Reading the text out loud, word by word, will show us where the applied typesetting might force unintentional breaks in our flow. Headings or short passages of text (2-3 lines) are usually easily read. Longer centre-aligned paragraphs, however, will clearly cause a more choppy result.

Related reading

• ... align text to the left and keep a consistent layout accessibility.blog.gov.uk

• Left-aligned text is almost always the easiest to read... webaim

• Left aligned text is easier to read than centered text for paragraphs. UX Movement

• ... centre-aligned text is harder to read especially when it spans multiple lines. Metacole

• When you center-align a longer text, you will force the reader to make additional eye movements on both sides of the content. This causes unnecessary eye fatigue and results in lower reading focus. Buninux

Uppercase lettering has its uses and can be quite effective in context. There are some stunning typefaces which only offer capital letters and when used sparingly, these are beautiful and will work well. This is not an argument against using caps per se, merely a plea to be mindful of their implementation in design.

It is important to always consider the use of all capital lettering quite carefully across all media. For example, if someone sends us a text message, asking us to check on an email they sent, it will come across very differently in tone and feel when set to sentence case as opposed to uppercase.

If the message reads like this: “Hi, please check your emails.”
~ it sounds quite direct and prompting but polite.

In contrast, if the message reads like this: “HI, PLEASE CHECK YOUR EMAILS.”
~ it now seems quite demanding, as if the person contacting us is shouting.

NO ONE LIKES BEING SHOUTED AT!

As with our choice of typeface for any text presentation, the way we set type will add personality, and expression to the text and will colour the experience for the reader. Sentence case, which sets the first letter of a sentence to uppercase and the rest in lowercase, reads well and will merely deliver the message. Choosing all caps for the same message will fundamentally change how it is received.

Legibility & accessibility

One argument against setting type to all uppercase is the reading experience, which applies to titles and especially long sections of text. While the typeface might be aesthetically pleasing in the form of its letters as capitals, it will have an effect on how fast it can be read ~ and on how easy it is read by everyone. While all caps can be attention-grabbing, we will not read the text as quickly as the shape of the words will no longer be distinct.

Let‘s have a look at the title of this page as an example. We have 3 words which all have quite a unique shape due to the initial capital, followed by the mixed letter sizes. The ascenders and descenders will reach to the very top, and go beyond the baseline below. This all adds to the unique shape of the word and therefore aids legibility. As readers, we rarely read the words letter by letter but we aim to skim read, recognising words by shape and quickly moving forward.

When we set the entire title, i.e. all 3 words, to capitals instead, we lose that distinct shape of each word. The title at a glance now looks like 3 blocks of even height, only varying in length. This slows down reading and will cause some readers difficulties which could so easily be avoided.

Some of the studies into reading by shape or letter recognition are now being disputed and claim that word recognition now is more in keeping with how we read. This merely supports the case for the importance of good typesetting and the use of sentence case as a clear representation of the words within text.

The power of CSS

When we add the textual content to our webpages we should always aim for a good reading experience, enhance the legibility for all. Accessible text will therefore merely require good input which is grammatically correct and does not add confusion when accessed in different ways - and styling which aims for good type size, line height and spacing.

One of the benefits of CSS is the power of shaping our designs for the best visual appearance. In the case of letter casing, this will allow us to keep all our content nicely accessible. If we, for example, want to set a heading to all capital letters - we can simply add our text in sentence case which is the most appropriate method for text input, be that in markup directly or when added via a CMS. We will use CSS to set the heading to all uppercase and it will look as planned. The added benefit is that this will now ensure that a screen reader will not mistake it for an acronym or abbreviation and read it out correctly.

It's important to consider all possible ways how someone might want to read our content. Some might use the 'reader' view, which will strip out lots of the styling we applied and render the text in a plain, clear and easy-to-read format, hence showing the text as input originally. Others will prefer the audio version and use screen readers or similar apps to access our text. Again, having the text written in a meaningful manner—without the implied emphasis all caps might bring—will yield the the best result.

Related reading

• All-caps paragraphs are an example of self-defeating typography. If you need readers to pay attention to an important part of your document, the last thing you want is for them to skim over it. But that’s what inevitably happens with all-caps paragraphs because they’re so hard to read. all caps, Butterick’s Practical Typography

• You might not interpret THIS as anything more than the word “this”, however, screen-readers (...) which many people with vision impairment use, has a high chance of misinterpreting it as “T.H.I.S”. To all writers: please avoid all caps!, Aries Arditi

• There is conventional wisdom, supported by some evidence and logic within the fields of typography and cognitive science, that asserts that text set in mixed upper- and lower-case is more legible than all upper-case (all capital letters). Letter case and text legibility in normal and low vision, Attila Vágó

• Capitalised words are not easy to read for many reasons. We're more used to reading words in lowercase letters, so our brains find lowercase words easier to scan and absorb. Capital letters, Content Design London

• ... headlines in ALL CAPS. That's always bad. Reading speed is reduced by 10% and users are put off by the appearance of shouting. The Top Ten Design Mistakes, NNGroup

• ... Avoid text in uppercase/capital letters and small caps, which can be less familiar to the reader and harder to read. Dyslexia friendly style guide, bdadyslexia.org

• Capitalized text is difficult to read. It’s all one big rectangle. The general rule when it comes to reading is: if it’s more difficult to the general public then it will be almost impossible for a person with a cognitive disability to read. . Making Accessible Links, Gian Wild

• Evidence from the last 20 years of work in cognitive psychology indicate that we use the letters within a word to recognize a word. Many typographers and other text enthusiasts I've met insist that words are recognized by the outline made around the word shape... The Science of Word Recognition, docs.microsoft.com