There are several different ways you can declare the size of a font in CSS. The units fall into one of two categories - absolute and relative.
Absolute units are fixed. Once they are declared, their size cannot be altered by changing the font size of some other element. Those include px, pt and pc units.
The size of relative units is determined by the size of a parent element. Their size can be altered by changing the sizing of that dependent element. Those include %, em, rem, vw, vh, vmin, vmax, etc.
What units do you normally prefer to use?
Top comments (43)
Awesome to hear that 👍💯✨
call me old fashioned but 90% of my font-sizes are
16pxIn visual display media, always
rem, except on the root of the document (where I usually use pixels because they are de-facto consistent across all platforms. Usingrems means that the site layout works correctly no matter how much zoom the user uses, because it all scales together.For print media it gets a bit trickier. I would normally use points there because most printers will know how to handle that correctly without multiple unit conversions (unlike other absolute units which may or may not need to be converted twice). I might use
ems if I need to offset size relative to the parent font size for some reason, but would probably not use relative units for anything else, instead relying on the (sane) assumption that people are printing at the 'correct' size (and obviously handle margins correctly so that I don’t need to handle separate styles for US and ISO paper sizes).There is no need for rem nowadays, every browser scales correctly with px, em/rem has no other advantages and in most cases will produce only needless calculations for next developer who will try to work with your code.
You've been denying em, rem in all your replies. Its for responsive designs and you've been shown a link to it.
What are some designs you've created with 0x would like to see.
Yep, that's what I do, I strongly disagree with people who use em (rem is fine) as it brings lots of complications to code and measurements.
If you need a good example of website that uses px – just land on google.com
If you are interested in how i work with px you can explore my open source app – github.com/rtivital/omatsuri
I use 100% for the
bodyelement, and relative units for everything else—mainly REM. Most of the clients I do work for require that their sites are accessible, which means I need to ensure the sites meet WCAG requirements.There’s this really good article on 24 Accessibility on this subject by Kathleen McMahon which showcases side-by-side examples of what happens, including this one below, where a user sets their font size to "Very large" in Chrome:
This image shows the following:
font-sizeand the fixedline-heightproperties, thus does not resize according to user preference.line-heightis set in pixels the paragraph text is visually squashed together.REM is a bit more work to implement, but it goes a long way for the user.
This right here.
Using
remfor everything other than media queries.what advantage does rem give you relative to other units?
If you use
remfor the fonts, margins, paddings and borders. Then if a user was to change the font size setting for their browser then, the whole page should scale uniformly without breaking.Have you tried changing font size in browser yourself? Do you test it before pushing to production (as font size changing can break some interface elements that were designed with identified sizes)?
From the user side this is also not a good idea, almost all users that need to scale will use browser scaling (cmd/ctrl + +) that will scale interface with all that?
Yes I have tried changing it myself in fact I just did a test now on some websites to see what the result would be. It seems to work fine. No I don't really test for that prior to production because as you put it the average user is not going to be technical enough to play around with their browser settings like that they would just scale the browser.
I also just tried scaling some websites that use
remmy portfolio included and it appears to work the design did not break apart.Well, then you can safely migrate to px 😄 as rem has no effect and px is much clearer
Take a look at the post by Minh Nguyen on here and also this Pixels vs. Relative Units in CSS: why it’s still a big deal It makes a difference 😊
Yep, I get that rem units have purpose, still I think that if you intent to support rem as a feature on your website then it's your responsibility to test out how it performs with scaled fonts – providing broken ui is worse than providing small ui that can be upscaled.
Testing has always been a part of my development process its to be expected when you are building a website. Working with pixels is exactly the same it is not limited to
rem. Some developers preferremwhereas some prefer pixels as you can see from this discussion. Thats the great thing about being a developer the freedom of choice. 🙂I back you Andrew, I use rem for everything. Fonts, margins, padding, width, height. Scales better with respnsiveness
Yes! I am the FIRST!
em will look the same as px on retina and high-density screens, there is no difference
We went through 6+ phases over the years... AND we're back to
pxfor the font-sizes.. but we useemfor letter-spacing andno unitfor line-height... and well, it depends. Sometimes we think about opening up the discussion again... but - mostempeople can't make their argument. We also useclamp()a lot now - (but mostly with vmin and px...I recently switched mainly to REM, only using pixels for borders and media queries.
yah
rema lot for media querie.I used the majority of these in different scenarios/situations, for example:
% - I use it with the border-radius property or when I am interested to take 100%, 50%, of a container.
em - I have used it just one time; at this very moment I don't have another use case to use it but when I used it was like a font size multiplier in a CSS framework that I was building
rem - I use it all time; why? You can set the body font-size and use rem around your text elements taking the value of my body, 15px in my body = 1rem in other sections; so if you want to increment or reduce the font size of all text in your page that is using rem you can add a media query to replace it just in the body, and that's all.
vw/vh - Usually used to take exactly 100% of the viewport height in my header/hero or; when you have a lot of page sections/rows and you want to add space between these, usually in a desktop resolution you can add more but if you are using a smartphone it will be reduced automatically to be more efficient.
wmax/vmin - mmm I used these to create responsive page titles in my hero, using properly these two properties you can avoid using a media query to scale your Text title. Examples:
josejesus.now.sh/
josejesusochoatorres.github.io/ano...
Thanks for the extended input 🙏❤
Your welcome, it was a pleasure; you have chosen a good topic.
On web I prefer rems, but will modify the 16px baseline depending on client needs (like font sizes that adjust based on display width).
Usually pixels if I'm making an Electron application that's on a fixed device screen size and doesn't need to support multiple devices.