Getting Heading 5 in Squarespace: Custom CSS vs. a plugin

Why Squarespace stops at Heading 4

Squarespace 7.1’s type system is built around a fixed set of text styles: Heading 1–4 and Paragraph 1–3. The text menu offers those seven, Site Styles has sliders for those seven, and there is no setting anywhere that adds an eighth. For a simple site that is plenty. For documentation, long articles, legal pages, or any design that needs a small label level below Heading 4, it runs out.

Route one: write the Custom CSS yourself

The DIY route has two parts. For every Heading 5 you want on a page, you insert a code block (or a markdown block) containing the tag yourself — <h5>Your heading</h5> — and then you style that tag once in Design → Custom CSS with rules for its size, weight and spacing. We wrote the full walkthrough, with copy-paste code, on the WeGo blog: How to add Heading 5 and Heading 6 to Squarespace.

When this is the right call: you need the level in one or two places, you are comfortable editing code, and you are the one maintaining the site. It costs nothing, and CSS you wrote yourself is CSS you can always change.

Its genuine downsides:

• Every heading is its own block. A code block can’t sit inside a text block, so each Heading 5 is a separate element you place and align by hand. A page that uses the level often becomes a page of code blocks to babysit.
• The editor shows code, not your heading. Inside the editor a code block displays as source; you see the styled result on the published page, not while you write.
• It doesn’t reach everywhere. Squarespace’s smaller editors — image captions, accordions, product descriptions, blog excerpts — only offer the native text menu. A code-block heading can’t go there.
• Handoffs are fragile. A client or teammate who doesn’t write HTML can’t edit a code block, so in practice sites drift back to four heading sizes after handoff.
• Fixed sizes don’t scale the way Squarespace scales. Squarespace sizes text with a single viewport formula, no breakpoints. A hand-written rule with a fixed size looks right on a desktop monitor and can render your Heading 5 larger than Heading 4 on a phone. Matching the formula by hand is real work.

Route two: add the levels with TextLevels

TextLevels is our plugin that adds Heading 5, Heading 6, Paragraph 4 and Paragraph 5 to the same places the built-in styles live:

• In the text menu. The new levels appear in the editor’s style dropdown, right after Heading 4 and Paragraph 3, with a tick for the applied level and a keyboard shortcut each — anyone who can use Heading 2 can use Heading 5.
• In Site Styles. Size sliders appear in Design → Site Styles → Fonts, under the sliders you already have. Font, weight and spacing are inherited from your heading styles automatically, so the new levels always match your type.
• Real tags when published. Heading 5 publishes as a real <h5> and Heading 6 as a real <h6>, so search engines and screen readers see the outline your readers see.
• Sized for phones. We measured Squarespace’s viewport scaling formula and matched it, so Heading 5 stays between Heading 4 and body text at every screen width.

It installs by pasting four lines into Code Injection once (the docs walk through it), and it is a one-time purchase — $39 for one site.

The verdict

The CSS route is right for you if…	TextLevels is right for you if…
You need a Heading 5 in a handful of places, once	The level is part of your site’s type system, used everywhere
You’re comfortable writing HTML and CSS, and enjoy it	You (or your client) want it in the normal text menu, no code
You maintain the site yourself, long-term	You hand sites to clients or teammates who don’t touch code
Desktop is what matters and you’ll test mobile yourself	You want mobile sizing that follows Squarespace’s own scaling
Budget is zero	$39 once is cheaper than the hours the CSS route takes

Both get you a Heading 5. The difference is whether it behaves like a piece of custom code on your site, or like a text style that was always there.