A clipped WordPress Site Title is not always a font-size problem. Fit Text depends on the space the title receives, while the header can restrict that space through a grid track, fixed height, overflow rule or neighboring menu. Check the title's box and its parents before shrinking the business name globally.
Confirm that this is the Site Title block
The Gutenberg Site Title change adds Fit Text to the block's typography options. Its availability depends on the installed editor build. This guide concerns that block, not an Elementor heading, an image logo or a theme's hard-coded title.
Select the title in List View and record the block type. Look at its Typography options and whether Fit Text is enabled. Save a staging copy with the option off so you can compare both states without replacing your production header. A missing option on an older installation is not evidence that the page is broken.
Use the actual business name as your fixture
Short demonstration titles hide layout failures. Test the full trading name, a long translated name if the site is multilingual, and the longest single word you expect. Keep the same navigation items and account/cart controls used publicly.
Measure three things separately: the title's available width, the height occupied by its text, and the header row's height. If text fits horizontally but loses the bottom of a letter, reducing width is unlikely to be the right intervention. Look for fixed heights, line-height and overflow clipping.
Width: Title and menu each have space. Height: Letters and focus are not clipped. Font: Fallback and final font both fit. Zoom: Header remains readable at 200%. Proposed verification, not a customer test result.
Follow this order in developer tools
- Open the logged-out page at a narrow viewport. Inspect the Site Title element and the nearest layout parent.
- Temporarily disable a suspicious overflow rule in developer tools. If the missing letters reappear outside the container, you have evidence of clipping, not proof that removing overflow is the final fix.
- Check fixed height and max-height declarations on the title and header. Compare them with the actual text box at the current font and zoom level.
- Inspect the neighboring navigation width. A menu that refuses to shrink can leave the title an unusably small track even when the total header looks wide.
- Compare Fit Text on and off using your saved staging variants. Keep every other style constant during that comparison.
- Repeat after the intended webfont has loaded. A fallback font and final font can occupy different space.
Make one change per test. A simultaneous font swap, header-height change and cache purge destroys the evidence needed to explain the fix.
Separate font delivery from layout
In the Network panel, check whether the intended font request succeeds and whether the computed font family matches your design. If a font is missing only for visitors, investigate the URL, permissions and browser console first. The live-site custom-font checklist covers that branch.
If both fonts load correctly but the header shifts during loading, capture the page before and after the swap. Do not declare a performance improvement based only on a screenshot: a layout-shift metric needs an actual measurement. Preserve readability when choosing fallback metrics or loading behavior.
Acceptance matrix for a client header
| Test |
Accept only when |
| Narrow phone, full business name |
Every letter is visible and navigation remains usable |
| Desktop with account/cart controls |
Title and controls have separate usable space |
| Browser zoom at 200% |
Text is not cut off by a fixed-height header |
| Slow font load |
Fallback and final text remain readable |
| Keyboard navigation |
The title link has a visible, unclipped focus indicator |
| Logged-out reload |
Saved public output matches the intended design |
This matrix is a practical regression check, not a complete accessibility certification. Also check the page's heading structure: changing font size or Fit Text does not change the appropriate semantic heading level by itself.
Keep the smallest layout correction that resolves the demonstrated failure. Avoid replacing the site name with an image simply to hide overflow, because that introduces another asset and accessibility decisions. When the fix spans theme templates and responsive styles, HandL WP can review the header layout with the failing viewport, font name and a reproducible title.
References reviewed October 18, 2026. Diagrams and test fixtures are explanatory, not customer results.