The playbook
Website Typography: Template and Field Guide
This website typography template turns a broad task into a record another person can use. It captures text role, font, size, then connects that information to a decision. Copy the table into your working document or system and create a separate record for each item in scope.
Put the task in context
Read a full paragraph on a phone rather than judging the typeface from a short heading. Check line length, line height, weight, and contrast together. Test fallback fonts because a late-loading font can change wrapping and disrupt the layout.
Copyable worksheet
| Field | Entry instructions |
|---|---|
| text role | Record the text role associated with this page or interaction record. Use a stable reference so later updates can be matched. |
| font | Record the font associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| size | Record the size associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| line height | Record the line height associated with this page or interaction record. Keep the value specific enough for another owner to interpret. |
| Decision field | Entry instructions |
|---|---|
| Observed problem | Describe the actual condition and where it was observed. |
| Recommended action | State the smallest action that resolves the documented problem. |
| Evidence | Link to the record, observation, or test supporting the action. |
| Owner and next review | Name the accountable person and when the decision should be revisited. |
How to complete the worksheet
Begin with text role. Use the same reference throughout the record so notes are not attached to the wrong item. Then choose a restrained set of legible type styles. This establishes the information required before the worksheet becomes a request for action.
Next, set sensible line lengths spacing and heading hierarchy. Use the observed problem and evidence fields to explain why that step is needed. A useful entry describes an actual condition, such as choosing a display font for dense instructional text, rather than a broad instruction to “improve performance.”
Finally, test zoom fallback fonts and long real content. Put use readable body typography and reserve expressive styles for short headings in the action field only when it addresses the observed condition. If the problem is different, change the action. The template is a structure for judgment, not a reason to apply the same fix everywhere.
Illustrative completed decision
| Part | Illustrative entry |
|---|---|
| Problem | Choosing a display font for dense instructional text |
| Action | Use readable body typography and reserve expressive styles for short headings |
| First check | Choose a restrained set of legible type styles |
| Follow-up check | Test zoom fallback fonts and long real content |
| Outcome to define | readable key content at tested sizes |
Adapt the fields without losing meaning
You can add fields required by your team, but each should change a decision or preserve necessary context. Keep factual observations separate from recommendations. If font changes, record the new value and its effective date instead of silently rewriting the context of an earlier decision.
Use the record in a handoff
Ask the receiving owner to explain the next action using only the worksheet. Missing context becomes visible quickly during that exercise. Repair the record before applying the structure to a larger batch. Keep readable key content at tested sizes connected to the item so the team can later assess whether the action was useful.
Treat visual changes and functional changes separately in the change log. A clearer label may improve comprehension, but a broken submission destination still prevents completion. Confirm both understanding and successful delivery.
Skip the manual steps. Let AgentixHUB run this for every client.
Start now