The gold standard of typography is written information that a reader can locate, understand and use in its real setting. This root guide examines hierarchy, typeface choice, line length, contrast, text spacing, multilingual design, print and screen production, and the practical evidence behind a reliable page.
Begin with the exact task a reader must complete. Follow a fictional school circular through a redesign, calculate a real contrast example and use links into eduKate’s design, literacy, publishing and teaching branches. The examples are explanatory constructions, not a claim that one preferred design works for every reader.
Find your route
Understand the message
Chapters 1–4: Typography makes language usable · Begin with the reader’s actual task · Build hierarchy from meaning rather than decoration · Make typography and writing reinforce one another.
Shape the text
Chapters 5–7: Choose a typeface that fits actual content · Control line length and the path the eye must travel · Use spacing to reveal groups.
Verify accessibility
Chapters 8–12: Contrast is a measured condition, not a mood · Worked example: an almost-passing grey notice · Design for resizing and altered text spacing · Make mobile reading an independent quality check · Treat multilingual layout as design, not substitution.
Apply across contexts
Chapters 13–16: Make numerical and mathematical information testable · Print and screen need different proofing conditions · A worked layout: repair a confusing school circular · Typography in education is a learning instrument.
Produce and learn
Chapters 17–22: Create a small, documented type system · Proof content, design and the production file separately · Respect type licensing and attribution · Evaluate outcomes instead of aesthetics alone · Choose your next specialist branch · Frequently asked questions.
Complete chapter index
- Typography makes language usable
- Begin with the reader’s actual task
- Build hierarchy from meaning rather than decoration
- Make typography and writing reinforce one another
- Choose a typeface that fits actual content
- Control line length and the path the eye must travel
- Use spacing to reveal groups
- Contrast is a measured condition, not a mood
- Worked example: an almost-passing grey notice
- Design for resizing and altered text spacing
- Make mobile reading an independent quality check
- Treat multilingual layout as design, not substitution
- Make numerical and mathematical information testable
- Print and screen need different proofing conditions
- A worked layout: repair a confusing school circular
- Typography in education is a learning instrument
- Create a small, documented type system
- Proof content, design and the production file separately
- Respect type licensing and attribution
- Evaluate outcomes instead of aesthetics alone
- Choose your next specialist branch
- Frequently asked questions
CHAPTER 1 OF 22 · Back to contents
1. Typography makes language usable
Typography is the design of written language as it is encountered: letterforms, spacing, hierarchy, lines, columns and the interaction between text and a page or screen. The gold standard is not a fashionable font. It is a reading experience that lets the intended audience find, understand and act on the right information without unnecessary friction. A page can look elegant and fail because the deadline is hidden; an ordinary page can succeed because headings, instructions and details are unmistakable.
This subject sits between language and design. Copywriting decides what a message says, while typography makes its structure visible. Graphic design also uses images, colours and composition; typography gives written content its particular logic. These boundaries matter when choosing a specialist route. For a full discipline overview see The Gold Standard of Graphic Design; for teaching choices consult Teaching Graphic Design.
CHAPTER 2 OF 22 · Back to contents
2. Begin with the reader’s actual task
Before selecting a typeface, identify the user, purpose, setting and failure cost. A parent scanning a school notice needs the event, date, action and contact. A learner comparing fractions needs symbols and alignment to remain distinguishable. A museum visitor needs labels they can read at the available distance and lighting. A medical consent document demands careful sequencing and a clear explanation of consequences.
Write the task as a sentence: ‘A reader should be able to locate the deadline in ten seconds, then understand how to respond.’ Ten seconds is a hypothetical design test here, not a universal accessibility standard. Create a small checklist of what must be found, and test the document against it. Start with required content and evidence; making poor instructions beautiful will not make them correct.
Contents · Previous chapter · Next chapter
CHAPTER 3 OF 22 · Back to contents
3. Build hierarchy from meaning rather than decoration
Hierarchy distinguishes a title, section, subsection, body text, caption, note and action. Use meaningful headings in a logical order before choosing size and weight. A true heading should introduce a coherent section; text made large merely for emphasis should not masquerade as a heading in the document structure.
For a notice, arrange ‘What is happening’, ‘When and where’, ‘What to bring’, ‘What you must do’ and ‘Where to ask’. This ordering reduces return trips through the page. An illustration must support, not compete with, the next decision. On the web, heading elements should communicate structure to assistive technology. The separate Information Design guide develops this connection between logical organisation and readable form.
Contents · Previous chapter · Next chapter
CHAPTER 4 OF 22 · Back to contents
4. Make typography and writing reinforce one another
A type system cannot compensate for a paragraph containing several incompatible instructions. Split conditions, actions and explanations deliberately. Expand an unfamiliar abbreviation on first use. Label examples as examples. Use plain language when accuracy permits it, but keep technical terms where they are necessary for precision.
Typography can express these distinctions through a bold action line, a secondary explanation and a carefully worded note. Do not turn exceptions into tiny grey print: an exception may change what someone must do. If a rule is conditional, write the condition before or next to the action. This is closely related to Literacy and School Writing Instruction.
Contents · Previous chapter · Next chapter
CHAPTER 5 OF 22 · Back to contents
5. Choose a typeface that fits actual content
Evaluate a candidate typeface using the real language, numerals, punctuation, symbols and expected font weights. Check distinguishability of characters such as capital I, lowercase l and numeral 1; zero and capital O; and minus signs against hyphens. A brand display font may be suitable for two words but unsuitable for dense reading.
Compare two typefaces on the same paragraph and task, not on an isolated inspirational word. Consider x-height, stroke contrast, apertures, spacing and available weights. There is no single most readable typeface for every audience and script. Familiarity, reading conditions and accessibility tools matter. Preserve a robust fallback stack and avoid loading a large collection of decorative fonts simply to signal sophistication.
Contents · Previous chapter · Next chapter
CHAPTER 6 OF 22 · Back to contents
6. Control line length and the path the eye must travel
When text lines are extremely long, it becomes harder to find the start of the next line. When they are extremely short, reading is interrupted by frequent returns. A comfortable measure depends on character widths, font size, language and display; it is a testing question, not one magic character count.
Compare a narrow and a broad column containing identical text. Ask readers to locate one fact and summarise a paragraph, not merely to state which version looks attractive. Give labels enough space to remain next to their values. Tables often need different treatment from prose: numbers should align by decimal or units, and horizontal comparison must remain possible without silently deleting columns.
Contents · Previous chapter · Next chapter
CHAPTER 7 OF 22 · Back to contents
7. Use spacing to reveal groups
Line spacing, paragraph separation, indentation and margins communicate membership. Items that belong together should look related; separate decisions need visible separation. A heading stranded at the bottom of a page, far from its first paragraph, misrepresents the structure even if its font size is correct.
Spacing also has functional limits. Fixed-height text boxes may clip when readers enlarge text or alter their own line spacing. Use layout rules that can grow. For a long instruction set, place a compact summary before the detail. The summary is an entry route; it should not contradict or replace the full instructions.
Contents · Previous chapter · Next chapter
CHAPTER 8 OF 22 · Back to contents
8. Contrast is a measured condition, not a mood
Contrast depends on the relative luminance of foreground and background, not simply on whether a colour ‘looks dark’. WCAG 2.2 success criterion 1.4.3 specifies at least 4.5:1 contrast for ordinary text and 3:1 for qualifying large text, with defined exceptions. This is a web accessibility criterion, not a universal guarantee that every reader can comfortably read every font.
Inspect the actual foreground and background colours, including hover and focus states where text appears. Thin strokes, photographs behind words and gradients can create practical difficulties beyond a single test value. Choose legible combinations with a margin rather than designing exactly to the threshold. See the W3C WCAG 2.2 contrast requirement and its guidance.
Contents · Previous chapter · Next chapter
CHAPTER 9 OF 22 · Back to contents
9. Worked example: an almost-passing grey notice
Imagine a digital notice whose ordinary text is #777777 on white (#FFFFFF). Using the WCAG relative-luminance formula, this combination is approximately 4.48:1. It is just below the 4.5:1 ordinary-text criterion, even though it can appear acceptable at a glance. Darkening the text to #666666 gives approximately 5.74:1. These figures assume solid, opaque colours and are intentionally limited to this single foreground/background pairing.
This worked example shows why inspection matters. Adding a bold heading will not repair low-contrast body text. Replacing text with an image of lettering also makes resizing and custom colours harder. Test the actual rendered notice and its other states; do not infer whole-page conformance from one passing colour calculation.
Contents · Previous chapter · Next chapter
CHAPTER 10 OF 22 · Back to contents
10. Design for resizing and altered text spacing
WCAG 2.2 includes requirements about resizing text up to 200% and avoiding loss of content or functionality under specified user-set text-spacing values. The text-spacing check includes line height of at least 1.5 times font size, paragraph spacing of at least twice font size, letter spacing of at least 0.12 times font size and word spacing of at least 0.16 times font size.
These values describe what content must tolerate under the test, not a demand that every page always use those exact spacings. Try the settings with a real page: do buttons overlap, do captions vanish, does a table become unusable, and can the reader still follow the order? See Resize Text and Text Spacing.
Contents · Previous chapter · Next chapter
CHAPTER 11 OF 22 · Back to contents
11. Make mobile reading an independent quality check
A responsive design should preserve the meaning of every heading, instruction and label when space becomes scarce. A four-column desktop comparison may need a reorganised presentation on a phone, but the reorganisation must still make comparisons possible. Do not quietly remove the exception clause or place the only link where it cannot be reached.
Test realistic device widths and zoom levels with lengthy names, numbers and translations. A comfortable desktop screenshot is not a substitute. Keep interactive labels visible, link text meaningful outside its sentence, and focus order logical. For the broader digital context see The Gold Standard of Websites.
Contents · Previous chapter · Next chapter
CHAPTER 12 OF 22 · Back to contents
12. Treat multilingual layout as design, not substitution
Scripts differ in character proportions, line breaking, punctuation and font support. A layout built for one English heading may overflow when the same idea is expressed in another language. A language change may also alter what a reader regards as a natural reading order or grouping.
Translate the actual message before final layout approval. Inspect every required character, number and sign in the candidate typeface. If a fallback typeface appears, check that its metrics do not cause collisions or erratic line heights. Ask a competent reader of that language to review both meaning and presentation. A machine-produced translation should not be treated as a complete quality-control process.
Contents · Previous chapter · Next chapter
CHAPTER 13 OF 22 · Back to contents
13. Make numerical and mathematical information testable
Numerals deserve the same care as words. A currency price, a minus sign, a superscript, a decimal point and a unit can change the meaning of an instruction. In a worked Mathematics example, aligning equals signs can expose the transformation from one line to the next. Mixing forms of the minus sign, inserting small symbols or shrinking exponents can obscure a correct derivation.
A simple check is to give a learner two visually similar mathematical statements, then ask whether their operations are equivalent. If students cannot reliably distinguish 3x and 3+x, design has damaged the teaching task. The emphasis on explaining a mathematical move before increasing speed also appears in eduKate’s immutable Secondary 1 Mathematics teaching example; this page is a learning reference, not a source of typography regulations.
Contents · Previous chapter · Next chapter
CHAPTER 14 OF 22 · Back to contents
14. Print and screen need different proofing conditions
Printed typography is constrained by paper, ink, finishing, lighting and viewing distance. Screen typography adds rendering engines, scaling, interactions and device variability. A proof that looks good on a designer’s monitor is not evidence that a low-cost printout or a small phone will read equally well.
For print, inspect a physical proof at actual size. Check faint strokes, crowded tables, small captions and trimming. For web, inspect responsive states, zoom and keyboard navigation. For both, confirm the version being reviewed is the version being released. Screen Printing addresses production considerations beyond type layout.
Contents · Previous chapter · Next chapter
CHAPTER 15 OF 22 · Back to contents
15. A worked layout: repair a confusing school circular
Fictional brief: parents must register for a science visit by 12 November, meet at 8:15 a.m. and bring a consent form. In the first draft, the deadline is buried in paragraph five, the meeting time is printed smaller than a decorative slogan, and the consent condition sits in a footnote. The message contains the right words yet repeatedly fails a locating task.
The revised page begins ‘Science visit: action required by 12 November’, followed by three labelled lines: ‘Register’, ‘Meet’, ‘Bring’. A brief explanatory paragraph and contact appear below. Test each version with people who have not seen it. Ask them to find the deadline, time and form, and note errors as well as elapsed time. These are fictional dates and a teaching example, not a real eduKate event.
Contents · Previous chapter · Next chapter
CHAPTER 16 OF 22 · Back to contents
16. Typography in education is a learning instrument
Teachers need pupils to distinguish the question, worked method, feedback and next task. Consistent heading levels help a learner orient within a long unit. White space can expose reasoning steps instead of compressing them into an intimidating block. A labelled graph should remain interpretable when printed without colour.
The best school worksheet is not the one with the most visual effects. It is the one whose hierarchy makes the learning action and answer-checking process plain. Tutors can compare versions through learner errors and explanations. Connect this with Teaching Information Design, Information Literacy and Education: Learning Transfers into Life.
Contents · Previous chapter · Next chapter
CHAPTER 17 OF 22 · Back to contents
17. Create a small, documented type system
A design system needs named text roles such as page title, section heading, body, caption, link and warning, with rules for size, weight, line height, spacing and colour. Naming roles is more useful than memorising that ‘everything important is 22 pixels’. Roles let different teams use the same semantics while adapting actual rendering to context.
Record how a role behaves at narrow widths and large zoom. Include sample labels with long words, numbers and multilingual text. Keep version history when changes affect many pages. If a new font changes line breaks, recheck every layout rather than assuming a global substitution is safe.
Contents · Previous chapter · Next chapter
CHAPTER 18 OF 22 · Back to contents
18. Proof content, design and the production file separately
Proofing must include factual accuracy and visible appearance. A spelling pass will not detect that a heading is visually detached from its paragraph. A colour-contrast scan will not detect that the wrong deadline was copied. A PDF export may substitute fonts or flatten text even though the editable source is sound.
Use three passes: subject-matter proof, layout and accessibility proof, and final exported-file proof. Check link destinations and whether a pasted URL still points to the intended page. Maintain an issue log with the page, problem, responsible person, corrected version and verification result. This is more reliable than a single ‘looks finished’ approval.
Contents · Previous chapter · Next chapter
CHAPTER 19 OF 22 · Back to contents
19. Respect type licensing and attribution
Font files and artwork are intellectual property; permitted use depends on the licence and context. A font licensed for a designer’s desktop may have different conditions for embedding on a website, in an app or in distributable documents. Do not assume that being able to download a font grants every type of redistribution.
Preserve records of font names, vendors, versions and licence terms. Where type is modified or subsetted, confirm that the licence and technical format allow it. Use fallback typefaces legally and predictably. This practical control matters to small studios, school publishers and organisations that will maintain documents long after the original designer has left.
Contents · Previous chapter · Next chapter
CHAPTER 20 OF 22 · Back to contents
20. Evaluate outcomes instead of aesthetics alone
Define two or three successful behaviours before a design review: locate a date, understand the first required action, distinguish two mathematical symbols, or read the page at enlarged scale. Measure completion and errors with representative readers. Ask qualitative questions about confusion and perceived trust, but do not replace task evidence with a preference vote.
An attractive design may remain a good choice, but attraction is not the only criterion. Evidence can identify a conflict between brand ambition and usability, or reveal that a supposedly plain page works better for the audience. Record the condition of the test so one result is not overgeneralised.
Contents · Previous chapter · Next chapter
CHAPTER 21 OF 22 · Back to contents
21. Choose your next specialist branch
Typography needs neighbouring expertise at different moments. For visual language and composition, continue to Graphic Design and Visual Arts. For a classroom exercise, use Teaching Graphic Design and Writing Instruction. For publishing, use Book Publishing and Educational Publishing.
For reader access, see Captioning Services, Websites, and Literacy. These branches are related rather than interchangeable. A type-layout question, a comprehension problem and a content-correction task may require different remedies.
Contents · Previous chapter · Next chapter
CHAPTER 22 OF 22 · Back to contents
22. Frequently asked questions
Is typography the same as choosing fonts? No. Fonts are tools; typography includes information hierarchy, spacing, reading sequence, layout and verification. Does one font fit every learner? No. Test the actual content, audience, script and reading conditions. Is WCAG contrast compliance enough for accessible typography? No. It is one important measurable part of a wider experience.
Can a design be beautiful and usable? Yes; the goal is to align expression with the reader’s task. What should I fix first? Fix incorrect information, inaccessible actions and ambiguous hierarchy before decorative details. How do I know a redesign is better? Test equivalent tasks with readers, compare completion and errors, then verify the exported version.
Sources and verification
The contrast and user-adjustable spacing thresholds described here come from W3C Web Content Accessibility Guidelines 2.2, especially success criteria 1.4.3, 1.4.4 and 1.4.12. The fictional school notice, tasks, colours and redesign decisions are original teaching examples. Actual accessibility claims require testing the real implementation, not a single screenshot.
Continue through The Gold Standard of Design and The Gold Standard of Education. Return to the chapter index.