Use H1–H6...
- To create a clear typographic hierarchy and page structure.
- For text that is semantically a heading or title. For all other text, use Typography.
Don't use H1–H6...
- For decoration or emphasis (headings should have semantic value).
- For body text. Instead, use Typography.
Structure
Use heading components (H1, H2, H3, H4, H5, H6) based on the document hierarchy of the page content.
Don’t skip heading levels, since screen readers build an outline of the page from the headings, and use this outline to assist users as they navigate a page. The page title should be a <h1>, the next level of heading should be a <h2>, and so on. In other words, don't use <h3> unless preceded by <h2>.
For SEO and accessibility reasons, use one <h1> tag per page, which should usually be the page title.
The preview has been updated.
Font skin
SWAN's fontSkin property provides a set of styling decisions: font size, font weight, font family, line height, and letter spacing. It is the preferred way to set typography.
If your text does not need to be a semantic heading (<h1>–<h6> tags), use Typography instead.
The preview has been updated.
Font size
For edge cases where fontSkin isn't sufficient, use the fontSize prop to create visual hierarchy on the page. For a list of available font sizes, see Font size.
Designs should only specify the desired font size, rather than making reference to specific HTML tags.
Changing the default heading size
The H1-H6 components have a default size. As the visual text size hierarchy may not follow the document hierarchy, use fontSkin or fontSize to adjust the size of a heading as needed. Any text size can be used on any heading component.
The preview has been updated.
Font family
Font family is bundled in with other design decisions as part of fontSkin. However, for text not using fontSkin, there is the fontFamily prop, which has two options: primary and secondary.
Font weight, line height, and letter spacing
fontSkin provides the font size, weight, line height, and letter spacing to create hierarchy for each size. Use these defaults for all headings.
Color
Headings use color textColor="standard" by default, which should be sufficient for almost all cases. Contact #help-swan if you are considering using a different color for a heading.
Text and background must meet a 4.5:1 color contrast ratio.
Alignment
Headings should be aligned to the left in most cases. In cases where center-aligning content is more appropriate, use textAlign=”center”. Headings should not be right-aligned or fully justified. Refer to Typography for more information on use cases.
Case
Use sentence case for all headings. Themes can change the casing of certain font skins as needed. Refer to Typography for more information.
