556 words
English text is read from left to right.
Text is 1-dimensional. The simplest representation is an unbroken horizontal line. Horizontal reading is uncomfortable though, so we wrap text. The wrapping is presentational only, it has no semantic meaning.
A paragraph is the first spacing-based presentational layer that goes on top of writing. (In CSS a paragraph is when you can start making some real spacing choices.) It is often an indent or an empty line.
Headings are the main tool for establishing hierarchy in an HTML or markdown document. There are six levels. You're only supposed to go down one level at a time. The sections that come after a heading are usually assumed to belong to that heading, though rarely is the code set up this way (the paragraphs are siblings to the heading, not nested within them).
Headings should stand out from paragraph text and they should show their position in the hierarchy. Sometimes I try really hard to think of a bulletproof style hierarchy for the six heading levels.
One of the toughest things about showing hierarchy with headings is that rarely are all your headings on the screen at the same time, so you need to be able to see an H4 in isolation and be able to tell it from an H2 and an H5. It's pretty hard to do this just with sizing. But more explicit methods are often distracting.
Some of the text styling methods you could use for headings are: bold, italic, all-caps, and underline. Underline is not a great option on the internet because of its association with links.
My last attempt at using text styles (no sizing adjustments) to cover all six headings was:
- H1: bold, italic, all caps
- H2: bold, caps
- H3: bold
- H4: bold, italic
- H5: italic
- H6: regular
That went OK, but I ended up just switching over to sizing because it was too noisy. It's frustrating that it doesn't really follow a logical progression (why is 'bold' higher than 'bold, italic'? because if you actually try it out going the other way it feels weird). I think part of it is that bold is much more jarring visually than italic or caps, so it's difficult to harmonize them all across six steps.
You do have some other spacing options you could use. Like space before or after a header. I think this can get you a little ways (more space around h2 then h3) but, again, it's difficult to set up a progression that isn't extreme on either the H1 or the H6 end.
One thing I always want to go to is indentation. This probably comes from being used to indentation in code, where it is the main hierarchy signal. The main obstacle I see is just that screen size is limited (especially on a phone). It's going to be annoying if you're only getting to see a few words a line because you're in the middle of an H4 section. Indentation could also be challenging to code up, since paragraphs aren't actually nested under headings. You'd have to run some code to do the structured nesting. Definitely possible, but you're adding in more complexity. I'd still like to try something with indentation sometime. Maybe the indentation can be signaled by a line, so you're not losing as much reading space in the deeper subheadings. Indentation seems like the cleanest symbolically.