Typography Utilities

Font Sizes

Font Size 1

Font Size 2

Font Size 3

Font Size 4

Font Size 5

Font Size 6

Code Example

<p class="f1">Font Size 1</p>
<p class="f2">Font Size 2</p>
<p class="f3">Font Size 3</p>
<p class="f4">Font Size 4</p>
<p class="f5">Font Size 5</p>
<p class="f6">Font Size 6</p>

Font Faces

Arial Arial Black Arial Narrow Arial Rounded Avenir Baskerville Book Antiqua Bookman Century Gothic Comic Sans Consolas Courier New Franklin Gothic Futura Futura Condensed Garamond Geneva Georgia Gill Sans Haettenschweiler Helvetica Hoefler Impact Lucida Bright Lucida Console Lucida Grande Oswald Palatino System (Default) System Monospace Tahoma Times New Roman Trebuchet Verdana

Code Example

<p class="f4 flex flex-wrap gap4">
<span class="font-arial">Arial</span>
<span class="font-arial-black">Arial Black</span>
<span class="font-arial-narrow">Arial Narrow</span>
<span class="font-arial-rounded">Arial Rounded</span>
<span class="font-avenir">Avenir</span>
<span class="font-baskerville">Baskerville</span>
<span class="font-book-antiqua">Book Antiqua</span>
<span class="font-bookman">Bookman</span>
<span class="font-century-gothic">Century Gothic</span>
<span class="font-comic-sans">Comic Sans</span>
<span class="font-consolas">Consolas</span>
<span class="font-courier-new">Courier New</span>
<span class="font-franklin-gothic">Franklin Gothic</span>
<span class="font-futura">Futura</span>
<span class="font-futura-condensed">Futura Condensed</span>
<span class="font-garamond">Garamond</span>
<span class="font-geneva">Geneva</span>
<span class="font-georgia">Georgia</span>
<span class="font-gill-sans">Gill Sans</span>
<span class="font-haettenschweiler">Haettenschweiler</span>
<span class="font-helvetica">Helvetica</span>
<span class="font-hoefler">Hoefler</span>
<span class="font-impact">Impact</span>
<span class="font-lucida-bright">Lucida Bright</span>
<span class="font-lucida-console">Lucida Console</span>
<span class="font-lucida-grande">Lucida Grande</span>
<span class="font-oswald">Oswald</span>
<span class="font-palatino">Palatino</span>
<span class="font-system">System (Default)</span>
<span class="font-system-monospace">System Monospace</span>
<span class="font-tahoma">Tahoma</span>
<span class="font-times-new-roman">Times New Roman</span>
<span class="font-trebuchet">Trebuchet</span>
<span class="font-verdana">Verdana</span>
</p>

Font Weights

Font Weight 100 Font Weight 200 Font Weight 300 Font Weight 400 Font Weight 500 Font Weight 600 Font Weight 700 Font Weight 800 Font Weight 900

Code Example

<p class="flex flex-wrap gap4">
<span class="f-fw100">Font Weight 100</span>
<span class="f-fw200">Font Weight 200</span>
<span class="f-fw300">Font Weight 300</span>
<span class="f-fw400">Font Weight 400</span>
<span class="f-fw500">Font Weight 500</span>
<span class="f-fw600">Font Weight 600</span>
<span class="f-fw700">Font Weight 700</span>
<span class="f-fw800">Font Weight 800</span>
<span class="f-fw900">Font Weight 900</span>
</p>

Font Style

These are presentational styles. For semantic styles, use the <em> and <strong> tags. For bold use the font weight classes.

Italic text Normal text

Code Example

<p><span class="f-fs-i">Italic text</span> <span class="f-fs-n">Normal text</span></p>

Type Styles

Normal Text

Underline Text

Bold Text

Italic Text

Strike Text

Upper Case Text

Lower Case Text

Code Example

<p>Normal Text</p>
<p class="t-td-u">Underline Text</p>
<p class="f-fw900">Bold Text</p>
<p class="f-fs-i">Italic Text</p>
<p class="t-td-st">Strike Text</p>
<p class="t-tt-u">Upper Case Text</p>
<p class="t-tt-l">Lower Case Text</p>