🏠 back to Observable

CSS: Headings are missing margins


#1

Not sure wether this is a recent change, but the h2 heading has practically no bottom margin. Because of this the spacing between paragraphs is now significantly larger than that between a heading and a paragraph.


#2

To clarify: I realize that typography can be highly subjective and difficult (especially in a context like Observable). I just think that the current margins prevent headings below h1 from standing out and acting as visual separators.

For what it’s worth, I’ve started working on a styleguide notebook to review the current styles (and perhaps even create custom ones interactively).


#3

You can add your own CSS if you want.

Personally I don’t want extra space after headings (and for general writing would prefer to eliminate blank lines between paragraphs and use indentation instead, but anyway…).


#4

A pattern I sometimes use:

html`---

## Heading`

We would like to add more margins above headings, but there’s a technical issue relating to margin collapsing and how we compute cell heights at the moment. Once we fix that we can take another pass at improving the typography.


#5

You can add your own CSS if you want.

I’m already doing this, and one goal of the styleguide notebook would be to make creating custom styles easier. But there are some typographic issues (in my opinion) that frequently throw me off. Also, changing the styles too much might disorient viewers.


#6

A pattern I sometimes use:

I actually use it religiously. :grin:

We would like to add more margins above headings, but there’s a technical issue relating to margin collapsing and how we compute cell heights at the moment.

I’ve noticed you’re not defaulting the box-sizing to border-box - perhaps changing that could help with the calculations?
Beyond that the :first-child and sibling selectors could help to add margins in more targeted ways.