A Beginner's Guide to Type Hierarchy, With a Complete Example

Type hierarchy helps readers understand what matters, what belongs together and where to go next. Size contributes, but so do weight, position, spacing and repetition. A page with five sizes can still feel disorganised if unrelated content is grouped together. Begin by sorting the information into meaningful roles, then give each role a recognisable appearance.

Consider a fictional community garden workshop page. It needs a title, a summary, the date and location, session descriptions, a list of things to bring, registration information and a photograph caption. The reader's likely questions are practical: What is this? Can I attend? What will happen? How do I book? The hierarchy should answer those questions in that order without forcing everyone to read every paragraph.

Use the title Grow Your First Kitchen Garden as the strongest textual element. For this example, start with a semibold sans serif at 44 pixels on a wide screen and 32 pixels on a narrow one. These are provisional values for this content, not a universal scale. Keep the words in normal title or sentence case rather than spreading a long run of capitals across the page.

Place a short summary immediately below: A practical morning of planting, soil preparation and growing food in small spaces. Set it larger than the body but lighter than the title, perhaps 21 pixels. It explains the promise without competing with the name. Give the title and summary enough surrounding space to form one introductory group.

Do not force a particular line break with spaces. Let the heading respond to available width, then inspect its breaks at common screen sizes. If Garden lands alone and looks stranded, adjust the width or heading size modestly. If the wording is genuinely cumbersome, editing the title may be better than repeatedly compressing the typography.

Next comes Saturday 14 June, 10:00–13:00, Riverside Community Garden. The date is illustrative rather than an actual announcement. Set these facts around 19 pixels in a medium weight, with clear labels such as When and Where. They rank above ordinary explanatory copy because readers need them to decide whether the event is relevant.

Group each label with its value and keep the two groups close enough to read as related information. On a wide layout they might sit beside each other; on a phone they can stack. Do not encode their meaning only through different colours. The words themselves should still identify the date, time and location when colour is unavailable.

This shows why importance and size are not identical. The practical facts can be smaller than section headings yet attract attention through placement, weight and grouping. Hierarchy describes the reading route, not a ranking in which every more important item must have a larger numerical font size.

Use What you will learn, Morning schedule, What to bring and Book a place as the main section headings. For this page, try 25 pixels in semibold. Repeat the same treatment throughout. Put more space above each heading than below it so it visibly introduces the following material rather than appearing attached to the previous paragraph.

Inside Morning schedule, the session titles Preparing the soil and Planting your first containers form a lower heading level. Set them at 19 pixels in bold, close to their descriptions. They are visibly subordinate to the section heading without becoming tiny. The time can sit alongside each session title in regular weight, provided the relationship remains clear on narrow screens.

The page now has a title, introductory text, practical facts, section headings and session headings. These are distinct jobs, but they do not require five unrelated typefaces. A family with useful regular, medium and bold styles can provide the necessary contrast. Google Fonts Knowledge recommends checking whether a family's styles and legible details suit the intended use A checklist for choosing type.

Set descriptions and instructions at 18 pixels in regular weight for the first draft. Give them a comfortable column width and test a line height around 1.5. That setting is a starting point for this page, not a requirement. If the text feels cramped or disconnected, assess the letter proportions and line length before changing the value.

Line height interacts with the font's x-height, the script and the content. Google Fonts Knowledge explains that identical numerical settings can look different across typefaces, and that languages with plentiful diacritics may need additional room. Judge the actual paragraph rather than copying another site's settings Choosing a suitable line height.

Use emphasis sparingly. In Please bring gardening gloves and a water bottle, bolding the entire sentence would compete with the session headings. If a detail is genuinely essential, give it a clear label or a short separate note. Repeated bold sentences often reveal that the content needs restructuring rather than stronger formatting.

A photograph caption and an image credit can sit at 15 pixels, below the body size but still comfortable to read. Their subordinate position does much of the hierarchical work. Do not turn them into faint text simply to make them look secondary. Low importance does not mean that readers should struggle to decipher them.

The registration action needs a separate decision. A Book a place button is not another heading level: it is an interactive control. Give it a clear label, sufficient space and an identifiable appearance. Keep its typography consistent with other controls, and place it where the reader has enough information to act.

On a website, use a meaningful heading structure as well as visible differences. The page title belongs at the top heading level; sections sit beneath it; session headings sit beneath Morning schedule. Do not choose a heading element merely because its default size looks right. Visual styling can change without changing the document's underlying relationships.

Review the page without the photograph and colour accents. Can you still identify its title, sections and practical information? Then read only the headings. They should outline the content rather than form a string of vague labels. Something like More information is less useful than What to bring.

Record the roles rather than memorising the numbers: page title, summary, practical facts, section heading, session heading, body, caption and control. Several roles may share a size while differing in weight or placement. Remove any style you cannot explain. Browse the free font library for a family with enough styles, then test this same content before adding another typeface.