Typography

Documentation and examples for typography, including global settings, headings, body text, lists, and more.

👉

Native stack

The default sans-serif provided is loading the native font family provided by the device.

$font-sans-serif-system:    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
$font-serif-system:         ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
$font-code-system:     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

Custom fonts

In order to make it easier to install custom fonts, we've added a set of variables to come in help.

By default, the Inter font comes pre-installed. If you want to use custom font families, we have prepared a set of utility classes that will allow you to easily add the font you want. These can be set globally, if added on the <body> tag, or locally, on any element.

Sans-serif (Base font)

For using the Sans-serif custom font, add the .font-base utility class on the element where you want it.

Aa
Inter UI

Regular

Aa
Inter UI

Semibold

Aa
Inter UI

Bold

Aa
Inter UI

Black

Display font

Because your website could use more than one custom font, we added a new Sass variables and utility class for using custom fonts on large text, such as heading titles, hero sections, and more. Simply add the .font-serif utility class on the element where you need it.

By default, our CSS uses the same sans-serif font used for body text. But, you are free to change it to whatever you need for your website.

Serif

For using the Serif font, add the .font-serif utility class on the element where you want it.

Aa

This text is using a serif font.

Monospace

For using the monospaced font, add the .font-code utility class on the element where you want it.

Aa

This text is using a monospaced font.

Using typography

Tpography related utility classes are available for setting font size, weight, colors, face, and much more.

Font

Quickly manage the typography with a full suite of responsive font utilities.

Type

Documentation and examples for headings, body text, and more.

UI Components

Start building incredible websites and apps with the pre-made components and pages.

Explore ->