Font Sizing

REM Calculation

To make easier the rem calculation, Wire includes a function to convert PX value to REM base 10.

SCSS


    .my-custom-element {
      font-size: rem(22);
    }

EM Calculation

Equal to REM, Wire includes a function to convert PX to EM and you can put the base to recalculate. The default base to em calculation is 16.

SCSS


    .my-custom-element {
      font-size: em(30); // 30 / $wire-font-size-base (16) = 1.875em
    }

    .my-custom-element {
      font-size: em(30, 10); // 30 / 10 = 3em
    }