5

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>
Piotr Müller
  • 228
  • 1
  • 5

4 Answers4

2

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.

nycmixing
  • 314
  • 1
  • 2
0

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.

Community
  • 1
Qsiris
  • 101
0

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.

fuxia
  • 286
  • 6
  • 16
0

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.

martinstoeckli
  • 940
  • 1
  • 7
  • 11