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.
All font classes start with the fragment .font-
.
Font Families
These classes will change the font face of the element.
There are two font family definitions available: .font-global
, which corresponds to the global standard font,
and .font-headline
, which has a font face better suited to larger font sizes.
<p class="font-global"> Text in the global font face. </p>
Text in the global font face.
<p class="font-headline"> Text in the font face for headlines. </p>
Text in the font face for headlines.
Font Sizes
You can use these classes to make your font smaller or larger. All values are based on the document's root font size, which differs between the three states (14px on palm-sized devices and 12px on tablet-/desktop-sized devices).
<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"> Pretty large text (h3) </p>
Pretty large text (h3)
<p class="font-xl"> 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-xxl"> Humongous Text that no-one could possibly miss (h1 headline) </p>
Humongous Text that no-one could possibly miss (h1 headline)
Since all classes are root-size based, you can nest as many size declaration as you want without risking 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
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.
<p class="font-line-l"> Now, this is the story all about how my life got flipped, turned upside down. And I'd like to take a minute, Just sit right there, I'll tell you… </p>
Now, this is the story all about how my life got flipped, turned upside down. And I'd like to take a minute, just sit right there, I'll tell you…
Font Weights
You can make the text of an element bold by appending the class .font-bold
. 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
<h4 class="font-normal"> Non-bold text </h4>
Non-bold text
Font Styles
You can use these classes to make your text italic or to strike it through.
<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.
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-light"> I am lighter than usual because I am either not important or legal mumbo jumbo. </p>
I am lighter than usual because I am either not important or legal mumbo jumbo.
<p class="font-confirm"> I am green so that you see that all's well. </p>
I am green so that you see that all's well.
Colors
These are the colors you can use.
Plain Colors
- Regular
-
.font-regular
- Light
-
.font-light
- White
-
.font-white
Status Information
- Confirmation
-
.font-confirm
- Information
-
.font-info
- Warning
-
.font-warning
- Error
-
.font-error
CI Colors
- Brand orange
-
.font-brandorange
- Brand blue
-
.font-brandblue