Never settle for default spacing
#
The default spacing places headers in the middle between two paragraphs. It is as if the headers don't really belong anywhere. The header becomes a visual separator, and the semantic connection to the text that follows it becomes unclear. The meaningful structure falls apart.
The distance also makes the paragraphs' normal line-height look too tight. It tempts you to increase the line-height instead, making the text harder to read – and it looks like crap.
Group elements that belong together #
Distance mirrors relations. Placing headers closer to the paragraphs which it belongs to, leads to a clearer structure. The default line-height seems more reasonable as well.
Start by defining the line-height of the header. Then make the space down to the paragraph visually be the same, and you are good in many instances. Sometimes you might have to increase it some more, depending on the font type and header level.
I made a codepen with some spacing examples like the ones illustrated and more.