ref(css): Shrink h4 to differentiate it from h3 #1675
Conversation
lobsterkatie
changed the title
h4 to differentiate from h3 h4 to differentiate it from h3
| $h2-font-size: 1.5em; | ||
| $h3-font-size: 1.125em; | ||
| $h4-font-size: 1.075em; | ||
| $h4-font-size: 1em; |
There was a problem hiding this comment.
This is good, but I can't fail but notice that now h4, h5 and h6 are all the same size :)
And we do have cases in the docs that we use as many as 5 nesting levels :/
Might be the time to loop in a designer and review the header styles. (Or stop nesting so many levels in a single page, which is also humanly hard to follow/distinguish)
There was a problem hiding this comment.
That is a good point, Rodolfo, thank you. My preference is that we do not ever use an H5 or H6. Doing so is, as you note, not super helpful to readers because they're those headers are visually so close. In reality, the need for this level heading suggests there's actually a deeper content problem - we shouldn't need more than four headings.
3 participants
As @rhcarvalho correctly points out here, actual headings have many advantages over text made to look like a heading by bolding it and putting it on its own line.
In markdown, it's the difference between
#### Dogs Ruleand**Dogs Rule**. In HTML it means anchor links, consistent styling, and better accessibility (vs. lack of all of those things).So, a clear win for headings, right? It would be, except that with our current CSS, it's next to impossible to tell an
h4(#### Dogs Rule) from anh3(### Dogs Rule), because the difference is only a 4% reduction in size. Since usingh4s breaks the document's visual hierarchy, folks in many cases choose to use the fake heading in spite of its drawbacks, because it is visually distinct from anh3.This PR shrinks the size of
h4s so that you get the look of the fake heading, with all of the advantages of the real one.