Typographic observations

When a designer does not see imperfections in his work, then for him they do not exist. Unfortunately, they continue to exist for everyone else. I have collected a small selection of the use of typography in design that needs attention and discussion. The material was planned as critical, but turned out to be more informative. I hope you will find something new and useful in it.

Content

Dark mode – perception of font weight when inverting colors.
All Caps in Script fonts – upper case can look really bad.
Title Case – about the analogy of speech and writing and a little about the Bauhaus.
Optical Size – fonts may have versions for different sizes.
Leading – how to adjust line height for different font sizes.
Spacing – will be useful for logo designers.
Size contrast – why a big should not be like a small.
Shape overlaps – about rare font rendering bugs and their fixes.

Dark mode

The perception of black text on a light background is historically constant because of the technique of printing ink on paper. Nowadays, this is no longer the only factor. The dark mode of interfaces allows you to save the smartphone's battery life, and also makes the computer screen less bright at night.

Typography also adapted to such a new application by using certain optical compensations. The thing is, white text on a black background looks bolder than black on white. This is an optical illusion: the white color has the property of visually expanding, capturing the surrounding black space, which makes the strokes of the letters visually thicker. If you put black and inverted (white) text typed in the Regular font weight next to each other, the white text on a black background will look like it was typed in the Medium font weight. There are two ways to compensate for this effect.

The first method only partially mitigates the effect of expanding the white color. It consists in reducing the color contrast, where a dark gray is used instead of a black background, and a light gray is used instead of white. Less contrast means less illumination. This is a common practice for most dark interfaces.

The second way is to change the font style (weight) to a lighter one, such as Light instead of Regular, or Medium instead of Bold. That's right – Light font style on a black background will look optically the same as Regular style on a white background. A variable font can also be used to more precisely control the font weight to compensate. This weight-replacing method best compensates for the illumination of the text on a black background, although it requires additional font styles.

When evaluating the right font appearance, it is worth remembering that the text should be read, and not measured with a ruler for each of its letters. Because it is in the process of reading that the reader perceives the text, and ultimately the font.

All Caps in Script fonts

Capitalization (All Caps, upper case, all capital letters) is a popular practice for logos or titles. This stylistic technique turns the text into a monotonous and compact horizontal composition. There is even a category of Unicase fonts, which use only capital (in height, but not necessarily in design) letters. Most of Serif and Sans Serif fonts look good when used in All Caps.

However, capitalization does not always look good, and some font categories are not designed for such use at all. First of all, these are Script (and some of Cursive and Handwritten) fonts, the capital letters of which are often forcibly decorative. They work great at the beginning of a sentence when they are followed by lowercase letters, which creates a certain dosed balance of decorative-simple. However, several such decorative capital letters in a row quickly create visual overload and an inharmonious structure.

Probably, at least once in your life, you have seen a store sign with the inscription FLOWERS, which is printed in all capital letters. The designer's logic in this case is clear: beautiful + beautiful = more beautiful. However, the effect achieved is the opposite – such a design looks cheap. To summarize: the more decorative capital letters look, the greater the risk of an unwanted effect when capitalizing them.

Title Case

Similar to All Caps, capital letters in titles can be at the beginning of each word, which is called Title Case. Yes, many publishers love it. My position is quite unpopular, but I think abusing the title case is a bad idea. This technique seems to tell us: "I Am The Headline, I Am Exactly The Headline, Very Important, Every Word Of Mine Matters." Feeling a certain tension? Good, because that's just one little headline. Everything becomes more dramatic when it is not one, but a whole chain of headlines, as in a news feed.

Do you know why the principles of the Bauhaus include a refusal to use capital letters in general? If we draw an analogy between speech and writing, when we communicate, we do not shout out the first syllable at the beginning of a phrase. Based on this, Bauhaus suggests writing text without capital letters. This idea is unpopular, but it is sound. And now let's imagine that when talking we shout out every word. It doesn't sound very good to me.

My personal opinion is based on two things: firstly, we expect to see names and titles written in capital letters; secondly, that how our eye moves across a line of text and how our brain decodes this visual texture and recognizes words and sentences within it. So, When I Read Headlines Like These, I Feel Like I'm Stumbling At Every Damn Step. In other words, instead of a whole sentence, we perceive a set of separate words. Undoubtedly, the meaning of the text will eventually be perceived, but the brain spends much more resources on processing. We are trying to understand why the very next word starts with a capital letter again – is it the name of an organization or someone's name, or is it the beginning of a new sentence?

Another factor against the title case is related to the modern pace of life, when people, due to lack of time, only read the headlines in the news feed. By the way, this is what led to the phenomenon of TL;DR when the reader does not have the desire or the time to perceive long texts, but this is a topic of another conversation. Given that titles are usually quite short, using a title case texture doesn't strain the eyes too much when reading. However, if you read only such titles for several minutes in a row, even taking into account a certain habituation to the title case, such strain increases.

Optical Size

Text rendered on screen is different from printed text. One only has to compare high-quality offset printing at 2400 dpi (dots per inch) and a conventional monitor screen at 72 ppi (pixels per inch) to see a 32-fold difference in detail. Modern digital displays have a higher resolution, but they are still not widely used. The text on the monitor screen adapts according to the pixel grid, so we see a simplified version of it. And the smaller the text size, the simpler the shape of the letters. In such an environment, any line that is too thin can end up being smaller than a pixel, so it may disappear altogether when rendered.

You probably know that there are Display and Text font categories. They are designed to be used in different font sizes. The goal is a visual compensation that makes a small size font look optically similar to large font, as if we just reduced the font size and it continues to look as detailed and readable as it was at large.

Let's consider two examples. If you take the Display font and reduce it to the size of small text (lower row on the image below), it will look weak and difficult to recognize, namely: the letters will begin to merge with each other due to too tight inter-letter spacing; some strokes and serifs will become too thin or almost invisible; any decorativeness will turn into visual dirt. All this makes it difficult to recognize the text and slow down reading.

And the opposite example. Let's take a Text font and increase it to the size of the headline (upper row on the image below) – the shapes of the letters look very rough, the distance between the letters becomes too large and the words start to fall apart, the headline itself takes up too much space, and eventually we want to move a bit away from it for more comfortable reading.

The correct optical size is important first of all when choosing a font for the body (small) text, because the reader spends more time on it. Text fonts have a rougher, simpler shape without subtle strokes, as well as looser spacing, which makes their construction specially designed for use at a small size.

Not all fonts have Display and Text versions, so it is important to be able to identify them yourself. First of all, let's look at the name of the font family – if it does not contain the word Text, then most likely it is a header font, less often – a universal font. The main criteria for a good readability of a text font: a wider distance between letters so that they do not merge with each other in a small size, low contrast (horizontal strokes should not be too thin), x-height is quite high, the shape of the letters is simple, not decorative. The main criteria for heading fonts: dense space between letters (because in large size letters are easier to recognize and extra space between them is not needed, besides, headings often need to be compact), greater contrast of strokes (primarily for Serif fonts, so that they do not look too rough).

There is a category of fonts that look universal in any size – these are Sans Serif (Grotesque) like Helvetica. They don't have serifs, and their design is low-contrast (the letters have a minimal difference between the thickness of horizontal and vertical strokes). Thus, grotesques have almost no fine lines or small elements that need to be adapted for different sizes. This makes them comfortable to use in any size. However, this universality is quite conditional, because it sacrifices one or another parameters. In other words, universal doesn't mean perfect.

Both Display and Text fonts are important. A catchy headline font sets the desired character and attracts attention. A good text font for body text is easy to read. It is worth explaining to the client why the project needs a certain set of fonts that harmonize with each other instead of one that performs different tasks.

Leading

In graphic editors such as Adobe, the Leading (Line Spacing, Line Height) is set to 120% of the font size by default. This approach helps to preserve the composition of the text layout when changing the fonts. However, different font sizes require different values for the leading.

Here everything is simple – the larger the text, the closer the lines should be to each other, otherwise the header will not appear as one part (the image below). The only restriction is that the letters of the upper row should not touch the letters of the lower row, that is, they should not collapse.

And vice versa, the smaller the text, the greater the distance between the lines should be (the image below). This is necessary so that it is easier for the eye to navigate when moving from one line to another and not to lose its position when reading. If the text is small and the lines are too close to each other, it slows down the reading and requires more attention.

Another factor is the length of the small text. It's one thing when we have to fit only two lines on a small label where compactness is important. And a completely different one is a long text in a book that requires maximum comfort when reading.

It is also worth knowing that different fonts have different vertical characteristics and may require individual leading adjustments for their optimal perception.

Spacing

This part is the most in-depth in type design, however, this knowledge will also be useful to a graphic designer, especially when developing a logo. In typography, letter spacing consists of two components – spacing and kerning. Any of these components can be poorly executed for various reasons. So, for example, free fonts often have no kerning at all. Some of the first digital fonts only have just a critical kerning (due to limitations of older software versions). At the same time, the quality of the spacing depends on the developer's experience and professional skills.

A useful skill for a graphic designer is the ability to see these optical imperfections and, if necessary, be able to correct them. For example, when working on a logo, the text is usually converted into vector outlines, and this is a great stage to correct any optical imperfections. The only difficulty is that they are hard to spot unless you know where to look.

If all the shapes of the letters were rectangular or of any other uniform shape, we could easily say that "these letters are too close, and these are too far apart". However, letters come in a wide variety of shapes – rectangular, round, diagonal, and others. And all these forms are found in various combinations. This makes evaluation difficult.

So it's time to look between the letters. When evaluating the text, we first of all look at the shapes of the letters. However, a lot of important things happen around these shapes, that is, inside and between letters. This is called White Space. It is similar to the liquid spilled between the letters and is unique to different letter groups.

That is, we need to visually estimate the amount of white space instead of the linear distance between letters. White space should be balanced between all letters. Start with the second letter and compare the white space to the left and right of it. Pour it into two conditional glasses. Are their contents optically the same?

Size contrast

The lack of contrast between large and small text is a common problem that affects not only the typographical component, but also the artistic one. There are many different principles for building a composition, and one of them is based on the contrast between large and small. This principle is often used in painting, in cinematography and in art in general.

The large dominant object is the focal point and all the other smaller elements are complimentary. A large element attracts the attention of the viewer or reader, so it should not be similar in size to other elements, that is, it should not merge with them in size. There is no exact ratio and it is individual in each case, but a 2 to 1 ratio can be used to start.

Shape overlaps

This is a case that font users should not, in theory, encounter, but which they may. Fonts usually have merged letter shapes already (it's like flatten layers in a raster file before the printing), while some other fonts use sets of separate, non-merged elements that overlaps each other. First of all, these are variable fonts, where this technique is desirable for a better display of complex shapes. But the overlapping shapes can also be found in a static (not variable) fonts, due to insufficient testing by the developer or due to ignoring a possible incorrect display. The OpenType documentation considers this to be acceptable, but the incorrect display has not gone away, even in the latest versions of the applications.

Such unwanted display of the font can be found both in graphic editors and in web browsers under certain conditions. In the graphic editor, this can be corrected by converting the text into vector curves (Create Outlines). Do this before exporting and be sure to save the file before the text is curved.