We see many people setting html { font-size: 62.5%; } in their Frontend Mentor projects without considering the implications. Here's why you might want to reconsider this approach 👇

Firstly, what does html { font-size: 62.5% } do? The default browser font size is 16px. 62.5% of 16px = 10px. Now, 1rem equals 10px, so 1.6rem = 16px. This is often done to make rem-based sizing "decimal-friendly."

The problem? Setting html { font-size: 62.5%; } overrides user font settings and can hurt accessibility, if not properly managed. Instead of optimizing for math over accessibility, consider these alternative approaches that avoid overriding browser default font sizes...