[HN Gopher] PX or REM in CSS? Just Use REM
___________________________________________________________________
PX or REM in CSS? Just Use REM
Author : disadvantage
Score : 26 points
Date : 2022-12-03 19:35 UTC (3 hours ago)
(HTM) web link (austingil.com)
(TXT) w3m dump (austingil.com)
| [deleted]
| [deleted]
| sublinear wrote:
| Yeah hard disagree.
|
| Having fixed px values doesn't mean the page is less accessible.
| For sufficiently complex layouts you will always have to mix px,
| em, and rem.
|
| Examples of things that should not scale with the root font size
| and usually set with px/em are layout elements like headers,
| footers, etc. as well as components like buttons, labels, icons,
| etc. Those should only scale with screen size so the page doesn't
| turn into an incomprehensible mess.
| cosmotic wrote:
| Hard disagree. Those elements should all be easier to read when
| you scale the text size up. If your page can't scale without
| becoming an incomprehensible mess, then take it back to the
| design team.
| blep_ wrote:
| > components like buttons, labels
|
| ... components like _labels_ , which consist entirely of text,
| should not scale with the font size?
| shakna wrote:
| Absolutely disagree. What is the point of scaling and
| accessibility, if I can't make your labels, buttons and footers
| readable?
|
| I can't fix my sight, but you could adapt it so I'm not
| guessing.
| _greim_ wrote:
| This is probably not for every website, but an interesting trick
| is to set your root element font size to 1vw, which is 1% the
| width of the viewport.
|
| Then size everything using rems, including the width of your
| layout. The whole design scales with the width of your browser.
| Cyberdog wrote:
| So if you have one of those ridiculous ultrawide monitors, the
| text is very large, or if you have a vertically-mounted
| monitor, are using a smartphone held vertically, or just prefer
| to make your browser windows narrow, the text becomes very
| small?
|
| That sure is an interesting trick, all right.
| blumomo wrote:
| Can we use something like font-size:
| "calc(min(1vw, 1vh))";
|
| to solve problem you describe?
| evan_ wrote:
| In fact there's a `vmin` unit that does this calculation
| for you. (`vmax` as well)
| mikae1 wrote:
| _> `vmax` as well_
|
| Or even dvmax in this day and age.
| Kwpolska wrote:
| This might solve a few of the edge cases, but making the
| sizes of everything depend on your screen is a dumb idea.
| If I move my browser from my small laptop screen to my big
| external display, I expect to see more content, not larger
| fonts. My displays are set to scaling factors that are
| comfortable for me with most things I work with (HN's tiny
| fonts being a notable exception). Just set a reasonable
| size for things (a base font size of 1rem should be fine)
| and let me use my displays to the fullest.
| Etheryte wrote:
| I'm not buying the font size argument at all. When you zoom in or
| out on a webpage, your base font size isn't changed, the whole
| page is zoomed instead, making this whole discussion moot. I
| would wager many (most?) nontechnical users don't even know they
| can change the base font size.
| muspimerol wrote:
| Exactly, zooming and base font size are two fundamentally
| different things. Forcing users to zoom to get a legible text
| size is not an acceptable solution.
| cuu508 wrote:
| Wouldn't users also want legible icons, pictures, margins,
| etc.?
| IshKebab wrote:
| Why not? If you have trouble reading text are you not also
| going to have trouble reading icons, pictures, etc. too?
| ehutch79 wrote:
| It's not zooming (ctrl +), it's when you literally set the font
| size in the browser. This is typically done for people with
| vision issues, or assistive technology
| Wowfunhappy wrote:
| Honest question: why do people increase the font size instead
| of just changing the default zoom level?
|
| I feel that the latter creates a more consistent experience.
| chrisweekly wrote:
| Something like 10% of people change their browser's default
| font size - a larger userbase than that of many browsers
| deemed worthy of support.
| uallo wrote:
| The author's website sets a root font size of 18px. That
| completely eliminates any benefit you may have by using rems "for
| accessibility". Setting the root font size with an absolute unit
| completely overwrites the users' font size settings. Even the
| ones that the author mentions in the "The Real-real Problem"
| section. If you really want to change the root font size, you
| probably should use the `em` unit. It will be based on the users'
| settings.
| diob wrote:
| https://www.joshwcomeau.com/css/surprising-truth-about-pixel...
| is a better breakdown, it's nuanced.
| soulofmischief wrote:
| 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.
| RheingoldRiver wrote:
| 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!
| jacobp100 wrote:
| It's odd how they seemed to know the difference between browser
| zoom and font size settings, but came to that conclusion
|
| You should only use the unit that scales with the font size
| setting for font size related properties. That's font-size, line-
| height, and letter spacing
| shortcake27 wrote:
| Yeah this. Directly scaling margin and padding with font size
| causes an accessibility _problem_ because the UI becomes
| unusable after a couple of steps, especially on mobile.
|
| If every unit scales with font size then you've basically
| invented zoom, which browsers already have.
|
| Dynamic Type on iOS is the perfect example. I have bad eyesight
| so I bump up the text size. This only affects the font size. It
| doesn't scale the entire UI.
| taeric wrote:
| Isn't a lot of this somewhat moot with PX being a defined thing
| in browsers that isn't necessarily pixels? Per
| https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel
| The term CSS pixel is synonymous with the CSS unit of absolute
| length px -- which is normatively defined as being exactly 1/96th
| of 1 inch.
| stevebmark wrote:
| I don't get it. I am semi visually impaired and often use command
| +/- to increase the font size, and on iPhone, use the reader
| viewer view for websites. Rems are terrible to use in CSS because
| they stack relative to their parent, making components non-
| portable and required hacks to undo parent sizing. Is default
| font size that prevalent that it's worth the crappy units?
| [deleted]
| skilled wrote:
| I think this is pretty common knowledge anyway. It's rare to see
| anyone use px anymore, but I know for a fact the GitHub Blog
| does, and uses @media queries for mobile/desktop versions. Not
| sure what the reasoning is there.
___________________________________________________________________
(page generated 2022-12-03 23:00 UTC)