Use Cases

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.