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.
ShareSkin
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.
Be sure to load the font Tiempos when using any editorial font skins. See the Get Started docs for instructions.
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
The Graphik font family is Vista’s default font for all headings and text. For special cases (typically specific to a marketing or holiday campaign) you can set up a page to support an additional font, and use the fontFamily prop to adjust the font family.
You need to provide all the necessary fonts while setting up the SwanHead. The current special font in use for headings is Tiempos (contact #help-swan for access). Once set up on your page, use fontFamily="special" for Tiempos.
Weight, line height, and letter spacing
The font skins provide 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. Refer to Typography for more information.