Not enough space before Headings

The current typographic styles for H1 etc have always niggled me because they don’t have enough leading or spacing before them. To create easily readable documents, I find myself having to insert a clear paragraph before each heading.
This also makes the space after H1 etc seem too big (hence the need to balance with a whole para beforehand)
I know this is a tiny thing, but it was literally the first thing that popped at me while I was using coda, and it’s been bugging me ever since.

6 Likes

H2/H3 spaces feels really tight too. I too need to manually add line breaks to get sufficient visual separation.

Hi @Jeremy_Yuille and @Donovan_Keith, I’m the designer that worked on the type. Good callout, headings definitely need a generous amount of breathing room above. When designing the type ramp, we thought it looked best with a bit more than a line height of padding above for H1s, H2s, and H3s. We were undecided on whether to make that breathing room a “real” newline, like we do between paragraphs, or padding baked in to the heading, like you’d use when designing a website.

I was anticipating that people would naturally leave a newline themselves before each heading, like they do between paragraphs (in the same way you need to writing markdown, for example). This seemed more flexible, and makes it easier to insert a new paragraph above the heading— you aren’t clicking on padding.

But I’m not sure that was very clear, and I definitely understand that it can feel like extra work to manage, so keeping my eye on it. Does it make sense knowing that the newline above is by design, or still frustrating?

4 Likes

Hi @EvanBrooks - Knowing that the need for a new-line is by design is at least somewhat helpful as that helps to recalibrate my expectations. With markdown, I typically find myself writing something like:

This is some text.
# This is My Heading
This is the text in my paragraph.

But I’m always grateful when Prettier reformats that into:

This is some text.

# This is My Heading

This is the text in my paragraph.

As a compromise, perhaps Coda could auto-add the extra space when you add a Heading, and then allow you to delete it if you so choose?

But really, I think my preference would be for the spacing to sort itself out automatically w/ as little extra typing on my part as possible. I know I care about typesetting/spacing, but most docs users don’t. So it’s pretty common for them to not add the requisite new lines. Which means I’m forever adding them and most docs are uglier than they need to be much of the time.

— edit —

Actually, I think what’s confusing to me is that you automatically get sensible spacing below… but that same thing doesn’t happen above.
image

I think the workflow as you’ve designed it makes sense if you are typing things out and using markdown shortcuts to create headings. But it’s a lot more “clicky” if you are selecting and reformatting lines using the GUI.

3 Likes

I also struggle with the spacing in Coda, and often get the feeling that it looks clunky. For that reason, I continue to use Google docs for writing documents.

In particular:

  • There is more space above a H1 than a H2, which is what I would expect. However, there is actually less space above a H2 than a H3, which is counter-intuitive and looks off.
  • It’s a bit cumbersome to have to manually add space before headings.
  • If you write a doc with a mix of continuous prose and bullets, it looks strange as the bullets have more line-spacing than the prose.
  • If you end a section with bullets and then start a new section with a heading, there is more space than when you end a section with continuous prose.

Here is a screenshot.

I’d be surprised if the lack of top-margin space was intentional. Ideally I would not want to insert white lines everywhere to compensate for that.

2 Likes

Hi @EvanBrooks , this is kind of a rabbit hole, but if people are putting extra blank paragraphs between paragraphs to get some separation, does that not suggest that there should be some built-in vertical separation between paragraphs? If there was half a line height, that would make enough spacing that you wouldn’t need extra blank paragraphs. And then if there was no need for those extra blank lines, the heading spacing could be made larger to achieve a pleasing look by default since there wouldn’t be the expectation to compensate for extra blank paragraphs. What do you think? Would some vertical spacing between paragraphs make sense?

1 Like

I’m new to coda, and it feels wrong and semantically incorrect to be manually adding empty new-lines between every paragraph block to avoid them all running into each other. Almost like I’m in Microsoft word with a shoddy template.

An example of who gets the typography spot on, is Craft.do
They’re doing some clever stuff with line heights and leading and trailing padding, but they manage to make plain text + headers always look lovely.

2 Likes

I agree, @Meirion_Williams, (@Jeremy_Yuille ,et al) so i am throwing it out there…

any CSS whizz-kids know what Stylebot or Stylus codes could change this as a temporary fix?

AND A REMINDER: to all who would like this change - VOTE FOR IT ABOVE? just hinting…

respect
max

The lack of space above Coda’s headings has always bothered me. However, I fear that Coda will shy away from ever making a change here, because since everyone has always inserted empty paragraphs before headings, a suddenly introduced space in the form of padding or margin above headings would break the typeface of all existing texts, and all previously inserted empty paragraphs would have to be removed manually to maintain a pleasing typeface.

The same problem exists with paragraphs, which in Coda also have no bottom spacing to the next block. Here too, an empty paragraph must be inserted in order to visually separate paragraphs from each other, which is both semantically wrong and visually unsatisfying.
Also in this case any change in Coda would be a deep intervention in all existing texts.

However, if Coda would allow to insert custom CSS, individual solutions could be found.

1 Like

I can also mention Notion or Nimbus Note as examples of how it should be done.

1 Like

They should reflect about it. The best database with one of the “worst” spacing is not a deal.
Like me, I’m sure there are many persons already searching for alternative or going back to Notion, and also Craft, exclusively for this reason.

We can’t deal with plain wall of text in 2021. Content design is vital to have great documents. This basic design choice is really absurd from my point of view.

1 Like

They don’t necessarily have to break all the existing superfluous empty blocks. They could make a page option where you have the choice to display each page with nice vertical separation margins along side the options for font and paragraph alignment. As a bonus there could be a plugin that looks for the blank blocks and removes them if you choose to bring your doc up to the new formatting assumptions.

I believe that auto inserting space between paragraphs is the way to go - especially if one can setup the amount to insert. All the tools I use for various designs allow for auto setting of space between paragraphs - hitting the enter key twice is something I have trained myself not to do.