Visual relationships of content with H1 through H6

[jeremyfelt]

Depending on where they are used in the theme, the headers get lost in the document a bit. It can be hard to determine the structure visually, especially when working with H1,H2,H3 elements in close proximity.

I played with this for a bit to see if I could satisfy my opinions.

In the before/after screenshots below, I:

• Changed the color of H1->H6 to #464e54 to separate it from the default text color provided by the spine.
• Changed the bottom padding on all headings to .5em from .2em to add more separation between the heading and the content.
• Set a font weight of 500 on H2,H3,H4, and H5 to try and distinguish them from the H1 a bit. Left font weight of 700 on H6 so that it didn't look like a lost paragraph.

I think part of my discomfort is due to how Chrome handles the font weight of Lucida Grande. If I remove that and fallback to Lucida Sans Unicode, things are much more crisp. This change is not reflected in the below screenshots.

[natejacobson]

Good feedback, @jeremyfelt. I'm working on the weighting of these. In part, it's a matter of how opinionated to be be in spine.css versus child themes, but at the least, more spacing is in order.