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:

Component Font Size (px) Weight text-transform
Page title Lato 24 100 none
H1 Lato 34 100 uppercase
H2 Lato 28 100 uppercase
H3 Lato 20 100 none
H4 Lato 18 600 none
H5 Lato 16 600 none
paragraph Open Sans 13 100 none

Proposal

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:

Component Font Size (px) Weight text-transform
Page title Lato 24 100 none
H1 Lato 28 400 none
H2 Lato 26 400 none
H3 Lato 22 400 none
H4 Lato 18 400 none
H5 Lato 14 400 none
paragraph Open Sans 13 100 none

 


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?