Debating web type

• reading experience • common mistakes • much debated aspects •
Web Design is 95% Typography.
95% of the information on the web is written language. It is only logical to say that a web designer should get good training in the main discipline of shaping written information, in other words: Typography. Oliver Reichenstein, ia.net, 2006

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”.

comparison of start of line

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

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.

comparison of page title set in sentence case and all uppercase, with graphic created for outline of the shape of the words

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

White space is one of the most effective methods in visual media, be that for photography, illustration, design for print and web or app design. It allows us to create a balanced presentation of all elements which will be both accessible and easy to use. Also referred to as ‘negative space‘, it has nothing to do with the colour itself but rather the empty space used to separate content elements.

White space is present in type - it is part of a typeface‘s design in both the forms of the letters and the letter spacing. It is also part of the typesetting itself via line height and vertical space between elements. It will contribute greatly to a pleasant reading experience when implemented well.
If we ignore this aspect, or override default settings, text may become quite inaccessible, be difficult to read and drive our readers away.

White space can be used to achieve different kinds of effects: To establish an even and calm balance. To draw attention. To add focus. To create tension or to add dynamic. To pace the consumption of content.

By using white space as fitting our content and context, we can ensure that our webpage will not look cluttered or too noisy and busy. Appropriately generous spacing will allow the text and/or media to remain the focus of the page, fostering a calm and pleasant viewing experience.

Gestalt theory

To rationalise why white space works, we can refer to some classic design theories which have been around for longer than the web and have remained effective ever since. The following design principles can be traced back to the Gestalt theory which outlines one aspect of how we perceive the world and interpret visual clues. The word 'Gestalt' is German and means form or shape ~ and is often interpreted as meaning pattern. In the early 20th century psychologists found that our perception of visuals is not merely formed by the individual and separate parts but also by seeking connections via vicinity and environment. In addition, they found we can influence how we perceive a certain visual by our free will. We might see and interpret an image one way, then change our perception or even control it.

multistability visuals: cube + vase

These two visuals are the famous examples to illustrate multistability, an equlibirum of multiple points which affect our vision and influence our interpretation.

The 1st visual,
clearly depicts a cube. Most of us are able to switch between seeing the perspective in different ways: it can be seen as a cube which has its front plane (bottom left) facing the viewer, with its back plane towards the top right. Or it can be seen that the back plane is towards the bottom left with the front plane extruding towards the top right.

The 2nd visual,
can be seen as two entirely different subjects: do we see a vase? Or is this an image of a silhouette of two people's faces looking at each other? ~ again we could choose to interpret this one way or the other.

Design principles

The Gestalt theory therefore proves that white space can influence how our audience might perceive our layouts. Early design theories established the following principles which rely on the use of negative space to establish certain patterns.

Proximity

illustration of grouped elements

Grouping elements will imply a relationship between them. Examples of this are any written text (we use paragraphs to group a certain point, argument or section of text together), or on commercial sites where we will group the product with its descriptions, details and pricing to clearly show they relate to each other.

Rhythm

illustration of reading rhythm via spacing

Our use of headings and subheadings in text heavy-pages serves not only to create a visual hierarchy but also to establish a certain rhythm. The headings, paragraphs, lists and blockquotes will all read slightly differently through the inherent or applied white space. The flow of reading will therefore have its own set rhythm which will aid understanding and enhance the readability by varying the pace.

Balance

illustration of even and uneven balance

White space allows us to create a certain balance within our page. We might choose to implement a symmetrical balance to create an even and calm presentation, resulting in a reassuring appearance and a fluent reading experience. Or we might opt for an asymmetric balance to create drama and draw attention to the various aspects of content.

Beyond legibility

One excellent way of understanding the power of white space is to look at print examples, be that magazine or book covers, or layouts of feature articles. The following four examples of the book covers for the Bauhaus publication show how effective the liberal and refined use of white space can be to create an eye-catching and dynamic design.

bauhaus book cover 1 bauhaus book cover 4 bauhaus book cover 11 bauhaus book cover 12

How we use white space goes beyond the facility of easy reading. While we will aim for clear and accessible presentation of content, there are other aspects which will have an effect on how the final layout will be interpreted.

[...] in typography the white space is more important than the black of the type. The white space on the printed page is the correspondent of space in architecture. In both situations space is what qualifies the context. Naturally, the organization of information needs a structure to hold together, but one should not underestimate the importance of white space to better define the hierarchy of every component.

White space, not only separates the different parts of the message but helps to position the message in the context of the page. Tight margins establish a tension between text, images and the edges of the page. Wider margins deflate the tension and bring about a certain level of serenity to the page.

Massimo Vignelli, The Vignelli Canon (p92), 2009

Related reading