[nhanb]

I've always liked ExoticSilicon's design, but not until this post did I realize their smart bit of CSS for default font size:

  font-size: min(max(1em, 1.3vw), 1.3em);

Which explains why it looks just right on my high-DPI Chromebook even though I haven't configured a big enough default font size for the browser.

This is going to be the default font-size for all of my websites now (preceded by a fallback for maximum compatibility of course).

[account42]

I absolutely hate this. Viewport width has nothing to do with DPI and should not affect the font size. I didn't get a larger monitor just so that everything can waste more space with giant text.

[nhanb]

> I didn't get a larger monitor just so that everything can waste more space with giant text.

That's what the outer min() is for: it makes sure the font size caps out at 1.3em which usually translates to 16 x 1.3 = 20.8px, which is well within the recommended size range for prose anyway.

What that whole snippet does boils down to exactly what they said in the article:

> The main global stylesheet uses the browser default font size, smoothly scaled up to 130% on higher-resolution displays as the baseline for the body text of the whole document.

On a low-dpi screen, nothing changes. On a high-dpi one, if you haven't set your browser text size to something larger, this snippet saves you from tiny unreadable text. Also note that ctrl+ and ctrl- to zoom still work just fine. It's not as dramatic a change as the sibling comment said. You can try it out on their site to see for yourself.

[account42]

> That's what the outer min() is for: it makes sure the font size caps out at 1.3em which usually translates to 16 x 1.3 = 20.8px, which is well within the recommended size range for prose anyway.

Recommended by people who only read twitter-length content maybe.

> On a low-dpi screen, nothing changes.

Repeat after me: viewport width has nothing to do with DPI.

This absolutely does change the font size on large low DPI screens.

If you want to scale with DPI you don't have to do anything. CSS already does that for you by default. Even "px" is scaled by DPI in CSS.

> On a high-dpi one, if you haven't set your browser text size to something larger, this snippet saves you from tiny unreadable text.

Yes, don't do that. Respect the users settings as they are set or give up any pretense that you are doing so and just set reasonable fixed font size.

> Also note that ctrl+ and ctrl- to zoom still work just fine. It's not as dramatic a change as the sibling comment said. You can try it out on their site to see for yourself.

That you can fuck things up even worse does not make this "hack" good.

[unosama]

That's the thing. These hacks alwways end up negatively impacting some edge cases. I found a site once that used JS to autosize the text... as a result you couldn't manually resize with ctrl - and ctrl+.. It's better to stick to standards

[eajakobsen]

If you want it to be even more readable you could do the following:

    font-size: clamp(1em, 1.3vw, 1.3em);

I would also consider using `rem` instead of `em` incase you want to use it anywhere other than the root element.

[itsuka]

I don't see any issues with this particular code (although for larger sizes, there may be an accessibility issue related to zooming). In general, I would recommend avoiding the use of vw-only units because the computed value may not change with zoom.

I learned this from https://adrianroselli.com/2019/12/responsive-type-and-zoom.h...

[nhanb]

I would only use this kind of thing on the root element, then size all other elements relative to the root element e.g. h1 { font-size: 1.5rem; }. It's more manageable that way IMHO.

Thanks for the tip on clamp() by the way, TIL.

[Poppys]

https://utopia.fyi/blog/designing-with-fluid-type-scales

This is a good write up of using clamp and fluid type

[hgsgm]

That's less reasable bwcause the order of arguments is mysterious.

[notRobot]

Here's an explanation of this expression from Phind: https://www.phind.com/search?cache=bd161914-4d18-4758-b540-2...

[andy_ppp]

Make the font scale from a minimum of 1em to 1.3% of the screen width with a maximum width of 1.3em?

[hgsgm]

Amazing how many words is uses to say nothing.

The only mysterious parts of the expression are how the em and wv units work.

[LanternLight83]

I've always loved the site too c: