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.
Inter UI
Regular
Inter UI
Semibold
Inter UI
Bold
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.
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.
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.