cancel
Showing results for 
Search instead for 
Did you mean: 
Highlighted
Lamplighter II

Heading Format Changes

I started working on project today and noticed the heading format for heading 4 has changed. It is in the same format for paragraphs which defeats the its purpose as header. Just wondering if others see this as well.

Sketch.png

6 Replies
Highlighted
Navigator

It looks fine for me in production in Firefox and beta in Firefox and Chrome, although there is still the issue of too much space around the H3 element.

Even if the text appears no different than paragraph text, that doesn't defeat it's purpose as a header. Marking it up as a header provides structure and relationship to a page and provides accessibility benefits. It should be separate from how it's styled and you should not be using headers to mark something as a header that is not actually a header. If you want text to look different but not have any purpose, then it should be marked up within a div or span element.

That said, headings should provide visual cues, but that's a should not a shall, and the extra vertical whitespace around the heading could serve as a visual clue.

Highlighted
Community Coach
Community Coach

I did a quick test in Chrome and Firefox as well.  I see more of a difference than you did, Susan, in the Heading 4. My spaces are also consistent between the Headers and Paragraphs. Like James said, headers are still important for accessibility.  It will be interesting to hear from other Community members though, especially if their experiences align with yours.

Highlighted
Lamplighter II

I'm in Firefox, and Heading 4 does show a distinction. Could there be some custom CSS in your instance that is modifying your Heading 4?

I also noticed that the other heading levels font-size is listed in terms of 1.8 em (H2) and 1.5 em (H3), while it's showing 17.5px for H4 and 14px for H5.

Heading4Fontsize.png

I took this screen shot from our Beta site. And yeah still too much margin* (1em) on H3 while the rest have 6px padding.

*In our custom CSS we set the margin-bottom on H3 to be 0px just in case Canvas updates the H3 in general sometime in the future.

Happy Holidays,
Cheers - Shar

Highlighted
Explorer III

I too find the visual distinction between h4 and surrounding text to be too weak. I use Google Chrome and as far as I'm aware, the only customizations I have made to my browser is that I have the font display a bit larger and use Verdana font when possible.

Highlighted
Surveyor

It is interesting that the H tags are using a mix of EM and pixel size. Because EM are just a percent of the default font size you have set (either by a CSS or browser defaults). I would think that it would be better if the same measurement value was used for all of the H tags. And preferably EMs.

But, depending on what snugent​'s default font size is, let's say 18px then the hard coding of 17.5px for an H4 would make an H4 look the same as the general text on the page.

18px = 1em = 100% if the default font is18px

H2 = 1.8em = 32.4px

H3 = 1.5em = 27px

H4 = 17.5px

Highlighted
Community Coach
Community Coach

Hi snugent‌...

I wanted to check in with you because there hasn't been any new activity in this thread since early January 2017.  Did any of the above responses help to answer your question?  If you feel that one of the above responses is "Correct", you can mark it as such.  For now, I'll go ahead and mark this question as "Assumed Answered" because there hasn't been any activity here for a while.  That won't prevent you or others from adding additional replies to this thread, however.  I hope this is okay with you, Susan.

Top Kudoed Authors
Labels