Typography / 4 min read
Let your typography do the work.
Build a useful reading order with real words, deliberate spacing, and an annotated workshop-page example.
Write the reading order before choosing type
For this exercise, Fieldnote is a fictional neighbourhood workshop website. The visitor needs to identify the activity, understand whether it suits a beginner, and find the dates. Write those three questions above the design file. The example content is “Make your first clay planter”, “A two-hour beginner workshop. Materials included”, and “View workshop dates”. None of this represents a live class or a tested sales result. The typographic job is to make the relationship between those pieces clear. An elaborate display face cannot repair a headline that never names the activity, and a large button cannot explain details that have been left out of the page.
Start with a small set of text roles
Use a page heading, supporting paragraph, section heading, body text, and compact label. Begin with one suitable family and distinguish roles through size, weight, and space before introducing a second font. Try the full workshop title, not just a short specimen such as “Aa”. A typeface that looks distinctive in two letters may wrap awkwardly in an actual headline. Keep the activity name prominent, the beginner information readable, and the date action recognisable as an action. Decorative labels can be quieter than the main message, but they still need enough presence to be read. A role-based system helps you make the next page without inventing a new hierarchy.
Compare the same message in two arrangements
The annotated example below keeps Fieldnote’s wording constant and changes its hierarchy. In the crowded arrangement, similar emphasis makes the label, title, detail, and action compete. The proposed arrangement groups the supporting information, gives the activity a clearer first position, and leaves space before the next step. Treat this as a visible design comparison, not proof that one version increased bookings. Ask a reader what they believe the page offers and which text they would read next. Their answer is more useful than asking whether the font feels premium. If the order remains unclear, change one relationship at a time so you can explain the next version.
Keep the words. Change the order of attention.
Use spacing to show what belongs together
Distance communicates grouping. Keep “Materials included” close enough to the workshop description that it reads as part of the same offer, rather than as an unrelated note. Leave a more deliberate break before a new section such as “What you will make”. Read a full paragraph at the intended width, then resize the window and enlarge the text. Watch whether a heading becomes stranded far from the content it introduces or whether a long line makes the return to the next line uncomfortable. Adjust the container and spacing as well as the type size. Shrinking all the copy to preserve a desktop composition usually avoids the real layout decision.
Check the awkward content before approving the style
Replace the sample title with “Make a hand-built planter for your smallest windowsill” and inspect the wrap. Try a workshop name containing numerals, a longer date label, and a price with a currency symbol if the real brief requires one. These are stress tests, not extra claims for the fictional service. Review the actual font files and weights that will load, and include a fallback font check. Keep important information in live text rather than baking it into a poster image. A strong type system needs to cope with ordinary content changes, keyboard focus on links, enlarged text, and narrow screens as well as the presentation mock-up.
Run a type-only exercise
Duplicate one page, remove decorative imagery, and give every surface a quiet background. Keep the actual words and controls. Mark what should be read first, second, and third, then compare those notes with the emphasis in the layout. If a small category label is more noticeable than the activity, reduce its weight or give the heading more space before changing fonts. Restore the illustration only after the structure makes sense. Before a real release, ask people to find the duration, materials information, and dates without coaching them. Record what they did and where they hesitated; do not turn a proposed improvement into a measured result until you have evidence.