Font Size

This modifier change the font size. The basic variant (e.g. font-size-x1.250) change the font-size with em units. You can use rem values (e.g. font-size-1.250-rem), this sizes will based on the Root Size.

Typical you can change the font size for different screen sizes. E.g. <p class="font-size-2.000-rem font-size-1.500-rem-md">Hello World</p> will double the font size based of root on desktop screens, but on mobile screens (where typical the root font size is bigger) will only use one and a half times of the root font size.

The structure of the class names are:

• .font-size-x0 font size zero
• .font-size-x{VALUE} the unit is em
• .font-size-x{VALUE}-{SCREEN_SIZE} the unit is em, until the screen
• .font-size-{VALUE}-rem the unit is rem
• .font-size-{VALUE}-rem-{SCREEN_SIZE} the unit is rem, until the screen size

The values are:

• VALUE 0.250, 0.500, 0.750, 0.875, 1.000, 1.125, 1.250, 1.375, 1.500, 1.625, 1.750, 1.875, 2.000
• SCREEN_SIZE lg, md, sm, xs