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>