Books UI Typography Basis

Three decisions

You'll need to make three decisions when you create design and typography for a new project.

  1. What font the main text will have.
  2. What font will be in the headings.
  3. Whether there will be a special font for accents in captions, quotations, tables, callouts, and other decorative elements.
Three fonts for different design tasks.

This can be one typeface for all cases. Or it could be all three different ones. It all depends on the needs and style of your project.

Body font

The body is the main text of the project, which can be used everywhere, from button labels to long reads. Usually, the choice of font for body text determines the style of typography and design. All other font decisions for headings or other elements just create accents.

Body font determines the style of typography and design.

Heading font

Often the font of the headings is the same as the typeface of the body text. But if you want to create a more attractive design and achieve a better contrast between the main text and the headings, you can choose a different typeface for them.

Headings can have a different font than body text for contrast and expressiveness of typography.

Special font

Sometimes you may need a special typeface for accents in captions, quotes, code snippets, or small decorative headings. In general, for anything that can create visual appeal in typography and design, be points of focus, and diversify the rhythm.

Using a special font for quotes can achieve a good accent.

As a rule, monospaced fonts are always good for short captions for images, taglines in content blocks, or metadata cards. Serfis for quotes and callouts are a great fit.

Three decisions about three groups of design elements help build a system of typography and make the design coherent and exciting.



Check out my other books

PDF Ebook

Web Interface Handbook

PDF Ebook

Designing Design Systems

User Interface Colors

Coming soon

User Interface Colors