2

Just trying to determine modern best practices for previewing, anticipating, and determining best font sizes to use for web design these days while accounting for the different types of displays the average user would be using.

We can run analytics on a site, or view global stats, to get common screen RESOLUTIONS for our sites (e.g, 1920x1080, 1366x768, etc). And we can use developer tools for simulating this and checking and adjusting site layout/flow issues. But this is only half the story, as we can't tell the screen sizes people are using for these resolutions.

So, for instance, if looking at 1920 x 1080 resolution (most common), that could be displaying on a small 13"-15" laptop screen with high PPI (pixel density), or a big 24"-27" desktop monitor with low PPI. So a font that renders at 20px might look a bit small on the laptop screens, but kind of huge & goofy on a big desktop screen.

I did some research and found that common laptop screens these days average about 145ppi when factoring common screen sizes & resolutions. But common desktop monitors are about 96ppi. This is quite a large difference to account for or try to preview in some manner.

  • Are there techniques or websites that allow you to 'simulate' on your current screen common sizes that users might actually see?

  • What are good modern best practices for approaching this?

NOTE: I've purposely left out mobile/tablet devices for the sake of simplicity, and because there are not as big of variances in those devices.

Improve this question

1 Answer 1

Reset to default
1

For the purposes you request, consider visiting existing sites and analyzing the font-size they deploy. Just resizing your browser window (on a desktop or laptop) let's you experience the responsiveness of the site. The developer view of your browser (press F12) gives access to the styles in use.

Doing the above you will probably notice that the response web frameworks used, change the font-size less than 10% between the smallest and largest screen sizes.

Between young and old people we find eyesight differences, resulting in the need to change resolution in the [browser on] the device in use. So in addition to the font-sizes you request to select, the user is able to zoom in and out as needed.

Apart from the font size, there is also the size of clickable / touchable elements on your screen like cards and buttons. Small font-sizes can result in very small buttons that are hard to "click" on a touchscreen without zooming in.

Finally you could consider the "print view" (for PDF generation by the user, or plain printing on paper). In Chrome (v105 tested) the print view does not reflect the user's zoom selection, so your design choices matter. Press Ctrl+P in your browser and have a look at the print preview.

In summary, my answer is that there is a band of font-sizes that are 'normal' and reasonable to use. Browsers allow the end-users to make personal adjustments according to their needs.

Improve this answer
2
  • Thanks for the answer. Your assessment, however, assumes the common approach of using media queries to adjust font sizes based on viewport width, which is calculated by the device's 'CSS resolution' (e.g, not necessarily screen's physical pixel resolution). My question is more about how to approach and/or preview the fact that a certain CSS resolution viewport width may be viewed on a tiny 13" laptop or a big 27" monitor, resulting in vastly different actual measured font sizes (i.e, if you measured with a ruler).
    – Kenny J
    Commented Sep 22, 2022 at 18:11
  • No, my bottom line was: it doesn't matter because people will use browser zoom. For example, I see young people read tiny text on their high-PPI (mobile) screens while I would have to zoom-in significantly in order to read it. The same is true for all devices, as long as the app used supports zooming.
    – Ramon
    Commented Sep 24, 2022 at 10:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.