What CSS font-size units do you prefer to use?

Awesome to hear that 👍💯✨

call me old fashioned but 90% of my font-sizes are 16px

In 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. Using rems 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).

I use 100% for the body element, 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:

• The 1st example on the left prioritises the developer set font-size and the fixed line-height properties, thus does not resize according to user preference.
• The 2nd example in the centre scales up the title and paragraph elements according to the user, but because line-height is set in pixels the paragraph text is visually squashed together.
• The 3rd example on the right fully utilises relative units and visually looks the best.

REM is a bit more work to implement, but it goes a long way for the user.

Yes! I am the FIRST!

The em unit, gotta take care of the nice-looking designs compatible for both retina and high-density screens.

We went through 6+ phases over the years... AND we're back to px for the font-sizes.. but we use em for letter-spacing and no unit for line-height... and well, it depends. Sometimes we think about opening up the discussion again... but - most em people can't make their argument. We also use clamp() a lot now - (but mostly with vmin and px...

I recently switched mainly to REM, only using pixels for borders and media queries.

Using rem for everything other than media queries.

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

<p class="hp-fluid-h1">
    <span class="hp-fontsize-x3">Fuild title</span>
</p>

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...