Sizes

HTML apply sizes by adding .fs-{size} class to text elements

SCSS recall size values with the fontSize('{size}') function

  • Giga

    76 Giga

  • Mega

    54 Mega

  • Alpha

    36 Alpha

  • Beta

    28 Beta

  • Gamma

    21 Gamma

  • Delta

    18 Delta

  • Epsilon

    16 Epsilon

  • Zeta

    14 Zeta

  • Omega

    12 Omega

  • Epsilon with Gamma

    16 Epsilon with 21 Gamma on viewport size SM or wider

  • Zeta with Epsilon

    14 Zeta with 16 Epsilon on viewport size MD or wider

HTML
    <p class="fs-giga">76 Giga</p>
<p class="fs-mega">54 Mega</p>
<p class="fs-alpha">36 Alpha</p>
<p class="fs-beta">28 Beta</p>
<p class="fs-gamma">20 Gamma</p>
<p class="fs-delta">18 Delta</p>
<p class="fs-epsilon">16 Epsilon</p>
<p class="fs-zeta">14 Zeta</p>
<p class="fs-omega">12 Omega</p>

<p class="fs-epsilon sm:fs-gamma">16 Epsilon with 21 Gamma on viewport size SM or wider</p>
<p class="fs-zeta md:fs-epsilon">14 Zeta with 16 Epsilon on viewport size MD or wider</p>
  
SCSS
    .example-class {
  font-size: fontSize('giga');
}
  

Responsive

Apply responsive sizes by adding .{breakpoint}:fs-{size} class to text elements

  • Epsilon with Gamma

    16 Epsilon with 21 Gamma on viewport size SM or wider

  • Zeta with Epsilon

    14 Zeta with 16 Epsilon on viewport size MD or wider

HTML
    <p class="fs-epsilon sm:fs-gamma">16 Epsilon with 21 Gamma on viewport size SM or wider</p>
<p class="fs-zeta md:fs-epsilon">14 Zeta with 16 Epsilon on viewport size MD or wider</p>