"Modular scale, ratio 1.25" is a nice thing to put in a design doc. When you inherit a site, or want to match one, you rarely get that doc. You get a page and DevTools.

Here is how I measure the scale a page actually uses, what it looked like on three demo sites I built, and where the single "ratio" number stops being useful.

Step 1: list the sizes, weighted by text

Clicking headings one by one in DevTools misses sizes and tells you nothing about which size carries the body text. Instead, walk every visible text node and add up characters per computed font size. Paste this in the console:

( ( ) => { const sizes = new Map ( ) ; const walk = document . createTreeWalker ( document . body , NodeFilter . SHOW_TEXT ) ; while ( walk . nextNode ( ) ) { const text = walk . currentNode . textContent . trim ( ) ; const el = walk . currentNode . parentElement ; if ( ! text || ! el . checkVisibility ( ) ) continue ; const px = Math . round ( parseFloat ( getComputedStyle ( el ) . fontSize ) ) ; sizes .…