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 the mixin .mix-fs(px) to keep the units conversion to rem and consistency in your project.

Any font size is accepted.

This mixin will not be available if you have imported Shido via CDN.


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

      

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

This is awesome!