Typography

Utility classes for controlling text appearance.

Font sizes

Apply any of the 8 font size levels:

<p class="has-size-1">Huge (hero headlines)</p>
<p class="has-size-2">Very large (page titles)</p>
<p class="has-size-3">Large (section headings)</p>
<p class="has-size-4">Medium-large (subheadings)</p>
<p class="has-size-5">Medium (lead text)</p>
<p class="has-size-6">Normal (body text)</p>
<p class="has-size-7">Small (secondary text)</p>
<p class="has-size-8">Tiny (captions)</p>

Sizes are fluid and scale smoothly between viewports. See Typography Variables for exact values.

Font weights

<span class="has-text-light">Light weight (300)</span>
<span class="has-text-normal">Normal weight (400)</span>
<span class="has-text-bold">Bold weight (700)</span>

Text styles

<em class="has-text-italic">Italic text</em>
<span class="has-text-uppercase">UPPERCASE TEXT</span>

Text wrapping

<p class="has-text-wrap">Standard text wrapping</p>
<h1 class="has-text-balance">Balanced headline wrapping</h1>

Use has-text-balance on headlines to prevent orphans and create more visually pleasing line breaks.

Max width

Limit line length for readability:

<p class="has-max-width-6">
  Optimal reading width at 65 characters. Lorem ipsum dolor sit amet...
</p>