Make a WordPress heading readable on a phone

Identify which heading becomes hard to read

Open the public page on a phone and identify the exact heading. It may be the page title, a heading within the content or the site name in the header. Note whether words are cut off, lines overlap, text extends beyond the screen or the heading takes up too much space. The remedy depends on the symptom. A heading clipped on the right first calls for inspecting its container. Lines touching each other suggest checking line height.

Take two screenshots of the same URL, one on a phone and one on a computer. Keep the start of the next section in the frame. Even a fully displayed heading can push the information a visitor wants far down the page. Conversely, two or three well-spaced lines may be a normal presentation for a long heading. Compare it with a page on the site whose hierarchy is already clear.

Next, open the document through Pages or Posts > Edit. The document title field supplies the text a template may display using the Post Title block. A Heading block inserted in the body is edited directly there. To distinguish them, use List View and select the heading matching your screenshot. If the title is in the shared header, check its location in the Site Editor or theme settings.

Before experimenting, record the heading level, font size, line height and container name. Keep a screenshot of the initial settings if several values are inherited. You can then restore the same scope without losing a text correction made in the meantime.

Give the text enough room

Select the group or column containing the heading. Under Settings > Block, examine Layout and Dimensions, depending on the controls available. Large horizontal padding can leave little width for the text. A heading in a row alongside a button or image may occupy only part of the window. Observe these constraints before reducing the font size.

On a copy, reduce excessive horizontal padding or try a stacked layout if the heading and button compete for width. Compare both elements’ positions on a computer. If the design requires a row on large screens, use the block’s wrapping or stacking option when your interface provides one. With a page builder, check its device-specific alignment and width controls in the affected component’s section.

Also check manually inserted line breaks. A break added to balance two lines on a computer can produce three or four uneven lines on a phone. Remove the break in the draft and let the sentence wrap to the available width. Nonbreaking spaces needed for punctuation can be retained. If several words were joined to force a layout, restore ordinary spaces wherever a natural line break is possible.

A long term or product reference may overflow even when the width is appropriate. Consider whether the term can go in a subtitle or whether shorter wording preserves its meaning. When the public title and document title use the same field, check the effect of rewriting it in lists and links that automatically reuse this text. Keep the wording clear outside the page itself.

Try the theme’s preset sizes first

Select the Heading block, then open Settings > Block > Styles > Typography, or look directly for Typography in the panel, depending on the version. The section menu displays any additional available controls. Record the current size. If it was entered manually, try removing that value to see the size supplied by the theme. Compare the same heading at the same width.

Sizes offered under names or letters such as M, L or XL represent the site’s choices. A theme may scale some sizes with the window width. The size name alone does not guarantee this behavior. Try a preset, then compare the same heading at two widths. If the size adapts and fits the hierarchy, this avoids adding a page-specific rule.

If presets still make the text too large, try a custom size that suits the layout. Check its unit and its effect when enlarging text in the browser. A size producing one perfect line on a particular phone may be unsuitable in a smaller window or with a fallback font. Aim for stable readability, even if the number of lines varies.

Keep the heading’s semantic level. An H2 can remain an H2 when its visual size is reduced. Check the document view’s Outline tab if you are unsure about the heading sequence. If you are fixing a document’s main title, also check that a similar title is not displayed again in the body. The right size depends on each heading’s function, not on having several versions of the same text.

Adjust line height, letter spacing and contrast

A two-line heading can remain hard to read even at a reasonable size. In Typography, look for Line Height among the available controls. Increase the value slightly if accents and letters touch. Compare a short heading with one spanning several lines. The aim is to separate the lines without making each one look like an independent heading.

Next, examine letter spacing. Widely spaced capitals may cause extra wrapping on a phone. Overly tight spacing can also make words difficult to distinguish. If the editor lets you restore the theme value, try that before choosing a custom value. Keep an example containing accented letters, a number and punctuation to judge actual readability.

On a cover, check the exact image area behind the text at each width. When the image is cropped differently, the heading may move from a dark background to a light one. Adjust the Cover block’s background or overlay if contrast is the issue. Increasing the size alone does not fix text that blends into its image. Also try a version without an image when the banner’s purpose allows it.

If only the public page displays differently shaped letters, compare the font actually loaded there with the editor’s font. A fallback font may be wider and create more lines. Identify that difference before saving a compensatory font size. Include the heading, window width and observed font in your notes so the site maintainer can reproduce the problem.

Choose a local correction or a template rule

If the issue affects just one heading in a page’s body, fix the block in that document. If every post title is too large, examine the post template. With a block theme and the necessary permissions, open Appearance > Editor > Templates, then the template actually in use. Select the Post Title block in List View. Change its typography or shared container and check posts with titles of different lengths.

You can also examine Appearance > Editor > Styles > Blocks. Check the exact block type before changing a shared value. A global Heading block setting can affect section headings and repeated components throughout the site. Check a post, a page and a shared area in the preview. If only one template has the problem, changing that template limits the effect to documents using it.

With a classic theme, Appearance > Customize may offer typography settings. The options vary by theme. With a builder, look for the heading’s typography and the device-specific controls actually available. Start by recording the values for each display mode. A mobile change may inherit a desktop value or override only one parameter. Check that inheritance before changing other sizes.

If you have only content-editing permissions and the title belongs to the template, give the administrator the URL, screenshot and template name. Specify whether the title overflows or its lines overlap. These observations point to different controls and help the administrator prepare a targeted experiment.

Add a local rule if the block controls are insufficient

On a site maintained by someone comfortable with CSS, a class reserved for one particular heading can be appropriate when the block offers no size suitable across all widths. In the affected block, open Advanced > Additional CSS Class(es), if that field exists, and enter titre-adaptatif without a dot. Check that no other site element already uses this class. Remove an explicit local font size if it prevents the experiment, after recording it.

The site maintainer can place the rule in the Additional CSS area provided by the Site Editor’s Styles, in Customize if the classic theme exposes that panel, or in the site’s maintained stylesheet. Try it on a copy first. The example sets a size relative to the site’s reference text size and allows the heading to wrap onto several lines. Adjust that size to the text and its position on the page.

Check that the class applies to the intended heading and that the browser shows the rule as active. If the heading does not change, inspect the selector and higher-priority styles instead of forcing the rule with a broad priority override. To restore the original state, remove the rule and class, then restore any local font size you removed. If several templates need the same scale, discuss the theme’s fluid font sizes with the maintainer so they can be used through the editor.

.titre-adaptatif {
  font-size: 1.75rem;
  line-height: 1.2;
}

Check a series of headings on different screens

Open the preview, then test a narrow window, an intermediate width and a wide display. Slowly vary the width around the point where the heading wraps. Check that no word disappears, no horizontal scrollbar is needed and the heading remains prominent enough relative to the following text. At zoom levels up to 200%, check that text enlarges, the heading stays complete and neighboring controls remain usable. If you choose a fluid theme preset, repeat the same check with that preset.

If the site offers several languages, check the version using the longest words. A single-line heading in one language may take three lines in another. If the fix affects a template, also compare a page without a cover image and one with an image. Observe the main action’s position when the heading wraps. The button must remain accessible in the page’s normal flow.

After saving the validated change, open the public page as a visitor. A page cache may still show an older version. First compare the URL and saved document. If a targeted purge is needed, use the controls provided by the site’s configuration and reload the same page. Keep the settings unchanged during this comparison so you can attribute the result to the correct change.

To undo the change, restore the modified block’s font size, line height or layout. For a shared template, restore the setting in the template, then check another page using it. Keep a screenshot of the result and the name of the changed control. You can test the next very long heading at the same widths and against the same criteria.

Test a long heading beside a button

A booking page displays the heading “Book a visit to the restoration workshop” and a button in the same row. On a phone, the heading is cut off after the word restoration. Select the row in List View. In its panel, check whether wrapping is allowed. If it is, compare the actual widths of its two children and the row’s padding. In a draft, try stacking the heading and button to establish whether available space is the cause.

If the text appears in full as soon as it has the entire width, keep an arrangement that prioritizes the heading in narrow windows. If the theme or builder provides the setting, retain a row on desktop and stacking on phones. Otherwise, test a stack at both widths or a row that permits wrapping. Check that keyboard navigation still reaches the button after the heading in a sensible order.

If the text remains clipped even in a stack, look for a fixed height or hidden overflow on the container. Record the exact rule if it comes from the theme. Once the cause is fixed, retain the complete text and a visible action. You can restore the original layout by reinstating the group variation and values recorded before the experiment.

CSS alternative: a fluid heading size

If the first example’s fixed size suits a phone but looks too small on a large screen, replace that rule with a fluid size. Keep the same class and CSS location; do not stack two competing fixes.

clamp chooses a value within the bounds according to the available width. The rem component avoids relying entirely on viewport width. Emergency wrapping applies to excessively long terms; it does not fix a container with a fixed height or hidden overflow.

Compare a short heading and a long one at 320, 768 and 1280 CSS pixels, then at 200% zoom. These values define a checking scenario, not an already measured result. Check the full text, accents and access to the next button. If enlargement is insufficient in your layout, retain a fixed relative size or revise the formula. To undo the change, restore the first rule. A fluid theme preset remains preferable when it meets the same need through the editor.

.titre-adaptatif {
  font-size: clamp(1.5rem, 1.25rem + 1.5vw, 3rem);
  line-height: 1.2;
  overflow-wrap: anywhere;
}