How to overlap headings in Squarespace (7.0 & 7.1 CE)

All CSS tricksFontsCool look7.07.1 CETitle/Caption

May 10

I'm a big fan of overlapping text on purpose to create cool-looking headers, I feel this gives a more interesting look to a rather "standard" section of your website without overthinking it.

So, if you love mixing fonts and want to add a unique touch to your design, keep on reading to find out how to overlap headings in Squarespace!

Decide on your font style

Pretty straightforward. You should pick which fonts you'll be using for these double headers, I personally find script + sans serif or sans-serif and serif to look awesome overlapped!

However if you want to go with the same font then, you can definitely do that too! That's how I have them set up on my homepage.

In any case, you want to achieve a fair level of contrast between the fonts by using different families, colors and/or size.

Create an overlapping double heading

You'll need a regular text block to set up your foreground text, and a code block right ABOVE it to set up your background text.

Note: why above and not below? Because this way you won't have the issue of the background text displaying in front instead of behind the foreground text.

In my case, I set the foreground text as an h2 aligned to the center, and the background text as an h3.

You can use whichever headings you like best!

Then, simply give your h3 – or heading inside the code block – an id if you're only adding one of these snippets per page, or a class like so:

<h3 class="bg-text"> Background </h3> 

All that's left to do now is to style the h3 inside the code block! So head over to your custom CSS window and target the class .bg-text, or however you named it, and set the styles.

These are the ones I used:

.bg-text {
  color: #ebebeb;
  font-size: 80px;
  line-height: 1em;
  font-family: 'kaushan script';
  text-transform: none;
  text-align: center;
  width: 100%;
  display: block;
}

Now, it's time for the magic!

To overlap the titles all you need to do is give your .bg-text a position of absolute, so you take the block out of the flow of the page, and then give it a top offset to put it in place!

In this example I'm pulling the background text up just a little bit with a negative top value, to peek through the foreground text.

.bg-text {
  color: #ebebeb;
  font-size: 80px;
  line-height: 1em;
  font-family: 'kaushan script';
  text-transform: none;
  text-align: center;
  width: 100%;
  display: block;
  position: absolute;
  top: -15px;
  left: 0;
} 