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

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