H2 and H3 headings too similar visually

[gabalafou]

No description provided.

[smeragoel]

I believe the solution is to adopt a medium contrast type scale, which provides balanced contrast between heading sizes without overly large jumps. A type scale refers to the multiple by which font sizes increase. You can find more about typographic scales here: Typographic Scales.

For content-heavy websites like ours, a medium contrast scale is ideal, typically ranging from 1.2x - 1.33x. The larger the scale, the more contrast between heading sizes. However, I don’t want a drastic deviation from our current font sizes, as this could disrupt the look and feel of projects using our theme.

Constraints

• Minimum size of 16px for accessibility.
• Avoid major deviations from the current sizes.

Given these constraints, we're limited to a scale of approximately 1.2x. I’ve used the Minor Third scale (1.2x) and rounded the values to the nearest even whole number, with the Major Third scale (1.25x) added for reference:

Heading	Current Size (px)	Current Scale	Major Third (1.25x)	Minor Third (1.2x, rounded off)	Suggested Size (px)	Calculated Suggested Scale
H1	40	-	49	40	42	-
H2	32	1.25	39	33	34	1.23
H3	28	1.143	31	28	28	1.214
H4	24	1.167	25	23	24	1.167
H5	20	1.2	20	19	20	1.2
H6	18	1.111	16	16	16	1.25

Summary:

• Except for the H4 to H3 transition, all headings have a minimum of a 1.2x increase, which is an improvement over the current scale.
• I also suggest using a 600 weight for better legibility across headings. I added these details and some examples in Figma: Updated Heading Typography
• H6 is now set to 16px, the same size as the body text. The increased font weight does help differentiate it from body text, but I would like to discuss whether this distinction is sufficient.

Here’s a final comparison of current vs. suggested values:

Heading	Current Size (px)	Current Size (rem)	Suggested Size (px)	Suggested Size (rem)
H1	40	2.500	42	2.625
H2	32	2.000	34	2.125
H3	28	1.750	28	1.750
H4	24	1.500	24	1.500
H5	20	1.250	20	1.250
H6	18	1.125	16	1.000

[smeragoel]

This was discussed today and the final recommendations of new font size and increased font weight was accepted within the team. This is now ready for dev 💻

Final Recommendations:

Heading	Current Size (px)	Current Size (rem)	Suggested Size (px)	Suggested Size (rem)
H1	40	2.500	42	2.625
H2	32	2.000	34	2.125
H3	28	1.750	28	1.750
H4	24	1.500	24	1.500
H5	20	1.250	20	1.250
H6	18	1.125	16	1.000

Font Weight: 600

And also some designs and examples in Figma: Updated Typography (#97)