Heading
A title in the ink of the page, with the line over it and the paragraph under it.
On this page
A heading is a title set in the ink of the page. Its weight is a light medium at every size: size and ink carry the hierarchy, not boldness. Its lines are balanced, so a title never leaves one word alone on its last line, and its tracking tightens as it grows. Use .heading on any heading element; the class sets the look, the element sets the level.
Heading
<header class="flex flex-col gap-sm max-w(520)"> <p class="eyebrow">Changelog</p> <h1 class="heading heading-2xl">Faster cold builds, and comments on previews</h1> <p class="lead">Dependency caches are restored before the install step, and anyone can leave a note on a preview, pinned to the element they clicked.</p></header>Two companions come with it. An eyebrow is the few words over a heading that say what kind of thing follows. A lead is the paragraph under it, a step larger than body text.
#Sizes
Seven sizes, named like the rest of the scale. Pick the size by the heading's place on the page, and the element by its place in the outline: an <h2> can be heading-sm in a card and heading-2xl at the top of a section.
Sizes
<div class="flex flex-col gap-md w-full"> <p class="heading heading-display">Display</p> <p class="heading heading-2xl">Two extra large</p> <p class="heading heading-xl">Extra large</p> <p class="heading heading-lg">Large</p> <p class="heading">Medium, the default</p> <p class="heading heading-sm">Small</p> <p class="heading heading-xs">Extra small</p></div>| Class | Size | Use |
|---|---|---|
heading-display | 2.5 to 4.25rem | The one title of a landing page |
heading-2xl | 2 to 2.5rem | A page's title, a section of a landing page |
heading-xl | 1.625 to 2rem | A page's title in an application |
heading-lg | 1.5rem | A section |
heading | 1.25rem | A subsection, a dialog-sized panel |
heading-sm | 1.0625rem | A card, a bar |
heading-xs | 0.9375rem | A group of links, a dense panel |
#Sizes that follow the room
The three largest sizes are written in container units. They measure the nearest size container, and where there is none, the viewport. A display heading is 2.5rem in a phone's column and 4.25rem in a wide one, with every width between; no breakpoint is involved.
Sizes that follow the room
<section class="container-inline p-xl bg-surface-base"> <h1 class="heading heading-display">Every push gets an address.</h1> <p class="lead mt-md max-w(480)">Choose Tablet, then Phone: the title is set smaller as its container narrows, and its lines are balanced again at each size.</p></section>To make a heading follow a panel instead of the page, make the panel a size container: container-inline on it.
#Balance
A heading wraps with text-wrap: balance: the browser evens out the lines instead of filling each one, so a title of two lines is two lines of similar length. A lead wraps with text-wrap: pretty, which avoids a last line of one word. Where a browser supports neither, the text wraps as usual.
Give a heading a measure, such as max-w(560), when it sits in a wide column. Balance evens the lines; it does not decide how many there are.
#Eyebrow and lead
Eyebrow and lead
<div class="flex flex-col gap-lg max-w(520)"> <div class="flex flex-col gap-xs"> <p class="eyebrow">Pricing</p> <h2 class="heading heading-xl">Free to start. Fair when you grow.</h2> </div> <p class="lead lead-sm">A small lead, for a card or a narrow column.</p> <p class="lead">The default lead, under a page's title.</p> <p class="lead lead-lg">A large lead, under a display heading.</p></div>#Accessibility
- The class does not make a heading. Use
<h1>to<h6>in order, without skipping a level, and style each with the size its place calls for. - A page has one
<h1>. - An eyebrow is a
<p>. It is read before the heading, which is right, but it must not be a heading itself: a list of headings should start with the title. - A heading is in strong ink on every surface. On an inverse sheet, add
fg-text-inverse.
#Classes
| Class | Description |
|---|---|
heading | A title at 1.25rem: strong ink, a light medium weight, balanced lines |
heading-xs | 0.9375rem, for a group of links or a dense panel. With heading |
heading-sm | 1.0625rem, for a card or a bar. With heading |
heading-lg | 1.5rem, for a section. With heading |
heading-xl | 1.625 to 2rem by the width of its container, for a page's title in an application. With heading |
heading-2xl | 2 to 2.5rem by the width of its container, for a page's title or a section of a landing page. With heading |
heading-display | 2.5 to 4.25rem by the width of its container, for the one title of a landing page. With heading |
eyebrow | A small uppercase line over a heading that says what kind of thing follows; a p, not a heading |
lead | The paragraph under a heading, at 1.125rem, wrapped without a last line of one word |
lead-sm | 1rem, for a card or a narrow column. With lead |
lead-lg | 1.25rem, under a display heading. With lead |
#Custom properties
| Property | Default | Description |
|---|---|---|
--heading-size | 1.25rem | Font size |
--heading-leading | 1.3 | Line height |
--heading-tracking | -.012em | Letter spacing |
#Related
- QuoteWords that belong to someone else, set apart from yours.
- FigureAn image or a video with its caption, finished at the edge.
- LinkText that goes somewhere, in the ink of its sentence.
- HeroThe first screen: what it is, why it matters and one thing to do.
- FeaturesWhat the product does, as a grid of short claims.