[Hint] Base font-size

[ststimac]

🚀 Hint request

Check the base font size of a website and whether it's using relative units.

The best practice is to set the font-size on the html using % (or any other relative unit), and then set all the other elements to either em or rem which will be relative to the body size.

Description

What do you want webhint to test?

The hint should check to see if font-size is set on html in the CSS file and if it is, what unit of measurement is being used.

Are you willing to work on this?

I can write the documentation. Will need help writing the hint.

What should be tested exactly?

The Hint should pass if a relative unit is being used to set the font-size: ex, ch, em, rem and %.
The Hint should fail if anything else is being used, like pixels or viewport units.*

*Important note about viewport units:

viewport units aren’t relative units. I know they’re listed under relative units and described as such, but they don’t always act like relative units (resizing font sizes set with viewport units worked for me in Safari but not in Chrome and Firefox).

Relevant links

Any links to documentation, discussions, etc. relevant to the

proposed hint that motivated you to open this issue.

most browsers agreed on the default size of 16 pixels, but the user can change that. Let’s say someone has an impaired vision and sets their browser’s default font size to something larger. Setting the base font size in our CSS to pixels will overwrite their browser default font size setting. Instead of seeing most of the text at a larger font size, we now force them to read it at 16 pixels size. That’s because pixels are an absolute unit, not a relative one.

This Hint is important because it ensures that if users need to zoom in on a webpapge, the text on the page will scale accordingly and maintain readability.

All quotes in this are from https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/