6 ms·

This book recommends font sizes in `px`. Why are people still doing that? Me and my high DPI monitor hate you. Use relative sizing in `em`, or even just actual

This book recommends font sizes in `px`. Why are people still doing that? Me and my high DPI monitor hate you. Use relative sizing in `em`, or even just actual `cm`.

arp242 3y ago
Browsers don't treat "px" as actual pixels the monitor renders. em "relative sizing" is still "relative to some pixel value". The default is 16px so 1.1em is just the same as 17.6px. "cm" is also defined to be a certain number of px. The website has no idea if you're using a high DPI monitor or just zoomed out to 25%. To say "always appear as exactly 1cm to the user" would obviously not be desired as you would lose the ability to zoom.
- boxed 3y ago
  Or in other words: people have misused px so bad it now literally does not mean px anymore because then the web would be unusable.
  - arp242 3y ago
    No; it never really meant "exactly one screen pixel". Even the CSS1 specification from 1996 doesn't say that: "If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees." Doing something like this is the only way a single website can work across a wide range of screen sizes, DPIs, zoom levels, and things like that.
    - ryandrake 3y ago
      I think this entire thread demonstrates why designers should not even be specifying text size. We should make better use of user-defined preferences, and browsers should make setting them up more prominent. Designers sitting in offices 3000 miles away from me should not be deciding how my browser renders text for me to look at.
      - arp242 3y ago
        You can't make any design with purely "user defined preferences" because none of the metrics will be reliable and if the settings deviate too far from the average things get all wonky pretty quickly, even for fairly simple designs.
  - TheFuzzball 3y ago
    A pixel is not a pixel, PPK, 04/2010 - https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_...
- bruce343434 3y ago
  I'd say absolute sizes would be desirable for e.g. displaying the true size of a real life object, like an A4 page or a coin.
  - culi 3y ago
    then you would utilize the @print media selector and probably rely on `in`, `cm`, or `mm`. Not `px`, `em`, or `rem`
    - TheFuzzball 3y ago
      Having tried to print a physically-accurate scale on a non-commercial printer I would be surprised if a 1x1inch box actually measures the same in real life.
      - chrismorgan 3y ago
        I’m confused and not sure what you mean. The device knows what size it’s printing at (e.g. A4 which is 210×297mm). One some devices with bad feeders you might get local error up towards 1% in the feed direction (probably <1‰ in the perpendicular), but on decent printers it’ll always be well below 1%. If what you printed wasn’t accurate, something else was at play.
        TheFuzzball 3y ago
        Yeah it knows it's printing A4, but it can't print edge-to-edge, if you print a black rectangle the white borders are not a uniform size. If you created a document using an A4 template and measured objects within this document using millimetres, when printed the objects would not be printed at exactly that size. I know this because I've tried to do exactly that, and tried various permutations - on my specific printer I found that the warping was sometimes non-linear along the vertical axis! Maybe I've just got a particularly crap printer... Oh, Brother!
        chrismorgan 3y ago
- kevincox 3y ago
  > The default is 16px The default is absolutely not 16px. 16px is a common default value but different browsers and devices will have different defaults and most browsers will let the user customize their font size. By assuming that 1em == 16px you are ignoring the user's preference and likely making the text hard for them to read. https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/ https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-... 1rem == the font size of :root and 1em == the font size of the current element. It is true that these have some equivalent in pixels and 1rem very often is 16px. But that isn't guaranteed and shouldn't be assumed. You should respect the user's preferred font size.
  - arp242 3y ago
    > You should respect the user's preferred font size. This is impossible because what's desired depends on the font. Of course I can foresee the "we should respect the user's preferred font" response, but that's also impossible because you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot. This is also the problem with "respecting the font size". Never mind the aesthetical reasons for choosing a different font of course. This is why browsers have zoom, which solves the problem without tons of downsides. It's not always perfect, but much more manageable for everyone. Firefox can set a default zoom level too, and it remembers the zoom level per-site. For all practical purposes the default is 16px. All browsers ship with that as a default, and those that don't should be doing that. This entire feature is fundamentally broken and a holdover from the past.
    - kevincox 3y ago
      I think you have some good points, but others just don't make sense. > you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot Your site breaks so you make the text too small for the user to read? Browsers also have accessibility options to override website's custom fonts. So your site is broken either way, best to fix it an let the user have their preferred experience than mitigate it for some users and leave other users broken. > This is why browsers have zoom, which solves the problem without tons of downsides Zoom is great as well. But what downsides does it avoid? If the user wants their text wider your layout that assumes a max width for text is still going to break. The main downside that it avoids is web developers assuming that 12px text is easy to read. I could argue that zoom is a hack to mitigate websites that use px for things that need to be readable. It scales px, which fixes a problem that wouldn't exist in the first place if the developer just used em. > All browsers Not all browsers. But most common browsers. But I think at the end is what is the point of all of this? You are dismissing an approach with clear upsides without arguing what advantages the px approach brings. Sure, maybe most browsers are 1rem == 16px and maybe zoom is a good enough mitigation. But what advantage do you get by relying on this? I think you are right that browsers have done lots of good work to mitigate sites that set the body text to 12px, but it still seems that doing that doesn't have any advantages over just using em.
Brajeshwar 3y ago
I think this is OK. Eventually, this has to have a content. For instance, I still tinker a bit here and there with designs (and the code) and I tend to set the :root as in pixel and then derive the r/em from there. That way, I know where the primary pivot point for me is to the size of the type. I believe, Browsers these days, are smart enough to let you zoom your interface up/down.
BoppreH 3y ago
I've just finished reading Refactoring UI, and the author has a good point against `em`: nested uses lead to fragmented sizes. Let's say you have a fixed list of font sizes (and you probably want to), that goes like this: 0.75em, 0.875em, 1em, 1.25em, and 1.5em. It's all good if you have an element with `font-size: 1.25em`, because that's on the scale. But if a nested element has 0.875em, it'll actually be 1.25*0.875 = 1.09375em, because it'll be relative to the parent font size. So if you don't want your UI to have 17 different font sizes with fractional pixels, "absolute" units like px or rem are preferable. They still don't map 1:1 to screen pixels, so it shouldn't be a problem for high DPI displays.
- arp242 3y ago
  The "rem" unit fixes that: it's "relative em" and relative to the root rather than parent. It's supported everywhere (even IE) and for new projects you should probably always use "rem" and never "em".
  - BoppreH 3y ago
    You gotta love CSS naming, where "relative em" is the version of "em" that is not relative to the parent.
    - kaelig 3y ago
      That would have been a fun one, but rem stands for "root em"!
      - BoppreH 3y ago
        That's weird, I confirmed it on https://drafts.csswg.org/css-values https://drafts.csswg.org/css-values before posting that comment, but now I can't find it anymore. Thanks for the correction.
jjcm 3y ago
cm isn’t a responsive or relative size, fyi. It’s fixed to 37.8px. It doesn’t change with the size / dpi of your monitor. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

This book recommends font sizes in `px`. Why are people still doing that? Me and my high DPI monitor hate you. Use relative sizing in `em`, or even just actual `cm`.

arp242 3y ago

Browsers don't treat "px" as actual pixels the monitor renders. em "relative sizing" is still "relative to some pixel value". The default is 16px so 1.1em is just the same as 17.6px. "cm" is also defined to be a certain number of px. The website has no idea if you're using a high DPI monitor or just zoomed out to 25%. To say "always appear as exactly 1cm to the user" would obviously not be desired as you would lose the ability to zoom.

boxed 3y ago
Or in other words: people have misused px so bad it now literally does not mean px anymore because then the web would be unusable.
- arp242 3y ago
  No; it never really meant "exactly one screen pixel". Even the CSS1 specification from 1996 doesn't say that: "If the pixel density of the output device is very different from that of a typical computer display, the UA should rescale pixel values. The suggested reference pixel is the visual angle of one pixel on a device with a pixel density of 90dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is about 0.0227 degrees." Doing something like this is the only way a single website can work across a wide range of screen sizes, DPIs, zoom levels, and things like that.
  - ryandrake 3y ago
    I think this entire thread demonstrates why designers should not even be specifying text size. We should make better use of user-defined preferences, and browsers should make setting them up more prominent. Designers sitting in offices 3000 miles away from me should not be deciding how my browser renders text for me to look at.
    - arp242 3y ago
      You can't make any design with purely "user defined preferences" because none of the metrics will be reliable and if the settings deviate too far from the average things get all wonky pretty quickly, even for fairly simple designs.
- TheFuzzball 3y ago
  A pixel is not a pixel, PPK, 04/2010 - https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_...
bruce343434 3y ago
I'd say absolute sizes would be desirable for e.g. displaying the true size of a real life object, like an A4 page or a coin.
- culi 3y ago
  then you would utilize the @print media selector and probably rely on `in`, `cm`, or `mm`. Not `px`, `em`, or `rem`
  - TheFuzzball 3y ago
    Having tried to print a physically-accurate scale on a non-commercial printer I would be surprised if a 1x1inch box actually measures the same in real life.
    - chrismorgan 3y ago
      I’m confused and not sure what you mean. The device knows what size it’s printing at (e.g. A4 which is 210×297mm). One some devices with bad feeders you might get local error up towards 1% in the feed direction (probably <1‰ in the perpendicular), but on decent printers it’ll always be well below 1%. If what you printed wasn’t accurate, something else was at play.
      - TheFuzzball 3y ago
        Yeah it knows it's printing A4, but it can't print edge-to-edge, if you print a black rectangle the white borders are not a uniform size. If you created a document using an A4 template and measured objects within this document using millimetres, when printed the objects would not be printed at exactly that size. I know this because I've tried to do exactly that, and tried various permutations - on my specific printer I found that the warping was sometimes non-linear along the vertical axis! Maybe I've just got a particularly crap printer... Oh, Brother!
        chrismorgan 3y ago
kevincox 3y ago
> The default is 16px The default is absolutely not 16px. 16px is a common default value but different browsers and devices will have different defaults and most browsers will let the user customize their font size. By assuming that 1em == 16px you are ignoring the user's preference and likely making the text hard for them to read. https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-change-the-default-16px-font-size-in-their-browser/ https://nicolas-hoizey.com/articles/2016/03/02/people-don-t-... 1rem == the font size of :root and 1em == the font size of the current element. It is true that these have some equivalent in pixels and 1rem very often is 16px. But that isn't guaranteed and shouldn't be assumed. You should respect the user's preferred font size.
- arp242 3y ago
  > You should respect the user's preferred font size. This is impossible because what's desired depends on the font. Of course I can foresee the "we should respect the user's preferred font" response, but that's also impossible because you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot. This is also the problem with "respecting the font size". Never mind the aesthetical reasons for choosing a different font of course. This is why browsers have zoom, which solves the problem without tons of downsides. It's not always perfect, but much more manageable for everyone. Firefox can set a default zoom level too, and it remembers the zoom level per-site. For all practical purposes the default is 16px. All browsers ship with that as a default, and those that don't should be doing that. This entire feature is fundamentally broken and a holdover from the past.
  - kevincox 3y ago
    I think you have some good points, but others just don't make sense. > you don't know the font metrics of that are and then it turns out that stuff breaks because the font is tons wider or whatnot Your site breaks so you make the text too small for the user to read? Browsers also have accessibility options to override website's custom fonts. So your site is broken either way, best to fix it an let the user have their preferred experience than mitigate it for some users and leave other users broken. > This is why browsers have zoom, which solves the problem without tons of downsides Zoom is great as well. But what downsides does it avoid? If the user wants their text wider your layout that assumes a max width for text is still going to break. The main downside that it avoids is web developers assuming that 12px text is easy to read. I could argue that zoom is a hack to mitigate websites that use px for things that need to be readable. It scales px, which fixes a problem that wouldn't exist in the first place if the developer just used em. > All browsers Not all browsers. But most common browsers. But I think at the end is what is the point of all of this? You are dismissing an approach with clear upsides without arguing what advantages the px approach brings. Sure, maybe most browsers are 1rem == 16px and maybe zoom is a good enough mitigation. But what advantage do you get by relying on this? I think you are right that browsers have done lots of good work to mitigate sites that set the body text to 12px, but it still seems that doing that doesn't have any advantages over just using em.

Brajeshwar 3y ago

I think this is OK. Eventually, this has to have a content. For instance, I still tinker a bit here and there with designs (and the code) and I tend to set the :root as in pixel and then derive the r/em from there. That way, I know where the primary pivot point for me is to the size of the type. I believe, Browsers these days, are smart enough to let you zoom your interface up/down.

BoppreH 3y ago

I've just finished reading Refactoring UI, and the author has a good point against `em`: nested uses lead to fragmented sizes. Let's say you have a fixed list of font sizes (and you probably want to), that goes like this: 0.75em, 0.875em, 1em, 1.25em, and 1.5em. It's all good if you have an element with `font-size: 1.25em`, because that's on the scale. But if a nested element has 0.875em, it'll actually be 1.25*0.875 = 1.09375em, because it'll be relative to the parent font size. So if you don't want your UI to have 17 different font sizes with fractional pixels, "absolute" units like px or rem are preferable. They still don't map 1:1 to screen pixels, so it shouldn't be a problem for high DPI displays.

arp242 3y ago
The "rem" unit fixes that: it's "relative em" and relative to the root rather than parent. It's supported everywhere (even IE) and for new projects you should probably always use "rem" and never "em".
- BoppreH 3y ago
  You gotta love CSS naming, where "relative em" is the version of "em" that is not relative to the parent.
  - kaelig 3y ago
    That would have been a fun one, but rem stands for "root em"!
    - BoppreH 3y ago
      That's weird, I confirmed it on https://drafts.csswg.org/css-values https://drafts.csswg.org/css-values before posting that comment, but now I can't find it anymore. Thanks for the correction.

jjcm 3y ago

cm isn’t a responsive or relative size, fyi. It’s fixed to 37.8px. It doesn’t change with the size / dpi of your monitor. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...