Font Family and Style
Utility classes for styling type.
Font families
Sans-serif
Lato is our sans-serif font family of choice. To use it, add the .font-sans class. We recommend adding the .font-sans class directly to your body tag so it's the default font for your site.
Lato Example:
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
0123456789
Serif
A serif system stack is our serif font family of choice. To use it, add the .font-serif class.
Serif System Stack Example:
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
0123456789
Monospace
A monospace system stack is our monospace font family of choice. To use it, add the .font-mono class.
Monospace System Stack Example:
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0123456789
0123456789
Font styles
| Class | Property: Value |
|---|---|
| .not-italic | font-style: normal; |
| .italic | font-style: italic; |
Font style sample
.not-italic
The quick brown fox jumped over the lazy dog.
.italic
The quick brown fox jumped over the lazy dog.
Text Decoration
| Class | Property: Value |
|---|---|
| .underline | text-decoration: underline; |
| .no-underline | text-decoration: none; |
| .line-through | text-decoration: line-through; |
Text decoration sample
.underline
The quick brown fox jumped over the lazy dog.
.no-underline
The quick brown fox jumped over the lazy dog.
.line-through
The quick brown fox jumped over the lazy dog.