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
Font Weights
Font Styles
Text Colors
Line Heights
Cutting Off Text
Headline Styles
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 .)
Text with different font sizes
<p class = "font-xs" >
Tiny text you don't want anybody to read
</p> <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> <p class="font-s">
Small text
</p>
<p class = "font-standard" >
Standard-sized text
</p> <p class="font-standard">
Standard-sized text
</p>
<p class = "font-m" >
Slightly larger-than-usual text
</p> <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> <p class="font-l">
Noticeably larger-than-usual text
</p>
Noticeably larger-than-usual text
<p class = "font-xl" >
Pretty large text (h3)
</p> <p class="font-xl">
Pretty large text (h3)
</p>
<p class = "font-xxl" >
Text that's so large it's basically
in your face (h2)
</p> <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)
</p> <p class="font-xxxl">
Humongous Text that no-one could
possibly miss
(h1)
</p>
Humongous Text that no-one could
possibly miss
(h1)
Since all classes are root-size based, you can nest as many size declarations as you want
without causing unwanted multiplications, as would be the case with parent-relative sizes.
Nested font sizes
<h1 class = "font-xxl" data-qa-regression = "fonts_sizes_nested" >
Outer layer
<span class = "font-standard" >
Middle layer
<span class = "font-l" >
Inner layer
</span>
</span>
</h1> <h1 class="font-xxl" data-qa-regression="fonts_sizes_nested">
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
.
Text with different font weights
<p class = "font-bold" >
Bold text
</p> <p class="font-bold">
Bold text
</p>
<p class = "font-semibold" >
Semi-bold text
</p> <p class="font-semibold">
Semi-bold text
</p>
<p class = "font-normal" >
Standard text
</p> <p class="font-normal">
Standard text
</p>
<p class = "font-light" >
Light text
</p> <p class="font-light">
Light text
</p>
Font Styles
You can use these classes to make your text italic, strike it through, make all letters uppercase,
or capitalize each word.
Text with different font styles
<p class = "font-italic" >
Italic text
</p> <p class="font-italic">
Italic text
</p>
<p class = "font-strike" >
You shouldn't see this, except you should, but not really.
</p> <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> <p class="font-uppercase">
I like to shout!
</p>
<h4 class = "font-capitalized" >
For when every word in a text should begin
with an uppercase letter.
</h4> <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.
Font with different colors
<p class = "font-lightgray" >
Roses are gray, violets are gray…
</p> <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> <p class="font-white" style="background-color: #000;">
I am white on black.
</p>
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> <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
Displaying discreet information
This style can be used for legal information or other information that you do not want too much attention to be drawn to.
Nested top-tier headlines with consistent visuals
<h4 class = "font-capitalized" >
For when every word in a text should begin
with an uppercase letter.
</h4> <h4 class="font-capitalized">
For when every word in a text should begin
with an uppercase letter.
</h4>
Bei Risiken und Nebenwirkungen fragen Sie Ihren Arzt oder Apotheker.
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> <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)