A page can contain many attractive text sizes without helping someone find the important information. A useful type scale gives each level a recognizable role, from the main title to supporting detail.

Begin with comfortable body text and a small set of distinct headings. Weight, spacing, and placement can provide emphasis alongside size. Avoid turning every new component into a new typographic level.

Read a realistic page rather than a specimen containing only short phrases. Long titles, numbers, and explanatory paragraphs reveal whether the scale supports the actual content. The aim is a readable hierarchy that survives ordinary variation.

A few starting points
  1. Give each text level a role.
  2. Begin with readable body text.
  3. Try the scale with realistic content.

Picture this situation.

Consider an article with a title, section headings, and captions. Their sizes should explain their roles rather than compete equally for attention.

A second way to look.

Look at the moment when a person hesitates. The question they are trying to answer can be a better guide than the arrangement that looks most balanced.

Follow a related question

Keep a small current entry point.

A reading list with an entry point

Name the page’s essential task.

A useful first version of a page

Keep learning

Related background to continue exploring this subject.

W3C: understanding accessibility criteria MDN: responsive images
Look a little closer