HTML
apply sizes by adding .fs-{size}
class to text elements
SCSS
recall size values with the fontSize('{size}')
function
76 Giga
54 Mega
36 Alpha
28 Beta
21 Gamma
18 Delta
16 Epsilon
14 Zeta
12 Omega
16 Epsilon with 21 Gamma on viewport size SM or wider
14 Zeta with 16 Epsilon on viewport size MD or wider
<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>
.example-class {
font-size: fontSize('giga');
}
Apply responsive sizes by adding .{breakpoint}:fs-{size}
class to text elements
16 Epsilon with 21 Gamma on viewport size SM or wider
14 Zeta with 16 Epsilon on viewport size MD or wider
<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>