28
\$\begingroup\$

This is a somewhat trivial request, but it's about a typographical pet peeve I've been noticing for a few months. I figure I might as well make a request about it.

Problem 1 of 2: The H2 and H3 have poor spacing.

Our heading spacing is off, which reduces the legibility of our H2 and (especially) H3 and any post that actually uses them. That discourages a lot of us from actually using H2 and H3. It seems in general the community prefers using H1's, and a single bolded line as a mock-heading rather than H2 or H3. Other SE sites don't appear to have this formatting issue.

Headings are meant to have a gap above to separate a new section from the previous one, and then be snuggled in nice and close to the text of the new section to identify it. Alternately, they just have equal space above and below.

Our heading 2 and 3 do the opposite, because they have a margin-bottom: 1.2em CSS declaration that places them closer to the text above than their following paragraph.

a screenshot showing the padding

(the orange bit is the margin)


Problem 2 of 2: The H3 looks too similar to normal bolded text.

The heading 3 ought to be made larger. It's virtually indistinguishable from normal bolded text. This means using it usually reduces clarity if anything. Combined with the spacing issue, that makes the H3 unusable (except for the purposes of making your post worse somehow).

Our H3 is 16px vs the body text's 15px, and it has a different font face (the LusitanaRegular webfont vs the body text's Georgia), but LusitanaRegular has smaller text so these differences add up to be negligible. To demonstrate, I'll let you guess which of these is the H3.

Example

Example


So what do our headings currently look like?

Heading 1

The spacing above and below the heading is about equal. This is currently my favourite heading to use on the basis of its legibility.

Heading 2

The spacing places this closer to the text above than below.

Heading 3

Just like the H2, this is closer to the text above. Because it's also smaller, it gives the impression of being a lot closer to the text above.


What should our headings look like?

The appearance of the headings on Meta Stack Exchange is shown in the below image. Good spacing, good sizing: no legibility issues.

some heading appearance tests, click the link for the sandbox answer this was presented in

On our site it should really look like this (it's an image).

spacing suggestions for these headings

  • The size changes are necessary because we're increasing the H3's size to distinguish it from regular bolded body text (19px is the minimum size). H2 and H1 then get their size increased as well to maintain the present 2px gap between each heading's font size.
  • A margin-bottom of 10px is what Meta Stack Exchange uses for H2 and H3.
  • It hasn't been included here, but a margin-top of 1.2em or 24px would push headings further away from the paragraph above, and might improve their distinctiveness. This is a matter of preference though, and Stack Exchange seems to prefer equal spacing above and below. (It's also my own preference, but I'm happy either way.)

So in total, the changes are:

.post-text h1 {
    font-size: 23px !important; /* previously 20px */
}

.post-text h2 {
    font-size: 21px; /* previously 18px */
    margin-bottom: 10px; /* previously 1.2em */
}

.post-text h3 {
    font-size: 19px; /* previously 16px */
    margin-bottom: 10px; /* previously 1.2em */
}

(Community input welcome. I'll adjust accordingly.)

\$\endgroup\$
  • 12
    \$\begingroup\$ As a graphic designer with a special soft spot for typographical white space: YES ALL OF THIS PLEASE. \$\endgroup\$ – BESW Jun 3 '14 at 6:58
  • 5
    \$\begingroup\$ I... I thought I was the only one. ;_; \$\endgroup\$ – doppelgreener Jun 3 '14 at 7:05
  • 3
    \$\begingroup\$ Me too. We're not alone! \$\endgroup\$ – SevenSidedDie Jun 3 '14 at 15:38
  • \$\begingroup\$ Did something change recently? I noticed this myself only a day or two ago. (Although maybe it's just because more people have been using headlines in their answers?) \$\endgroup\$ – starwed Jun 3 '14 at 17:54
  • 4
    \$\begingroup\$ @starwed No, this has been annoying me since like my second answer on the site. \$\endgroup\$ – KRyan Jun 3 '14 at 20:10
  • 5
    \$\begingroup\$ I've reclassified this as a bug rather than a feature request - I think I should've posted it that way to begin with. This is an existing feature that's a little bit broken, not a request for something new. \$\endgroup\$ – doppelgreener Jan 5 '15 at 6:37
  • 4
    \$\begingroup\$ Still trying to upvote this more and it's just not letting me. I actively avoid using H2 and H3 because it does the opposite of make structure easier to see. \$\endgroup\$ – SevenSidedDie Jan 5 '15 at 7:20
  • \$\begingroup\$ It might be worth pointing out that among the 2646 CSS rules governing the site, the culprits are .post-text h2 and .post-text h3 \$\endgroup\$ – MrLemon Jan 5 '15 at 14:51
  • \$\begingroup\$ I like your mockup, did you move the text by hand or did you change the style sheet values locally? If the latter, do you remember what values you put in? \$\endgroup\$ – MrLemon Jan 5 '15 at 14:53
  • \$\begingroup\$ @MrLemon I tinkered with the css locally. Will poke at it again soon and this time suggest a solution. \$\endgroup\$ – doppelgreener Jan 6 '15 at 0:06
  • \$\begingroup\$ Changing from em to px seems weird. Also, the headings should still be a bit closer to their following paragraphs, IMO. \$\endgroup\$ – KRyan Jan 6 '15 at 1:14
  • \$\begingroup\$ @KRyan It might be weird, but px is already the standard used on other more recent layouts (like MSE) and the font sizes are all defined using px. Really using em in the first place was the weird thing, from one perspective! \$\endgroup\$ – doppelgreener Jan 6 '15 at 1:17
  • \$\begingroup\$ And yeah I prefer nesting headings closer to the following paragraph too. I'll add a note soon. \$\endgroup\$ – doppelgreener Jan 6 '15 at 1:18
  • 1
    \$\begingroup\$ @doppelgreener As I understand it, using ems instead of pixels is more future-proof because it uncouples layout logic from the display device's resolution. But that's just the reasoning for using ems in the first place; in practice, we're nowhere near resolution independence yet and px remains common for practical reasons. (That comment aside, still won't let me upvote harder.) \$\endgroup\$ – SevenSidedDie Jan 6 '15 at 2:58
  • 2
    \$\begingroup\$ Actually, now that I think about it, I think we should be asking for H2 and H3 headers with extra space above, not with equal space, so they feel more header-ish and distinct. That would simultaneously resolve the H3/bold issue regardless of similar size; so two birds with one stone. \$\endgroup\$ – SevenSidedDie Nov 18 '15 at 18:36
7
\$\begingroup\$

Thank you, SE devs! With the redesign (and some prodding from KRyan) we finally have well-spaced headings and a distinctive H3 for the first time! (since beta)

Whether or not it suits our individual tastes it's a huge improvement and makes using all three heading levels viable. I'm happy, and this is just personal but I think the Georgia font is more gorgeous in headings than what we had before.

Quisque sed lectus id augue vehicula pharetra.

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec commodo vel ipsum id mollis. Integer ut consectetur eros, ac semper dolor. Etiam eu diam pellentesque, scelerisque ex id, tincidunt arcu. Curabitur at dapibus sapien. Nullam imperdiet enim nec felis cursus, vel euismod erat mattis. Sed eu vehicula nunc. Sed sapien arcu, lacinia quis cursus et, vulputate id nulla.In molestie purus quis felis rhoncus euismod. Aenean id ultrices velit, et rutrum nibh.

Heading 2

Nulla facilisi. Nulla ac congue enim. Donec finibus porttitor ipsum et tempus. Mauris molestie quam justo, non mollis nisi interdum quis. Donec laoreet blandit sapien, at porttitor nisl viverra vel. Sed sit amet tortor imperdiet, elementum metus nec, euismod tortor. Cras et leo et tellus euismod dapibus vel eget sapien.

Heading 3

Vivamus ultrices quam tortor, molestie hendrerit augue consectetur ac. Curabitur nisl tellus, faucibus dapibus velit in, sollicitudin imperdiet eros. Etiam pulvinar pharetra eros, ut hendrerit velit finibus ac. Phasellus quam ante, lacinia et augue a, iaculis suscipit nisi. Aenean eget justo eget est aliquet eleifend. Donec tincidunt mi a dui faucibus, et molestie turpis blandit. Ut consectetur neque eu magna imperdiet, sed faucibus est vestibulum.

thank you!

(also the rest of the design is looking pretty beautiful too)

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .