Typography#

This is our basic Typography to get you started on a project. For all headlines use variants of Sharp. For body text/paragraphs use Ivar Text.

Download Sharp Grotesk.#

Download Ivar Text.#

H1#

Mobile: 56px | Desktop: 80px

line-height: 110%

Tidoblet formuen – og meldte flytting til Sveits.

H2#

Mobile: 40px | Desktop: 56px

line-height: 110%

Tidoblet formuen – og meldte flytting til Sveits.#

H3#

Mobile: 36px | Desktop: 40px

line-height: 130%

Tidoblet formuen – og meldte flytting til Sveits.#

H4#

Mobile: 24px | Desktop: 36px

line-height: 130%

Tidoblet formuen – og meldte flytting til Sveits.#

H5#

Mobile: 16px | Desktop: 24px

line-height: 130%

Tidoblet formuen – og meldte flytting til Sveits.#

H6#

Mobile: 12px | Desktop: 16px

line-height: 130%

Tidoblet formuen – og meldte flytting til Sveits.#

Paragraph#

Mobile: 18px | Desktop: 20px

line-height: 150%

Tidoblet formuen – og meldte flytting til Sveits. In sed mi a lectus aliquet ultrices. Maecenas facilisis posuere leo, sit amet euismod elit ornare eget. Nam pulvinar, nunc sed rhoncus sagittis, mi ante placerat erat, non mattis purus massa vel leo. Fusce dolor libero, laoreet vitae eros vitae, efficitur convallis ex. Quisque euismod, ipsum id lobortis venenatis, lectus nisl efficitur elit, sed feugiat ligula augue in justo. Fusce consectetur nulla fringilla luctus finibus.

The CSS#

p{
    font-size: 18px;
}

h1{
    font-size: 56px;
}

h2{
    font-size: 40px;
}

h3{
    font-size: 36px;
}

h4{
    font-size: 24px;
}

h5{
    font-size: 16px;
}

h6{
    font-size: 12px;
}


@media screen and (min-width: 992px) {
    p{
        font-size: 20px;
    }

    h1{
        font-size: 80px;
    }

    h2{
        font-size: 56px;
    }

    h3{
        font-size: 40px;
    }

    h4{
        font-size: 36px;
    }

    h5{
        font-size: 24px;
    }

    h6{
        font-size: 16px;
    }
}