Typography and visual hierarchy for service business websites

On a service business website, visitors decide within seconds whether to keep going. Typography is the cheapest, most effective tool for steering that decision.

Hierarchy is prioritization

Visual hierarchy means making it obvious what matters most, then what matters second, and so on. When everything shouts, nothing gets read.

A simple scale works well:

• Main headline: the largest element on the page, with a benefit-led sentence.
• Subheading: one line explaining what the company does and for whom.
• Section headings: organize the content and make skimming easy.
• Body text: comfortable, with generous spacing.
• Captions and supporting text: smaller and more subdued.

Contrast in size and weight

The difference between levels has to be noticeable. A ratio of 1.25 to 1.5 between levels is usually enough. Pair it with weight changes, such as semibold for headings and regular for body text.

Line length and spacing

Long lines are tiring. Aim for roughly 60 to 75 characters per line in long-form text. A line height of 1.5 to 1.7 gives paragraphs room to breathe, while large headings call for tighter line heights, around 1.1 to 1.2.

Font pairing

Combine a geometric or display typeface for headings with a neutral, legible one for body text. Avoid two very similar fonts: the difference looks like a mistake rather than a choice.

Contrast and accessibility

Ensure a minimum contrast of 4.5:1 between body text and its background. In dark themes, avoid pure white on pure black for long passages, as it causes a shimmering effect. Slightly grayish tones are easier on the eyes.

Hierarchy in the call to action

The primary button should be the most prominent element after the headline. Use a high-contrast color and a clear verb, such as “Request a quote”, and keep secondary styles for alternative actions.

A simple test

Squint at the page. If you can still make out the headline, the benefit and the main button, the hierarchy is working.