A typography system for websites and proposals
A typography system assigns fonts, sizes, weights and spacing to repeatable roles.
AI-assisted practical guide · Editorial approach
The useful starting point
A typography system assigns fonts, sizes, weights and spacing to repeatable roles. Test it with real headings, numbers and long paragraphs across devices. The goal is a clear reading hierarchy that your team can maintain, rather than a large collection of type styles.
Understand the decision
Collect representative content before choosing sizes. Include long service names, currency values, tables and languages the business publishes. Check font licensing and delivery requirements with the appropriate owner. On the website, reserve space for text and images so loading does not create avoidable movement. In proposals, verify exported documents as well as editable files.
A practical approach
Review the identity in the smallest and most difficult places it must work: a mobile header, a label, a plain document and a real printed sample. Judge recognition and usability alongside appearance. Keep source files, export settings and asset ownership together so the next person can produce consistent work. An impressive presentation does not demonstrate that a system survives low-quality printing, long product names or a narrow screen.
- Define heading, body, label and table roles.
- Test realistic long content.
- Verify font files and licences.
- Inspect exported PDFs and mobile screens.
Illustrative example
A consulting practice might use one family for body text and a restrained display treatment for headings. It would test a three-line service heading on mobile and a dense fee table in PDF. The system should make both readable without asking staff to invent a new layout for each document.
A mistake to avoid
Avoid choosing typography only from a short sample phrase. Attractive letterforms may behave poorly with the information your business needs to publish.
What to review
Measure consistency and reading problems in representative documents, and review any font-loading or layout-shift issues in the live interface.
Turn the guide into a working brief
Prepare a compact usage sheet with approved files, minimum sizes, typography, colour roles and examples of acceptable variation. Ask the person who publishes everyday material to recreate one item using only that sheet. The mistakes they encounter are useful gaps in the system. Correct those gaps before a large rollout. Use genuine commissioned photography with permission where available; label illustrative imagery and record its source rather than presenting it as evidence of your people or premises.
Common questions
What should I prepare before asking for help?
Start with this checklist: Define heading, body, label and table roles. Test realistic long content. Verify font files and licences. Inspect exported PDFs and mobile screens. Add your business context, existing materials and the decision you need to make. A useful initial brief can include uncertainty; you do not need to invent answers before discussing scope.
How should I judge whether the work helped?
Measure consistency and reading problems in representative documents, and review any font-loading or layout-shift issues in the live interface. Keep the observation period and definitions visible. Use the responsible team's evidence alongside the website journey; do not attribute every change in results to one asset or article.
Sources & scope
AI-assisted practical guide. Examples are illustrative; business-specific facts and sector claims need the responsible owner’s approval.
- W3C WAI: Images Tutorial
Reference for choosing appropriate image alternatives. Design methods and examples here are original practical guidance.
Use this guide to start your brief.
Share your business context, existing materials and what is still unclear. The guide title will be included so the conversation starts with the right problem.
Prefer email? Send a brief with this guide’s context.Related guides
How to test a logo before approving it
Test a logo where it will actually be used: small mobile headers, documents, labels and single-colour output.
Read the guide →Choosing brand colours that remain readable
Choose colour roles as well as colour values: text, backgrounds, actions, accents and status messages need different treatment.
Read the guide →Brand guidelines a small team will actually use
Useful guidelines answer everyday production questions with clear examples and accessible files.
Read the guide →