Headings allow users to easily distinguish content sections on the page. The Heading component allows you to easily select and implement the appropriate heading style for the layout and structure of your page.
Pharos Headings are not used for style alone. We've created a component that separates the semantic structure needs, "levels", from the styling needs, "presets."
The "level" prop designates the heading level (h1, h2, h3, etc.) needed to create a logical information hierarchy. When using assistive technology, users often utilize headings to navigate the page's content quickly. Headings must be semantically tagged so that a screen reader can both identify headings when reading a page, or pull up a list of all the page's headings.
The "preset" prop provides specific styles of the heading text to create visual hierarchy that allow users to easily scan pages and content. This includes line-height, font-family, font-sizes, letter-spacing and font weight.
JSTOR's brand utilizes two typefaces: GT America and Ivar Headline. We use a mix of both to express our heading styles.
Preset="2"
| |
Preset="3"
| |
Preset="4"
| |
Preset="5"
| |
Preset="6"
| |
Preset="7"
|
For headings and titles, always try our serif heading presets (Ivar) first because elevates the content, beautifies the page, and helps with scannability when paired with our sans-serif typeface.
When the heading size needs to be larger than 24px in size (preset 3, 4), use our serif presets (5, 7) to style the headings.
When pairing presets, do not use the same size presets together to create a better visual hierarchy.
Do not use the --bold and non-bold versions of the same preset to create hierarchy, use different presets to do this.
We use the --bold prop sparingly to better establish visual hierarchy with page headers, heroes and marketing headings (when applicable). Only use with presets 1, 5, and 7.
When using Heading preset 1, use the --bold tag to help differentiate it from body copy.
- Include a level number (between 1 and 6) to create semantic hierarchy, all headings need to semantically tagged so that a screen reader can identify them when reading a page, or be able pull up a list of all the page headings
- Include only one level="1" (h1) per page
- Place headings at the top of their related section
- Clearly describe the content they refer to
- Support the hierarchy and structure of the page
- Don't use heading tags to resize normal text, use our type-scale and font-family design tokens instead
- Don't skip heading levels, begin with level="1" (h1), level="2" (h2), and so on
Headings and subheadings help organize the content. They identify sections and groupings of content to make it easy for readers to scan. Headings are also important for accessibility, as they are used to navigate the page.
The heading and subheadings should provide a glimpse of what is the most important aspect of the information that follows. Organize them by level (e.g., level="1" > level="2" > level="3") corresponding to the content they're covering (main topic > aspect of that topic > finer points).
When writing content for headings, avoid repeating words at the beginning of each heading. This increases the difficulty of scanning because the user first has to read the repeated word(s) before getting to new information. Also, Whenever possible, write headlines in sentence case.
1.3.1 Info and Relationships A 2.4.1 Bypass Blocks A 2.4.6 Headings and Labels AA
Each page starts with a level="1" (h1), and Heading levels should go in a logical order
For example:
level="1" Foods
level="2" Fruit
level="3" Apples
level="4" Honeycrisp
- describe relationships between sections and subsections.
must be semantically "tagged" so that a screen reader can both identify headings when reading a page and pull up a list of all the page headings.
allow users to quickly scan a page. According to a WebAIM survey, two-thirds of screen-reader users scan headings as the first step of trying to find information on a long web page.