One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, you’re given four different units by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? It’s a question that’s spawned a diverse variety of debate and criticism. Finding a definitive answer can be difficult, most likely because the question, itself, is so difficult to answer.
Meet the Units
- “Ems” (em): The “em” is a scalable unit that is used in web document media. An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.
- Pixels (px): Pixels are fixed-size units that are used in screen media (i.e. to be read on the computer screen). One pixel is equal to one dot on the computer screen (the smallest division of your screen’s resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their site as it is rendered in the browser. One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.
- Points (pt): Points are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot scale in size.
- Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.
So, What’s the Difference?
It’s easy to understand the difference between font-size units when you see them in action. Generally, 1em = 12pt = 16px = 100%. When using these font-sizes, let’s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.
As you can see, both the em and percent units get larger as the base font-size increases, but pixels and points do not. It can be easy to set an absolute size for your text, but it’s much easier on your visitors to use scalable text that can display on any device or any machine. For this reason, the em and percent units are preferred for web document text.
Em vs. Percent
We’ve decided that point and pixel units are not necessarily best suited for web documents, which leaves us with the em and percent units. In theory, both the em and the percent units are identical, but in application, they actually have a few minor differences that are important to consider.
In the example above, we used the percent unit as our base font-size (on the body tag). If you change your base font-size from percent to ems (i.e. body { font-size: 1em; }), you probably won’t notice a difference. Let’s see what happens when “1em” is our body font-size, and when the client alters the “Text Size” setting of their browser (this is available in some browsers, such as Internet Explorer).
When the client’s browser text size is set to “medium,” there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the “Smallest” setting, ems are much smaller than percent, and when on the “Largest” setting, it’s quite the opposite, with ems displaying much larger than percent. While some could argue that the em units are scaling as they are truly intended, in practical application, the em text scales too abruptly, with the smallest text becoming hardly legible on some client machines.
The Verdict
In theory, the em unit is the new and upcoming standard for font sizes on the web, but in practice, the percent unit seems to provide a more consistent and accessible display for users. When client settings have changed, percent text scales at a reasonable rate, allowing designers to preserve readability, accessibility, and visual design.
The winner: percent (%).
Thanks for this clarification, I’m getting pretty sick of all these hacks and an unclear answer as to what technique is considered the best practice. Looks like I’ve been wrongly using Points (pt) for a while now, time to switch to percents (%)
Care With Font Size
http://www.w3.org/QA/Tips/font-size
Zoom
http://mezzoblue.com/archives/2008/10/07/zoom/
Thanks for font-size: clarification. I always confused of this concept. Now I know the better use of EM and %. Thanks a lot for this useful article.
Nice post u have here
Added to my RSS reader
Very good. I thank you my dear friend.
[...] a previous post, I talked about the different font size units and the web. In this post, I concluded that the [...]
Using ems is more predictable, IF you start with a browser reset for the html, body {font-size: 100%;}:
http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
For the finer points of ems see Jon Tan’s examples and table:
http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css
As for nested lists: simply use li li {font-size: 1em; } to keep things from shrinking.
while em makes sense for the coders, and ease of modding, users still can scale webpages when px are used for font sizes…
My brain aches!
I’ve got a site developed using ems (www.mt32.co.uk), fine all looks good. Then the client said it wasn’t working for 120dpi settings?!? After further research it appears this is becoming a more and more common setting (good old Vista!), with some Dell systems being rolled out with it set as standard.
And good old IE6 and IE7 do it again, all the em settings break the site design. So I’ve had to change it all to px values and hey presto, IE is fixed. Sigh, will it ever end?
[...] გადავწყვიტე, რომ ამის შემდეგ ყოველთვის em გამოვიყენო ან პროცენტი.. საინტერესო საკითხავი აღნიშნულ საკითხზე: px – em – % – pt – keyword CSS Font-Size: em vs. px vs. pt vs. percent [...]
Except that (px) by definition is a sscalable unit
John, please elaborate. As you can see in the images above, using pixels for font sizes does not allow the text to be displayed in different sizes based on browser or device settings.
Thanks, this is what I am looking for. well explain about font size.
I read an article on smashing magazine that stats using px based with all modern browsers is now acceptable. Modern browsers zoom the entire layout as apposed to scaling text which means you don’t get elements overlapping each other! I’ve often used a general em on my body element but then pixel point the rest of my design!
Amazing!! I think u have given the best examples to show the clear differences between the Px , em , Pt & % measurements in CSS. Really, I’m impressed with this column…..
But by using px, the user can only scale the whole design proportionately by ‘zooming in’ using their browser specific controls, leaving the integrity of the design intact. I don’t want them to be able to scale just the text.
I choose px… most of the time.
If I want the text to be scalable, I will use percent.
Good info Kyle, thanks.
Hi
thanks very useful for me
Thank you so much for your article.
Thank you very much, you helped me to understand the most importtant points between px and em.
I use px!
> “One problem with the pixel unit is that it does not scale upward for visually-impaired readers or downward to fit mobile devices.”
This is slightly misleading. As far as I’m aware in practice pixel fonts are scalable in most web browsers, only IE prevents pixel fonts from scaling. I’ve also found few issues in mobile browsers. So while absolute font sizes probably shouldn’t be scalable, in practice they are.
As for a winner I’d say a combination of EM and % sizing is the way to go.
Really interesting and well structured study. Congrats.
[...] CSS Font-Size: em vs. px vs. pt. vs percentGetting your basics right [...]
Very nice post. It is being retweeted as we speak (or as I type, I suppose)…
While for accessibilty sake it is best to use either em or %, I have found that using px for DESIGN elements is best. It is true that px *should not* scale, therefore in design elements, or those elements that could break the design (as in tabbed navigation), px should be used, while body copy should be em or %.
My $.02,
Jeremy Edmiston
If you set the body to 62,5%… then 1em is 10px in every browser… 1.1em is then 11px, 1.2em is 12px etc.
Very flexible method. I build all my sites like that. Great consistency.
[...] View Post [...]
@Morningtime: the 62.5% approach is what I use as well — for easy use of ems in the rest of the document.
The only big gotcha with that method (and with ems/percentages in general) is that you have to be paranoid about nesting. If you declare P as 1.4em, then LI as 1.2em… make sure you don’t have a list nested in a P, or the li text will be BIGGER than the P text, not smaller as intended.
One thing that helps — only add font sizes to your CSS as necessary, for specific low-level areas of text… don’t just define fonts left & right for elements you may not even use (or which may have other elements nested in them).
Working on font sizes can be real tough, but once you pick up CSS and just work with it things get a lot easier.
Just a thought: The ONLY browser this makes a difference in is IE6 on the desktop. Every other browser does page scaling and thus scalability of type is a non-issue.
@ Doug S: that would be the case if every user of browsers other than IE6 used page zoom, but you can’t make that assumption. There’s a lot of people out there who, having started with IE6, only know how to scale text using the medium, larger, largest settings, even when using later versions of IE. All versions of IE have the same limitations when scaling text sized in pixels when using this method. You can’t assume that people will always use page zooming.
And as was pointed out earlier, it’s inaccurate to say that text sized in pixels can’t be resized: it’s only IE browsers that don’t do it (and only when using text resizing, as opposed to page zoom).
The statement about font-sizing units is also a bit inaccurate: although rarely used, you left out mm (millimetres), cm (centimetres), in (inches), pc (picas), and ex (similar to em but uses height of lowercase x).
Thanks for the article, I went over to using em a little while ago and am sticking with it, seems like I made a good decision!
Everyone and their dog as access to the internet using all types of applications.
So it makes sense to use em to ensure the copy can scale well….I use pt for my print style sheet though
[...] HTML 5 预览 CSS Font-Size: em vs. px vs. pt vs. percent 300+ Resources to Help You Become a Photoshop [...]
What about small, xsmall, xxsmall, etc. how do they relate?
[...] I’ve always wondered about the differences of defining font sizes in CSS. This article really … Please share or bookmark this post! [...]
[...] Inspiration for the image : Kyleschaeffer.com [...]
[...] CSS Font-Size: em vs. px vs. pt vs. percent – One of those topics that designers can argue forever. [...]
A little history on the “Em” measurement. While it may be new to the web, its origins actually date back to the days of movable type. It was meant to represent the width of the largest letter of the font (in most fonts, the widest letter is “M”).
Next thing you know, we’ll be talking about “picas” again. Thanks be to Dr. Lindley and the Intro to Typography and Layout class in 1978.
http://www/twitter.com/mickeylonchar
[...] #CSS Font-Size: em vs. px vs. pt vs. percent: http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ [...]
[...] CSS Font-Size: em vs. px vs. pt vs. percent Explications sur les unités de mesures px pt % en CSS [...]
Thanks for your clear and lucid explanation of this! A most excellent article that clarifies a lot of things for me.
Great Article for beginners………Thanks, I was looking for this………..
Thanks. Some people use:
* { font-size: 100.01%; }
body { font: 62.5% sans-serif; }
I don’t understand why? What do you think?
Kirsantov,
I’m not sure why someone would opt to use “100.01%,” but I do know why they use “62.5%” for the body tag. Basically, setting the body’s font size to “62.5%” resets 1em to equal 10 pixels. That makes it easy for designers to use EM units, but still be able to get pixel-perfect sites (assuming the user has default font size settings).
For instance, with the body font size set at 62.5%, you could use “1.5em” to set an element’s font size to 15 pixels. 2em would equal 20 pixels. 1.2em would equal 12 pixels, so on and so forth.
Спасибо за статью из России! | Thanks from Russia!
Thanks you, good article.
Thanks for your article! The comparisons are methodical and concise. It is a great article.
You have done a wonderful job. This is very useful for beginners who dont have knowledge abt pixel, point and em.
You might find this useful as well. http://pixel2em.kleptomac.com
This provides an online pixel to em converter and you can also do a complete CSS file conversion.
THANK YOU! Finally, a simple, clear explanation about what em does vs. px and why it’s useful.
I actually came here because I was looking for a good explanation of the different between px and pt (which I got). I ended up getting a lot more out of it, and figure that, for website design, it probably makes sense to go for a combination of px and % – use px for the layout-related portions of the site, and % for the content-portions, so that your layout won’t be broken when the user has a larger font-setting on their computer, but they can still read the content bits. Thanks.
Great stuff, and great comment Michele, totally agree.
The battle between percent and px is a long one, It’s harder to make a good looking site for any display, and text size, but gives it a wider usage.
I’m for the variable size sites, but they take a lot of time to design.
I’ve tried something here, in flash, but it could be translated in css:
http://clickdevacanta.ro
if unavailable try : http://clickdevacanta.3x.ro
“Generally, 1em = 12pt = 16px = 100%.”
This is the most useful thing I’ve encountered in a very long time!
Excellent explanation about the PX and EM relationship. thanks for sharing..
When it comes to figuring out what em gives you the px you’re looking for, this tool is a major time saver: http://riddle.pl/emcalc/
Just enter the px, and it will give you the corresponding em.
Was looking for a good explanation to show new team members – thank you!
Though, I’m not convinced on % being best as a while back we noticed that using percent for some mac browsers caused them to crash… hopefully though, this bug has vanished with the demise of IE5 and other older browsers (the issue was specific to mac and only occurred in certain scenarios).
Handy resource to share about the pros and cons. There are some really hand tools – em calculators to help you calculate em to px.
I’d love to be able to work just in pixels but sadly browsers don’t auto support resizing for pixels … yet (hopefully this will happen… one day!)
Nice article. However, I do not agree the the Veridict. Well, because it’s so much more complicated then that, and we need to considered so many aspects, like resolution and dpi and monitor sizes and… oh my god so many things, that stating simply that, % is more consistence then EM is just a poor conclusion.
So what should I state then?
Well… that even if we cannot get a conclusion, and rule, about what is best on a overall look, we can use see what is best on a project scope view and, the important thing to note here, more then, what is best for all is, what EM; PX; DPI; RESOLUTION; %; SCREEN SIZE; etc… mean, and how can we play will all this, consistently, and archive our goals.
So I believe,
Márcio
Hi, Marcio. I’m not sure how resolution and DPI have anything at all to do with setting font sizes on the web. Our only options are the fonts that I have listed above (em, pt, px, and %). This is merely a comparison between these four fonts and their effect and behavior within the browser window. I generally use % as my BODY font size, and I use EM to size it from there. As long as you use % as the base (body) font size, you’ll find that font sizes are drawn more consistently across browsers.
As web designers, we really have no control whatsoever regarding resolution and DPI — we can merely size our fonts as best we can and let the client’s browser take it from there.
Good article. It highlights how many opinions there are out there on web standards and best practices. I wish there were a definitive right way to do things… sigh
[...] scaling of the page’s text by the user (a good comparison of units em, pt, px and % is available here, be sure to read the comments [...]
what a clear cut instructions…This is what I have looked for..Great tutorial
[...] Enzi on Pure CSS Image HoverAngela Law on Karate Corners: XHTML/CSS Rounded CornersRomeo on CSS Font-Size: em vs. px vs. pt vs. percentJim Duncan on Input Prompt Text: A Better WayKyle on Pure CSS Image HoverOther [...]
[...] http://www.kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ [...]
This is great!
Now here’s a question (actually the one that led me to this article), would using ems or percent vs. px and pt allow for browsers like firefox to display text more clearly (ie. browsers that don’t anti-alias text by default)?
Ian – that’s a great question, and honestly one that I’m not quite sure of. In my experience, browser anti-aliasing has more to do with the operating system and less to do with the browser, itself (with the exception of Safari, which seems to have it’s on “deal” going on for anti-aliasing).
I have never noticed a difference in text clarity related to font size across browsers, but it’s certainly an area in which additional research could be made!