Turning a header into outline text in Squarespace

• 00
• 01
• 02
• 03
• 99

Today’s tutorial is a fun little trick inspired by a question asked by a member inside the Club.

We’ll be looking at how you can turn any heading on your client’s site into outline text!

This will be a quick one, so let’s dive right into it!

Turning a header into outline text

To make this happen we’ll be relying on a couple of CSS properties called: -webkit-text-fill-color, -webkit-text-stroke-width and -webkit-text-stroke-color

As you can tell by their names they’re pretty straightforward, and all we have to do is target our desired text and add these to it.

So, let’s say we want to style the h1 in this example:

We simply need to use a selector to target it and then plop those properties in along with our chosen values!

I want my text to be transparent with a thin black border, so I’ll go with this:

h1 {
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

And that’s it!

Easy right?

Considering a fallback

Now, as you may have noticed these three properties carry a -webkit- prefix.

This basically means that not all browsers are compatible with them, which is definitely something to consider when applying this trick to a client project since there’s a chance that – depending on the color you’re using – the text won’t be visible.

To avoid that, we can include a fallback color in our code considering what would be contrasting against the background.

In my case, that would be black:

h1 {
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}

And now even if the awesome stroke doesn’t show, the text will still remain visible!

Note: you may not have to add the fallback in your code if you make sure that the corresponding heading color inside your Style Editor would make the text readable against the background, if the stroke happens to fail.

"What if I just want to outline one word?"

Well, in that case, you can use the code from this tutorial in combination with this other one to be able to pick out certain words inside the same heading, and apply the outline just to those!

Here’s an example of what that would look like:

Neat, huh?

Well, there you have it!

That’s how you can outline text in Squarespace.

Until next time,

B.

---

Full code

/*TURNING A HEADER INTO OUTLINE TEXT IN SQUARESPACE*/
h1 {
  color: black;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
}