New text styles for headings

[fcoveram]

Problem

As pointed out in ticket #488, adding IBM Plex Mono in Developer Resources generated a visual inconsistency in how we display texts in the Learn group and left behind a guide on how to use it in the upcoming designs.

Given that the WordPress site hosts a variety of content, we need to set a style that works for expressive pages, where the brand has more predominance, and for less expressive ones, where main content is priority.

Solution

Since we have already used existing text styles in Inter created for subtitles and paragraphs, @marko-srb and I agreed to create new ones for headings. These styles solve the inconsistency problem and work for the future redesigns.

Here is an updated diagram of the current text styles

Line heights in all styles

In addition to the new Heading 3, 4, 5, and 6 in Inter, I think there is room for improving the line-height values and making the scale down more consistent. The current 2-digits decimals can be more simple.

However, I wonder how deep the change is and the chances of breaking down layouts. The tests I made on Chrome inspector did not show significant changes. If the risk is high or unknown, we can continue with the current values.

Application

The main change occurs in Developer Resources and Documentation, both part of the Learn group. The internal pages and posts have Heading 3 in Garamond for h1 and the subsequent Inter heading styles for h2, h3, h4. Here are screenshots of the tests I made in Chrome inspector.

Developer Resources. Block Editor Handbook

Developer Resources. WP-CLI Commands

Documentation. Index page

Documentation. Post

[askdesign]

Outstanding! Looks fabulous.

[ryelle]

On the homepage, should the h1 (blue) use Garamond? Should the h2s (green) use Inter, and if so, what weight?

[fcoveram]

Yes. h1 should be in Garamond (Heading 2, weight 400) and h2s in Inter (Heading 5, weight 600). I was planning to share the updated mockups, but I also wanted to hear your thoughts first.