search

Energy-Saving-Trust / Design-System

A library of reusable components, patterns, and examples that embrace modern product design practices. Additionally, a collection of in-house standards, guidelines, and principles for creating inclusive, user-friendly, and effective products and services.
https://design-system.est.org.uk
1 stars 0 forks source link

Accordion - reduce from H2 to H3 #40

Closed elisa-est closed 2 months ago

elisa-est commented 3 months ago

I noticed the font size on accordions is currently and H2. This should be changed to H3 for Desktop as I see that's what we currently have the corporate site, and seems like a good approach. Unless we have a compelling reason for having them be H2s.

For mobile they should be even smaller H4 or H5. This ties into a larger issue around needing to scale down typography for mobile.

https://energysavingtrust.org.uk/about-us/contact-us https://energysavingtrust.org.uk/advice/solar-water-heating/

pip-chd commented 2 months ago

Hey I'm a bit confused on this one. According to Figma we're currently using the h4 font size on accordions, not h2. Not sure if the typography sizes on Figma need updating? Currently h4s are 25.5px, as is the accordion text!

pip-chd commented 2 months ago

For clarity here as well - whether we use h2 or h3s as actual html elements depends on the surrounding elements and titles as they need to appear in hierarchical order for accessibility. We can change the sizing however if the size of the accordion text is wrong.

elisa-est commented 2 months ago

Latest update: The underlying issue here is related to needing a scaled down version of the typography for smaller screens.

Karol is working on this now: https://typography-guidelines.design-system-test-preview.pages.dev/guidelines/typography

I will close this ticket for now as this will be addressed as part of that update.