The person reading your website is often standing outside, holding a phone in one hand, in daylight, with a problem. Type that looks refined on a designer’s monitor in a dim office fails in that setting, and the first thing to fail is usually the phone number. Typography for a contractor is not a question of taste. It is a question of whether the number can be read and tapped at arm’s length in the sun.
The conditions you are actually designing for
Take the realistic case. A homeowner is in the driveway watching water come out from under the garage door. The screen is dim because the phone has been in a pocket, the sun is behind them, and one hand is holding the phone while the other is doing something more urgent. Your page gets a few seconds.
Then add the second condition, which contractors forget because they are usually younger than their customers. The person paying for a new furnace or a roof often owns the house outright and has done for years. Close focus gets harder for most people as they get older, and reading glasses are rarely to hand in a driveway. Light grey text at fourteen pixels is invisible to that customer and perfectly legible to the twenty-eight-year-old who set it.
Weight and contrast decide more than the typeface does
Most typography advice for marketers is about personality: serif for tradition, geometric sans for modern. For a contractor’s site that argument is close to irrelevant. Two settings decide whether the page works, and neither of them is which font you picked.
The first is weight. Light and thin weights were drawn for large display sizes on good screens. At body size, in sunlight, on a phone that has dimmed itself, they thin out to nothing. Regular or medium is the right choice for anything a customer has to read.
The second is contrast. Grey on white looks calm in a mock-up and disappears outdoors. Dark ink on plain white is the setting that survives the driveway, and it is the one that costs nothing to adopt.
Rules that survive real conditions
- Body text at sixteen pixels or larger. Below that, phones start offering to zoom and the customer starts pinching instead of reading.
- Regular or medium weight, never light. Keep thin weights for large headings, if you use them at all.
- Dark text on white. White text laid over a photograph is the most common way a hero section becomes unreadable outdoors.
- The phone number as live text, never inside an image. A number baked into a graphic cannot be tapped, copied, read aloud or resized.
- Generous line height. Around one and a half times the type size for paragraphs. Tight lines are much harder to track on a narrow screen.
- Capitals for short labels only. A whole sentence in capitals loses the word shapes people actually read by.
- Two typefaces at most, and one is usually enough if you separate the levels with weight and size.
Where type meets the thumb
Legible is not the same as usable. The number has to be a real telephone link with a tap target big enough for a thumb, sitting where a thumb can reach it, which on a large phone means the lower half of the screen rather than the top corner. Two links close together will be mis-tapped. None of this is decorative, and it is the same argument as the one for building for the phone first.
Legibility and accessibility overlap without being the same thing
Every choice above also helps someone with low vision, and the contrast ratios used in accessibility work make a good, testable floor for the sunlight problem. Accessibility goes further than legibility: keyboard operation, labels a screen reader can announce, form errors that are stated rather than only coloured red, and that ground is covered in our piece on accessible web design. Treat the contrast standard as a minimum you are trying to beat rather than a box to tick.
Frequently asked questions
What is the smallest font size I should use on my website?
Sixteen pixels for body text, and larger for anything a customer has to act on, such as the phone number or a price. Footers and legal text can be smaller; nothing a customer needs should be.
Should my phone number be an image so it looks the way I want?
No. It cannot be tapped to dial, search engines cannot read it and neither can a screen reader. If you want it to stand out, set it in a heavier weight or a larger size instead.
Are hosted fonts or system fonts better?
System fonts appear instantly because they are already on the device, which matters on a weak signal in a driveway. A hosted font is fine if it is one family and one or two weights. Problems start when a site loads six.
How do I test whether my type is readable?
Go outside at midday with your phone at half brightness and open your own homepage. That test finds more real problems in two minutes than any checklist.
Where to start
Do the driveway test today on the page most of your traffic lands on, and fix whatever you could not read before you change anything else about the design.
Real Time Marketing has worked with home service contractors since 2016: plumbing, HVAC, roofing, electrical and other trades, nationwide, from our office in Bradenton, Florida. Agreements are month-to-month. See our website design or book a strategy call.
