I have headings of different sizes for components that are the same hierarchical level to emphasise certain components. The font sizes that I have got do not match the semantic hierarchy. Is this allowed? If this is allowed, how does this work for people with site impairment?

This is an example: example of type headings

  • Sorry, I don't understand what your asking—need elaboration. Can you provide two examples—one that shows a visual hierarchy and a semantic hierarchy within the same design, and another that has the same components but doesn't? Apr 3, 2023 at 17:31

1 Answer 1


Yes—your visual hierarchy does not need to perfectly match your semantic hierarchy. This allows a page to have correct semantic hierarchy while maintaining a hierarchy that makes sense visually, as these often don't go together. When people try and force them to be the same, you often end up ruining the semantic hierarchy by skipping straight from an h1 to an h3, for example, for the sake of the visual font size. Mina Markham, a design system designer and developer, talks about this in her article on the design system Pantsuit.

It is so common to divorce semantic and visual hierarchy that most design systems have classes for type sizes so that type sizes are completely divorced from semantics. Some examples of design systems that approach typography scale this way include: Material, IBM's Carbon, and the US Web Design System.

You asked about people with visual impairments, and this is why it's so important for the semantic hierarchy to be correct. Screen readers will ignore the visual hierarchy and only care about the markup, so make sure the semantic hierarchy suits the content regardless of what's going on visually.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.