P

15

856

I heard you should define sizes and distances in your stylesheet with em instead of in pixels. So the question is why should I use em instead of px when defining styles in CSS? Is there a good example that illustrates this?

Peppi answered 4/3, 2009 at 7:8 Comment(1)

For what it's worth, here's the definition for the different units in CSS: w3.org/TR/css3-values/#lengths. – Biggs 11/6, 2013 at 14:23

P

115

The reason I asked this question was that I forgot how to use em's as it was a while I was hacking happily in CSS. People didn't notice that I kept the question general as I wasn't talking about sizing fonts per se. I was more interested in how to define styles on any given block element on the page.

As Henrik Paul and others pointed out em is proportional to the font-size used in the element. It's a common practice to define sizes on block elements in px, however, sizing up fonts in browsers usually breaks this design. Resizing fonts is commonly done with the shortcut keys Ctrl++ or Ctrl+-. So a good practice is to use em's instead.

Using px to define the width

Here is an illustrating example. Say we have a div-tag that we want to turn into a stylish date box, we may have HTML-code that looks like this:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

A simple implementation would defining the width of the date-box class in px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

The problem

However, if we want to size the text up in our browser the design will break. The text will also bleed outside the box which is almost the same what happens with SO's design as flodin points out. This is because the box will remain the same size in width as it is locked to 50px.

Using em instead

A smarter way is to define the width in ems instead:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

That way you have a fluid design on the date-box, i.e. the box will size up together with the text in proportion to the font-size defined for the date-box. In this example, the font-size is defined in * as 10pt and will size up 2.5 times to that font size. So when you're sizing the fonts in the browser, the box will have 2.5 times the size of that font-size.

Peppi answered 4/3, 2009 at 7:8 Comment(10)

I'm wondering: How will it adjusts to grid-systems using percentages for width? Will it break it if the contianing block is given a width of 100%? – Nomarchy 12/7, 2013 at 17:57

This is not true nowadays. Pressing Ctrl+ and Ctrl- in any modern browser will scale the pixel values as well. It has been like this for a while now. – Truck 18/3, 2014 at 13:35

@Truck Does this hold true for adjusting DPI in the OS too? – Beatabeaten 30/9, 2015 at 6:34

@Truck any modern browser will scale the pixel values -- true, but there is no fixed relation between em and other "absolute measures", the formula (or a layout decision) has to take the font size into account. – Flageolet 25/11, 2015 at 9:20

@Wolf, yes, but that is a horrible way of doing layout that wins you nothing and only brings suffering. – Truck 25/11, 2015 at 22:16

@spoike, Downvoting this as it's clearly not true anymore as stated by YemSalat'scomment – Tympanist 6/6, 2016 at 16:29

I understand that this is now a year old, but in my opinion @thomastutter's answer should be accepted as it has been upvoted way higher than this. – Scyphate 9/1, 2017 at 5:57

@Truck To me, a more interesting question is whether browsers are required to intelligently upscale px measurements. If they are not, then em is still the correct choice. For all I know, browser authors just snuck that change in to work around poorly designed stylesheets everywhere... – Kalvn 5/3, 2017 at 21:5

Please don't use EMs it's a nightmare. In 2020 you only need PX. – Verism 10/11, 2020 at 8:13

How come @OliverDixon? I use relative unit CSS a lot nowadays. rem, em, ch, etc. – Peppi 11/11, 2020 at 14:22

A

630

It is wrong to say that one is a better choice than the other (or both wouldn't have been given their own purpose in the spec). It may even be worth noting that Stack Overflow makes extensive use of px units. It is not the poor choice that the question suggests it is.

Definition of units

px is an absolute unit of measurement (like in, pt, or cm) that also happens to be 1/96 of an in unit (more on why later). Because it is an absolute measurement, it may be used any time you want to define something to be a particular size, rather than being proportional to something else like the size of the browser window or the font size.

Like all the other absolute units, px units don't scale according to the width of the browser window. Thus, if your entire page design uses absolute units such as px rather than %, it won't adapt to the width of the browser. This is not inherently good or bad, just a choice that the designer needs to make between adhering to an exact size and being inflexible versus stretching but in the process not adhering to an exact size. It would be typical for a site to have a mix of fixed-size and flexible-sized objects.

Fixed size elements often need to be incorporated into the page - such as advertising banners, logos or icons. This ensures you almost always need at least some px-based measurements in a design. Images, for example, will (by default) be scaled such that each pixel is 1px in size, so if you are designing around an image you'll need px units. It is also very useful for precise font sizing, and for border widths, where due to rounding it makes the most sense to use px units for the majority of screens.

All absolute measurements are rigidly related to each other; that is, 1in is always 96px, just as 1in is always 72pt. (Note that 1in is almost never actually a physical inch when talking about screen-based media). All absolute measurements assume a nominal screen resolution of 96ppi and a nominal viewing distance of a desktop monitor, and on such a screen one px will be equal to one physical pixel on the screen and one in will be equal to 96 physical pixels. On screens that differ significantly in either pixel density or viewing distance, or if the user has zoomed the page using the browser's zoom function, px will no longer necessarily relate to physical pixels.
em is not an absolute unit - it is a unit that is relative to the currently chosen font size. Unless you have overridden the font style by setting your font size with an absolute unit (such as px or pt), this will be affected by the choice of fonts in the user's browser or OS if they have made one, so it does not make sense to use em as a general unit of length except where you specifically want it to scale as the font size scales.

Use em when you specifically want the size of something to depend on the current font size.
rem is like em, but it's relative to the base font size of the document (specifically, of the root element), rather than the font size given to the current element.
% is also a relative unit, in this case, relative to either the height or width of a parent element. They are a good alternative to px units for things like the total width of a design if your design does not rely on specific pixel sizes to set its size.

Using % units in your design allows your design to adapt to the width of the screen/device, whereas using an absolute unit such as px does not.
vh, vw, vmin, and vmax are relative units like %, but they are relative to the size of the viewport (size of the viewable area of the window) rather than of the parent element. Respectively, they are relative to the viewport's height, width, smaller of the two, and greater of the two.

Anagrammatize answered 4/3, 2009 at 7:8 Comment(11)

What to use for "width" property in CSS em or px? and why? – Lek 30/6, 2009 at 17:23

In case I want to convert a PX stylesheet to em based then 1px = how many em's? I tried out this tool: riddle.pl/emcalc but when I am converting 990px to em, it returns 61.88em, but when I am adding this to stylesheet then my content area becomes small, than 990px – Lek 30/6, 2009 at 17:24

There is no way to convert between ems and pixels, unless you know what the size of an 'em' is in pixels, in that context. That can depend on the inherited font size of that element, which can in turn depend on the font size of the document as a whole, which can depend on the font size settings in the user's browser and/or operating system. If you are aiming for a particular pixel size, then specify it in pixels. Ie, if you want 990px, then put 990px. If pixels is what you want, why not use them? – Anagrammatize 29/7, 2009 at 6:9

you forgetting about the accessibility for people with sight problems. The most commun usecase is that people with this disability change the base font size of the browser. If they to. You got a problem with all your pixel sizes, because text is gonna overlap for example. i think flodin's example points this out very clearly. Change the base-font size in chrome, safari or any browser and have fun browsing websites with PX dimensions. – Brewis 29/7, 2011 at 12:11

Huh? I didn't say anything contradicting that. I was saying what px units are used for and what em units are used for. You seem to imply that using px units is generally bad. If a site breaks when you adjust the browser's default font size, the fault is not px units, it's bad assumptions. Clearly the web designer has relied on the default font size (often a good idea), and yet created the rest of their layout based on false assumptions about this font size, such as trying to align fixed-size graphical elements with text, where the element size only matches the text at one font size. – Anagrammatize 30/7, 2011 at 13:52

The em unit stands for the font size of the element, except in font-size, where it stands for the font size of the parent element. Hence, the wording “currently chosen font size” is oversimplified, if not just wrong. – Zealand 24/4, 2013 at 17:10

It's not wrong, nor oversimplified. Obviously, if you use em in a line where you actually declare the font-size, then it's impossible for em in that line to be relative to that same element's font-size after any font-size declarations on that element, because it won't know that yet - so instead it has to be relative to the font-size the element would have had before the font-size property on that same element is declared. Since any other behaviour is literally impossible, I don't see any ambiguity there. – Anagrammatize 24/4, 2013 at 18:31

what happens if we use em and the text needs to grow 10X. Shouldn't the rest of the screen's layout be written in a way that it can adapt? – Neurogenic 15/8, 2018 at 19:34

If you want the size of something to be relative to the size of the text in your document, then em is appropriate, if you don't want it to change if you make the text 10x larger, then em is inappropriate. Whether or not you want your design to be able to adapt to a 10x change in text size is up to your design choices. – Anagrammatize 16/8, 2018 at 1:8

I think it has to be considered why something should stay relevant to the size of the font. Mostly it is because the user has difficulties in reading. Now, fonts get bigger if you have bad eyesight and increase the font size. If you define spaces in px, they get relatively smaller. Also, if you define pictures or drawings in px, they do not scale together with the font size, thus making them difficult to read for the ill-sighted. Taking this into account, for me explains, why everything should scale with the font size and px is a bad choice. – Mutineer 9/11, 2023 at 14:2

Allowing users to change the font size but not scale everything else up accordingly is not really a thing on the modern web; very few sites don't set their own font size, making browser based font size controls ineffective, and forcing different font sizes (eg with an extension) would break most modern websites. The zoom tool in all modern browsers scales everything, precisely for the reasons you explain - that you don't want only the text to scale up. And this is reflected in standards too. Web designers nowadays don't have to account for users scaling only fonts but not other elements. – Anagrammatize 9/11, 2023 at 22:38

C

154

I have a small laptop with a high resolution and have to run Firefox in 120% text zoom to be able to read without squinting.

Many sites have problems with this. The layout becomes all garbled, text in buttons is cut in half or disappears entirely. Even stackoverflow.com suffers from it:

Screenshot of Firefox at 120% text zoom

Note how the top buttons and the page tabs overlap. If they would have used em units instead of px, there would not have been a problem.

Consonantal answered 4/3, 2009 at 7:18 Comment(15)

You can also zoom text in Firefox without zooming images in View -> Zoom -> Zoom Text Only, then zooming as normal. – Anagrammatize 4/3, 2009 at 7:51

I have absolutely no issues zooming in SO with Opera, except image scaing being terrible. Can you provide a screenshot or something? – Comitative 4/3, 2009 at 20:0

+1 good point. although regarding large resolutions, you could set your screen setting to show text at 120 dpi instead of the standard 96 resolution – Peppi 6/3, 2009 at 7:46

@Spoike: I would, but Firefox does not honor the system DPI setting. See bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524 – Consonantal 6/3, 2009 at 8:2

I've seen worse - at least the text stayed with the buttons/tabs. I've seen sites where the buttons go one way and the text over them go a different way. Still, they haven't allowed enough space for that resolution and font size particulrly around the top tabs. – Anagrammatize 7/3, 2009 at 4:12

This is an excellent point regarding em and should be upvoted! No one has mentioned that using em makes it much easier to have a site that "just works" with various mobile devices (and their small screen sizes). – Monster 15/10, 2011 at 12:34

Webkit (Safari and Chrome) make great zooming without all those issues you see, all browser should zoom like they do – Savior 1/2, 2012 at 17:50

@Juan: That's because they use the simplest zoom method: scaling the entire page. But it means at 150% zoom, a 1000px wide page becomes 1500px wide. It's the easiest way to zoom for web & browser developers. Unfortunately, it's not very user-friendly. Which is why other browsers have text-zooming that magnifies the content only without changing the layout. But that means web developers need to basically design their layouts for a wide variety of font sizes, greatly limiting what you can do design-wise. It's quite difficult to make a site look good in 16pt font as well as 48pt font. – Sorcery 3/8, 2012 at 16:16

@Lesemajeste isn't scaling the entire page what "zoom" actually should be. Doesn't there come a point where the developer must tell the niche users to cope or not visit? I would never build a single page with consideration for for 16pt and 48pt font. That is just stupid and as you pointed out, very limiting on layout. I think it is great that FF wants to make a special zoom for text only, but I am not going to design with that in mind. – Bigner 31/1, 2013 at 7:37

@fredsbend: True, you can't satisfy everyone all the time, but in terms of what "zoom" should be, you need to consider what it's actually there for. Zoom is an accessibility feature. I would say that most visually impaired users just want to increase the text size, not necessarily the entire layout. If you want to discard with text zooming support, I would suggest making sure that visually impaired users don't need it as much. They may still need to use zoom, but perhaps they only need to zoom to 125% instead of 200%, and can thus avoid horizontal scrolling. – Sorcery 31/1, 2013 at 21:4

@Lesemajeste A good point for a blog, mostly text site. I agree in that respect, but many sites are artistic in nature or contain many media features. I made a player recently that showed a lecture video, the slides, thumbnails and buttons with various features. For this I would most definitely prefer px measurements and zoom to affect the whole page. I know if I were sight impaired I would buy a large monitor and lower the resolution. – Bigner 1/2, 2013 at 4:52

I think text-only zoom support is the biggest reason to use em today. Pixel sizes still aren't adjusted with changing the text size (tried IE11 and Chome). – Finespun 31/8, 2015 at 10:6

what happens if we use em and the text needs to grow 10X. Shouldn't the rest of the screen's layout be written in a way that it can adapt? – Neurogenic 15/8, 2018 at 19:33

@Honey layout should adapt to the screen's physical size, not its resolution. Your MS Word documents don't have a different layout on a 300 DPI printer vs a 1200 DPI printer. This is the same principle. – Consonantal 17/8, 2018 at 8:13

pro-tip you can change the dpi setting of your display instead of trying to zoom on firefox/etc which throws the layouts of many sites off . Added benefit is your taskbars and menus and other elements on your screen will be comfortably sized as well. If you're on linux you can set it via Xft.dpi in .Xresources file if you use Xresource for your config. Not sure of setting in osx/windows/desktop environments with their own config. – Weissmann 16/7, 2021 at 21:15

P

115