I see that most popular sites like fiverr, twitter, youtube, … doesn’t use em anymore for font-size and also for other properties, excepting for line-height. They use px almost exclusively.
I am wondering what is nowadays best practice for this since browsers adjust also font size automatically when enlarging view.
Sounds like those sites are using an outdated way of doing things. The sites that switched from using px to using em started doing so some time back.
There is no real justification for using px for anything except borders. It might make laying out the page easier for the person writing it but will make it unusable for a portion of visitors.
So the best practice is to use em?
As Steven said using px is not the best practice for font-size. All of my fonts are em based on 76% off the body tag.
Thank you, I will use it as well. And what is about other things, do you use px or em?
Each have their uses - eg specifying borders as 1px makes them as thin as possible. Everything specified using en will set its size proportional to the text so that if someone increases the text size in their browser then all of the em measurements will increase by the same proportion. Using percentages is also useful where you want to size something as a set fraction of its container.
The other units are not really suited for screen use but are insterad intended for use when printing the page - pt, cm and in can be used in your print styles.
but won’t browser automatically calculate and increase all elements by the same proportion even if I use px?
NO. The pixels on a given browser are a fixed size and the only way to change it is to change the resolution of the screen. With modern screens the screen resolution is generally fixed and can’t be changed. For example my screen is 1920px by 1080px and even if I set the resolution differently in the operating system the screen itself will still convert to 1920px by 1080px before displaying anything.
There are zoom options available that can be used to make everything in the page bigger by a set proportion (which will make all the images blurry) but to be able to specifically enlarge the text without stuffing up the images by changing their size you must use em. There are even some browsers that will not allow anything defined using px to be resized at all since those elements do after all have a specific size specified for them and since there are other measurements available when you want sizes to be able to change you should NEVER use px for anything that ought to be able to be changed in size. That’s why the only use I ever make of px these days is to set minimum width borders where I want the border to be visible but as thin as possible. If the content is blown up to be a million times its initial size then the border should still be only 1px as that is still the minimum visible width.
tnx you are the best, now I understand 
Hi,
How do you calculate the conversion on 76%?
Is there also a calculator on the web?
I searched for either, the method or a calculator with no success.
Thank you,
Chen
Conversion to what?
The only sizes where there is a set conversion value is between pt, cm, and in
The px, em and % values are all completely independent with no set conversion between any of them or with the fixed sized ones in the above list.
76% could be 5px for one visitor and 55px for another. It might be 3em for one visitor and 12em for another. It might be 2cm for one visitor and 6in for another. It all depends on how they have their screen and browser configured.
Thank you for the answer felgall.
I am asking about a default configuration of a browser.
According to this article incremental differences
it is recommended to use ‘font-size: 76%’ in the body.
so now i have a design with 46px header height, which contains fonts of 1em. How do i convert 46px to ems?
Thanks a lot…
That’s an oold article from back when most browsers had a similar default configuration (also I’m not sure why they’d suggest 76% as 62.5% was the usual suggestion). These days there are so many different screen sizes that no one size works out any better than any other. The current recommended font size to use in the body is 100% and that is only needed to fix an IE bug and could be left out completely if it were not for that.
ohh, good to know.
Thank you very much
I’m sorry, but felgall didn’t exactly gave you the best advice possible. Here’s what happens, even on SitePoint, if you use em when not appropriate.
You can use both em and px, you just have to find the right use. Generally, for fixed heights, em is not such a great idea.
ok…
so maybe min-height will be the right solution for this?..
so where can be a good use for em (except for text of course)?
min-height… on what? Where? How?
You can get a good use for em anywhere where there is not a fixed height defined:
or you have elements stacking up on the same line, taken out of the normal flow, unaware of each other sizes:
no. i was talking about the site i’m working on.
i will try tomorrow to send a link.
Thank you very much you both - felgall and noonnope
I’m not sure if, on that case, the em was not appropriate or if, instead is the site structure that is not appropriate.
EM are always appropriate for accessibility reasons.
It’s hard to do css with EM font size.
It’s hard to design sites using css when we think like on paper, believing that all should look the same, or that is some sort of standard around here. 
Not sure if it will always be like this, but … still applies:
Do websites need to look exactly the same in every browser?
What font size do I use? The most comfortable possible, according my site audience. Is this a 100% answer. No. It’s the best I can find until now.
What advice are you referring to? Also if you don’t use em for fixed heights then when I change the size of an em to be 5 times as big 4/5 of your content will overflow or disappear and then your page is completely stuffed. Only by using em for fixed heights can you ensure that the height grows so that the texts will still fit when the text is made bigger.
px should only be used for border widths - if you avoid its use anywhere else then you will not have any page layout issues caused by px. The problem illustrated for SitePoint is causd because px are used for other things that they shouldn’t be used for - inappropriate use of px and not inappropriate use of em. Mixing the two will always cause problems unless you limit using px to narrow borders eg. 1px.
Remember that your visitor can override your CSS with theirs and changing the size of em to make it bigger is likely with people with poorer eyesight.
