Get all Font Sizes in use on a Web Page

While doing some testing on font hinting, I wanted an easy way to make a test page that had examples of every single font-size in use on a page. Pasting the following snippet into your DevTools console retrieves an Array of sorted font-size values …


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman

While doing some testing on font hinting, I wanted an easy way to make a test page that had examples of every single font-size in use on a page. Pasting the following snippet into your DevTools console retrieves an Array of sorted font-size values in use on a page.

(function() {
let fontSizes = new Set();

document.querySelectorAll("*").forEach(function( node ) {
fontSizes.add( window.getComputedStyle( node ).getPropertyValue("font-size") );
});

return Array.from( fontSizes ).sort(function(a, b) {
return parseFloat(a) - parseFloat(b);
});
})();

For example, this page returned:

["10.5px", "11px", "12px", "13px", "15px", "15.7368px", "16px", "16.9474px", "18.6875px", "19.2px", "21.7895px", "22.4px", "23px", "100.35px"]

⚠️ Careful if you use vw units, these are computed values only.

I’ve also filed this as a possible enhancement for GlyphHanger.


This content originally appeared on Zach Leatherman and was authored by Zach Leatherman


Print Share Comment Cite Upload Translate
APA
Zach Leatherman | Sciencx (2022-12-01T20:33:59+00:00) » Get all Font Sizes in use on a Web Page. Retrieved from https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/.
MLA
" » Get all Font Sizes in use on a Web Page." Zach Leatherman | Sciencx - Thursday January 10, 2019, https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/
HARVARD
Zach Leatherman | Sciencx Thursday January 10, 2019 » Get all Font Sizes in use on a Web Page., viewed 2022-12-01T20:33:59+00:00,<https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/>
VANCOUVER
Zach Leatherman | Sciencx - » Get all Font Sizes in use on a Web Page. [Internet]. [Accessed 2022-12-01T20:33:59+00:00]. Available from: https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/
CHICAGO
" » Get all Font Sizes in use on a Web Page." Zach Leatherman | Sciencx - Accessed 2022-12-01T20:33:59+00:00. https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/
IEEE
" » Get all Font Sizes in use on a Web Page." Zach Leatherman | Sciencx [Online]. Available: https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/. [Accessed: 2022-12-01T20:33:59+00:00]
rf:citation
» Get all Font Sizes in use on a Web Page | Zach Leatherman | Sciencx | https://www.scien.cx/2019/01/10/get-all-font-sizes-in-use-on-a-web-page/ | 2022-12-01T20:33:59+00:00
https://github.com/addpipe/simple-recorderjs-demo