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.
Font Sizes
You can use these classes to make your font smaller or larger. Absolute sizes may differ depending on the size of the display. (For more information, see Standard Values – Font Sizes.)
<p class="font-xs"> Tiny text you don't want anybody to read </p>
Tiny text you don't want anybody to read
<p class="font-s"> Small text </p>
Small text
<p class="font-standard"> Standard-sized text </p>
Standard-sized text
<p class="font-m"> Slightly larger-than-usual text </p>
Slightly larger-than-usual text
<p class="font-l"> Noticeably larger-than-usual text </p>
Noticeably larger-than-usual text
<p class="font-xl"> Pretty large text (h3) </p>
Pretty large text (h3)
<p class="font-xxl"> Text that's so large it's basically in your face (h2) </p>
Text that's so large it's basically in your face (h2)
<p class="font-xxxl"> Humongous Text that no-one could possibly miss (h1 headline) </p>
Humongous Text that no-one could possibly miss (h1)
Since all classes are root-size based, you can nest as many size declaration as you want without causing unwanted multiplications, as would be the case with parent-relative sizes.
<h1 class="font-xxl"> Outer layer <span class="font-standard"> Middle layer <span class="font-l"> Inner layer </span> </span> </h1>
Outer layer Middle layer Inner layer
Font Weights
You can change the weight (or thickness) of your text by applying the font-bold
,
font-semibold
, or font-light
classes.
If you want a previously bolded text to be displayed with normal font weight, use font-normal
.
<p class="font-bold"> Bold text </p>
Bold text
<p class="font-semibold"> Semi-bold text </p>
Semi-bold text
<p class="font-normal"> Standard text </p>
Standard text
<p class="font-normal"> Light text </p>
Light text
Font Styles
You can use these classes to make your text italic, strike it through, make all letters uppercase, or capitalize each word.
<p class="font-italic"> Italic text </p>
Italic text
<p class="font-strike"> You shouldn't see this, except you should, but not really. </p>
You shouldn't see this, except you should, but not really.
<p class="font-uppercase"> I like to shout! </p>
I like to shout!
<h4 class="font-capitalized"> For when every word in a text should begin with an uppercase letter. </h4>
For when every word in a text should begin with an uppercase letter.
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>
Roses are gray, violets are gray…
<p class="font-white"> I am white on black. </p>
I am white on black.
Colors
These are the colors you can use.
Plain Colors
- Regular
-
font-regular
- Light gray
-
font-lightgray
- White
-
font-white
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-s"> Text with a small line height. It has no additional whitespace above or below the text. </p>
Text with a small line height. It has no additional whitespace above or below the text.
<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.
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.
<span class="font-ellipsis"> really-long.user-e-mail@ludicrously-named-provider.example </span>
- E-Mail:
- really-long.user-e-mail@ludicrously-named-provider.example