Typography: a basic guide to its use in digital design

Some people may wonder why a designer devotes so much time to the choice of typography when approaching a project. The truth is that typography is one of the most relevant aspects when making decisions about the design of our products since it will not only define part of the feeling that the user perceives when he sees it, but it will also be decisive to facilitate the transmission and understanding of the message we want to communicate to him. It is therefore of utmost importance to take into account specific knowledge and aspects to choose the fonts that best suit our project.

Microtypography and macrotypography

When we talk about typography, it is essential to know that there is a division between two fields to work on the different aspects of this broad discipline. Thus, we can talk about microtypography and macrotypography.

Microtypography

It studies all aspects of typographic detail and includes such important aspects as:

• Glyphs and how they behave and affect each other.
• The spacing between letters.
• The spacing between words.
• Line spacing.
• Choice of the typeface.

Microtypography

Macrotypography

It studies the general composition, how texts are organized on a page, and the overall effect they produce. Within this branch, we find aspects such as:

• The typographic texture (the stain produced by the mass of text when viewed globally).
• The hierarchies of the text blocks (relationship of importance that exists between the elements).
• The grid (the proportion of the columns, the size of the gutter, etc.).

Macrotypography

Typography anatomy

Typographic anatomy refers to the individual characteristics of each glyph that make up a typeface. The glyphs are the characters of that font, and these characteristics are what define and give personality to each typeface family.

The body of each glyph within a typeface is composed of multiple parts, but there are some elements that are more important in defining and giving this personality. The most important of these are:

• Asta: The most structural part of the body of the glyph and the one that defines the contrast.
• Finials: Also known as ‘exits’ or ‘serifs’, they are the protrusions of a glyph. Serifs, for example, have finials. When a typeface has no finials they are called terminals (sans-serif).
• Ascenders: They are the parts that protrude above the height of the x. The ‘t’, ‘h’, ‘f’ or ‘l’ are glyphs with ascenders.
• Descenders: These are the parts that protrude below the baseline. The ‘q’, ‘g’ or ‘y’ are glyphs with descenders.

Most relevant parts of a glyph

Contrast, baseline, and height of the ‘X’

In the previous sections, some important concepts have been mentioned that greatly influence and determine the typographic choice and I explain them below:

Typographical contrast

Typographic contrast is the aspect ratio between the thick and thin strokes of the glyphs. In general, the contrast is defined by the thickness of the shaft. We can distinguish between high and low contrast. The lower the contrast of a typeface, the more homogeneous and solid in its appearance, with no great difference between the shaft and its finials.

Contrast

Baseline

It is the line where the typography is set. It is very important to take it into account when choosing typefaces to create our typographic combinations.

Depending on the height of the baseline at which the typeface has been designed, it may give the impression that it is higher or lower. If we take typefaces with different baselines, they may be misaligned and generate a strange effect.

Height of the ‘X’

It is the line that delimits the height of the ‘x’. The x has no ascenders or descenders, so its body is used as a reference measure to define the size of the typeface. Depending on the height of the ‘x’, a typeface can be larger or smaller if it has the same assigned value (e.g. 16 px). This aspect is also important to take into account when choosing typefaces to combine them, because if we take two typefaces with very different sizes of the ‘x’ it may generate undesired effects when working with the sizes.

Baseline and ‘x’ height

Kerning and tracking

They are the typographical terms used to define the spaces between letters.

What is kerning?

Kerning is the separation between pairs of letters. It is used to make corrections between pairs of letters that, due to their design, would be too far apart from the default tracking.

Kerning

What is tracking?

Tracking is the separation between all the characters that make up a word. On the web, it is known as ‘letter spacing’.

These typography values are predetermined by the typographer who designed it, but it is generally advisable to modify it according to our needs to facilitate readability to the user whenever necessary.

• For lower case: the tracking is adjusted with negative values (closer together).
• For uppercase: the tracking is adjusted with positive values (further apart).

* It is advisable to move between values of 0 / 1 or 0 / -1 because if we go too far we run the risk of compromising readability.

Comparison between tracking and kerning

Typographical classification

Within the same typeface family, we can find different variables according to their weight and width:

Weight: black, bold, semi-bold, medium, regular, light, thin…

Width: compressed, condensed, extended, narrow

More classifications in typography

• Capital letters (or high case): should be avoided in long texts due to lack of legibility, since they are homogeneous and lack ascenders and descenders.
• Lower case (or lower case): used for large masses of text, such as paragraphs, and are highly legible.
• Italics (or italics): used to emphasize and give a special meaning to a certain text (for example, a quotation).
• Bold type: used to emphasize and highlight text.
• Small caps: these are lowercase letters that look like capital letters. They are used to cite names of authors in bibliographies, centuries, characters in a theatrical play, etc…

Typographical classification

Typographic styles

Typographic styles can also classify typefaces. There are several styles, but the main ones are:

Serif

They are old typefaces that have existed since the beginning of typographic printing. They are usually very legible. The most common is Italian or Roman. They transmit seriousness and elegance. They are usually used for the body of the text (paragraphs).

San serif

They lack finials, and this condition gives them a modern feel. Their clean style conveys security and visual clarity and allows for quick reading in fractions of seconds. They are usually used for the body text (paragraphs, paragraphs).

Script o handwritten

They emulate handwriting or calligraphy and are often used in signatures, titles, and invitations. It is associated with elegance and also with craftsmanship.

Decorative

Decorative typography is used to liven up and give character to publications and give them expressiveness. There are all kinds (horror, cartoon, groovy, etc.) and they are usually used in very specific parts of the text such as, for example, the headlines.

Typographic styles

Horizontal rhythm. What is it?

It is defined as the rhythm that marks the horizontal space between the characters and between the words of each line and affects the readability of the body of text.

The more homogeneous and consistent the horizontal rhythm, the more legible it will be. This is influenced by:

• Tracking (letter-spacing)
• Paragraph justification: right, left, center justified, justified …

In web design, it is challenging to control the horizontal rhythm. The letter-spacing can only be adjusted globally.

As for justification, it is better to use left justification, except in exceptions where we will use right justification (tables, numbers) or centering for short texts. We should always try to avoid justifying columns on both sides since we cannot manipulate the tracking individually or make cuts between words, which generates the formation of rivers and streets in the text mass.

Horizontal rhythm

Vertical rhythm. What is it?

It is defined as the rhythm that marks the vertical space between paragraphs and between the lines that compose them.

To create a good vertical rhythm, it is necessary to achieve a good consistency of the spaces between elements. This is influenced by:

• Line spacing (line height)
• The hierarchy between elements (headlines, paragraphs, etc.)

Line spacing differs from how it is applied on screen and how it is applied on paper.

Paper

The text sits on a line called the base grid from which the descenders descend. The line spacing is the space between one line of the base grid and the next.

Digital

Line spacing is applied proportionally both above and below the typeface. This helps to better distribute the elements and makes the spaces between them more homogeneous. It also allows us to better arrange the interactive elements; for example, in a button, aligning both the button box and the typography so that everything is well centered.

Vertical rhythm

Typographic scales

On the web, we usually apply many different types of font sizes to establish the hierarchy of our elements; it is essential to follow certain guidelines when doing so since, if we were to give random values to the sizes:

• It would create great chaos in our design.
• There would be a great lack of consistency, and, therefore, disharmony in the hierarchy.
• It would slow down our work.

For all these reasons it is better to rely on a system of mathematical scales that calculates the values by means of a ratio.

For this we have tools that help us to generate these values with different types of ratios, automatically; but, in spite of using them, we will always have to make small modifications to adapt them correctly to our needs.

If we use this type of mathematical scale we will get:

• Great harmony between the hierarchies of our texts (they will be well proportioned).
• Our workflow will be more agile.

Grid Lover

Reading patterns

These are the user’s reading habits. Today, we live in an era in which we receive more information than we can consume on a constant basis. This information saturation affects our reading patterns.

The way we read on the web is not the same as the way we read on paper. On the web, we scan texts and only stop to read what is important. This is why it is very important that the content is well structured and hierarchical so that it can be easily detected by the user when scanning.

The main reading patterns on the web are:

Reading pattern in ‘F’

The user scans from left to right and from top to bottom looking for points of interest until he detects them and stops. This pattern is usually found in texts designed as a single column and a single block, such as reading articles.

Reading pattern in ‘Z’

It is more common in pages where the content is more dispersed by the composition and there is no central column of text. The content is composed in different blocks, as for example in a commercial content page.

 Reading patterns

Typography on the web

Within a website we can find 3 categories of text according to their functions:

Headlines

Headlines are usually used to define the tone of the content and transmit sensations to the user. In this text, we can use more expressive typographies. They are large texts that aim to attract the reader’s attention.

Features

They have more freedom to be more expressive or decorative than the typography of the body text. With this expressiveness, we will not only be transmitting sensations to the user but will also help us to generate a more attractive aesthetic for our typographic design.

Body text

In this part, readability takes precedence over everything else. Being content with a large amount of text, the user needs to have a comfortable reading that does not generate visual load or fatigue by making an extra effort to read.

Features

It is said that serif fonts are more legible on paper and sans-serif fonts are more legible on screen, but other more important aspects when choosing a typeface that works on screen include:

• The height of the ‘x’: The lower the height of the ‘x’, the smaller the typeface will appear and, therefore, less comfortable to read. Try to choose typefaces with a good height of the ‘x’ but do not overdo it, since ascenders (‘h’, ‘l’, etc.) could be confused with other glyphs and be less legible.
• The aperture size: This is seen in letters with open shapes such as ‘c’, ‘g’, ‘s’ or ‘e’. The larger the aperture size, the easier it is for the user to read. If the aperture of a typeface is too small, when working with very small text sizes, the glyphs can be confused; for example, a ‘c’ with an ‘o’.

                                                                                                      Aperture

• Avoid typefaces with too much contrast: They generate an uncomfortable reading, especially on screen, due to the glare of the light emitted by the screen, since it eats part of the typeface, and the thinner areas may disappear. This also happens with typefaces in their light/thin versions. Typefaces with high contrast or light weights should only be used in headlines and in large sizes.
• Homogeneous color: This is achieved thanks to low contrast in the choice of typeface and a constant letter spacing that is well proportioned (not too close together, not too far apart).
• Many variables: The greater the number of variables in the typeface, the more flexibility we will have when composing the text so that it can be easily scanned. The ideal is to choose typefaces with at least 5 variables (weights). It is always advisable to avoid choosing extra light or extra bold weights because they are less legible.

Importance of contrast and homogeneity

Interactive elements

These are the elements that help the user to move through the web content. The most important aspect of interactive elements is their affordance, that is, that they have the necessary characteristics to be perceived by the user as an actionable element with which he can interact. These elements are, for example:

• Links
• Tags
• Navigation menus
• Buttons

Features

Interactive texts are usually small, so our typography must be easily scannable and readable at reduced sizes. For this reason, it is advisable to:

• Choose typefaces with a high ‘x’ height and wide spacing between glyphs.
• Avoid serif typefaces, since it is more difficult to identify glyphs at very small sizes.
• Check the distinction between glyphs at small sizes: A test we can do to check legibility is to place a ‘1’, a lowercase ‘l’, and an uppercase ‘I’ (i) next to each other and see if they are sufficiently distinguishable.

Readability test

Some typefaces have a caption variant designed to look good on small and interactive elements.

Also…

Interactive elements can be differentiated by:

• Size
• Color
• Behavior

Typography: What should text links look like?

The most recognizable, since the beginning of the web, is to put them in blue and underlined, but over time we have learned that if a text is of a different color than the mass of text or is only underlined, it is probably also a link.

The interactive text should not be the same color as non-interactive text unless it is underlined (although it is always better to use a different color). It is also advisable to avoid using blue for non-interactive text.

Both could cause confusion to the user since blue has always been used for hyperlinked text since the beginning of the web.

Another essential thing is to maintain consistency, always applying the same treatment to all the links on our website.

Link

Columns in web design

When deciding the box width of our texts, we must take into account certain essential aspects, such as, for example, the size of the body text or the line spacing, which are closely related to this. Therefore, if you change any of these values, the rest will have to be modified accordingly.

According to John Kane’s Manual of Typography, the line width for a paragraph should be between 45 and 75 characters; 66 characters is about the ideal number of characters for comfortable reading on screen.

Tips for designing web columns

• Avoid making the line too short (less than 45 characters): To avoid forcing the user to jump between lines too often.
• Avoid making the line too long (more than 75 characters): To make it less complicated for the user to find line beginnings.
• If the width of the box is smaller, the line spacing should be slightly narrower. If, on the other hand, it is larger, it should be lengthened a little in order to improve legibility.
• If the typeface has a small ‘x’ height, it is advisable to make the box’s width smaller and the line spacing a little narrower.
• When working for a mobile device, it is normal to have a box width of around 40 px, so it is not advisable to have more than one column in our designs.
• Do not justify columns on both sides. As the web is a flexible and mutable medium, we cannot control the horizontal rhythm precisely. Justification on both sides creates an uneven mass of text, forming rivers or streets that, apart from being unsightly, make reading more difficult.

Variable fonts. What are they?

                                                                                                                 Variable font

Variable fonts are fonts that have no weights. They are in a single file, and their variants change depending on the value you give to the shaft.

The advantage of these fonts is the versatility they offer in a single file. If we wanted to have all the weights of a typeface on a website, we would have to upload all the files to the server, while in this way, with a single file, modifying the values through the css, we have all the available options at our fingertips.

In addition to this, it can also be used to create animation efects like this one.

Variable font

Conclusion

After analyzing all these aspects concerning typography, we can take for granted the importance of stopping to think about which will be the most appropriate for our project and take our time to choose well, as it will be a decisive point in our design and will make a big difference in our products.

Reference sources
Raúl Marin, John Kane, Gemma Busquets, Oliver Schöndorfer, Enric Jardí, Ellen Lupton, Javier Alcaraz