Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

As I know, em-sizing was used by websmasters to create well-scaling sites, when changing font size in browser.

But in modern times, I see that scaling a page scales all elements, even px-sized, so page is zoomed correctly. So, does designing CSS in em-units is still the best design approach ? What is a difference now ?

Sample code, that doesn't give ane difference with scaling in FF:

<div style="background: black; width: 1em; height: 1em; display: inline-block;"></div>
<p style="font-size:1em">Sample</p>

<div style="background: black; width: 12pt; height: 12pt; display: inline-block;"></div>
<p style="font-size:12pt">Sample</p>

<div style="background: black; width: 16px; height: 16px; display: inline-block;"></div>
<p style="font-size:16px">Sample</p>
share|improve this question
    
This is off topic for this site. This answer is SO (where it belongs) covers it stackoverflow.com/questions/2058550/…. –  paulmorriss Aug 22 '12 at 10:44
    
As you can see, question on SO and responses are from 2009-2010, so this responses are no longer valid, as resizing in modern browsers changed a lot –  killer_PL Aug 30 '12 at 11:27
    
Here's what to do if answers are now out of date - meta.stackoverflow.com/questions/47984/… –  paulmorriss Aug 30 '12 at 12:32
add comment

closed as off topic by Su', paulmorriss Aug 22 '12 at 10:44

Questions on Webmasters Stack Exchange are expected to relate to webmastering within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

4 Answers

up vote 0 down vote accepted

As you already stated, todays browsers are able to zoom the page as a whole, so using em for font sizes is surely no longer as important as before. While choosing between em, pt and px is more and more a matter of taste, there is another useful application for em:

Use em to define the padding of text elements, and other spacing elements. This way, when you later change the font size, the spacing is still in proportion to the text.

share|improve this answer
add comment

I would recommend em over px, and I still use em almost everyday for newsletters. The issue with px is large LCD monitors, as monitors get larger and smaller (smartphones), fonts size will have to adjust accordingly. Also its a good option for dated browsers. People still use IE6 etc.

share|improve this answer
add comment

I believe it is up to you if you wish to use it or not. Current browsers still support it, and they probably will for a long time.

My opinion: If you are comfortable using it then use it. Personally I recommend using px because it gives you more control and you know for sure that that's how it will appear everywhere, no matter what settings the users's browser has.

Also here's something that might help.

share|improve this answer
add comment

There are two different types of zoom/resize: 1. Full page zoom, 2. Text resize.

You should build your site in a way that both are never needed just to read your content.

Full page zoom will distort your images, so that’s not a useful option in most cases.

Text zoom might affect the size of other boxes (navigation, sidebar) – these should be build with sizes in em to avoid overflowing text.

Then there is a setting in every modern browser that almost forces em for font sizes: minimum font size. Let’s say you set the font size to 15px, and the user has a minimum size of 18px – it is almost impossible to build a robust layout with px for these users.

When in doubt use em. Use px for very big font sizes only.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.