Typography and colour are the two most powerful visual signals your website sends. They shape the impression of professionalism or amateurism, of seriousness or playfulness, of trustworthiness or indifference — all before a visitor has read a single sentence of your content. WordPress gives you comprehensive tools to control both, whether you use the modern Global Styles in a block theme or the Customiser in a classic theme. This guide walks through every method, covers Google Fonts integration, offers a practical colour-palette framework, and includes the accessibility fundamentals that UK sites have to consider under the Equality Act 2010.
Why fonts and colours matter · Global Styles in block themes · Customiser typography in classic themes · Working with Google Fonts · Building a colour palette · Per-block typography controls · Per-block colour controls · Accessibility and readability · Performance and GDPR considerations · Typography best practices · Frequently asked questions
Visitors form an impression of your site in under 50 milliseconds — faster than they can consciously process anything. Typography and colour are the dominant inputs at that pre-cognitive stage. A clean serif on a cream background signals "established firm"; a light sans-serif on white with a bright accent colour signals "modern startup"; inconsistent font choices signal "amateur".
Consistency matters as much as aesthetic. A site where every page uses the same two fonts, the same colour palette, and the same heading scale looks deliberate and professional. A site where heading sizes and colours drift page to page looks like no one is in charge.
Getting typography and colour locked in before you publish is far easier than retrofitting a design language after a year of inconsistent pages.
Block themes like Twenty Twenty-Five expose typography and colour control through Global Styles — the most powerful site-wide design interface in WordPress.
Appearance > Editor. Click the Styles icon (paintbrush) in the top-right toolbar. The Global Styles panel opens.
Everything you change here applies to the entire site at once.
Styles > Typography. Configure separately for Headings, Body text, Links, Buttons, Captions:
Styles > Colours. Set colours for:
Most block themes ship with pre-built style variations — combinations of fonts and colours you can apply as a starting point and customise from there. Styles > Browse styles (appearance varies). Preview and pick.
Global Styles are stored in a theme.json-style configuration. Advanced users can export and import these between sites, replicating a brand design across multiple WordPress installations. Agencies do this to set up consistent baseline styling for new client sites.
Classic themes use the Theme Customiser at Appearance > Customize.
Most classic themes have a Colours panel with controls for background, accent, header, footer colours. Premium themes (Astra, Divi, Kadence) offer considerably more depth than free themes.
Varies by theme. Some premium classic themes include a Typography panel for font family, size, weight selection. Otherwise:
body { font-family: 'Open Sans', sans-serif; font-size: 17px; line-height: 1.6; }
h1, h2, h3 { font-family: 'Merriweather', serif; }
Block themes do not use the Customiser at all. For new sites, pick a block theme — Global Styles give more control than most classic themes offer even with plugins.
Google Fonts is the most widely used free font library, with 1,700+ font families. Most WordPress themes include a curated selection; adding more is straightforward.
Site Editor > Styles > Typography. Click the font family dropdown, select Manage Fonts. You can:
Install the free Fonts Plugin. Activate. Appearance > Customize > Google Fonts. Pick separate fonts for headings and body text. Plugin loads fonts efficiently and gives control over weight variants.
Important note: loading Google Fonts directly from Google's CDN sends visitor IP addresses to Google. A 2022 German court ruling found this violates GDPR unless visitors have consented. Safer approach:
Every additional font family and weight adds bytes. Stick to two or three font families total, and load only the weights you actually use (Regular 400 and Bold 700 for most sites). A font family with every weight variant can be 300–500 KB of extra download.
A well-defined palette keeps the site on-brand and consistent.
Apply the palette to a few representative pages (home, service, contact) before rolling it across the site. Check on mobile, check with light and dark device themes, check at different zoom levels.
Global Styles set the defaults. Individual blocks can override for cases where a specific piece of content needs different treatment.
Select a block in the editor. Settings sidebar > Block tab > Typography. You can change font size, appearance (weight/italic), line height, letter spacing, text decoration, text transform.
Use sparingly. Per-block overrides are appropriate for:
Overused, they create inconsistency. If you find yourself applying the same override repeatedly, that is a sign to update Global Styles instead.
Block settings also expose per-block colour controls: text, background, link. Pull from theme palette or custom hex.
Use cases:
Same principle as typography overrides — sparingly.
UK sites have both moral and (for public-sector sites) legal obligations on accessibility. Typography is a major accessibility surface.
WCAG 2.2 sets minimum contrast ratios:
Test with WebAIM Contrast Checker or the browser DevTools accessibility audit. Public-sector UK sites must hit AA; commercial sites should aim for AA under the Equality Act 2010.
Body text 16–18 px minimum. Smaller can be hard to read on mobile. Headings scale up proportionally.
Optimal line length is 50–75 characters. Too wide and the eye struggles to track line to line; too narrow and reading feels choppy. Body containers at ~700 px width hit this naturally.
1.5–1.8 for body, 1.1–1.3 for large headings. Cramped line height fatigues readers quickly.
Softens the contrast slightly by using #333 on #FFF rather than pure #000 on #FFF. Many users find this easier to read for long sessions.
Typography decisions affect page speed and privacy compliance.
<link rel="preload"> tag for the font used in the site's first visible heading reduces Largest Contentful Paint. Plugins like LiteSpeed Cache automate this.font-display: swap. Browser shows a system font while the web font loads, then swaps. Prevents invisible text during font load.How do I change the font for my entire site?
Block theme: Appearance > Editor > Styles > Typography, set the font family for Body, Headings, Buttons. Classic theme: Customiser typography panel (if theme provides one) or the Fonts Plugin.
What fonts work well for a UK business website?
Dependable pairings: Inter (body) + Merriweather (headings) for a mixed serif/sans look; Inter alone at different weights for a modern sans-only site; Source Serif + Source Sans for classic professionalism; Plus Jakarta Sans for a warmer sans feel. Most modern UK business sites use clean sans-serifs exclusively.
Are Google Fonts GDPR-compliant?
Only if self-hosted. Loading directly from Google's CDN sends visitor IPs to Google, which a German court ruled in 2022 violates GDPR without consent. WordPress 6.1+ hosts Google Fonts locally when added through Global Styles. For classic themes, use OMGF or Local Google Fonts plugins.
How many colours should I use?
Two or three brand colours plus one or two neutrals. More than that and the site looks busy.
What is the best font size for body text?
16–18 px. Smaller can strain readers on mobile; larger feels oversized on desktop. 17 px is a sensible default.
Can I use Adobe Fonts instead of Google Fonts?
Yes, with a paid Adobe subscription. The Custom Typekit Fonts plugin integrates them. Adobe Fonts is hosted on Adobe's CDN (US-based) — same GDPR considerations as direct Google Fonts; self-host where practical.
My theme does not let me change fonts — what do I do?
Add custom CSS via Customiser > Additional CSS, or install the Fonts Plugin. For new sites, prefer a block theme where font control is built in.
How do I ensure my colour palette meets accessibility standards?
Test every text/background combination in WebAIM Contrast Checker before committing. Minimum 4.5:1 for normal text (WCAG AA). If your brand colours fail, adjust the shades — darker text on light background, or lighter text on dark background.
Can I change font size for just one heading?
Yes. Select the block, Typography settings in the sidebar, adjust Font Size. Applies only to that block.
Do I need different fonts for mobile?
Not usually, but font size can differ. Use responsive units (rem, em, or fluid typography with clamp()) so sizes adapt. Block themes' Global Styles include fluid scales out of the box.
Launch your WordPress site on smartxhosting.uk
UK hosting with the Plesk WordPress Toolkit, LiteSpeed Cache, Redis object caching, free Let’s Encrypt SSL, free CDN and daily backups — from £2/month.
View WordPress hosting plans →