Font Size 1
Font Size 2
Font Size 3
Font Size 4
Font Size 5
Font Size 6
<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>These are modern font stacks based on system fonts as defined by ModerFontStacks.com.
System UI: The Quick Brown Font Jumped over the Lazy Dog.
Transitional: The Quick Brown Font Jumped over the Lazy Dog.
Old Style: The Quick Brown Font Jumped over the Lazy Dog.
Humanist: The Quick Brown Font Jumped over the Lazy Dog.
Geometric Humanist: The Quick Brown Font Jumped over the Lazy Dog.
Classical Humanist: The Quick Brown Font Jumped over the Lazy Dog.
Neo-Grotesque: The Quick Brown Font Jumped over the Lazy Dog.
Monospace Slab Serif: The Quick Brown Font Jumped over the Lazy Dog.
Monospace Code: The Quick Brown Font Jumped over the Lazy Dog.
Industrial: The Quick Brown Font Jumped over the Lazy Dog.
Rounded Sans: The Quick Brown Font Jumped over the Lazy Dog.
Slab Serif: The Quick Brown Font Jumped over the Lazy Dog.
Antique: The Quick Brown Font Jumped over the Lazy Dog.
Didone: The Quick Brown Font Jumped over the Lazy Dog.
Handwritten: The Quick Brown Font Jumped over the Lazy Dog.
<div class="f3 flex flex-col gap3">
<p class="font-system-ui"><strong>System UI:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-transitional"><strong>Transitional:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-old-style"><strong>Old Style:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-humanist"><strong>Humanist:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-geometric-humanist"><strong>Geometric Humanist:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-classical-humanist"><strong>Classical Humanist:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-neo-grotesque"><strong>Neo-Grotesque:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-monospace-slab-serif"><strong>Monospace Slab Serif:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-monospace-code"><strong>Monospace Code:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-industrial"><strong>Industrial:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-rounded-sans"><strong>Rounded Sans:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-slab-serif"><strong>Slab Serif:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-antique"><strong>Antique:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-didone"><strong>Didone:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
<p class="font-handwritten"><strong>Handwritten:</strong> The Quick Brown Font Jumped over the Lazy Dog.</p>
</div>These are font faces that are available on most systems. They are less reliable than the modern font stacks but can give some familiar results.
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
<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 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
<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>These are presentational styles. For semantic styles, use the <em> and <strong> tags. For bold use the font weight classes.
Italic text Normal text
<p><span class="f-fs-i">Italic text</span> <span class="f-fs-n">Normal text</span></p>Normal Text
Underline Text
Bold Text
Italic Text
Strike Text
Upper Case Text
Lower Case Text
<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>