0

I would like to gather some statistics about what the range of default font sizes are, that users set in their browsers if they do not wish to use the standard 16px.

This information might be helpful in deciding up to which font size our layout needs to not break.

There are a lot of similar-ish questions on SO that ask for the effective font-size on the body element, but that is of not much use to me, as I'm interested in collecting data about the browsers default font size before CSS kicks in.

Or does anybody know if statistics like these already exist?

Michael Große
  • 1,818
  • 1
  • 16
  • 20
  • Possible duplicate of [How often is the default font size in the browser not 16px?](https://stackoverflow.com/questions/3852734/how-often-is-the-default-font-size-in-the-browser-not-16px) – Adam Nov 14 '19 at 19:48

2 Answers2

1

The best practice is to set the font sizes in ems which scale accordingly to the browser font size, but you can read this article : Users DO Change Font Size

Caro
  • 612
  • 5
  • 10
0

This is actually one that isn't as simple as you may think as their is no JavaScript hook etc. you can call.

The way to get a reasonably accurate value is:-

  1. create a <div> that has opacity:0 and set padding to 0.
  2. Add a word that is in a specific font that you know the exact dimensions of, a word that can fit on one line on a small screen even at 200% font size.
  3. Add the word to that div.
  4. Set the font size of that div to be 1em or 100% (so that it scales with user font size)
  5. Measure the width of that div in pixels with your browser set to normal font size.
  6. Then when the user loads the page measure the width of the div and compare it to the size you know is 16px / default.
  7. You can then use the width of the div (via JavaScript) to estimate the font size they are using. (so if it is normally 160px wide and the user has 200px wide you can estimate that they are using 20px font size or 125% (200 / 160).)

The above is reasonably accurate, it isn't perfect due to different browsers handling kerning slightly differently but would be sufficient for most needs.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64