Creating vertical text in Squarespace

Oh I know you wanna jump in the vertical text wagon.

In fact, you probably already did! Right now you may be using images to contain your vertical text because let’s face it… it’s way easier than figuring out how to it with code.


But… these are just a few reasons why you MAY want to switch up those images for actual text (if you have any) or why you’d be better off learning how to create vertical text in Squarespace with CSS:

  • Images can shrink down to the point where your text becomes unreadable in smaller screens, usually in tables.

  • Images can blow up out of proportion in smaller screens if you don’t control them through media queries.

  • Text in images doesn’t get picked up by Google, so you may be losing some juicy SEO brownie points by using images instead of text.

  • Your clients will need you to go back in and edit the images if they want to change the text or create a new vertical title, instead of being able to edit it themselves.


If you found yourself nodding along those reasons from above, then keep reading so you can find out how easy it can be to create vertical text in Squarespace WITHOUT having to use a code block.

“Wait, seriously?“

Oh yes…


Adding vertical text to Squarespace without code blocks

Now, the trickiest part about this method without using any HTML is that you need to be able to differentiate the headings you want to flip vertically from the rest.

An easy way to do this is to rely on index pages since if, for example, you add only ONE heading 2 inside that section, you can target it without much issue.

The other way to do it, if you’re working with a regular page, is again to make sure there’s only ONE of the heading type you want to flip inside the entire main content area – although if you want to make, for example, ALL h2s vertical inside that same page then by all means add as many as you want! – and then simply target the page through its ID.

In this example, I’ll be working with a regular page from a Brine template, which means I’m gonna start by targeting the page’s ID in my Custom CSS window.

1. Target specific page in Squarespace through its ID.png


Next, I want to make sure I’m only going to target the h2s inside my content area, and NOT the footer where I have another h2.

Looking through the Inspect Element window we can see the main content area that has a class of .Main…

2. Target content area of a regular page in Squarespace.png

…ends right before the footer so I’ll use that!

3. Targeting page content minus footer in Squarespace.png

So far, that translates into:

#collection-594070c2b3db2b3d1018c421 .Main {

}

Now, since I’m gonna flip my h2s, I’ll be adding that selector in there too:

#collection-594070c2b3db2b3d1018c421 .Main h2 {

}

Alright! We’re ready to make this baby vertical!

To do so, we’ll be using a property named writing-mode and set it to vertical like so:

#collection-594070c2b3db2b3d1018c421 .Main h2 {
  writing-mode: vertical-rl;
}
6. Creating vertical text in Squarespace.png

Awesome!

Depending on the layout you’re working with you may not want to flip your text horizontally but in this case I do so I’ll be using the transform property to rotate my text 180deg.

#collection-594070c2b3db2b3d1018c421 .Main h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
7. Flipping text vertically in Squarespace.png

For the next step, I want to make sure that my text is in the middle of the container horizontally speaking. I’ll add a temporary border to the text containers so you can see it better.

8. Adding borders.png


As you can see, it’s almost aligned to the left, so even when I’m going to shrink down the container itself, I want to make sure the text is centered.

I’ll add margin 0 auto to help me achieve that.

#collection-594070c2b3db2b3d1018c421 .Main h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0 auto;
}
9. Centering vertical text in Squarespace.png

Great! Now I’m gonna go inside the page to manually shrink down the text container.

10. Adding vertical text to Squarespace.png

Let’s check what that looks like in tablet mode…

11. Vertical text in Squarespace tablet.png

Ok not bad, but because of the font I’m using the Y of story is way too close to the paragraph next to it.

To fix this, we can give the h2 a position of relative and then give it a right offset of 10px so it separates from the text a little bit.

#collection-594070c2b3db2b3d1018c421 .Main h2 {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  margin: 0 auto;
  position: relative;
  right: 10px;
}

Let’s check that again…

12. Moving vertical text in Squarespace.png
13. Moving vertical text position in Squarespace.png

Ok, much better! And it still looks good on desktop so we can keep it that way.

I’m getting rid of the border now so we can focus on fixing the next problem: phone screens.

14. Vertical text in Squarespace mobile issue.png

The vertical heading is taking way too much space in smaller screens, so I think it’s going to be best if we keep it horizontal here.

We could use a media query to set a new writing-mode value for mobile devices and also override the rotation and offset, but it’s going to be MUCH easier and quicker if we just set what we already wrote under a media query that STARTS at smaller screens.

@media screen and (min-width: 640px) {
  #collection-594070c2b3db2b3d1018c421 .Main h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    position: relative;
    right: 10px;
  }
}

Now this way we’ll get vertical text in tablets and desktop but horizontal text in phone screens, without writing more lines of code.

15. Adding media query to vertical text.png
16. Vertical text in tablet in Squarespace.png
17. Vertical text in phone in Squarespace.png

Awesome!

Last but not least, let’s work through the last issue we have here which I’ve purposefully ignored until now:

18. Vertical text specificity.png

As it turns out I have another H2 in my page that I DON’T want to set vertically, and I don’t want to switch for another type of heading.

What now?

A neat little workaround for this is something that I like to use when creating additional headings without HTML, and it’s simply to set the heading I want to style as either bold or italics (or both) so I’m able to have one more level of specificity in my code and be able to target only the headings I want!

In this case, I’ll be setting our vertical H2 as bold. This will give us an additional strong tag that we can target in our CSS so the non-bold H2s don’t get affected.

19. Selecting only a few headings in Squarespace.png

This means that now my selector will look like this:

#collection-594070c2b3db2b3d1018c421 .Main h2 strong {

}

And with all the styles set, I can now keep my regular H2 horizontal and only flip the one set as bold.

@media screen and (min-width: 640px) {
  #collection-594070c2b3db2b3d1018c421 .Main h2 strong {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    position: relative;
    right: 10px;
  }
}
20. Modifying snippet.png

And of course, I can switch the font weight back to normal through my CSS snippet:

@media screen and (min-width: 640px) {
  #collection-594070c2b3db2b3d1018c421 .Main h2 strong {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    position: relative;
    right: 10px;
    font-weight: normal;
  }
}
21. Changing weight of font.png

Sweet right?!

That’s how you can create vertical headings in Squarespace without using HTML or code blocks!

Until next time,

B.

 

Full code

If targeting all same-type headings inside a page

@media screen and (min-width: 640px) {
  #collection-594070c2b3db2b3d1018c421 .Main h2 {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    position: relative;
    right: 10px;
  }
}

If targeting specific headings inside a page

@media screen and (min-width: 640px) {
  #collection-594070c2b3db2b3d1018c421 .Main h2 strong {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    margin: 0 auto;
    position: relative;
    right: 10px;
    font-weight: normal;
  }
}