Get a free consultation
Home About Services Work Insights Blog

WordPress Design & UX

Best Font Sizes and Typography Rules for WordPress Websites: A Practical, Accessible Guide

A practical guide to font sizes, responsive type techniques, accessibility checks, and safe implementation steps for WordPress websites.

Ahmed Raza Rafaqat By Ahmed Raza Rafaqat
Ask ChatGPT Ask Claude Ask Gemini Ask Perplexity

best font sizes and typography rules for wordpress websites are the foundation of readable, trustworthy sites — they affect how visitors scan, trust, and act. This guide gives clear size recommendations, responsive techniques, accessibility checks, performance tips, and a rollout checklist you can use right away. If you prefer a professional to apply these changes, there’s guidance on when to request help.

Table of contents

How Typography Affects UX, Accessibility, And Conversion

Readability Versus Brand Expression

Typography is both functional and expressive. Body text must prioritize readability: size, line length, line height, and contrast determine whether people finish reading. Display or brand type can be more expressive, but it should never sacrifice clarity. On business sites, choose personality for headlines while keeping paragraphs simple and legible.

Type Hierarchy And Information Scanning

A clear heading scale helps visitors scan pages quickly. Use consistent sizes and spacing so H1 is visually distinct from H2, H3, and paragraphs. Semantic headings (h2, h3, etc.) help assistive tech and search engines understand structure — visual styles should follow that semantic order.

Impact On Conversion And Trust

Readable typography increases trust and conversion. If users struggle to read pricing, CTAs, or service descriptions, they bounce. Good typography reduces friction: clearer headings, comfortable paragraph sizes, and well-sized CTAs guide actions and lower cognitive load.

Quick Visual Examples

  • Too small body text (12px) on desktop forces squinting and increases bounce.
  • Huge headline with tiny paragraph creates imbalance — readers skip details.
  • Low contrast links in long paragraphs are missed — visitors don’t find next steps.

These are baseline suggestions that work across themes and page builders. Adjust them for your brand, but follow these principles: prioritize body readability, keep a predictable heading scale, and ensure UI text stays legible on small screens.

Base Body Font Size Guidelines

  • Desktop: 16px to 18px (100% to 112% of browser default). 16px is widely accepted; 17–18px improves readability for long articles.
  • Tablet: Reduce slightly or use a fluid scale — aim for 15px to 17px depending on viewport width.
  • Mobile: 15px to 16px. Avoid dropping below 14px for body text unless it’s short fine-print; small screens need slightly larger text for legibility.

Heading Size Scale (H1 To H6) Examples

Use a modular scale to keep consistent ratios. Example 4-step scale (desktop):

  • H1: 34px–40px (hero headline)
  • H2: 24px–28px (section titles)
  • H3: 20px–22px (subsections)
  • H4: 18px (smaller section headings)
  • H5/H6: 16px or slightly larger than body when needed for labels

Keep the visual gap between levels meaningful, but not extreme. On mobile, scale down proportionally (use fluid techniques below).

Small UI Text, Captions, And Labels

  • Form labels and small UI: 13px–14px on desktop; avoid lower than 12px.
  • Captions and footnotes: 12px–13px but ensure sufficient contrast and line-height.
  • Buttons: 16px is a good target for primary CTAs to aid tap targets and scanning.

Line Height, Letter Spacing, And Measure

  • Line height (leading): 1.4–1.6 for body text. Longer lines (measure) benefit from 1.6; shorter lines can use 1.4.
  • Measure (characters per line): Aim for 45–75 characters per line for comfortable reading.
  • Letter spacing: Leave at normal or slightly increased for display type if the font appears tight. Avoid negative tracking for body text.

Setting Heading Sizes And Hierarchy In WordPress

Using Theme Or Page Builder Controls

Most modern themes and builders let you set global typography. Use global settings in the Customizer or your page builder to define base font size, heading scale, and font families. For Elementor users, set global fonts and typographic scales in Site Settings; for block editor sites, check theme typography options or define CSS variables.

Semantic Markup And Screen Reader Considerations

Keep headings semantic. Don't use visual styles to replace heading tags. Screen readers and search engines rely on the document outline. If you need visual variation, use CSS to style semantic tags rather than swapping tags.

CSS Examples For A 4-Step Scale

Implement a consistent scale with a few CSS rules applied in your theme or child theme. Keep edits in a child theme or custom CSS area and test on staging first. Use relative units (rem) for responsiveness.

Case: Homepage Headline Versus Subhead

Hero headline: larger, tighter tracking, prominent line height. Subhead: slightly smaller, comfortable line height, often 1.4–1.6. Ensure the CTA font size remains large enough to tap on mobile.

Responsive Typography Techniques For WordPress

Fluid Type With clamp() And calc()

Modern CSS lets you scale text smoothly between breakpoints with clamp(). Use clamp(min, fluid-value, max) to ensure text never becomes too small or too large. This reduces the need for many media queries and gives consistent results across viewports.

Media Query Breakpoints Vs Fluid Scales

Use fluid scales for body and headline sizes, then add media queries for fine control at specific breakpoints. Fluid is simpler and adapts to various screen sizes; media queries allow precise tweaks where layout constraints demand them.

Using CSS Variables For Consistency

Define root variables for base size and scale so you can change the site’s typographic rhythm in one place. Example variables: --base-size, --scale-step, --heading-multiplier.

Using Builder Breakpoint Controls (Elementor And Block Editor)

Page builders offer breakpoint controls for font sizes. Set a fluid base in global styles and then use builder breakpoints to ensure headings and CTAs stay readable on smaller devices. Pair builder settings with CSS variables for maintainability.

Choosing Fonts And Pairings For Business Websites

Webfonts Versus System Fonts: Tradeoffs

System fonts (Arial, Georgia, system-ui stacks) load instantly and improve performance. Webfonts offer brand personality but increase load. Choose a small set of families and limited weights to balance identity and speed.

Pairing For Contrast And Readability

Pair a neutral, highly readable body font with a distinctive headline font. Keep x-height and weight in mind: a headline with very low x-height can reduce legibility. Use contrast in weight rather than extreme size jumps when possible.

Variable Fonts, Weights, And Italics

Variable fonts bundle multiple weights and styles in one file and can reduce requests. They offer flexible weight axes, but test browser support and performance. Limit weight axes to what you need for headings, body, and emphasis.

Licensing, Privacy, And Performance Implications

Check font licenses before use. Hosting fonts locally avoids third-party requests and can improve privacy for EU users. Consider subsetting character sets and limiting included weights to reduce file size.

Accessibility And Contrast Best Practices

WCAG Text Size And Contrast Requirements

Follow WCAG contrast guidance: normal text needs a contrast ratio of at least 4.5:1; large text (generally 18pt/24px or 14pt bold) requires 3:1. Keep these thresholds in mind when choosing color pairs and font sizes.

Testing With Browser Tools And Screen Readers

Use built-in devtools color contrast simulators, accessibility panels, and test with at least one screen reader to verify heading order and ARIA attributes. For navigation label sizes and spacing, the site’s menu design matters — check menu legibility on mobile and desktop. For menu-specific guidance, see the article on navigation design for WordPress.

High-Contrast Modes And User Zoom

Ensure your site responds correctly to browser zoom and operating system high-contrast modes. Avoid absolute positioning that can overlap content when text scales up. Test zoom at 125% and 200% for critical pages such as contact and pricing.

Keyboard Navigation And Focus Styles

Maintain visible focus outlines for links, form elements, and interactive controls. Focus styles are essential for keyboard users and should remain prominent even with custom designs.

Performance And Font Loading Strategies

Preload, font-display, And Fallback Stacks

Use rel="preload" for critical fonts, and font-display: swap to prevent invisible text. Provide a sensible fallback stack so text is readable during font loading. Don’t preload many heavy font files — prioritize primary headings and body faces.

Subsetting And Choosing Weight Ranges

Subset fonts to required character sets and limit weights (e.g., 400, 600, 700). Each additional weight increases load. For multi-lingual sites, ensure subsets cover necessary scripts.

Host Fonts Locally Versus Third-Party

Hosting fonts locally reduces third-party requests and can improve legal/privacy compliance. CDNs and Google-hosted fonts are simple but involve external DNS/requests. Consider caching and HTTP/2 when choosing hosting strategy.

Testing Impact With Real-World Tools

Measure font impact with Real User Monitoring, Lighthouse, and synthetic tests. Focus on Largest Contentful Paint (LCP) and first render to ensure fonts don’t delay perceived load.

Practical Typography Checklist And Examples

Prelaunch Typography Checklist

  1. Set a clear base font-size (16px recommended) and define rem-based scale.
  2. Confirm heading hierarchy matches semantic structure and visual scale.
  3. Verify contrast for body, headings, links, and buttons against WCAG thresholds.
  4. Test on desktop, tablet, and mobile; check zoom at 125% and 200%.
  5. Limit webfont weights and consider local hosting or font-display swap.
  6. Use CSS variables and keep typographic styles in one place for easier edits.
  7. Back up and test in a staging site before changing live CSS.

Common Typography Problems And Quick Fixes

  • Issue: Tiny body text on mobile. Fix: Increase base font-size for small screens or apply fluid clamp().
  • Issue: Headline looks huge on mobile. Fix: Use clamp() to cap max size and scale down on narrow viewports.
  • Issue: Slow page load after adding fonts. Fix: Reduce weights, subset, or host fonts locally and use font-display: swap.
  • Issue: Poor contrast in hero text over image. Fix: add a subtle overlay, increase font weight, or move text off busy background.

Before And After Examples (Blog, Landing Page, Homepage)

Before: 14px body, 1.2 line-height, H1 at 48px with inconsistent H2/H3. After: 16px body, 1.5 line-height, modular heading scale (H1 36px, H2 26px, H3 20px), improved contrast, and font-display swap — reading time and clarity improved.

For blog layout specifics and readable content flow, see the post about blog layout improvements.

How To Roll Back Changes Safely

Always test in staging. Backup your theme or export custom CSS before changes. If live changes cause issues, revert CSS or restore from backup. Keep a short changelog of typographic adjustments so you can undo specific edits quickly.

When To Hire A WordPress Designer

Problems That Suggest You Need Expert Help

  • Site-wide typographic inconsistencies and broken layouts across devices.
  • Critical accessibility failures affecting form fields, navigation, or headings.
  • Performance drops after font additions that you can’t isolate.
  • Complex multilingual or typographic systems that demand subsetting and careful hosting.

What To Expect From Professional Typography Work

A designer will audit current styles, propose a modular scale, implement responsive CSS (safe, tested), optimize font files, and run accessibility and performance checks. They should work on staging and provide rollback steps.

How To Brief A Designer Or Developer

Provide examples of sites you like, desired font personalities, key pages (home, service, blog post), and any accessibility or branding constraints. The brief checklist in the website requirements guide helps you prepare assets and priorities.

If you want help implementing typographic improvements, request a WordPress website quote — we handle typography, accessibility fixes, and responsive implementation on staging first.

Resources And Tools

  • Contrast checkers and accessibility validators built into browser DevTools.
  • Font loading and performance testing with Lighthouse and Real User Monitoring.
  • Use browser compatibility references when using clamp(), CSS variables, and variable fonts; test in target browsers.
  • Official WordPress and builder docs explain global typography controls for the block editor and page builders.

FAQ

What font size should my WordPress body text be for desktop and mobile?

A good baseline is 16px on desktop and 15px–16px on mobile. Increase to 17–18px for long-form content. Use rem units and test across devices to ensure consistent readability.

How do I set responsive font sizes in WordPress without breaking my layout?

Use rem units, CSS variables, and fluid techniques like clamp() for smooth scaling. Apply site-wide styles in the Customizer or the builder's global settings, and test on staging. Add media queries only where the fluid scale needs fine control.

Are system fonts better than Google Fonts for performance?

System fonts load instantly and can improve performance. Google Fonts give more personality but add requests. Choose based on brand needs and optimize webfonts with subsetting and limited weights if you use them.

How much line height should I use for readable paragraphs?

Line height between 1.4 and 1.6 is ideal. Use 1.6 for longer lines; 1.4 for tighter layouts. Adjust based on the font’s x-height and measure.

What is a safe heading scale for WordPress themes?

Use a modular scale with predictable ratios. Example desktop sizes: H1 34–40px, H2 24–28px, H3 20–22px, H4 18px, with proportional mobile scaling.

How do I test font contrast and accessibility on my site?

Use browser DevTools accessibility panels, contrast checkers, and a screen reader for verification. Test keyboard navigation and zoom levels. Run automated accessibility validators as a first pass and manual tests for deeper issues.

When should I use variable fonts and how do they affect performance?

Use variable fonts to reduce multiple weight files into a single file, but test file size and browser support. Variable fonts can be efficient if they replace several static font files, and they provide flexible weight control.

Can I change typography safely on a live WordPress site?

Make changes on staging, back up your theme, and use global settings where possible. If you must edit live, keep changes minimal and have a rollback plan.

What CSS properties control letter spacing and measure for readability?

letter-spacing adjusts tracking; line-height controls vertical rhythm; max-width or measure controls characters per line. Use rems for spacing and max-width in ch or em to control measure precisely.

How do page builders like Elementor handle responsive typography?

Elementor and other builders provide breakpoint controls and global typography settings. Set a fluid base and fine-tune sizes per breakpoint in the builder; pair builder settings with CSS variables for consistent behavior.

Request a Quote

If you'd like professional help making typography consistent, accessible, and fast across devices, request a WordPress website quote. We work on staging, provide accessibility checks, and optimize fonts for performance.