.. _Typography:

🖋️ Typography
=============

Fonts
-----

We use the following fonts on different media (e.g. websites, e-mail, business cards, handouts):

- `Poppins <https://fonts.google.com/specimen/Poppins>`_: The **standard font** for all media and printed matter 
- `Roboto Mono <https://fonts.google.com/specimen/Roboto+Mono>`_: The **monospace font** for code fragments

.. raw:: html

    <div id="font-display">
        <div style="font-family: Poppins;">
            <div style="font-weight: 100;">Poppins Thin</div>
            <div style="font-weight: 200;">Poppins ExtraLight</div>
            <div style="font-weight: 400;">Poppins Regular</div>
            <div style="font-weight: 600;">Poppins SemiBold</div>
            <div style="font-weight: 700;">Poppins Bold</div>
        </div>
        <div style="font-family: Roboto Mono; font-size: 0.95em">
            <div style="font-weight: 100;">Roboto Mono Thin</div>
            <div style="font-weight: 300;">Roboto Mono Light</div>
            <div style="font-weight: 500;">Roboto Mono Medium</div>
        </div>
    </div>

.. hint::

    Our logo is an exception that contains the font `Lucida Grande`.

Font sizes and spacing
----------------------

We design everything on a scale of 2 (see «Layout & Grid» section). This creates a balanced rhythm across all design elements. Also, this rule applies to the typographic scale, too. Use the factor **1.5** for the **line spacing** resp. line-height.
For the paragraph spacing use 1x or x times the line spacing of the body copy.

The following table refers to the «Poppins» font:

+-----------------+-------------------+---------------------+------------------+
|                 | PRINT (pt)        | WEB (px)            | SLIDES           |
+=================+===================+=====================+==================+
| Section Title   | SemiBold, 48/60   | SemiBold, 56/60     | 128/128          |
+-----------------+-------------------+---------------------+------------------+
| Subline         | Thin, 16/24       | ExtraLight, 16/24   | Regular, 32/48   |
+-----------------+-------------------+---------------------+------------------+
| Main Title / H1 | Light, 24/30      | Bold, 28/36         | SemiBold, 80/120 |
+-----------------+-------------------+---------------------+------------------+
| H2              | SemiBold, 18/24   | Bold, 24/32         | –                |
+-----------------+-------------------+---------------------+------------------+
| H3              | SemiBold, 12/18   | SemiBold, 20/24     | –                |
+-----------------+-------------------+---------------------+------------------+
| H4              | SemiBold, 10.5/16 | Bold, 16/20         | –                |
+-----------------+-------------------+---------------------+------------------+
| H5              | SemiBold, 8.5/12  | –                   | –                |
+-----------------+-------------------+---------------------+------------------+
| Leadtext        | Regular, 12/18    | Regular, 20/24 (25) | Regular, 64/80   |
+-----------------+-------------------+---------------------+------------------+
| Bodycopy        | Regular, 8.5/12   | Regular, 16/20      | Regular, 40/60   |
+-----------------+-------------------+---------------------+------------------+
| Marginalia      | Light, 6/12       | ExtraLight, 14/18   | Light, 20/32     |
+-----------------+-------------------+---------------------+------------------+

.. hint::

    | **Section Title**
    | *Use to divide sections like chapters. Optionally can be used as a standout title for documents (except letters).*

    | **Subline**
    | *Subline of the main title. As a completion or informative addon to the main title.*

    | **Main Title**
    | *The title of the document. Usually only one of this type should exist.*

    | **Leadtext**
    | *A whort summary of the following content to draw the users into the text.*

    | **Bodycopy**
    | *The main text. This is the style where the content is written in.*

    | **Marginalia**
    | *Small notes or additions like footnotes. They have a lower visual priority.*


Line lengths
~~~~~~~~~~~~
Consider the line lengths to ensure that texts remain legible. A proper line length depends on the medium, the number of columns, and the language. Thus, too general rules of thumb don't make sense. We have to decide on a case-by-case basis. To help you decide, here are some rough clues:

- Printed matters: 50 - 70 characters (depending if it's one or two columns)
- Web: ~ 35em

Websites
~~~~~~~~

The standard font-size on **websites is 16px**. This results in a **baseline grid of 20px**. Base all other texts and headlines on
the baseline grid.

For websites, use the following font stack:

::

    font-stack: 'Poppins', Open Sans', 'Helvetica Neue', 'Helvetica', 'Trebuchet MS', 'Arial', sans-serif

Print matters
~~~~~~~~~~~~~

Set the body text with **9pt**, line spacing with **16pt** and the font style «**Regular**» for printed matters and documents ins standard sizes such as A4.

| **Vertical Rhythm**
| Texts in several columns should be on the same baseline. For other font sizes (e.g. headings), select the line spacing as a multiple of 16pt. If a correction space is necessary, you must set it at the beginning of the paragraph. This is necessary for programs that do not have a function to align text to the baseline grid.


| **Side Notes**
| Brief information and marginal notes can also be in 6pt and the «Light» style.

E-mail
~~~~~~
For e-mails, we use Helvetica Neue or Arial with a size of 12px by default.

Keynotes and presentations
~~~~~~~~~~~~~~~~~~~~~~~~~~

«Poppins» is also used for presentations. The basic font sizes are under «Slides» in the section `Font sizes and spacing`_.

Font colours
------------

These are our primary font colours:

.. raw:: html

    <div id="font-colour-display" style="font-family: Poppins;">
        <div style="background-color: var(--cd-grey-100); color: var(--cd-grey-30);">
            <a href="colours.html#colour-specifications" style="font-weight: 600;">Grey 30</a>
            Primary colour on bright backgrounds.
        </div>
        <div style="background-color: var(--cd-grey-30); color: var(--cd-grey-100);">
            <a href="colours.html#colour-specifications" style="font-weight: 600;">Grey 100</a>
            Primary colour on dark backgrounds.
        </div>
    </div>