EM and REM scaling in different resolutions
Hello, i have a question about EM and REM and i don't found any answer, even chatgpt doesn't know.
I understand how they work. For example 16px font size on the root, 2REM = 32px and EM the font-size of the parent element.
What i don't understand is how they scale in different screen resolutions.
Because if i set the font-size for example 16px and i use rems on my page. The page will look good on 1080p but on a 4k monitor would look tiny, because when i use REM in the end is still pixels. (and pixel is a fixed value)
If i don't declare the font-size what will the browser consider as default font-size? I mean is something fixed to 16px? Or it varies on the screen resolution? Example if i am in 1080p will be 16px, 1440p 32px, 4k 64px?
Thank you.
26 Replies
it will consider the one set in the browser settings default is 16px 🙂
also em looks for the first declaration of the font-size it can find up the dom tree it doesn't necessarily needs to be parent it can be a grandparent 😉
afaik if you want your fonts to be dependent on the screen size, you need more than just using rem or em. Neither of them are directly connected to the screen size like that.
I’m just speculating but I assume at different resolutions there is less square footage of pixels so 16px takes up more space then if you had a high resolution with double the pixels.
And if you don’t declare, it will set to browser default 16px
CSS pixels are not device pixels
I said I was speculating. I know that image pixels are dependant on the resolution of the screen, the same image on a 1x device looks worse than on a 2x device. Why are OPs font-sizes scaling ?
If you don't declare anything (which I recommend for accessibility) the default font-size will be the one set in your browser. In chrome you go in Settings -> Appearance and you have the "Font size" option and "Customize fonts" to play with.
This means that people with 4k resolution will probably want to zoom-in or make their browser font-size bigger unless you manage to keep accessibility of the font-size while also making it adapt to bigger resolution. I'm not sure if I make sense..
something along the lines that Image and screens are DPI, where a CSS pixel is a flat unit based on the resolution size. I thought Kevin had a good explanation but I can't find it atm.
Would clamp work or is that only looking at the viewport, not the resolution? If this is a common issue I'm sure there's documentation about it OP
Clamp will work but make sure you do a little + 1px if you use viewport units.
not sure if this can help but I've been working on this today actually with clamp : https://codepen.io/xrktnsxx-the-solid/pen/ZEwMVWe
I want to experiment more on it to fine tune it but yea
or 14vw + 1rem i.e.
I only use clamp fonts for LARGE headings ... I think its overkill and looks bad for regular fonts (hot take)
You don't want to use viewport units for the first or last numbers in a clamp
make sure you use rem or px
or ch 🤔 ya just not vw
and as I said above use it like
clamp(2rem, 2vw + 1px, 4rem)
you need the little calc in there to keep it honestdepends, design wise 16px for normal paragraph on large screen and 12px on small devices is usually the way to go.
na then just use a media query
change it how it should be for the device/layout.
why would you not use clamp and avoid using media query ? I'm genuinly curious.
cause I don't avoid using media queries
they are wonderful 😉
container queries are going to change the game too.
Also I rather having something that is more descriptive... 16px on desktop 12px (too small) for mobile
I feel like having a design that adapts itself without you having to redefine it's properties depending on x viewport size would be better no ?
again for large fonts/headings I want to stay the same size based on a viewport/container width? Clamp is great.
I mean that is very #depends. I find most cases no. That is my opinion but I know lots of people I resepect in CSS that share it so.
Like I don't want my font size changing with width if its my main context body
specially if my box model sizing is based on it.
Like squish test your example, you will see the size of your box is changing too not just your font 😉
again don't deal in absolutes, don't be scared to use a media query (just be smart about the use, it can help you write less or more code if you are not), we have lots of tools in CSS 🤷♂️ there are lots of ways to do something but have it based on a system/design.
oh you are even clamping your padding xD I was like this is really shifting
The point of my testing was so everything would scale up when the resolution gets big enough but remains accessible otherwise for people with visual impairment that uses a bigger browser font-size (more than 16px).
I'm probably over engineering tbh
I like where your heads at though 🥰
nothing wrong with over engineering to learn too imo. You find that happy medium sometimes too. Again these are just my opinions.
We had a good #discussions about a article I link about using REM for everything too... but looks like the OP deleted? or I don't see it in the search.
The Surprising Truth About Pixels and Accessibility
“Should I use pixels or rems?”. In this comprehensive blog post, we'll answer this question once and for all. You'll learn about the accessibility implications, and how to determine the best unit to use in any scenario.
Why You Should Use px Units for margin, padding, & Other Spacing Te...
When users increase their text size, they're not trying to make the space around text bigger.
I will for sure read all this 🙂 Thanks
Large clamps is another one... want to respect the user but same time if you are already using a huge font using REM in the clamp vs PX is something you have to ask/test yourself.
Ashlee is good accessiblity advocate to follow in general too since you mentioned it 😉
hello
Heck yes for container queries and container query units!!!
I tested it on Polypane and the font was too small when I choosed device Self Service Kiosk