/    Sign up×
Community /Pin to ProfileBookmark

Determine Font Sizes for Common Screens – Account for Pixel Density (PPI)

Copy linkTweet thisAlerts:
Sep 16.2022

Hi, just trying to determine modern best practices for previewing, anticipating, and determining best font sizes to use for web design these days.

We can run analytics on a site, or view global stats, to get common screen RESOLUTIONS for our sites (e.g, 1920×1080, 1366×768, etc). And we can use developer tools for simulating this and checking 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.

    to post a comment
    CSSFull-stack Developer

    3 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @tracknutSep 16.2022 — I'm not the best to explain font sizes in detail, but a couple points:

    1) PPI of the display is factored out in the web via virtualizing the definition of a pixel, To my understanding a pixel on the web is an arbitrary size based on normalizing every display to 96ppi. In other words, you don't need to worry about PPI.

    2) Screen size and window size is somewhat of a red herring in your discussion, as what counts is the size of the text on either. Sizes of windows and displays is a matter handled by flexible layouts, or media queries when necessary, not by font sizes.

    3) The user has already given you his favorite font size, it is 1em. So if you're trying to be the most helpful for him, use 1em or multiples thereof for larger or smaller needs.
    Copy linkTweet thisAlerts:
    @SempervivumSep 16.2022 — @jethro#1647040

    Additionally please note that CSS takes into account that there are low res and high res display existing:

    https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

    Thus a pixel in CSS is not equal to a physical pixel of the display. The pixels are kind of normalized as @tracknut pointed out.
    Copy linkTweet thisAlerts:
    @jethroauthorSep 16.2022 — Thanks for the responses here. Maybe I'm not using the proper terms, or need to clarify here.

    When speaking about the resolution of a screen (eg., 1920px x 1080px) I'm referencing what the actual viewport of the device is, or maybe the 'CSS Resolution' as opposed to what the device's actual physical screen resolution is. On many high-density displays (typically mobile/tablet/laptop) the actual device resolution is not used as everything would be far too small to view. So physical screen pixels are 'combined' to create a 'css pixel' so things view at reasonable sizes.

    So for my example, let's say we have a 13" laptop with a 'css resolution' or viewport of 1920 x 1080. Next to it, we have a 24" monitor that also has a css resolution or viewport of 1920 x 1080. Both of these are common devices & resolutions.

    If I add a div that is exactly 1920px wide, it will exactly fill the width of each screen with no overflow (let's leave scrollbars out for sake of simplicity). On my 13" laptop, that DIV will be about 11.5" wide if I measure on screen with a ruler. But on the 24" monitor, it will be over 20" wide. When I was speaking about common device densities of 145ppi and 96ppi, that is how many 'css pixels' would fit in an inch (not necessarily actual device pixels).

    In the same way, a font that renders out to 16px, even if just setting it to 1em while the user doesn't change his browser default of 16px, will look much smaller on the 13" laptop screen than it will on the 24" desktop monitor. As both have the same viewport (1920 x 1080), media queries affecting type will affect both equally. And the type will flow/wrap the same way on both screens, since both are displaying at 1920px wide.

    Does this help clarify the issue a bit better? If anyone has a laptop & desktop monitor, and can set them to the same resolution, it would be easy to see this...
    ×

    Success!

    Help @jethro spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.29,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...