I may be the worst advocate for actually doing this, but let me try and be a better person from now on.
And please, you too!
Let's all get away f...
For further actions, you may consider blocking this person and/or reporting abuse
I mentioned this elsewhere but...
If you reset the HTML font size to 62.5%, you can then declare REM’s in values that seem much more familiar.
Less mucking about trying to remember any ratios.
In some cases it also makes setting unitless line heights easier to under stand I relation to the declared
font-sizeThat is actually a very nice way to do it!
Am I allowed to use pixels in media queries? 😉
I still use them in Media Queries and for Borders,
I do read a lot of changing those to em's but pixels make a bit more sense to me there?
I don't get the point. If your media queries are in pixels because the screen has pixels and the designs were made in pixels, what's the point of converting? Browsers can zoom, desktops have system-wide magnification settings. Is it still relevant in 2020?
It is. Browsers have the option to set a default font size (without having to increase the page zoom). Out of the box it is 16px in most browsers, but users can override it to any value. If developers code with px values, the user-set value does not apply and the user experience is impacted.
Exactly and some mobile devices/screen readers choose to show a bigger font by default, hence where our pixels would not be relevant.
Oh lord... That Twitter thread has so much misinformation.
There is no reason to exclusively use
removerem. In fact, what you usually want isembecause an element's padding and margins are 100% dependent on that element's own size. Elements with larger text will need to scale their spacing accordingly. Good luck doing that withremif you ever need to change an element's font size.emallows you to style local regions of a page with greater ease.remalways resets you back to the root font size. This is annoying (see #1).Both
emandremcan be used for responsive typography. I saw this point come up a lot, where people argue thatremis better. No—no it's not. There's no difference. As long as you useems consistently from top to bottom, your UI will still scale, just as it would withrem.remandemboth have their uses. There's no reason to choose one over the other exclusively, though I find myself usingemfar more often (#1-3).I don't think that's the point, it's more about using rem or em, I personally use rem, but em would work just as well.
I do thank you for this detailed explanation, wasn't aware of these points in rem vs em.
So is there any case that you still use pixels?
(Media-queries/borders?)
Yup! I still use pixels for borders and border radii. I also use them for media queries, though it really depends on where the breakpoint falls. If it falls within a screen width where my font is still scaling up/down responsively between two extremes that I've set up, then I'll use pixels to be more precise.
Oke makes sense yes!
Oke, so there are accessibility extensions that will do it differently.
And another example: phone's will use a larger font by default.
Those are just some examples. The only reason for me to stick to px would be because I'm "used" to it.
For me now they make sense, like sad I'm reading about changing to EM, but not that far yet.
Pixels seem to make sense since a device contains certain pixels, that doesn't change?
But perhaps you have a great article on doing it otherwise? 🤟