3 ms·

https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ https://www.joshwcomeau.com/css/surprising-truth-about-pixel... is a better bre

by diob 4y ago

https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ https://www.joshwcomeau.com/css/surprising-truth-about-pixel... is a better breakdown, it's nuanced.

soulofmischief 4y ago
I'm still not buying the conclusion. > In most cases, I think it makes more sense to use rems. This preserves the button's proportions, its aesthetics. And it reduces the risk of an overflow, if the button has a particularly long word. Actually, the most appropriate technique, if you are more concerned with overflow and are ok with resizing the button, is just to set a min-width property and padding property. This gives a consistent size for short-labelled buttons, and allows longer labels to seamlessly scale while achieving consistent padding. If you would rather button size never change, then your constraint should take place at the label length, and you should specify a font-size. In truth, user @jacobp100 is correct; it's best used as meant, which is solely for font-related properties.
- martyfmelb 4y ago
  I've struggled with maintaining ad-hoc rules for REMs and PX. In my experience, designers very rarely specify units on metrics and assume PX all the way. How do you feel about the coupling of "text-sized icons" to the size of text? Does an icon next to a label make the icon's size font-related in your view? My go-to heuristic lately is: "is this layout-related?" -> it gets the PX. "is this text-related?" gets REMs. Margins and padding are denoted "layout" -> PX.
  - soulofmischief 4y ago
    > How do you feel about the coupling of "text-sized icons" to the size of text? You got me there. :) This is one place where I break "convention", but only because I view icons as glyphs. So maybe the REM rule can be generalized to glyphs and not text. I typically just set icons to be 1rem. Any other size I typically specify in pixels however, as the coupling for me only makes sense as long as the glyph is glyph-sized. > Does an icon next to a label make the icon's size font-related in your view? Yeah, if it's an inline glyph. If the icon and label are vertically stacked however, I'm more inclined to use pixels.
RheingoldRiver 4y ago
I'd seen that article before, but I don't think I read the entire thing, and just now I noticed the trick about the CSS variables for approximate rem values, but in px. That's such a great idea!

by diob 4y ago

https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility/ https://www.joshwcomeau.com/css/surprising-truth-about-pixel... is a better breakdown, it's nuanced.

soulofmischief 4y ago

I'm still not buying the conclusion. > In most cases, I think it makes more sense to use rems. This preserves the button's proportions, its aesthetics. And it reduces the risk of an overflow, if the button has a particularly long word. Actually, the most appropriate technique, if you are more concerned with overflow and are ok with resizing the button, is just to set a min-width property and padding property. This gives a consistent size for short-labelled buttons, and allows longer labels to seamlessly scale while achieving consistent padding. If you would rather button size never change, then your constraint should take place at the label length, and you should specify a font-size. In truth, user @jacobp100 is correct; it's best used as meant, which is solely for font-related properties.

martyfmelb 4y ago
I've struggled with maintaining ad-hoc rules for REMs and PX. In my experience, designers very rarely specify units on metrics and assume PX all the way. How do you feel about the coupling of "text-sized icons" to the size of text? Does an icon next to a label make the icon's size font-related in your view? My go-to heuristic lately is: "is this layout-related?" -> it gets the PX. "is this text-related?" gets REMs. Margins and padding are denoted "layout" -> PX.
- soulofmischief 4y ago
  > How do you feel about the coupling of "text-sized icons" to the size of text? You got me there. :) This is one place where I break "convention", but only because I view icons as glyphs. So maybe the REM rule can be generalized to glyphs and not text. I typically just set icons to be 1rem. Any other size I typically specify in pixels however, as the coupling for me only makes sense as long as the glyph is glyph-sized. > Does an icon next to a label make the icon's size font-related in your view? Yeah, if it's an inline glyph. If the icon and label are vertically stacked however, I'm more inclined to use pixels.

RheingoldRiver 4y ago

I'd seen that article before, but I don't think I read the entire thing, and just now I noticed the trick about the CSS variables for approximate rem values, but in px. That's such a great idea!