Typography and colour in interfaces: readability, contrast, accessibility

Interface typography isn’t about picking a “nice font” — it’s a system: which sizes exist, what each one is for and how they relate. When sizes are chosen block by block, a site ends up with a dozen near-identical headings and the hierarchy falls apart. The fix is a scale: a small set of sizes, each with its own role.

Lines that are too long are hard to read: the eye loses the start of the next line. Lines that are too short chop sentences into fragments. Based on its research, Baymard Institute recommends 50–75 characters per line for body text. WCAG success criterion 1.4.8 (level AAA) sets a maximum width of 80 characters, line spacing of at least one and a half within paragraphs, and no justified text.

• Cap the width of text blocks: in CSS, the ch unit, tied to the width of the font’s characters, is handy for this
• Give body text a line height of about 1.5 and large headings something tighter, around 1.1–1.25 — otherwise multi-line headings fall apart
• Left-align text: justified alignment creates uneven gaps between words
• Leave a clear gap between paragraphs — it works like a pause in speech

Most interfaces need only one typeface in several weights, or a pair: an expressive one for headings and a calm, highly legible one for text. Nielsen Norman Group advises narrowing the choice by understanding typeface classifications, favouring families with multiple variations and distinct characters, and pairing them with consistency and readability in mind.

For websites in Kazakhstan there’s an extra check that often gets skipped: Cyrillic. Many popular typefaces were designed around Latin, with Cyrillic letters added later and noticeably weaker. Kazakh-specific letters may be missing altogether — the browser then pulls them from a fallback font, and words look stitched together from different typefaces.

An interface palette isn’t a set of favourite shades — it’s a division of responsibilities. Every colour should answer “why is it here?”. If the brand colour is at once the header background, the button, the link and the “new” badge, it stops meaning anything.

WCAG — the W3C’s Web Content Accessibility Guidelines — sets measurable contrast requirements. As web.dev explains, the 4.5:1 ratio was chosen because it compensates for the loss of contrast sensitivity typical of people with reduced vision. It’s a minimum: the pale grey text on white so popular in “airy” mockups often fails it.

Dark mode isn’t a must-have badge of a “premium” product — it’s a setting for those who find it more comfortable. Reviewing the research, Nielsen Norman Group notes that people with normal vision generally perform better with light mode, while some people with cataracts and related conditions do better with dark mode. So it makes sense to offer a dark theme as an option rather than impose it. A site can detect the theme someone has chosen in their operating system through the prefers-color-scheme media query.

• Don’t invert the palette automatically: design the dark theme separately, on the same colour roles
• Avoid pure black backgrounds with pure white text — in our experience, a deep grey and a slightly softened white read more calmly
• Recalibrate accents: a saturated colour that worked on white can “glow” and strain the eyes on a dark background
• Show depth through surface lightness: shadows barely register on dark backgrounds, so raised cards are made slightly lighter than the background
• Check contrast in each theme separately — passing in light mode guarantees nothing for dark mode