The written word is one of the superpowers most of us has, and it is difficult to overestimate its role in the development of humanity. It is a method that, in a sense, helps us expand our own and others' consciousness, recording experiences and knowledge quite precisely, based on which the next person can go even further.
The theme of this article, typefaces, had its beginning as early as the 11th century when the German scientist Johannes Gutenberg printed and disseminated the first book (which was obviously the Bible) thanks to the printing press. However, this turned out to be a world-changing achievement, and the art of printing spread widely in the Western world.
In today's world, type is much more secular than in Gutenberg's times and is deeply connected to our everyday life. In addition to this, the digital world has made the creation and use of typefaces much more accessible to the average person. No longer is it necessary to engrave plates - just a click is enough.
Why is typography important in the design world?
The written word conveys a message, but in addition to the message itself, the presentation of the message matters. Well-thought-out and intentional typography makes the message more easily comprehensible and accessible. It creates a good hierarchy that guides the eye, gives character to the presented text, and makes the text easier to read.
Let's delve deeper and take a closer look at typefaces and fonts.
Typefaces and fonts are not the same
Firstly, it is important to understand the difference between a font and a typeface, and it's actually very simple. The font is what you see when reading this article, and the typeface is its family.
For example, on the Arter website, the body text in use is Plus Jakarta Sans Semibold, and that is the font. However, this font belongs to the typeface Plus Jakarta Sans.
The three most basic typefaces are serif, sans-serif, and decorative. Serif appears more traditional, characterized by varying line thickness and decorative strokes at the ends. Serif fonts often have a lot of personality but may not always suit the context. Sans-serif, on the other hand, is modern, simple, and often very readable. That's why most content today is in sans-serif style fonts. Decorative typefaces, as the name suggests, are meant for decoration and aren't usually suitable for longer texts.
Okay, but what typeface should I choose than?
With the basics in place, let's dive deeper and explore how to establish good typography in your design.
Personality
The simplest and crucial aspect of your choice should be the personality of the typeface - if you're creating a logo for a playground, your choice should be different from when you're writing an encyclopedia.
Also, consider what you personally like. Nevertheless, it's always beneficial to seek the opinions of those close to you (and if possible, a bit beyond). Successful design should communicate your message to as many people as possible.
Readability
Asking for help from others comes into play here as well. Inquire with people whether they find the text easy to read. If someone mentions difficulty despite using a straightforward font, the issue might lie in something other than the typeface (which we'll discuss in the next section).
Defining the technical specifications
Once the typeface is selected, we take the final step on the path of good typography and choose the specific fonts and set them up nicely.
Let's create hierarchy of fonts
Hierarchy is crucial in good design. This means that certain elements are subordinate to others. For example, this paragraph falls under the heading "Let's create hierarchy of fonts" This can be achieved through size, font weight, and contrast.
First, I establish the sizes. In web design, I define sizes for three headings and two body texts. This way, I have enough tools to convey the most important messages and additional information that the user doesn't necessarily need to see for a full experience.
After that, I assign two weights to each size. I've never found more to be useful; instead, it might make things chaotic.
Once the weights are determined, I move on to colors. Here, it's important to ensure that the font stands out from the background and is also readable for those with visual impairments. In UI design, I generally stick to one slightly brighter tone, then define an almost black color for the overall content, leaning just a bit towards the brand's primary color. Additionally, I define a third color, slightly lighter than the regular text but should not be a bright color. This reinforces hierarchy and is used for secondary information.
I almost never use completely black and white in my designs.
Let's squeese the last drop of readability out of your fonts
Readability is extremely important to reach people and not frustrate them. How to make the font as readable as possible?
First, define the length of your lines. Long lines make it difficult to find a new line. Additionally, the current line is also harder to follow. Also (yes, long lines are not nice), long lines are intimidating. The longer your lines, the more massive and complicated your text seems, and the fewer people will take on the challenge of reading it through. None of these outcomes is desired, so please - ensure that the line length is about 45-75 characters
Secondly - set comfortable line height. Line height should not be left to a chance. Too tight lines are tiring and look unattractive. Excessive spacing, on the other hand, is awkward and creates a disjointed feeling. The appropriate line height depends on the font size - the smaller the font, the larger the line height. Personally, I generally stick to 1.2 - 1.4x the font size for headings and 1.4 - 1.6x for body text.
In addition to line spacing, we also have letter spacing, which affects readability. Generally, letter spacing is determined by the font creator, but there may be cases where adjusting it is necessary. A good reason to increase letter spacing is if you use an all-caps style. A good reason to decrease letter spacing is, for example, in headings - it gives them a subtly improved appearance. Unfortunately, it's challenging to provide a specific rule for letter spacing because there are many fonts, each requiring a personalized approach. The important thing is to use your common sense and not go to extremes with letter spacing.
Of course, good readability is also aided by a clear hierarchy that divides the text into manageable chunks and effectively summarizes the content with headings.
Whitespace
I'll likely mention whitespace in all my instructional articles because it's just that important.
I'll repeat once more: white space.
It's the secret that makes design breathe, gives people peace, alleviates anxiety, creates a clean feeling, and gives each element its well-deserved spotlight. Including text.
Of course, don't overdo it with white space - if elements are closely related, they should be closer to each other. In other words, a paragraph is closer to its heading than to the neighboring paragraph.
Alignment
Alignment is important, but there's nothing difficult about it:
- Align left if you want to ensure optimal readability.
- Align center if you want to ensure that (shorter) text stands out well.
- Align right if you are quirky or want to balance other elements.
Important: avoid changing alignments within a section/block - it plain confusing.
Multiple typefaces
Yes please. My favourite amount of typefaces is 2. It allows for an ultimate combo of hyperreadable body texts and a title that is full of personality.
It's important to note that more than 3 typefaces is not recommended as you will loose coherence.
That's it
So simple and logical - now just get your hands moving and start designing. Of course, if you didn't get an answer to your question or if new questions arose during the article, don't hesitate to contact us. We're happy to answer all sorts of questions!