Minimum Font Size Checker

Simple script to highlight text that is rendered with a font smaller than certain threshold. .
Copy and paste the snippet in the console of any website and run the following commands.
To highlight the small fonts run:

凸.SmallFontChecker.highlight()

This will highlight in purple color all the text that is smaller than 14 pixels.
Is also possible to add two parameters: Minimum font size and color. For example:

凸.SmallFontChecker.highlight("13px", "red")

To restore to the original version you can run the command

凸.SmallFontChecker.reset()

After restoring the page you can run the highlight command with different parameters.
If the page adjust fonts size using proportional units (rem, em, vw, vh, vmin or vmax) you need to re-run the highlight command at every screen size that you would like to check.

How it Works

• First the script traverse the entire DOM and check all elements to see if the font size is under the threshold. To do so it uses the global method getComputedStyle (Documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle)
• If the font is under the threshold, it saves the inline style in "sfc-originalStyle" attribute so that the original style can be restored
• Second it traverse the DOM again and change the font size and font color adding inline stiles.
• It is two steps process because children elements are influenced by parent element the script would fail detecting small font in children
• The recursive function to traverse the DOM is inspired by (copied from?) a script of Douglas Crockford (video)

The script

Copy and paste the code in the console, then run "凸.SmallFontChecker.highlight()"
Git address: https://gist.github.com/lucamug/559928a374b9d103719152abe4d36cf7