Zach’s ugly mug (his face) Zach Leatherman

Get all Font Sizes in use on a Web Page

January 10, 2019 On Twitter (archived)

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.


< Newer
Build your own Blog from Scratch using Eleventy
Older >
Working Draft Podcast: On Tour @ #perfnow 5/6

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)