How to add an H5 & h6 text type to Squarespace (and how to customize it with code!)

content block

Jan 28

While Squarespace's text editor provides H1-H4 headings by default, you can unlock H5 and H6 headings using two simple methods: markdown block and/or a code block.

In the video below, I’ll walk you through the process of adding H5 & H6 using a markdown block, a code block, and customizing the look with CSS. Under this video I’ve got detailed steps and codde examples you can use!

Method 1: Using Markdown Blocks

The easiest way to add H5 and H6 headings is through Markdown blocks:

Add a Markdown block to your page
Use hashtags to create headings:
- Five hashtags (#####) for H5
- Six hashtags (######) for H6
Add a space after the hashtags, then type your heading text

##### Heading 5 Example
###### Heading 6 Example
This text will be standard paragraph text.

Method 2: Using Code Blocks

Alternatively, you can use HTML in a Code block, like this example:

<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

Customizing Your New Headings

Once you've added H5 and H6 headings, you can style them using Custom CSS. Here is a sample code and a lis of the key properties I recommend adjusting:

Font-size: how large the characters are. Values like PX and REM are recommended.
Pro tip: rem is the unit of measurement Squarespace uses for fonts. 1rem is usually translated to 16px.
Font-weight: how thick the characters are. These values can be numerical (100-900) or text based (light, normal, bold, bolder)
Pro tip: not all font fmailies have various weights! Many custom fonts and fancier typography styles only have normal and bold, but common web fonts, like Poppins (shown here) have all 9 variations.
Line Height: This value should be similar to font-size and will change the distance between text at different levels.
Pro Tip: Always adjust the line-height property when changing font sizes to maintain proper spacing and readability.

h5 {
    font-size: 30px;
    font-weight: normal;
    line-height: 1.2;
}

h6 {
    font-size: 40px;
    font-family: 'Your-Font-Name';
    line-height: 1.2;
}