Due to COVID-19, we're receiving a larger than usual amount of requests resulting in longer wait periods for support.

Typography CSS classes

Type scale

The type scale is a modular scale of font sizes stored in CSS variables:

:root {
  // body font size
  --text-base-size: 1em;
}

Typography

Typography utility classes.

Font size

ClassDescription
.text-xsfont-size: var(–text-xs);
.text-smfont-size: var(–text-sm);
.text-basefont-size: 1em;
.text-mdfont-size: var(–text-md);
.text-lgfont-size: var(–text-lg);
.text-xlfont-size: var(–text-xl);
.text-xxlfont-size: var(–text-xxl);
.text-xxxlfont-size: var(–text-xxxl);
.text-xxxxlfont-size: var(–text-xxxxl);

Edit the font-size classes at specific breakpoints adding the @{breakpoint} suffix (@xs@sm@md@lg@xl).

Example:

<p class="text-lg text-xl@lg"><!-- content --></p>

⚠️ The font-size responsive modifiers work only in modern browsers.

Font weight

ClassDescription
.font-lightfont-weight: 300;
.font-normalfont-weight: 400;
.font-mediumfont-weight: 500;
.font-semiboldfont-weight: 600;
.font-boldfont-weight: 700;

Font style

ClassDescription
.font-italicfont-style: italic;

Text align

ClassDescription
.text-centertext-align: center;
.text-lefttext-align: left;
.text-righttext-align: right;
.text-justifytext-align: justify;

Edit the text alignment classes at specific breakpoints adding the @{breakpoint} suffix (@xs@sm@md@lg@xl).

<p class="text-center text-left@md text-right@lg">👀 Hey look my alignment changes!</p>
War dieser Artikel hilfreich?
JaNein