Fonts

You can check the full list of available breakpoints here.

How to use

Choose the font size in pixels and the resulting size will be its equivalent in rem according to the default font size, by default the font size is 16px.

Responsive fonts

  • *:fs-*

Responsive fonts are utility classes that will be used directly in your html. By default the available font sizes are 10px to 60px in steps of 2 but you can modify them according to your needs.

Customize your project

Only even numbers are available in responsive fonts


<p class="x:fs-18 s:fs-22 m:fs-24 l:fs-30 xl:fs-40 x:center">This is awesome!</p>

This is awesome!

Static fonts

If you will include font sizes within your build process you can use a mixin mix-fs(px) to keep the units conversion to rem and consistency in your project.

Any font size is accepted.


.example-static-font {
  color: @c-teal-500;
  .mix-fs(30); /* Return font-size: 1.875rem */
}

    

.example-static-font {
  color: $c-teal-500;
  @include mix-fs(30); /* Return font-size: 1.875rem */
}

    

<p class="example-static-font x:center">Hello world!</p>

This is awesome!