Jump to content

Adjust vertical space after headings?

Recommended Posts

I'm a typographer. I want to have control over the type and layout of a page. I understand that Squarespace wants to be responsive on many devices, but Squarespace too often makes decisions for us designers. 

I can change the size of the type of heading 1, 2, 3. But I want to adjust the vertical space after the type. Right now, the default is to put a huge amount of white space under a heading. This doesn't work for me at all. Generally, I'm using headings as headings - they precede some text I want to be associated with that heading. The space is too much. 

I don't mind something global that affects all headings. For example, a script that says: Make the white space after all headings = x times line height, where x is a number like 0.5 - 3.0. 

Is there code that would do this? 

Edited by David567890
Link to comment
  • Replies 4
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Squarespace already does this with the line height and font-size. If you want to manually adjust with code you could use a number of methods or you can adjust the line height in the design settings. 


h1 {
    line-height: calc(1.32184);

@media screen and (min-width: 768px), screen and (max-width: calc(3179px)) and (orientation: landscape)
h1 {
    font-size: calc(1.67496vw + 1rem);


Link to comment

Sorry, I'm still confused! I have a background in typography, book design, graphic design, typeface design, and web design. In HTML I can get what I want. Here in Squarespace, I can't. I can adjust the font size of any display (heading) or text (paragraph) fonts, and I get larger or smaller type. When I adjust line height, that changes the amount of space ABOVE AND BELOW the type in equal amounts. Typographically, this is bad. The only rational way to set this parameter is for what works best with text, because you don't want text lines to be too far apart or close together vertically. This means there is no way to adjust the vertical spacing after headings independently, and in any event it doesn't even do that, it does both above and below. 

So I tried the code. It seems "line height" adds the same amount of space above and below the headline, which of course I don't want at the same time. I'd want to control those independently. I have found something that kind of works, though it isn't the full control I'm looking for: 

h1 {
    line-height: calc(0.1);

Is there any way to do this for ALL headers, or do I have to name each one and repeat the same code for each? 

Is there any way to adjust white space above and below independently?


Link to comment

In addition, line height screws up if a header (like H1) wraps to the next line. There it completely fails. So I'm again stuck without a solution, because line height affects white space both above and below. My problem is line height. It doesn't let me control type. Is there something else?

Link to comment
  • 8 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.