How to overlap headings in Squarespace

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!

Related: want to learn more about adding handy css tricks like these to your Squarespace site? Then you’re going to want to check this free training!

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;
} 

 

And there you go! Here's the result:

Background

FOREGROUND

 

TO KEEP IN MIND

  • You can play with the position of the background text as much as you like! You can set a left or right offset as well to have it show up more from one side of the foreground text.

  • By setting your background text as absolute and adjusting the offsets, especially left and right if you choose to do so, make sure to always check how it looks in smaller screens because more often than not, you'll find the background text gets cut off. In this case you can either adjust the positioning in desktop to keep it looking good on mobile, or set up media queries to change the position or size in smaller screens. For example:

@media screen and (max-width: 960px) {
  .bg-text {
    font-size: 50px;
    top: 50%;
  }
}

 

Until next time,

B.

 

LIKED THIS POST?

I'd love it if you shared!


More Squarespace tips & tricks this way