How to add Heading 5 and Heading 6 to Squarespace (and more text styles)
I build Squarespace sites for a living, and I've written the same little block of CSS into more of them than I can count. It adds a Heading 5. Squarespace only gives you H1 through H4, so any time I need a line of text in the heading font that's smaller than those, I paste it in again — and when I'm feeling wild, I do the same for H6, P4, P5, etc.
Seasoned Squarespace users know the platform offers only seven text styles, four headings and three paragraphs. This is fine for many sites. But the moment you want real typographic range, you start to feel it. Want a small all-caps eyebrow above each section, in your heading font? You can’t do that natively. The only way past it is code.
So, the method I'm going to teach you will serve you well if you have a finite use for it. But I'll be honest up front: it has limits, and you'll hit them fast if you work with a lot of font sizes, your own or your clients'. After years of leaning on this little hack, I finally had enough and built a tool to fix it for real. I’ll tell you about that later. First, the hack.
What to do
1. Add the heading
In the editor, click Add Block, choose Code, and paste in the tag:
<h5>Your text here</h5>
Leave the block on HTML mode and save. FYI: the block can look plain or even blank in the editor. That's a known Squarespace quirk with code blocks — it shows up fine on the actual page. If it looks empty, check the live view before you assume it broke.
Right now your H5 will look like plain body text. Squarespace never gave H5 a style of its own, so it borrows your paragraph font instead of your heading font. Right tag, wrong typeface. You fix that in CSS.
2. Style it
Open Custom CSS. (Press / anywhere in the editor and type "Custom CSS".) Paste this:
h5, h6 {
font-family: var(--heading-font-font-family);
font-weight: 600;
line-height: 1.3;
margin: 0 0 0.5rem;
}
h5 { font-size: 1.35rem; }
h6 { font-size: 1.1rem; }
@media screen and (max-width: 767px) {
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
}
With this code, you’re setting four things: the font, the weight (how bold), the line spacing, and the size. The two you'll really touch are font-size and font-weight; the rest you can usually leave alone.
To pick your own numbers, just change a value, hit Save, look at the page, and adjust. A good starting point is to make H5 one step smaller than your H4, and H6 one step smaller than that. rem just means "relative to your base text size," so 1.35rem is 1.35× your body text. Nudge it up or down until it looks right. Same with weight: if your headings are bold, try 700; if they're light, try 400.
Want it in a different font? To match your paragraph font instead of your heading font, change that first line to font-family: var(--body-font-font-family);. To use a specific font, name it directly — font-family: "Georgia", serif; — but it has to be a font your site already loads (one from your Site Styles font pack, or a web-safe one like Georgia or Arial), or the browser will swap in something you didn't choose.
@media (max-width: 767px) is a rule that says "only apply what's inside when the screen is 767 pixels wide or less" — in plain terms, phones. You need it because Squarespace automatically shrinks its own headings on small screens, but it has no idea your H5 exists, so it won't shrink that one for you. So those few lines of code makes your new heading slightly smaller sizes on phones. Tweak the numbers, save, and check on an actual phone, and adjust as needed.
Want an extra paragraph size instead?
Sometimes you don't want a heading at all — you want a caption, some fine print, a small label under a title. That's a paragraph, and it works a little differently.
Every paragraph on your site is the same as far as Squarespace is concerned, so you can't just "style paragraphs" — that would restyle every one of them. Instead you tag the specific paragraphs you want with a class. A class is just a name you make up (like caption-text) that marks these elements as special, so your CSS can target only them and leave everything else alone.
First, define the style in Custom CSS. The . in front is what says "any element carrying this class":
.caption-text {
font-family: var(--body-font-font-family);
font-size: 0.85rem;
line-height: 1.5;
opacity: 0.75;
}
Then, wherever you want one, drop a Code Block and write a paragraph with that class:
<p class="caption-text">Photographed at the Oakland studio, March 2026.</p>
The class="caption-text" is the thread connecting this one paragraph to the CSS you just wrote. Change the name and it's a different style — so name them for what they do (caption-text, eyebrow, fine-print) and make as many as you like. Each new one is just a name plus a small block of CSS. As far as setting the custom CSS values - same deal as the Header. Try out different settings, save, and preview your site until it looks right.
You can do this for as many new heading & paragraph sizes you want!
Where this falls short
As I mentioned, this is a great workaround….for awhile. But once you start using it again and again, for more and more more styles, and for larger and larger sites, the pain of the method starts to show.
Why, you may ask? Well, your new headings lives inside a Code Blocks. They won't work in a regular text block, which means you can't set a small heading right on top of a paragraph the way you'd expect. You end up with a Code Block for the heading and a Text Block for the copy underneath, two separate things to drag and line up in Fluid Engine. Getting that spacing right is NOT easy in the editor— and if you care enough about design to want more font styles, I suspect you care about nailing the spacing, too.
By the time a page has half a dozen section subtitles, you're babysitting half a dozen code blocks: placing each one, keeping them aligned, and re-checking all of them every time you nudge the section spacing. It can become a nightmare very quickly, especially on a site that gets updated frequently.
And there's a whole set of places code blocks can't go — image captions, accordions, product descriptions, blog excerpts, summary blocks. All of those run through Squarespace's built-in editor, and the built-in editor only knows about the seven styles. Your beautiful new H5 doesn't exist there. Could you customize those with more CSS? Sure. There are plenty of tutorials for it, and these days AI will write most of the code for you. But you're still hunting down the exact class name Squarespace buries each one under, and they're different everywhere you look. That's a lot of time on every element. And wouldn’t it just be easier to not have to?
If you build sites for clients who want to be able to edit their own sites, you will feel this at handoff and beyond. You give them a site whose typography finally holds together, but most clients aren't comfortable touching code blocks and Custom CSS. Best case, they email you every time they want a subtitle. Realistic case, they don't bother, and a few months later the site has drifted back to four heading sizes because the fifth was more trouble than it was worth. The design you poured blood, sweat, and tears into is broken. So much for a portfolio piece.
Don't get me wrong, the method works. It just doesn't hold up once you're using it extensively, site after site, with clients who aren't comfortable touching it.
The easier way
I got tired of doing this dance, so I built TextLevels. It puts Heading 5, Heading 6, Paragraph 4 and Paragraph 5 right in the native Squarespace text menu. Headings come out in your heading font, paragraphs in your paragraph font, and you can set the sizing right in your Site Styles panel, just like all your others. Your clients can use it without opening a single code block. So can your image captions!
[Screenshot: the native Squarespace text dropdown open, with Heading 5 and Heading 6 under Heading 4, and Paragraph 4 and 5 under Paragraph 3.]
TextLevels is $39 for a single site license or $99 for an unlimited studio license. There’s no subscription or per-month anything. Pay once and it’s yours forever.
Try it on your next build. If it doesn't save you the hassle, email me inside 30 days and I'll refund you, no questions asked.
Add the missing text styles — $39, one-time →
A few things designers ask before buying
I build for clients — how does licensing work? Two one-time tiers. Single-site ($39) covers one site; Studio ($99) covers every site you build or manage, no cap. Client work is fine — the license stays yours, so your Studio key keeps all their sites running. If a client wants to own it independently after handoff, they buy their own single-site license.
Does it work on 7.0 and 7.1? 7.1 only — 7.0 uses a different editor the plugin can't hook into. On 7.1 it works in both Fluid Engine and the Classic Editor, and follows Squarespace's fluid type-scaling, so your new levels resize on mobile like the native ones.
What happens to my text if I ever uninstall it? Nothing's lost. Each level is stored as a normal paragraph and rendered as a real H5 or H6 on the page. Remove the plugin and your headings revert to plain paragraphs — the words stay put, only the custom formatting drops. Want to keep the sizes? Paste the stylesheet from your install snippet into Custom CSS first.
Will this hurt my SEO? No. Google's SEO Starter Guide lists heading order under "Things we believe you shouldn't focus on," and says outright that "from Google Search perspective, it doesn't matter if you're using them out of order." Google reads the tag. The size you style it at is its own thing.
