Header: Using rem is a bad idea if the implementation is doing funky things

swisspost / design-system

The Swiss Post Design System pattern library for a consistent and accessible user experience across the web platform.

https://design-system.post.ch

Apache License 2.0

105 stars 13 forks source link

Header: Using rem is a bad idea if the implementation is doing funky things #2950

Open gfellerph opened 2 weeks ago

gfellerph commented 2 weeks ago

https://postchagt1.valhalla12.stage.jobs2web.com/content/apply/?locale=de_CH&extJobId=9341-de_CH

This page sets font-size: 10px as the base font size, which causes the header, using rem to be really tiny with font sizes down to 8px. Using em would be the safer choice here, since this unit is context dependent and could be set to 16px on a wrapping div, while that's not possible when using the 10px rem font size trick.

gfellerph commented 2 weeks ago

Investigate: is it possible to use a minmax function to define 16px as the minimum value but inherit the user agent specified font size if it's bigger?