Fonts are important when creating a website

The 10 most important basic rules for typographic design.

Typography is the art of designing with writing. It can be about printed matter, websites or control systems in buildings or in public spaces. From practice and legibility research, rules can be derived that make work easier, especially at the start of a career. We introduce the ten most important ones.

The design makes the content clearer

There is an essential goal for design laws and design rules: the content should be clarified. The typographic design of the Bible, for example, should be different from that for a pizza service. Therefore, at the start of the project, the designer determines what the appearance of the design should be: reserved, serious, appealing or striking?

Fast readability as an important design goal

These examples already show the range of graphic design and typographic design. For the quick readability of longer texts in brochures, magazines or books, tried and tested rules apply. The focus is on making a text understandable and accessible. Good typography moves in the area of ​​tension between legibility and an interesting appearance. We present the ten rules for this below.

1. Design scope: structure content according to information content

The design is not just about the printed area, but also about the empty space. It creates space for the printed surface to have an effect - comparable to a cathedral, which only really works through the free space surrounding it. For this to work, printed matter should not be overloaded with text. So typography is not just about what you can design, but also about what you can leave out.

2. Font: Which font has the right profile for my project?

Different fonts represent different content. The positions range, for example, from factual fonts for forms to emotional ones, which are suitable for a greeting card due to their decorations. If you have a design project in front of you, you should carefully consider what impression the selected font leaves behind: should it attract attention and emphasize a content or an image or should it be reserved and only functionally oriented towards legibility?

3. Number of fonts: less is more

Many typographers often only work with one or a maximum of two fonts for their projects. The combination of more fonts - three or four - increases the "variety" factor, but is at the expense of legibility and creates disorder. In recent years, font families have been expanded to include more and more new styles. There are also font families such as Rotis or Stone, which combine serif (Antiqua), sans-serif (Grotesk) and a hybrid between the two. Even within a large typeface family, there are so many different expressive options available.

4. Font combination: opposites attract

Often one combines a serif font (Antiqua) for the paragraph text with a sans serif (Grotesk) for the headings. The sans serif can also be used for sub-headings and sub-headings or the pre-text. As a rule, you should not combine serif fonts with serif fonts or sans serif with sans serif. The weekly magazine “Die Zeit” breaks this rule by using two different serif fonts - Garamond for the running text and Didot for the headings. Nevertheless, it achieves a distinctive contrasting effect by setting the Didot extremely large in the headings.

5. Font sizes: two are better than one

The common font size for bulk texts is between 8 and 12 points. When designing, the question initially arises as to which font sizes should be used. There is a simple rule of thumb for this: the headline should initially be made twice as large as the body text. With 12 points of continuous text, the headline would be 24 points. The creative contrast effect can be increased by tripling the headline in relation to the body text (= 36 point font size).

6. Number of font sizes: through reduction to typographical clarity

Typography is often about making the most of conceptually limited resources. What applies to the number of fonts also applies to the number of font sizes. In case of doubt, do not use more than two font sizes in a printed matter: one for the headline and one for the body text. Often a smaller font size or a different font style is used for captions.

7. Fonts: Regular, semi-bold, bold or extra bold?

Many well-known font classics exist in numerous font weights. While in the past you had to get along with the styles regular, italic, bold and bold-italic, there are now light styles, semi-bold or extra bold. Classic typography goes to work with understatement. It rather avoids contrasts and emphasizes the harmony of the design. Modern typography concepts take a different approach: instead of combining, for example, a Helvetica regular as continuous text with a Helvetica in bold in the subheadings, you can set the subheadings in bold so that they stand out more clearly from the body text. The headline would then be set in extra bold, making it even more striking.

8. Font alignment: show a clear edge

For a long time, justification was the standard in newspaper printing, but it has a problem with contemporary editorial design: If the columns are too narrow and the words too long, there can be unsightly "holes", that is, word spacing that is too large. Justification works best with certain fonts, font sizes, and column widths. This is know-how that you have to acquire first. In case of doubt, setting left-justified is the less error-prone solution in terms of typesetting. Alignment to the left is also a commitment to design asymmetry and loose openness of the typeface.

9. Line spacing: Keeping sufficient spacing prevents sentence accidents

In addition to the font size, the space below, the so-called “leading”, is important for legibility. The letter height plus the leading result in the line spacing. An example: 12 point font size plus 2.5 point leading result in 14.5 point line spacing. The leading is usually at least a fifth of the font size or more. However, longer lines of text require more leading. So that a line can be perceived as a unit by the eye, the leading must be larger than the average word spacing.

10. Line length: Do not put short distances on the back burner

So that the eye does not lose the thread while reading, a line must not be too long. Lines that are too short, where the eye has to jump from line to line too often, are also uncomfortable when reading. About 10 words or 50 characters can be used as a guideline for a line length for the column widths of multi-column brochures or magazines. For single-column printed matter, the value can be increased to 70 characters per line, for books to up to twelve words.