# Fonts

There are a number of styling choices for text elements. You can use them to apply font faces, increase or decrease text size, make your text bold, etc.

1. Font Styles
2. Text Colors
3. Line Heights
4. Cutting Off Text
5. Headline Styles

## 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.

Balcony/Garden

Balcony/Terrace
Garden/Garden use

`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.

In the middle of Berlin you'll find a unique housing arrangement in the style of New York houses: THE FLATIRON.

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

Building type:
Single-family house

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

Get a free and non-binding consultation for selling your property. We look forward to your enquiry!

## 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.

Font with different colors

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

Roses are gray, violets are gray…

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

I am white on black.

### 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.

Text with different line heights

    <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>

Text with the standard line height, suitable for block texts. Oh, and some additional text so we have a line break.

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

Text with a small line height. It has less whitespace above or below the text.

    <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>

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.

## 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.

Text that is cut off at the end

    <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>

E-Mail:
  really-long.user-e-mail@ludicrously-named-provider.example

## 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).

Nested top-tier headlines with consistent visuals

    <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>

# Cheese (H1)

Cheese is a food. There are several types of cheese, many of them delicious.

## Types of Cheese (H2)

There are more than twelve and probably less than a million different types of cheese.

# Cheddar (H1)

Cheddar is a cow cheese. It goes well on crackers.

## Types of Cheddar (H2)

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.

## Disambiguation (H2)

### Photography (H3)