DEV Community

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

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

Madza on October 15, 2020

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. Abs...
Collapse
 
madza profile image
Madza

Awesome to hear that πŸ‘πŸ’―βœ¨

Collapse
 
vtrpldn profile image
Vitor Paladini

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

Collapse
 
ahferroin7 profile image
Austin S. Hemmelgarn

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

Collapse
 
rtivital profile image
Vitaly Rtishchev

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.

Collapse
 
aberba profile image
Lawrence Aberba

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.

Thread Thread
 
rtivital profile image
Vitaly Rtishchev

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

Collapse
 
contradicthelaw profile image
Minh Nguyen (he/him)

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:

Side by side visual differences of using pixel and relative units

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.

Collapse
 
andrewbaisden profile image
Andrew Baisden

This right here.

Collapse
 
andrewbaisden profile image
Andrew Baisden

Using rem for everything other than media queries.

Collapse
 
rtivital profile image
Vitaly Rtishchev

what advantage does rem give you relative to other units?

Collapse
 
andrewbaisden profile image
Andrew Baisden

If you use rem for 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.

Thread Thread
 
rtivital profile image
Vitaly Rtishchev

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?

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

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 rem my portfolio included and it appears to work the design did not break apart.

Thread Thread
 
rtivital profile image
Vitaly Rtishchev

Well, then you can safely migrate to px πŸ˜„ as rem has no effect and px is much clearer

Thread Thread
 
andrewbaisden profile image
Andrew Baisden • Edited

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 😊

Thread Thread
 
rtivital profile image
Vitaly Rtishchev

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.

Thread Thread
 
andrewbaisden profile image
Andrew Baisden

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 prefer rem whereas some prefer pixels as you can see from this discussion. Thats the great thing about being a developer the freedom of choice. πŸ™‚

Thread Thread
 
93alan profile image
Alan Montgomery

I back you Andrew, I use rem for everything. Fonts, margins, padding, width, height. Scales better with respnsiveness

Collapse
 
louislow profile image
Louis Low • Edited

Yes! I am the FIRST!

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

Collapse
 
rtivital profile image
Vitaly Rtishchev

em will look the same as px on retina and high-density screens, there is no difference

Collapse
 
perpetual_education profile image
perpetual . education

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

Collapse
 
dailydevtips1 profile image
Chris Bongers

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

Collapse
 
geobrodas profile image
Georgey

yah rem a lot for media querie.

Collapse
 
josejesusochoatorres profile image
JosΓ© JesΓΊs Ochoa Torres • Edited

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>
Enter fullscreen mode Exit fullscreen mode

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:

Collapse
 
madza profile image
Madza

Thanks for the extended input πŸ™β€

Collapse
 
josejesusochoatorres profile image
JosΓ© JesΓΊs Ochoa Torres

Your welcome, it was a pleasure; you have chosen a good topic.

Collapse
 
weswedding profile image
Weston Wedding

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.

Collapse
 
igor_brussolo profile image
Igor Brussolo πŸ•·οΈπŸ³οΈβ€πŸŒˆ

I always declare the font-size: 100%; for accessibility reasons, if the person has a pre-configured size it is very annoying overwrite it.
Following this same logic I use the rem unit
I rarely exceed 2.5rem I think it is a reasonable size for h1 in some situations it is not pretty but it is sure to be readable and accessible to everyone.

Collapse
 
laurasofia profile image
Laura Sofia Heimann

I'm still using old-fassioned hard-px for most of my UIs. If it's a responsive website, I tend to use em/rem with a base px font-size. For a new project, I've had to make sure my screen had the exact same propotions in 1920x1080 and 1280x720, I've used vw/vh there.

Collapse
 
jcolag profile image
John Colagioia (he/him)

I generally put everything (font and not) in ems. The unit has been around pretty much forever, keeps everything in proper proportions, and gives the end user more flexibility in overriding the overall sizes. The root sometimes gets a px size and thin borders are 1px, but everything else feels like it should just scale.

Collapse
 
cchana profile image
Charanjit Chana

For years I used ems, then recently I started using rems... but after looking at a few resources I switched back to px!

Having read through the replies here I am going to go away and research some more before I launch my next project.

Collapse
 
geobrodas profile image
Georgey

I dont'nt know why but I like rem

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited

Depends:

  • Fonts: PX under :root, EM or % others.

Else:

  • Borders: PX
  • Image Dimensions: PX
  • Margin/Padding: REM
Collapse
 
spiderpig86 profile image
Stanley Lim

Mostly rem. px should really be used sparingly.

Collapse
 
momin profile image
Md Abdul Momin

Now I'm following the bootstrap and of course its em & rem units

Collapse
 
tommi profile image
Tommi

rem is the best unit. This article explains why very well.

Collapse
 
nieuwepixels profile image
Nieuwe Pixels

Pretty much em and rem. More often so also on margins and paddings. Some are set global or global for that type of element to create a more consistent look and feel.

Collapse
 
codefinity profile image
Manav Misra
Collapse
 
anders profile image
Anders

Always px

Collapse
 
heyrohit profile image
Rohit Gupta

14px in paragraph
16px in labels
24px in headings.

Collapse
 
raguay profile image
Richard Guay

I prefer px since it is precise. I get what I was expecting to get with fewer surprises. I have used em, vh and vw some, but not much.

Collapse
 
dominikhaid profile image
dominikhaid

Using rem and set the html{font-size} for some some screen sizes like 4k or Retina so content has the right size.

Collapse
 
madeelahsan profile image
M Adeel Ahsan

i don't know why i am afraid of relative units. i always use PX LOL.