Headings
Headings fill two roles: Structure indicator and content label.
We can only use a h2 if we have a h1 and so on in a page or standalone structure. We don’t skip levels, regardless of role.
The structure indicator role should be the default approach, in which the heading elements are used without modifying their size. This is always the case for the main content of text-based pages, such as documentation. For application interfaces, it’s more complex. First, we need to check if other elements that serve the content label function can be used. They come in pairs, some mandatory; if we have something like a fieldset, it must have a legend; if we have input, there must be a label; if we have a table, we might opt for a caption. If we don’t have or use element pairs, we can turn to headings. We should still follow the level order, but we can adjust the size if it makes sense in the layout.
Mybring, being an application, usually hides the h1 headings visually, and leaves that functionality to active navigation, browser tab title and user consciousness. Having a visual heading is mostly useful if there are multiple steps within an area.
| Element | Declaration | Example |
|---|---|---|
| h1 | font-size: 2rem;
line-height: 1.25; |
Mybring provides logistics and warehousing management for Bring customers |
| h2 | font-size: 1.5rem;
line-height: 1.3; |
Mybring provides logistics and warehousing management for Bring customers |
| h3 | font-size: 1.25rem;
line-height: 1.4; |
Mybring provides logistics and warehousing management for Bring customers |
| h4 | font-size: 1rem; |
Mybring provides logistics and warehousing management for Bring customers |
| h5 | font-size: 0.875rem; |
Mybring provides logistics and warehousing management for Bring customers |
All headings share the following declared properties:
font-weight: 600;
margin-top: 0;
margin-bottom: 0.5rem;