Skip to main content

How to Customize Your Website Typography

You can customize your website’s typography to control how text appears across your site, improve readability, and match your brand’s visual style using WordPress typography settings.

Updated over 2 weeks ago

Where to Customize Typography

To access typography settings:

  1. Log in to your WordPress Dashboard

  2. Go to Appearance → Customize

  3. The customization panel will open with a preview of your website

  4. Navigate to Global → Typography

All typography changes you make here affect your website globally unless overridden.


Typography Presets

At the top of the Typography settings, you’ll find Presets.

What Typography Presets Do

Typography presets are predefined font combinations that apply a complete typography style to your website with one click.

When you select a preset, it automatically:

  • Sets font families for body text and headings

  • Applies balanced font sizes and weights

  • Creates a consistent visual hierarchy

Presets are useful if you:

  • Want a quick and professional typography setup

  • Prefer not to configure fonts manually

  • Need a good starting point before customizing further

You can always modify individual typography settings after choosing a preset.


Base Font Settings

The Base Font section defines the default fonts used throughout your website. It includes two main options:


Body Font

The Body Font controls regular text across your website, including:

  • Paragraphs

  • Descriptions

  • Blog content

  • General page text

Body Font Options Explained

  • Font Family
    Selects the font used for body text.

    • Inherit
      Uses the font defined by your theme or higher-level settings. Choosing this option means the theme’s default font will be used.

  • Font Size
    Controls how large body text appears.

  • Font Weight
    Controls how thick or bold the text is.

  • Line Height
    Controls the vertical space between lines of text. Increasing line height improves readability, especially for long paragraphs.

  • Letter Spacing
    Adjusts the space between letters. Small increases can improve clarity, while larger values create a more stylized look.

  • Text Transformation
    Changes how text appears, such as:

    • Uppercase

    • Lowercase

    • Capitalized
      This affects appearance only and does not change the actual text content.


Headings Font

The Headings Font controls all headings by default, including:

  • Page titles

  • Section headings

  • Headlines

Headings Font Options Explained

  • Font Family
    Sets the font used for all headings.

    • Inherit
      Uses the default heading font provided by your theme.

  • Font Weight
    Controls how bold headings appear.

  • Font Size (Base)
    Defines the general size used for headings before individual heading levels are adjusted.

  • Line Height
    Adjusts spacing between lines in multi-line headings.

  • Letter Spacing
    Controls spacing between letters in headings, often used for stylistic emphasis.

  • Text Transformation
    Allows you to display headings in uppercase, lowercase, or capitalized text.


Individual Heading Levels (H1 – H6)

Below the base typography settings, you’ll find controls for each heading level:

  • H1 – Main page titles

  • H2 – Section headings

  • H3 – H6 – Subheadings and smaller titles

Each heading level can be customized independently.


What “Inherit” Means for Headings

When a heading level is set to Inherit:

  • It follows the Headings Font settings

  • No separate customization is applied

This helps maintain consistent typography across your website.


Customizing Individual Headings

When you customize a specific heading level (for example H1), you can adjust:

  • Font family

  • Font size

  • Font weight

  • Line height

  • Letter spacing

  • Text transformation (uppercase, lowercase)

This allows you to create a clear visual hierarchy between titles and subheadings.


Paragraph Spacing

Typography settings may also include paragraph spacing options, such as:

  • Space below paragraphs

  • Vertical spacing between text blocks

These settings help improve readability and layout balance.


Preview Your Typography Changes

All typography changes are shown instantly in the preview.

It’s recommended to:

  • Scroll through different pages

  • Review headings and body text together

  • Ensure spacing and readability feel balanced


When to Use Inherit vs Custom Fonts

Use Inherit when:

  • You want to follow your theme’s default design

  • You prefer minimal customization

  • You want consistent typography with less setup

Customize fonts when:

  • You want brand-specific typography

  • You need stronger visual hierarchy

  • You want headings to stand out from body text


Save Your Changes

When you’re satisfied with your typography:

  1. Click Publish to apply the changes to your website


Important Notes

  • Available typography options depend on your active theme

  • Some themes limit font customization

  • Advanced typography control may require a different theme

Did this answer your question?