Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

Fonts

DIN
Light
Ab
DIN
Regular
Ab
DIN
Medium
Ab
DIN
Bold
Ab
DIN
Black
Ab
Bebas Kai
Regular
Ab
Merriweather
Regular Italic
Ab
Merriweather
Bold Italic
Ab 
<span class="font-din-light">Ab</span>
<span class="font-din-regular">Ab</span>
<span class="font-din-medium">Ab</span>
<span class="font-din-bold">Ab</span>
<span class="font-din-black">Ab</span>
<span class="font-bebas-kai-regular">Ab</span>
<span class="font-merriweather-regular">Ab</span>
<span class="font-merriweather-bold">Ab</span>
.font-din-light {
    font-family: 'DIN';
    font-weight: 300;
    font-style: normal;
}
.font-din-regular {
    font-family: 'DIN';
    font-weight: normal;
    font-style: normal;
}
.font-din-medium {
    font-family: 'DIN';
    font-weight: 500;
    font-style: normal;
}
.font-din-bold {
    font-family: 'DIN';
    font-weight: bold;
    font-style: normal;
}
.font-din-black {
    font-family: 'DIN';
    font-weight: 900;
    font-style: normal;
}
.font-bebas-kai-regular {
    font-family: 'Bebas Kai';
    font-weight: normal;
    font-style: normal;
}
.font-merriweather-regular {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-style: italic;
}
.font-merriweather-bold {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}

Headings

Heading Example
<h1></h1>

h1. Heading
<h2></h2>

h2. Heading
<h3></h3>

h3. Heading
<h4></h4>

h4. Heading
<h5></h5>
h5. Heading
<h6></h6>
h6. Heading
 
<span class="font-din-light">Ab</span>
<span class="font-din-regular">Ab</span>
<span class="font-din-medium">Ab</span>
<span class="font-din-bold">Ab</span>
<span class="font-din-black">Ab</span>
<span class="font-bebas-kai-regular">Ab</span>
<span class="font-merriweather-regular">Ab</span>
<span class="font-merriweather-bold">Ab</span>
.font-din-light {
    font-family: 'DIN';
    font-weight: 300;
    font-style: normal;
}
.font-din-regular {
    font-family: 'DIN';
    font-weight: normal;
    font-style: normal;
}
.font-din-medium {
    font-family: 'DIN';
    font-weight: 500;
    font-style: normal;
}
.font-din-bold {
    font-family: 'DIN';
    font-weight: bold;
    font-style: normal;
}
.font-din-black {
    font-family: 'DIN';
    font-weight: 900;
    font-style: normal;
}
.font-bebas-kai-regular {
    font-family: 'Bebas Kai';
    font-weight: normal;
    font-style: normal;
}
.font-merriweather-regular {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-style: italic;
}
.font-merriweather-bold {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}

Inlines

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

<span class="font-din-light">Ab</span>
<span class="font-din-regular">Ab</span>
<span class="font-din-medium">Ab</span>
<span class="font-din-bold">Ab</span>
<span class="font-din-black">Ab</span>
<span class="font-bebas-kai-regular">Ab</span>
<span class="font-merriweather-regular">Ab</span>
<span class="font-merriweather-bold">Ab</span>
.font-din-light {
    font-family: 'DIN';
    font-weight: 300;
    font-style: normal;
}
.font-din-regular {
    font-family: 'DIN';
    font-weight: normal;
    font-style: normal;
}
.font-din-medium {
    font-family: 'DIN';
    font-weight: 500;
    font-style: normal;
}
.font-din-bold {
    font-family: 'DIN';
    font-weight: bold;
    font-style: normal;
}
.font-din-black {
    font-family: 'DIN';
    font-weight: 900;
    font-style: normal;
}
.font-bebas-kai-regular {
    font-family: 'Bebas Kai';
    font-weight: normal;
    font-style: normal;
}
.font-merriweather-regular {
    font-family: 'Merriweather', serif;
    font-weight: 400;
    font-style: italic;
}
.font-merriweather-bold {
    font-family: 'Merriweather', serif;
    font-weight: 700;
    font-style: italic;
}