The right picture, delivered into the wrong rectangle
Resolution, crop and reserved space solve different image problems. Design all three around what the reader needs to see.
Engineering7 min read
Choosing a font with real content on the page
A controlled specimen puts the same paragraph, reference code, figures and completed field in two font stacks, so the decision has something concrete to rest on.
The heading has been given an easy assignment
The heading is usually the easiest reading job on the page. It gets a large size, plenty of room and only a few words to carry. The same font may then have to explain a service over several lines, distinguish a reference code over the phone and keep a completed form understandable. I would put those less flattering assignments into the comparison before choosing a website’s type by its heading.
A font specimen becomes more useful when it contains the work people actually need to read. Two confident-looking words tell you little about a long instruction. A face that looks ordinary in a logo exercise may make that instruction easy to follow. Neither impression wins the argument on its own, but each gives the discussion a specific place to go: the line, character or field that helped or hindered the reader.
The accompanying original HTML specimen contains the same support-tool paragraph, ambiguous reference characters, monetary figures and completed email field twice. One treatment uses an Arial/Helvetica/sans-serif stack, the other Georgia/Times New Roman/serif. They begin with the same CSS body size, line height and available width. No external font is fetched. The selected local face can vary by device, so this is an inspection aid, not a scientific comparison or a declared ranking.
Read both specimen paragraphs before deciding which treatment you prefer. Then find a character in the reference, read the figures and check the completed field. That changes the conversation from whether a font looks modern to where somebody hesitates or loses their place. A colleague can point to the troublesome character or line break, and another person can try the same task without having to share their taste in headings.
Keep the layout from answering the font question
Change one variable at a time at first. If one face appears in a narrow column with generous leading and another stretches across a wide screen, you are judging two layouts as well as two typefaces. Use matching content and starting geometry, then investigate which adjustment helps. A paragraph that feels tiring may need a shorter line rather than a different family.
Even equal CSS font-size values do not guarantee equal apparent size. Letter proportions and spacing differ. Let that be part of the inspection rather than hiding it behind a claim that the conditions are identical in every visual respect. The initial comparison controls settings so you can see the effect of the selected face. A later adjustment can seek comparable comfort, but record what changed when you make it.
There is a small trap in choosing the comparison width. The ch unit follows the advance measure of a font’s zero glyph, rather than representing one fixed width across all fonts. MDN documents that relationship alongside em and rem. [1] A 60ch column can therefore change width when the face changes. The standalone example uses the same root-relative maximum width for both treatments, while allowing each to shrink on smaller screens.
There is nothing wrong with choosing ch for a production reading column; relating the measure to the type can be useful. The difficulty comes when the comparison quietly changes the width as well as the face. If one paragraph reads more comfortably, measure its column before crediting the glyphs. A shorter line in the existing family might deliver the same improvement, which is worth finding out before replacing the typography across a site.
Read the specimens as tasks, not decoration
The reference Il1-001 asks whether capital I, lower-case l and the numeral 1 can be distinguished in the chosen treatment. O0-008 adds capital O and zero. These are deliberately awkward teaching strings. If real customers or staff handle such codes, the cost of ambiguity is not simply aesthetic: somebody may copy the wrong identifier, repeat it over the phone or open a different record.
The figures ask different questions. Can the minus sign be distinguished from a dash? Do decimal punctuation and currency symbols remain clear at the intended size? If figures form a column in your product, inspect the available numeral treatment rather than assuming the body paragraph decides it. A table may benefit from tabular digits even when the surrounding prose uses the same family with its ordinary spacing.
The completed field introduces another condition. The question remains above the entered address so a reader can check it later. A long label and address force wrapping and width decisions into view. If one treatment clips the value or collides with its label, inspect the component’s sizing before blaming the glyphs. Content that takes more room should not disappear to protect the symmetry of a mock-up.
After the small tasks, return to the paragraph and follow several lines in sequence. A pause at punctuation or a lost line is worth recording alongside the character observations. Ask another reader what they notice before announcing a favourite. Their answer can inform this page’s decision without becoming a claim about everybody’s reading ability. Keeping the task attached to the observation makes the next adjustment much easier to discuss.
The same characters in two font stacks
These original text specimens expose different reading jobs. The linked HTML resource renders identical task sets in two actual local font stacks at shared starting settings.
Sans-serif stack
Il1-001 · O0-008 £1,250.00 · −12.5% · 09:07
Arial, Helvetica, sans-serif. Inspect distinguishable reference characters and numeric punctuation. The actual local face depends on availability; this is not a ranking.
Serif stack
Il1-001 · O0-008 £1,250.00 · −12.5% · 09:07
Georgia, Times New Roman, serif. Read the identical characters and figures in the other treatment. Both rows request tabular numerals; the standalone resource includes the complete paragraph and filled field.
The chosen face will not always arrive first
A custom font also needs to be assessed before its file arrives and when loading fails. In both states, the fallback determines what visitors can read. Check the same paragraph, figures and field rather than approving only a fully loaded screenshot. Its different metrics may change wrapping enough to affect the component layout, even though all the content remains present.
MDN describes font-display in terms of block, swap and failure periods. Its values change when fallback text is shown and when a loaded face may replace it. [2] Those are behavioural choices with consequences for reading and visual change; they are not labels that automatically make a font strategy fast. Choose a strategy with the actual delivery path and supported browsers in view, then test it under slow or failed loading.
The supplied specimen deliberately avoids that network variable by using local stacks. If you later add a brand font, repeat the exercise with the real file and fallback chain. Do not claim a loading improvement from the local comparison, because nothing was downloaded. Likewise, do not let an attractive fully loaded screenshot stand in for observing the states visitors may see while the request is still pending.
A system stack may turn out to do the reading work well enough that downloading another face adds little. Equally, a distinctive heading can coexist with an undemonstrative body font. There is no need to make a reference code, a long paragraph and a logo compete for the same treatment. Record which face does which job, so the next service page can use the decision without reopening the original discussion about taste.
Local fonts and downloaded fonts need different checks
The specimen controls the content and starting geometry; adding a network font introduces delivery states.
Follow the labelled arrows. On a narrow screen, scroll sideways if needed.
Give the reader the last adjustment
WCAG’s Level AAA visual-presentation criterion discusses adjustable presentation, including line width, alignment and spacing. [3] Keep that level and its purpose clear: it is not a universal instruction to set every website to one appearance. The underlying design lesson is that readers may need a presentation different from the one you selected. A thoughtful default should leave them room to make that change.
Enlarge the specimen and narrow its window. Check whether the question remains visible, the address stays available and paragraphs wrap without a sideways journey. More extensive spacing and reflow checks deserve their own component test, but this basic exercise can reveal an early fixed-height assumption. A font decision should not be approved only under the exact conditions that made the initial design look comfortable.
Keep the final record brief and specific: chosen body stack, size, line height, measure, numeric treatment, fallback and the content tested. Note what remains untested, such as a language the site will later add or a specialist table outside this exercise. That record is more useful to the next editor than a verdict that one font simply feels premium.
The final inspection belongs on an actual article, preferably on a phone as well as a larger screen. Read through it rather than stopping at the opening. Can you follow the paragraph, distinguish a reference and return to a filled field without losing its question? The type may attract very little attention when it does those jobs well. That is a perfectly respectable reason to choose it, provided the decision records what was observed and what still needs checking.
Working on a workflow like this? Hamsa helps finance and operations teams connect their tools and handle the exceptions, starting with one workflow.
See the Payment Operations PilotReferences & further reading
Primary sources behind this article. Living documentation may change.
Practical engineering. A human perspective.
More about Hamsa Software and the person behind it. Editorial notes.A few more things
worth a read.
Back to the reading room 
What does £240 belong to?
A readable table preserves relationships between values, row labels, column headings and actions across different ways of reading.
When two calculations agree on the wrong answer
A shadow comparison exposes differences. Independent rule examples explain whether those differences are bugs, corrections or changed assumptions.