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…

Vertical text in Squarespace on desktop

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.

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…

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

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

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

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.

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

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

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

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…

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

Dealing with vertical text on mobile screens

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

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.

Awesome!

Selecting only one heading between many

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

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.

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

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

Sweet right?!

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

Until next time,

B.

Full code

/*TO TARGET 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;
  }
}

/*TO TARGET 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;
  }
}