Ever wanted to change the size of your headings? Maybe you wanted to create more dramatic layouts, or have better proportions in your pages or blocks? Now you can increase or decrease certain heading levels to fit your design needs.
Why we added this feature
TL;DR? Skip to how to use the feature!
We created this feature to address a contradiction between our accessibility requirements and our visual design recommendations.
To optimize for accessibility, we encourage use of headings to break up content:聽
- Each main section of a page should have a heading 2 section heading.聽
- Any sub-sections should be labeled with a heading 3.
- Subsections of a heading 3 would use a heading 4.
This allows someone using a screen reader to easily understand the聽structure聽of the page. They're able to jump from section to section in search of relevant content, and they can understand and explore relationships between sections and sub-sections. Here's an example of a page that's structured this way:
In this example, the screen reader would indicate that "Why design choices are important" has sub-headings, and the user could explore those or skip ahead to the "How to use this toolkit" heading.聽
Using headings this way is equally helpful for sighted users: it helps them skim content and decide where to focus their attention. In both cases, the headings show the聽structure of the content聽and the relationships between content聽chunks.
However, sighted users can benefit from an additional layer of visual information:聽visual hierarchy. Visual hierarchy is a means of using cues like size, color, and position to communicate the聽relative importance聽of items in a layout.聽
The problem is that sometimes, a layout might contain items that are structurally equal, but have varying importance. (For example, if a landing page contains five different sections and each is independent of the other, but one section is much more important.)聽
In the old WMS, we built layouts like this by using heading 2 for the most important content, heading 3 for the next-most important content, and so on. But for screen readers, that doesn't work. It implies that the less-important items are sub-sections of one of the most-important items, which isn't true. (Shoutout to Charly and the other folks who flagged this for us!)
In the new WMS, we created the "H2 bigger," "H2 smaller," and "H3 smaller" styles in the WYSIWYG. These styles give you control over your heading sizes, so you can use accessible headings and visually communicate relative importance.
When to use this
To enhance landing pages with visually proportionate titles
I'll demonstrate this using a sample landing page with six different sections. The ones at the top are more important than the ones at the bottom, but they're all completely distinct. None of the sections is a sub-section of another.
Here's the structurally correct way to present this layout:
In this version, all the block titles are a heading 2.聽
From a visual design perspective, this is acceptable because the headings allow users to identify the main content areas. The layout order, block sizes, image sizes, and button colors provide clues about the relative importance of each item.
However, distinctions between blocks won't be easy to spot on mobile screens. The button style is the only distinction between the first two blocks and the others. On desktop, the titles of the smaller blocks will also take up an unnecessary amount of room (even if they're relatively short).
We could reinforce the visual hierarchy and improve usability by manipulating the size of the headings:
In this version, the blocks titles still use heading 2. But we've used "H2 bigger" on the top row and "H2 smaller" on the bottom row, so these titles match the block sizes better and reinforce the sense of visual hierarchy. The distinctions will also be more obvious on mobile, when the blocks are stacked. The titles also fit a bit better in the last row, where the blocks are smallest.聽
When a page would benefit from smaller headings
Sometimes, site managers are tempted to skip heading 2 because they find it feels too big for the layout.*
With the "H2 smaller" and "H3 smaller" classes, you can adjust the size of the headings without skipping heading levels. (It聽, like going directly to a heading 3 or 4 without using a heading 2.)
I find that this is common in pages where there are聽many small chunks of content聽at the same level, like FAQ pages:
Although it can be hard to get a sense of this from a little screenshot, the headings can feel overwhelming in this type of layout. Even though they need to be heading 2 for screen readers, the heading 2 might feel too large and emphatic for sighted users. Using "H2 smaller" can help the layout feel lighter:
* This is one of the challenges of a multi-purpose system like the WMS. When the headings were smaller, we got complaints that they lacked impact for landing pages and typography-based designs. Now that they're larger, they can be overwhelming for basic pages!
To help title sizes fit better in smaller layout regions
The "H2 smaller" or "H3 smaller" feature is also helpful when the correct heading isn't a good fit for the block or container you're using. Here's an example where I created a grid of options:
In this example, the main title is a heading 2. Therefore, the subheadings in the grid must use heading 3. But this is a bit large for the effect I'm trying to create. If I use the "H3 smaller" class to modify my heading 3's, it makes them look like a heading 4:
How to use this feature
This feature can help you build accessible and aesthetically pleasing layouts. Here's how:
- Make sure the headings in your layout are structurally accurate. Your first heading should be a heading 2, and any children of that should use heading 3. Children of a heading 3 should use heading 4, and so on. Items that are structurally equal should use the same heading level.聽
- Select the text you want to change. Open the "styles" menu to use the "H2 bigger," "H2 smaller," or "H3 smaller" styles to adjust the size of your headings.
- Consider whether you need to correct any subheadings of the heading you just changed. If you're making a heading 2 smaller, be sure to apply "H3 smaller" to any heading 3s that nest underneath it. Otherwise, they'll look just like your smaller heading 2, which will probably be confusing for users.
- Review on desktop and mobile. The proportions of the text should look sensible and should support the visual hierarchy of your layout. If you zoom out far, or squint your eyes so that you can't focus on the text, it should still be obvious which items are most important in the layout.聽
Thoughts?
Not sure how to use this feature, or need help making it work? Try our 聽to get timely, hands-on help. (If you're considering this feature as part of a bigger project,聽.)
This is a new feature intended to help our site managers build more beautiful and sophisticated layouts. Are you one of those site managers?聽web.communications [at] mcgill.ca (E-mail us)聽to let is know what you think!
