Chapter 2: Typography

typeface? font? ~ what’s the difference?

The 2 commonly used terms of “typeface” and “font” seem to be used interchangeably these days and though this might not be too important for practical work, especially when designing for the web - it is an interesting aspect to consider and understand. The history of this terminology is worthwhile exploring further and will hopefully highlight the labour and love that goes not only into the design of a typeface but also the collation of variants into a font file. Here is a quick definition of the two terms.

Working with fonts

When we work on a design in any graphics app, we will need to make sure that the license permits our use for the various outputs and to have the font installed in order for the app to be able to use it.

The font's variants may come in one single font file or be comprised of several. Installation to our system (Mac or PC) is usually as simple as double-clicking the font file.

To use the font for web will be a different matter and more involved. For now, bear in mind that for working off-line, locally on your computer only, the installed font will display fine in your browser. To make it work online, the font file needs be online as well, see 'working with web fonts'.

Font classifications

Before we can look at selecting an appropriate typeface, it is important to learn about the different classifications. Generally speaking, there are four main categories. The following text is set to the default font family as a demo of the mentioned classification. See 'Working with web fonts' for more detail on how typefaces will work online.

1. Serif: Serif typefaces feature small decorative extensions, known as serifs, at the end of the main strokes. They are often associated with a more traditional and formal feel.
2. Sans-Serif: Sans-serif typefaces are stripped of the serif extension, designed for digital display with a clean and modern appearance.
3. Cursive: Cursive (also called display or fantasy) typefaces are usually quite elaborate in detail. They include handwritten or very decorative styles and should be used sparingly.
4. Monospace: Monospace typefaces allocate equal space for each character, resulting in a fixed-width design.

These four categories have now been expanded into more detailed sub-categories which extend the classifications to define the more distinct features. Check the first module on Typelab for details.

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

Legibility concerns

easy flow of reading: Left-aligned text

When we align text to the left, the result is an even left margin. The right margin, i.e. the end of line, can remain uneven as this is when we will proceed to the next line anyway.

Each line will begin at the same horizontal point. This makes it easy to read as our eyes will merely return to the same point, and drop one line down. This requires little mental energy as we will find the beginning of the new line easily.

Left-aligned text allows us to focus on what we read, allowing us to easily go from one line to the next. Whether line breaks are used or not, the reading experience will be good.

choppy & slow to read: Centre-aligned text

In comparison, when we centre-align text, the result is an uneven margin on both sides. This applies to both the start and end of the line.

Each new line starts at a different horizontal point which then forces us to concentrate more, requiring more mental energy to read the content in hand. This is more tiring and cumbersome as the flow of reading is interrupted.

Line breaks will mean an even more uneven start of lines and straining our eyes by requiring even more movement to find the start of each new line.

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 section 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

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 20^th 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.

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

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

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

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

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.

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

• Gestalt principles were discovered in the first half of the 20^th century by Gestalt psychologists, who were trying to make sense of how people visually perceive the world — specifically, how people decide whether certain elements are part of the same group or not. Proximity Principle in Visual Design, Aurora Harley, NN/g, 2020

• Form exists within space. Without whitespace there is no form as one provides the contrast in which to see the other. Learning to see and use the space in your designs is one of the most important things you can do as a designer. How To Activate Space In A Design, Steven Bradley, vanseodesign.com 2010

• Good typography depends on the visual contrast between one typeface and another, as well as among text blocks, headlines, and the surrounding white space. Typography, Patrick J. Lynch and Sarah Horton, Web Style Guide, 2009

• The relationship between the size of type and the space around it is one of the most delicate and precious elements of a composition. White Space, Massimo Vignelli, The Vignelli Canon, 2009

• Not only is white space responsible for readability and content prioritization, it also plays an important role in the visual layout and brand positioning. Myth #28: White space is wasted space, uxmyths. com

• The application of whitespace is both art and science. Truly understanding how much whitespace should be used to create a good layout requires practice. The more you design, the more you’ll learn. The Power Of Whitespace, Nick Babich, UX Planet

• Whitespace is often used to create a balanced, harmonious layout. One that just “feels” right. It can also take the reader on a journey through the design in the same way a photographer leaves “looking room” in a portrait shot by positioning the subject off the center of the frame and having them looking into the remaining space. Whitespace, Mark Boulton for A List Apart