6 ms·

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),

by nhanb 3y ago

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).

LanternLight83 3y ago
I've always loved the site too c:
notRobot 3y ago
Here's an explanation of this expression from Phind: https://www.phind.com/search?cache=bd161914-4d18-4758-b540-246f42d79a4a https://www.phind.com/search?cache=bd161914-4d18-4758-b540-2...
- andy_ppp 3y ago
  Make the font scale from a minimum of 1em to 1.3% of the screen width with a maximum width of 1.3em?
- hgsgm 3y ago
  Amazing how many words is uses to say nothing. The only mysterious parts of the expression are how the em and wv units work.
eajakobsen 3y ago
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.
- nhanb 3y ago
  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.
- hgsgm 3y ago
  That's less reasable bwcause the order of arguments is mysterious.
- itsuka 3y ago
  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.html https://adrianroselli.com/2019/12/responsive-type-and-zoom.h...
- Poppys 3y ago
  https://utopia.fyi/blog/designing-with-fluid-type-scales https://utopia.fyi/blog/designing-with-fluid-type-scales This is a good write up of using clamp and fluid type
account42 3y ago
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.
- unosama 3y ago
  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
- nhanb 3y ago
  > 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 3y ago
    > 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.

by nhanb 3y ago

LanternLight83 3y ago

I've always loved the site too c:

notRobot 3y ago

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

andy_ppp 3y ago
Make the font scale from a minimum of 1em to 1.3% of the screen width with a maximum width of 1.3em?
hgsgm 3y ago
Amazing how many words is uses to say nothing. The only mysterious parts of the expression are how the em and wv units work.

eajakobsen 3y ago

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.

nhanb 3y ago
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.
hgsgm 3y ago
That's less reasable bwcause the order of arguments is mysterious.
itsuka 3y ago
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.html https://adrianroselli.com/2019/12/responsive-type-and-zoom.h...
Poppys 3y ago
https://utopia.fyi/blog/designing-with-fluid-type-scales https://utopia.fyi/blog/designing-with-fluid-type-scales This is a good write up of using clamp and fluid type

account42 3y ago

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.

unosama 3y ago
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
nhanb 3y ago
> 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 3y ago
  > 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.