Typography

Heading 1

h1 2rem

Heading 2

h2 1.75rem

Heading 3

h3 1.375rem

Heading 4

h4 1.125rem
Heading 5
h5 1rem
Heading 6
h6 1rem

Heading Groups

When headings are used inside a hgroup, they have no margin. The hgroup itself has a margin-bottom of --sugar-spacing-block.

Often, you may want to hide the subtitle from readers and include all the necessary information in the main title, as shown in the example below.

<hgroup aria-label="Main title - Subtitle">
	<h1>Main title</h1>
	<h2 aria-hidden="true">Subtitle</h2>
</hgroup>
<p>
	Lorem ipsum dolor sit, amet consectetur adipisicing elit. 
	Ex unde ipsam, nihil esse, odio nam reprehenderit impedit cumque.
</p>

Main title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex unde ipsam, nihil esse, odio nam reprehenderit impedit cumque.

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.