Font Styles

We differentiate between four different font styles. Each has their own, distinctive use case:

font-highlight is used to designate input areas and other areas of interest.

font-standard represents our standard font size and line height. Note that these are applied by default, so it should generally not be necessary to use this class. You can apply it to reset text elements styled from other sources.

font-tabular is used in description tables which have a small width. It uses a smaller line-height than font-standard.

font-hint is used for text that you do not want to draw too much attention to, like legalese.

Text Colors

There are a number of colors you can give your text, including signal colors for status information and others to make the text either more or less visible.

<p class="font-lightgray">
    Roses are gray, violets are gray…
</p>

<p class="font-white" style="background-color: #000;">
    I am white on black.
</p>

Colors

These are the colors you can use.

Status Information

Confirmation

font-confirm

Information

font-info

Warning

font-warning

Error

font-error

CI Colors

Brand orange

font-brandorange

Line Heights

These classes will change the line height of the element. The line height determines how much whitespace there is above and below the text within each line.

<p class="font-line-standard">
    Text with the standard line height,
    suitable for block texts. Oh, and
    some additional text so we have a
    line break.
</p>

<p class="font-line-s">
    Text with a small line height.
    It has less whitespace
    above or below the text.
</p>

<p class="font-line-xs">
    Text with extra small line height. It has
    hardly any whitespace between lines and is
    useful in places where vertical space is
    scarce, or where text blocks are very narrow.
</p>

Cutting Off Text

When you need to make sure that a certain text takes up only one line, regardless of its length, you can use the font-ellipsis class.

The text will be cut off at the end of the first line, and instead show an ellipsis (…) to indicate that more follows.

<dl class="grid gutter">
    <dt class="grid-item one-third">
        E-Mail:
    </dt>
    <dd class="grid-item two-thirds">
        <span class="font-ellipsis">
            really-long.user-e-mail@ludicrously-named-provider.example
        </span>
    </dd>
</dl>

Headline Styles

Headlines from H1 to H6 are styled with more or less emphasis to signify their respective place in the document hierarchy. Depending on the context, you may need to apply those default styles to other elements.

To make an element look like a specific type of headline without actually being one, use the font-hn classes, where “n” is the desired headline tier (1-6).

<main class="text-spacing">
    <h1>Cheese (H1)</h1>
    <p>
        Cheese is a food. There are several types of cheese,
        many of them delicious.
    </p>
    <section class="text-spacing">
        <h2>Types of Cheese (H2)</h2>
        <p>
            There are more than twelve and probably less than a million different types of cheese.
        </p>
        <article class="text-spacing">
            <h1 class="font-h3">Cheddar (H1)</h1>
            <p>
                Cheddar is a cow cheese. It goes well on crackers.
            </p>
            <section class="text-spacing">
                <h2 class="font-h4">Types of Cheddar (H2)</h2>
                <p>
                    Cheddar is generally agreed to originate on the dark side of the moon.
                    However, adequate variations from nearer parts have found their way into the markets in recent years.
                </p>
            </section>
        </article>
    </section>
    <section class="text-spacing">
        <h2>Disambiguation (H2)</h2>
        <h3>Photography (H3)</h3>
    </section>
</main>