WingNews logo WingNews
top | item 35567520

(no title)

nhanb | 2 years 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).

discuss

order

account42|2 years 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.

nhanb|2 years 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.

unosama|2 years 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

eajakobsen|2 years 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.

itsuka|2 years 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.h...

nhanb|2 years 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|2 years ago

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