Typography

Configure the sizes, alignments, and other properties of texts.

Headings

The following elements are available:

• <h1> to <h6>
• .h1 to .h6 classes
• is-font-size-1 to is-font-size-7 classes

info

To see the available sizes, visit the customize font sizes documentation.

Examples

Title 1

Title 2

Title 3

Title 4

<h1>Title 1</h1>
<h2>Title 2</h2>
<div className="h3">Title 3</div>
<div className="is-font-size-4">Title 4</div>

Font Weight

Name	Class	Preview
thin	is-font-thin	Lorem ipsum
extra-light	is-font-extra-light	Lorem ipsum
light	is-font-light	Lorem ipsum
normal	is-font-normal	Lorem ipsum
medium	is-font-medium	Lorem ipsum
semi-bold	is-font-semi-bold	Lorem ipsum
bold	is-font-bold	Lorem ipsum
extra-bold	is-font-extra-bold	Lorem ipsum
black	is-font-black	Lorem ipsum

Text Align

Name	Class
left	is-text-left
center	is-text-center
right	is-text-right
justify	is-text-justify

Example

Centered text

Right-aligned text

Left-aligned text

<div class="is-text-center">Centered text</div>
<div class="is-text-right">Right-aligned text</div>
<div class="is-text-left">Left-aligned text</div>