Font

When to use it

The Font utility is used to override the font size, weight, and variant of elements. It provides a way to quickly and consistently apply typography styles across your application.

Important

Although the heading elements (<h1>–<h6>) come with its own default size, it's bad practice to select a heading based on its looks. These font utilities are therefore a handy way to keep the hierarchy of the content while still getting the look you want, e.g. by slapping a u-font--largest on a <h3>.

Variants

• Sizes: Use the .u-font--[largest|larger|large|medium|base|small|smaller|smallest] classes to adjust the font size.
• Weights: Use the .u-font--[thinnest|thinner|regular|bolder|boldest] classes to adjust the font weight.
• Family: Use the .u-font--mono class to change the font family to Roboto Mono (or another fallback, monospaced font family).

What it looks like

Code examples

Sizes

<p class="u-font--largest">u-font--largest</p>
<p class="u-font--larger">u-font--larger</p>
<p class="u-font--large">u-font--large</p>
<p class="u-font--medium">u-font--medium</p>
<p class="u-font--base">u-font--base</p>
<p class="u-font--small">u-font--small</p>
<p class="u-font--smaller">u-font--smaller</p>
<p class="u-font--smallest">u-font--smallest</p>

Weights

<p class="u-font--thinnest">u-font--thinnest</p>
<p class="u-font--thinner">u-font--thinner</p>
<p class="u-font--regular">u-font--regular</p>
<p class="u-font--bolder">u-font--bolder</p>
<p class="u-font--boldest">u-font--boldest</p>

Family

<p class="u-font--mono">u-font--mono</p>