Summary: I do not find that the current set of header stylings work well with each other. This page critiques the current set of stylings and proposes an alternative.
To begin, here are examples of the current H1 through H5 header elements and how they are styled.
H1: The top level header
The H1 font specification is less relevant because in postings and pages the headers will start with H2. Interestingly, the title of the page (i.e. “Example header text” in the case of this page) is not styled with an H1.
H2: The second level header
It turns out that we have some second level headers (for example, on the academic, research, careers, or community profile pages) that are fairly long. While uppercase looks OK for single word titles, it looks less good when the header consists of 7-10 words and spans multiple lines. To me, the latter case looks like we are SCREAMING AT THE READER TO PAY ATTENTION TO OUR SECTION TITLE.
H3: The third level header
Because H2 looked like screaming to me, I shifted to H3 as the initial header for some pages. This header is not uppercase, which is an improvement, and is a slightly larger font than the paragraph text, which is OK. This doesn’t solve the problem, however, because look what happens when you mix H3 with H4.
H4: The fourth level header
When we get to H4, bold suddenly enters the picture, and results in a font that is much more prominent than that chosen for H3, which is the reverse of what we want people to perceive. It looks strange to have a page that consists of H3 and H4, which led me in some pages to only use H4. That’s just crazy!
H5: The fifth level header
H5 looks fine relative to H4, but is still almost as prominent as H3.
I used Chome Developer Tools to extract font info for the various page components, and this table summarizes the results:
Most of our pages require only one or two levels of headers. Structurally, they should be H2 and H3. With the current typography, I have been driven to use H3 or H4+H5, which is just wrong.
Let’s start by assuming that the current page title style (Lato, 24px) is a basis for H1, and that the current paragraph style (Open Sans, 13px) is a good text style. What we want is to come up with a compatible H2, H3, and H4 that descends from there. Here is my proposal:
The basic changes are to: (a) get rid of the uppercase text transform; and (b) always use a weight of 400 so that all headers are bold.
Here’s what this looks like in practice. I just added a span element inside the header element to adjust the styles. See the page source.
H1: The top level header (revised)
This is 28px bold; it’s slightly larger than the page title font, but since the page title has other identifying stylistic components, I don’t think that making H1 a little bit more prominent hurts. Also, it allows H2 (which is the normal top-level header for a page) to match up nicely with the page title.
H2: The second level header (revised)
The normal top-level header for a page (H2). It is 26px bold.
H3: The third level header (revised)
H3 is just like H2, but is 22px rather than 20px.
H4: The fourth level header (revised)
H4 is 18px.
H5: The fifth level header (revised)
H5 is just a smidgeon larger than paragraph (14px), but it’s bold.
This is a much less dramatic sequence of stylings, which to my eyes more smoothly transitions from titles to text. What do you all think?