Honestly your "scaling" fonts are still basically pixel based, and as such a giant middle finger to users with accessibility needs. In particular the garbage px media queries which could lead to font size mismatch and/or failing to scale for users who expect it!

A good rule of thumb is that if you're using PX, you're doing it all wrong!

Rather than all that pointless math and pointless messing around, just declare in EM and be done with it. You're taking something simple, and making it hard.

And if you REALLY wanted to size off of a scale, set that scale on BODY and let EM do it's job inheriting. You don't need all that junk.

I mean seriously, if you really want those pointless and annoying resize queries, just:

@media (min-width:22em) { html { font-size:0.8em; }}

@media (min-width:48em) { html { font-size:1em; }}

@media (min-width:64em) { html { font-size:1.2em; }}

And then where you have all those pointless calc(), just use EM! Not the goofy broken "REM", just plain ordinary everyday EM would do everything you're wasting all that extra work on.

Without telling non-standard font-size users to go **** themselves the way your pixel measurements do.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store