120

When setting the size of fonts in CSS, should I be using a percent value (%) or em? Can you explain the advantage?

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
Mats
  • 14,902
  • 33
  • 78
  • 110
  • 2
    In my opinion in 2016 there is no difference between em and %. If i input 1.2 em all modern browsers thinks i have used 120% and for example if i use 0.7 em all modern browsers thinks i have used 70%... This is what i have experienced in CSS – Mahdi Jazini Dec 28 '16 at 17:13

8 Answers8

80

There's a really good article on web typography on A List Apart.

Their conclusion:

Sizing text and line-height in ems, with a percentage specified on the body (and an optional caveat for Safari 2), was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.

Glenn Slaven
  • 33,720
  • 26
  • 113
  • 165
  • 32
    Actually `line-heights` are better written *without* any units at all. This is allowed by the spec, and completely avoids certain really annoying browser quirks when it comes to `em`-based line-heights – Már Örlygsson Oct 29 '08 at 03:39
  • 19
    I want to make people aware of that this article is from 2007. Since then modern browsers have become more common, and modern browsers usually zoom-in instead of increasing font-size as default. Because of this, 'px' has become more common and in my opinion a better approach. Of course that's debatable but I've personally encountered problems in projects due to nesting em's. – Mohag519 Sep 20 '13 at 08:39
  • 5
    @Mohag519 nesting of em's is a dangerous trap. :) – Vishnudev K Aug 07 '14 at 05:44
  • @Mohag519 isn't px going to give you something much smaller than intended with mobile devices that have high pixel density though? I don't think we want our sites to be exactly like desktop but super tiny on mobile ;) – johnb003 Mar 06 '16 at 07:38
  • @johnb003 Such mobile devices have a *device pixel ratio* larger than `1`. For example the iPhone 4 has a physical screen width of 640px, but appears as 320 "CSS" pixels (DPR=2). So the website does not appear smaller! – BenMorel Feb 28 '18 at 13:30
  • This answer doesn't answer the question really and also it doesn't meet the current SO guidelines. [This one](https://stackoverflow.com/questions/132685/font-size-in-css-or-em/1723471#1723471) should be accepted instead. – Qwerty Mar 18 '21 at 14:32
17

Both adjust the font-size relative to what it was. 1.5em is the same as 150%. The only advantage seems to be readability, choose whichever you are most comfortable with.

Liam
  • 19,819
  • 24
  • 83
  • 123
  • 1
    Can someone explain to my why this is getting voted down? This is exactly how I understood the different between em & percentage. There isn't any advantage nowadays of using one over the other. The important thing is that you use a size that is relative to a base font size. – Lee Theobald Sep 25 '08 at 12:15
  • 3
    Thanks Lee, I just tested this in IE6, IE7, Firefox 3, Safari 3, Opera 9.5, and Google Chrome, all on Windows and they all seem the same to me!

    this is a test

    this is a test

     – Liam Sep 26 '08 at 11:30
15

From http://archivist.incutio.com/viewlist/css-discuss/1408

%: Some browsers doesn't handle percent for font-size but interprets 150% as 150px. (Some NN4 versions, for instance.) IE also has problems with percent on nested elements. It seems IE uses percent relative to viewport instead of relative to parent element. Yet another problem (though correct according to the W3C specs), in Moz/Ns6, you can't use percent relative to elements with no specified height/width.

em: Sometimes browsers use the wrong reference size, but of the relative units it's the one with least problems. You might find it interpreted as px sometimes though.

pt: Differs greatly between resolutions, and should not be used for display. It's quite safe for print use though.

px: The only reliable absolute unit on screen. It might be wrongly interpreted in print though, as one point usually consist of several pixels, and thus everything becomes ridiculously small.

Arlen Beiler
  • 15,336
  • 34
  • 92
  • 135
Galwegian
  • 41,475
  • 16
  • 112
  • 158
  • About the pt thing. I had a great argument on /. about that (and lost). I had the same point of view as you, good to know someone shares that pov :) – Vincent McNabb Sep 25 '08 at 11:24
  • 13
    Are you really saying that some Netscape Navigator 4 users might not be able view my page correctly if I will use percentages for font sizes? – newbie May 01 '12 at 06:05
  • 5
    The cited discussion is from 2002. Is this still relevant? Are there any browsers in active use with em or % bugs? – Beni Cherniavsky-Paskin Nov 13 '13 at 08:51
  • 2
    Citing 20 year old bugs in browsers is not a useful answer. – d512 Mar 18 '16 at 20:55
14

The real difference comes apparent when you use it not for font-sizes. Setting a padding of 1em is not the same as 100%. em is always relative to the font-size. But % might be relative to font-size, width, height and probably some other things I don't know about.

Björn Tantau
  • 1,564
  • 14
  • 13
6

Given that (nearly?) all browsers now resize the page as a whole, rather than just the text, previous issues with px vs. % vs. ems in terms of accessible font resizing are rather moot.

So, the answer is that it probably doesn't matter. Use whatever works for you.

% is nice because it allows for relative resizing.

px is nice because it's fairly easy to manage expectations when using it.

em can be useful when also used for layout elements as it can allow for proportional sizing related to the text size.

Community
  • 1
  • 1
DA.
  • 39,848
  • 49
  • 150
  • 213
  • 1
    Misleading answer, especially for those who don't know much about CSS in the first place. Disregarding the fact that CSS defines logical pixels, which was a terrible idea based on a undoubtedly hasty decision to accomodate for the onslaught of CSS-capable mobile devices a decade ago, pixels are entirely at browsers and users discretion as far as default font size goes, at least. In addition to that, we now have widly different screen aspect ratios (and not always devices *with* a screen) and resolutions ranging from 240p to 2400p. Using pixels in CSS without JavaScript is nearly useless. – Armen Michaeli Apr 30 '17 at 13:38
  • 2
    @amn well, note that this answer is 8 years old. That's a LONG time in Internet time. That said, pixels are still fine if not ideal. Most (all?) browsers accommodate pixel font sizing adequately on the particular device. Today, though, I'd usually be using rem as my unit of measurement. – DA. Apr 30 '17 at 17:11
  • 1
    Maybe I am missing something, but what benefit if any does one have with pixel lengths? Why are they "fine" or "ideal"? Versus `em`, for instance. Side from that, I think answers on SO should strive to be timeless -- it's a knowledge base after all. Wikipedia of programming :) As Wikipedia is updated to reflect facts, so should SO answers, in my humble opinion. – Armen Michaeli Apr 30 '17 at 19:45
  • 3
    @amn I didn't say they were ideal or had any real major benefit. I was just answering the OPs question. As for striving to be timeless, if you can predict the future of the web 8 years from now, more power to you! But I don't have the time to constantly update a decade's worth of my answers here. Hopefully people know enough to look at the time stamps on answers and take that into consideration. – DA. Apr 30 '17 at 20:14
0

As Galwegian mentions, px is the most reliable for web typography, as everything else you do on the page is mostly laid out in reference to a computer monitor. The problem with absolute sizes is that some browsers (IE) won't scale pixel-value elements on a web-page, so when you try to zoom in/out, everything adjusts except for those elements.

I do not know whether IE8 handles this properly, but all other browser vendors handle pixels just fine and it is still a minority case where a user needs to enlarge/diminish text (this text box on SO perhaps being the exception). If you want to get really dirty, you could always add a javascript function for making your text size larger and offer a "small"/"larger" button to the user.

Christian P.
  • 4,784
  • 7
  • 53
  • 70
  • 1
    IE7 scales pixel-values fine, if you use zoom. IE6 didn't have zoom, only text-size. Zoom became a requirement because of designers who used fixed pixel scales rather than allowing the page to reflow with text size changes. – Mike Dimmick Sep 25 '08 at 11:34
  • It's still an issue with IE6, but, then again, EVERYTHING is still an issue with IE6. While I avoided px in the past because of that, the concept of web page zooming as a whole (vs. jsut the text) has become standard and I've found myself using px much more often. – DA. Nov 12 '09 at 16:23
0

Regarding the difference between the css units % and em.

As far as I understand (at least theoretically/conceptually, but possibly not how these two units might be implemented in browsers) these two units are equivalent, i.e. if you multiply your em value with 100 and then replace em with % it should be the same thing ?

If there actually is some real difference between em and % then can someone explain it (or provide a link to an explanation) ?

(I wanted to add this comment of mine where it would belong, i.e. indented just below the answer by "Liam, answered Sep 25 '08 at 11:21" since I also want to know why his answer was downvoted, but I could not figure out how to put my comment there and therefore had to write this "thread global" reply)

Igor Ivancha
  • 3,413
  • 4
  • 30
  • 39
user743436
  • 324
  • 2
  • 14
-1

Yahoo User Interface library (http://developer.yahoo.com/yui/) has a nice set of base css classes used to "reset" the browser specific settings so that the basis for displaying the site is same for all (supported) browsers.

With YUI one is supposed to use percentages.

kosoant
  • 11,619
  • 7
  • 31
  • 37
  • I've been using the YUI reset, but then realized that the browsers text-size settings DONT WORK! Don't see any point in using % if you have px set on the body since it break the text-size settings. – Jason Aug 31 '11 at 16:56