Adjusting Heading Typography

Site Edit gives you detailed control over how headings look across your website. This article uses Heading 1 as an example to show how to adjust spacing, weight, responsive font sizes, and responsive line heights.

Before you begin: Changes under Design → Typography are site-wide. Review several pages and device previews before publishing.

Open Site Edit

From My Sites, find the site you want to update and select SITE EDIT.

The SITE EDIT button on a site card

Open the Heading 1 controls

In the Site Edit toolbar, select Design, then select Typography. Scroll to Heading 1.

Heading 1 typography sliders in Site Edit
  1. Typography: Opens the site-wide font and text-style controls.
  2. Letter spacing: Adjusts the horizontal space between characters.
  3. Weight: Makes Heading 1 text lighter or heavier.
  4. Font size: Sets separate Heading 1 sizes for mobile, tablet, and desktop.
  5. Line height: Sets separate spacing between lines for mobile, tablet, and desktop.

Adjust Heading 1

Move a slider and watch the live site preview update:

  1. Use Letter spacing to move Heading 1 characters closer together or farther apart.
  2. Use Weight to change the thickness of Heading 1 text.
  3. Set Font size (Mobile), Font size (Tablet), and Font size (Desktop) independently.
  4. Set Line height (Mobile), Line height (Tablet), and Line height (Desktop) independently.

The value displayed beside each control shows the current setting. Font size and line height use responsive values so a heading can remain readable without taking up too much space on smaller screens.

What else you can adjust the same way

Scroll the Typography panel to find the rest of the text styles.

Heading 2 through Heading 6 use the same sliders as Heading 1: letter spacing, weight, and separate mobile, tablet, and desktop font sizes and line heights. Each heading level is independent, so you can set a different size and spacing for each one rather than scaling them all together.

Body Text has the same responsive Font size and Line height sliders, without letter spacing or weight.

Base Size has only the three Font size sliders. It sets the underlying text size your site builds on, so changing it shifts sizes that are measured against it. Adjust it before fine-tuning individual heading levels.

The panel also has controls that work differently from the per-style sliders:

  • Styles: A Font size scale with XS, S, M, L, and XL presets that resize site text in one step.
  • Font sets: Ready-made combinations that pair fonts for headings, navigation, body text, and buttons. Each option previews its own fonts.
  • Weight: Heading weight and Body weight, which apply across the site rather than to a single heading level.

Everything on the Typography tab is site-wide. Per-page font options live under Design → Pages.

Review each device size

Use the desktop, tablet, and mobile preview buttons at the bottom of Site Edit to review the heading at each size.

Check headings that wrap onto more than one line. A font size that works on desktop may be too large on mobile, while a line height that is too small can make wrapped headings difficult to read.

Also review more than one page. Because these controls are site-wide, the Heading 1 style can appear in different layouts and over different backgrounds.

Publish your changes

Typography changes are saved to the Site Edit draft. Select PUBLISH to apply them to the live site, or DISCARD to remove unpublished changes.

For more about applying or removing pending changes, see Publishing and Discarding Drafts.

Need more help?

For questions, concerns, or feedback, chat with our team at app.placester.com/chat.

How did we do?

Editing an Existing Blog Post

Working with Widgets
#

Let experts do it for you

Visit our creative services marketplace to get on-demand help, on-time and on-budget.

Browse all Services
#

Are you looking for something different?

Didn't find an answer to your questions? Our support team is ready to help you.

Contact Support