Mobile app version of vmapp.org
Login or Join
Holmes151

: Does CSS 'em' sizing still matter? 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

@Holmes151

Posted in: #Css #Design

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>

10.04% popularity Vote Up Vote Down


Login to follow query

More posts by @Holmes151

4 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi995

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.

10% popularity Vote Up Vote Down


 

@Jennifer507

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.

10% popularity Vote Up Vote Down


 

@Vandalay111

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.

10% popularity Vote Up Vote Down


 

@Shanna517

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme