...
Use a logical hierarchy (H1 → H2 → H3…) that reflects the content structure, not visual styling alone.
- Headings must go in numerical order on a page (can’t have an h2 nested under an h4, for example) to provide content structure for users, SEO, AI, and screen readers.
Differentiate heading levels with size, weight, and spacing, not color alone or decorative styles.
- Heading level is typically associated with font-size: the higher the heading level, the larger the font-size.
Avoid styling that reduces readability—such as all caps, excessive italics, or low‑contrast colors.
Maintain consistent spacing above and below headings to support scannability and rhythm.
Apply consistent heading styles across the entire site so users can rely on predictable patterns and quickly understand hierarchy.
...
- Avoid serif body text at small sizes, where details blur and slow reading.
- Serifs can be effective for large headings or brand‑driven typography.
Text Elements
- There is one style for each HTML text element. This consistency is helpful for users who are trying to understand the content hierarchy of a page.
- E.g. The h2 heading styles are red with a large font size. (There may be conditions where there are style variations, such as the h2 color is white if it’s on a red background.)
- Avoid mixing more than 2-3 text styles in the same section
- For example, when displaying a quote/testimonial, stick to 2-3 types of content with unique styling, such as a title, quote, and name.