Font

Font Modifications

Apply the class f-{FONT-MODIFICATION} where {FONT-MODIFICATION} is one of the modifications listed above.

f-uppercase f-capitalize f-none f-underline f-strikethrough f-left f-center f-right f-emphasize f-regular f-medium f-heavier f-semibold f-bold f-family-sans f-family-serif f-family-mono

Code

<span class="f-uppercase"></span>
<span class="f-capitalize"></span>
<span class="f-none"></span>
<span class="f-underline"></span>
<span class="f-strikethrough"></span>
<span class="f-left"></span>
<span class="f-center"></span>
<span class="f-right"></span>
<span class="f-emphasize"></span>
<span class="f-regular"></span>
<span class="f-medium"></span>
<span class="f-heavier"></span>
<span class="f-semibold"></span>
<span class="f-bold"></span>
<span class="f-family-sans"></span>
<span class="f-family-serif"></span>
<span class="f-family-mono"></span>

Font Size

Apply the class f-{FONT-SIZE} where {FONT-SIZE} is a number between 12 & 64 divisible by 2, eg 12, 14, 16, 18, 20, 24. Breakpoint prefixes may also be applied using the pattern f-{PREFIX}-{FONT-SIZE} where {PREFIX} is s, m, l, xl.

f-12 f-14 f-16 f-18 f-20 f-22 f-24 f-26 f-28 f-30 f-32 f-34 f-36 f-38 f-40 f-42 f-44 f-46 f-48 f-50 f-52 f-54 f-56 f-58 f-60 f-62 f-64

Code

<span class="f-12"></span>
<span class="f-14"></span>
<span class="f-16"></span>
<span class="f-18"></span>
<span class="f-20"></span>
<span class="f-22"></span>
<span class="f-24"></span>
<span class="f-26"></span>
<span class="f-28"></span>
<span class="f-30"></span>
<span class="f-32"></span>
<span class="f-34"></span>
<span class="f-36"></span>
<span class="f-38"></span>
<span class="f-40"></span>
<span class="f-42"></span>
<span class="f-44"></span>
<span class="f-46"></span>
<span class="f-48"></span>
<span class="f-50"></span>
<span class="f-52"></span>
<span class="f-54"></span>
<span class="f-56"></span>
<span class="f-58"></span>
<span class="f-60"></span>
<span class="f-62"></span>
<span class="f-64"></span>
Chat