CSS Font-Size: em vs. px vs. pt vs. percent

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

  1. “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.
  2. 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.
  3. 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.
  4. 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%.

Font-sizes as they increase 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).

Font-size as the client changes the text size in their browser.

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 (%).

Addendum (January 2011)

It’s been a couple years since I wrote this post, and I’d like to sum up the discussion and debate that has happened in that time. Generally, when I create a new design, I will use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it from there. As long as the body is set using the percent unit, you may choose to use either percent or ems on any other CSS rules and selectors and still retain the benefits of using percent as your base font size. Over the past couple of years, this has really become the standard in design.

Pixels are now considered acceptable font size units (users can use the browser’s “zoom” feature to read smaller text), although they are starting to cause some issues as a result of mobile devices with very high density screens (some Android and iPhone devices have upwards of 200 to 300 pixels per inch, making your 11- and 12-pixel fonts very difficult to see!). As a result, I will continue to use percent as my base font size in web documents. As always, discussion and debate is encouraged and welcome; thanks for all the great comments over the course of the past two years!

257 comments

  1. bobachu says:

    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/

  2. 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.

  3. RYErnest says:

    Nice post u have here :D Added to my RSS reader

  4. Einstein says:

    Very good. I thank you my dear friend.

  5. […] a previous post, I talked about the different font size units and the web. In this post, I concluded that the […]

  6. SL Mello says:

    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.

  7. pxstillscales says:

    while em makes sense for the coders, and ease of modding, users still can scale webpages when px are used for font sizes…

  8. Peter Lewis says:

    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?

  9. […] გადავწყვიტე, რომ ამის შემდეგ ყოველთვის em გამოვიყენო ან პროცენტი.. საინტერესო საკითხავი აღნიშნულ საკითხზე: px – em – % – pt – keyword CSS Font-Size: em vs. px vs. pt vs. percent […]

  10. John Rogers says:

    Except that (px) by definition is a sscalable unit

    • Kyle says:

      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.

      • Keilaron says:

        I think he was referring to pixels having (at least) two different ways they can vary: resolution and DPI. For example, my mother (who’s eyesight is slowly degrading) has her resolution set to 1024×768 even though her monitor is capable of much more: This is to make things more legible.
        Unfortunately, on mobile devices and such these are usually locked to static setting.

  11. Zayar says:

    Thanks, this is what I am looking for. well explain about font size.

  12. 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!

  13. Gopal Sharma says:

    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…..

  14. Gar says:

    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.

    • Fujilives says:

      I agree with Gar 100%. I stick to a single unit when designing because it just makes sense. 10px font in a browser is damn near the same as a 10px font in an application. If I need text to match up to images on a page, which I often do, I need the units to match.

      Further than that, multi-browser support for EM and % has never, and will never be the same. 90% of my text related problems over the years have come from accidentally forgetting to define PX and a browser’s EM not matching the same across the board.

      As for being able to scale the font… I do not want this. It’s still possible with most browsers even with PX fonts, but in general, if they want to scale the text, they should just scale the whole screen so the website stands a chance in hell of functioning.

      In today’s age of text-centric search engines relying on design that is dynamic and able to be generated by end users, not “just images”, using PX fonts and defining the correct type of display:(block/inline/etc) has become extremely important for my workflow. EM and % still have their place, but there’s nothing more frustrating than a very advanced piece of code with slider-tabs suddenly breaking for someone because the text inside those tabs decided to change size in Internet Explorer vs Firefox’s proper representation.

      • Yingying says:

        I agree with you so much. It is just so frustrating to see well-designed interface be disrupted by different font-sizes in different browsers. I usually use pt, and it seems to be similar cross-browser too, but I guess I will use px more in the future.

        • john says:

          I would stay with pt, if I were you, because it will scale correctly if the user’s display settings are set correctly. If you start using pixels, someone with a full HD monitor would see a very tiny website.

          However, if his OS knows that the dpi of his monitor is 120, instead of 72, and you use pt, the text and the images will be readable for this person too.

          Some people say that browsers are able to zoom in on the whole page, so pixels are fine. But browsers were forced to implement this, because a whole bunch of retarded web develeopers think you should use px.

          Using % (as the article states) is cool for text, as it would also honour a user’s display and font settings, but it makes scaling images more difficult in my opinion.

      • barfly says:

        I agree to your opinion. I also prefering px since I started to design websites. But .. on the other hand – when I startet my business (about 14years ago) vor example I also built websites by using tables for the design, what was the usualy way in these days. Today I wouldn’t do sitedesign by using tables anymore – and so all webdesigners I know wont. With this little example I want to show you that times are changin. And though I dont like working with em’s – more and more of my customers (I mainly work as a freelancer for other design-firms) want fonts to be described in ems. Meanwhile I learned a few benefits by doing so. For example you can change the font-size of a whole webprojekt simply by changing 1 line of code in your CSS.
        But anyway I always keep working with px whenever I can ;-)

  15. sivashankari says:

    Hi

    thanks very useful for me

  16. Thank you so much for your article.

  17. pixel man says:

    Thank you very much, you helped me to understand the most importtant points between px and em.

  18. Ryan Roberts says:

    > “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.

  19. Really interesting and well structured study. Congrats.

  20. […] CSS Font-Size: em vs. px vs. pt. vs percentGetting your basics right […]

  21. Matt says:

    Very nice post. It is being retweeted as we speak (or as I type, I suppose)…

  22. Cornerstone Interactive says:

    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

  23. Morningtime says:

    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.

  24. Rob Whelan says:

    @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).

    • Michael says:

      Rob, I tried your nested/un-nested example above and got the same display result regardless of whether the LI is nested in the P or not. What I am I missing? Isn’t the em relative to the body size declaration not the parent element in the cascade?

  25. Working on font sizes can be real tough, but once you pick up CSS and just work with it things get a lot easier.

  26. Doug S. says:

    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.

  27. John Faulds says:

    @ 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).

  28. 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!

  29. 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

  30. […] HTML 5 预览 CSS Font-Size: em vs. px vs. pt vs. percent 300+ Resources to Help You Become a Photoshop […]

  31. Tavis Rugboom says:

    What about small, xsmall, xxsmall, etc. how do they relate?

  32. […] I’ve always wondered about the differences of defining font sizes in CSS. This article really … Please share or bookmark this post! […]

  33. […] Inspiration for the image : Kyleschaeffer.com […]

  34. […] CSS Font-Size: em vs. px vs. pt vs. percent – One of those topics that designers can argue forever. […]

  35. 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

  36. […] CSS Font-Size: em vs. px vs. pt vs. percent Explications sur les unités de mesures px pt % en CSS […]

  37. Thanks for your clear and lucid explanation of this! A most excellent article that clarifies a lot of things for me.

  38. Jasminder says:

    Great Article for beginners………Thanks, I was looking for this………..

  39. kirsantov says:

    Thanks. Some people use:
    * { font-size: 100.01%; }
    body { font: 62.5% sans-serif; }

    I don’t understand why? What do you think?

    • You got that one wrong… it’s:

      body{font-size:100.01%}

      and it forces Opera in using floats for calculation. Yet, that was for Opera7. I don’t know if that’s still applicable.

      The

      body{font:62.5% sans-serif}

      simply does what allready has been said in previous comments… since browsers base 100% font size at 16px most of the time, this will recalculate it down to 52.5% which results in 10px.

  40. Kyle says:

    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.

  41. Andrey says:

    Спасибо за статью из России! | Thanks from Russia! :)

  42. Thanh Tri says:

    Thanks you, good article.

  43. Thanks for your article! The comparisons are methodical and concise. It is a great article.

  44. nitin says:

    You have done a wonderful job. This is very useful for beginners who dont have knowledge abt pixel, point and em.

  45. Jai says:

    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.

  46. Cheryl says:

    THANK YOU! Finally, a simple, clear explanation about what em does vs. px and why it’s useful.

  47. 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.

  48. ClickStefan says:

    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

  49. Tom Pham says:

    “Generally, 1em = 12pt = 16px = 100%.”

    This is the most useful thing I’ve encountered in a very long time!

  50. neel says:

    Excellent explanation about the PX and EM relationship. thanks for sharing..

  51. s.Oaten says:

    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.

  52. morganiseit says:

    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!)

  53. Marcio says:

    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

  54. Kyle says:

    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.

  55. 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

  56. […] 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 […]

  57. Romeo says:

    what a clear cut instructions…This is what I have looked for..Great tutorial

  58. […] 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 […]

  59. Ian says:

    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)?

  60. Kyle says:

    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!

  61. Jaya says:

    Thanks a lot, really useful tutorial

  62. Josef says:

    My question would be: When I press ctrl + or ctrl – in my browser, the text scales. I tested (IE, Chrome) with both pt and px, which you said don’t scale. How does this happen then? And in what case wouldn’t it scale?

  63. Kyle says:

    Hi, Josef. CTRL+ and CTRL- are actually shortcuts for the “zoom” feature in most browsers (including IE and Chrome). Zooming doesn’t really scale the text, but rather it resizes all content in the browser window at the same time (zooming in on the page).

  64. Laws says:

    Great post! I never really took time out to experiment with the methods so this has been a great help.

    Thanks you

  65. Victor Teixeira says:

    I’ll just stay with px.
    The same rendering across browsers and operating systems. And that’s what the client wants: their site with the same visual everywhere.

    PS: all browsers now scale all the content when you zoom, including text with px based size. So I don’t see why I shouldn’t use pixels.

  66. Paulie says:

    The problem with em and percent is that the vlue is relative to the parent. So an element with a fontsize of 1.2em will not display the same sized font as another element with a font-size of 1.2em if the two elements parent fontsizes are different. I have always thought this is stupid.

    CSS3 has the new “rem” unit which picks up the root (html) fontsize. This is so much cleaner. Just a shame IE7/8 will be holding us back from using it.

  67. […] I found some examples for my students and often times, I found myself with confusions between em vs px vs %. So I googled it and found a very useful site. Title of the page is called: CSS Font-Size: em vs. px vs. pt vs. percent: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ […]

  68. […] CSS Font Size by Kyle Schemer Viewed at 11:20 am on 21/10/2010 […]

  69. Victor, I think the important distinction is between text size and zooming. All browsers now support page zoom, and Firefox and Safari both scale pixel font sizes for text-only zoom, IE8 does not scale pixel font sizes. I’m not able to test with IE9 currently, but IE8 still has enough market share to prefer proportional font sizes.

  70. Oh, in my previous post I meant: “between text-only zoom and page zoom”.

  71. Alex says:

    One major problem, and it’s one that I have faced for several years, is understanding what is best for people that have a visual impairment. I don’t know anyone who has to use different techniques to read text so I have no idea what is best for them. There is so much white noise regarding ‘best practises’, it’s amazing that what we do is called a profession. I realise this is due to the level of constant change, but we’ve had 15+ years to get this right and there is still no real consensus on something as basic as font sizing.

  72. Kevin T says:

    Thanks for this. Excellent summary. I’d always used pt for fonts size until we started converting sites for mobile viewing and the problems started. The http://www.ready.mobi site concurs with what’s been noted, but from a mobile viewing perspective. It suggested the following: “Avoiding pixel and absolute measures allows the browser to adapt content to fit the display. Use percentage and relative measures such as em, ex, bolder, larger and thick.”

  73. […] “CSS Font-Size: em vs. px vs. pt vs. percent” by Kyle Shaeffer “px – em – % – pt – keyword” by Chris Coyier […]

  74. Ashfaq says:

    Thanks, It’s a Great Article, i’ve listed it in my fav :)

    Thanks
    Please Send this kind of articles to me!

    – Ashfaq

  75. […] if not all, browsers use a default of 16px for the font-size, which roughly corresponds to 12pt type. There’s no right or wrong font-size to use, but for readability you probably want to go with […]

  76. q says:

    Thanks for the article, it was very helpful.

    The comment above was from 2009 but in case anyone is still wondering, the use of “100.01%” is explained at:

    http://stackoverflow.com/questions/2703056/body-font-size-100-01-vs-body-font-size-100

  77. […] http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ This entry was posted on Monday, November 22nd, 2010 at 4:18 pmand is filed under web, 編程. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site. […]

  78. shana says:

    Hi, I have a question why point and pixel units are not necessarily best suited for web documents? Is they can’t be changed in IE? I should be very grateful if I can receive you answer. Thanks.

  79. […] Encontrei este link falando sobre isso px versus pt […]

  80. […] working with me? Get in touch. Contact Me The Latestpx versus pt « Rubenstp's Design on CSS Font-Size: em vs. px vs. pt vs. percentshana on CSS Font-Size: em vs. px vs. pt vs. percentShaz on WP Tabify: Transform a SharePoint Web […]

  81. […] kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs […]

  82. Ben says:

    Thank you

  83. thatmtnman says:

    this was brilliant, and so very very useful. Not to mention clear. Thank you so much!! I look forward to reading all of your work if it is this clear, concise, and well laid out.

  84. Christian says:

    Thanks for the article.
    It is good you included the addendum as that information was exactly what I was after.
    You find many articles on the web on the use of em over px or any other dimension but most articles date back to around 2008 or something.

    Thanks again for the update.

    Cheers,
    Christian

  85. DC says:

    In your addendum you say you are sticking to 62.5% body in other words almost 40% smaller than the ‘desired size’ as set by the user. By not changing the default size in the browser a user is effectively saying that is their desired size.

    Why would you want to override the users preferences?

  86. DC says:

    Further to my last comment I just played with your css to see how it looked in my browser with your 62.5% disabled it was HUGE, that’s when I found you also have a wrapper that uses a font size of 1.5em effectively negating the 62.5%.

    Is there a reason you do this?

    • Kyle says:

      Setting the body to 62.5% places the text at the equivalent of 10 pixels (which is very small, as you say). This makes it much easier to use ems, however, because you can use 1.5em to create a font size that is exactly 15 pixels in most browsers. 2em is 20 pixels, 1.8em is 18 pixels, so on and so forth. This is just a convenient way to quickly match a site’s design to what you might see in a Photoshop file.

      • Mikael says:

        Thanks for the article! I just read the book bulletproof web design, and wanted to make sure nothing had changed since 2007. The use of 62.5%, is the most consistent solution I have seen so far, it makes it far easier to know what size the EM matches in PX.

      • DF says:

        It’s all about simple Math. Awesome. Any recommendation about line-height here?
        I use the % on the font-size in body, then ems for font-size and margins and %s for line-height for all other tags.

  87. Frederick Tshimanga says:

    great article

  88. […] CSS Font-Size: em vs. px vs. pt vs. percent | Kyle Schaeffer – Web Design and SharePoint Brand… – A nice font size overview with a 2011 update towards the end. […]

  89. TK says:

    While using em vs. px, both have its advantages and disadvantages. Using em in body copy is good, but using it in your menu text is bad. I have had countless times where I’ve had to fix a site somebody designed using em’s in menu text and when the user magnifies their browser page, the menu breaks off the page because the text size grows but can’t handle the structure it’s sitting in. Not sure if it’s bad form regarding standards, but using em is best in body copy only.

    • Heath says:

      This is closer to the method I use. Any enclosed navigation or text I lock down with px. The rest of the copy is em based off of the 62.5 % body tag. Keeps menus and things that can’t scale without breaking nice and neat.

  90. David Kullmann says:

    You are a pwner, good job.

  91. Hutcho says:

    Most modern browsers now support font-size tags such as small, large and so on with quite a decent range of sizes from xx-small to xx-large. Obviously if you want pixel perfect fonts then this is not for you, but these are not relative to the parent and so provide an easy way to avoid the em,px,pt,% issues and IMO address most font size needs.

    http://www.w3schools.com/css/pr_font_font-size.asp

  92. Shanna says:

    Great Article…Very Helpful. Thank You!!

  93. […] order to take advantage of these capabilities, a developer needs to understand some key concepts. Kyle Schaeffer and Jon Tan provide some great explanations of the use of em’s over the use of pixels for […]

  94. […] [SVG/CSS] ex/em berechnen   Heute, 08:17 http://kyleschaeffer.com/best-practi…s-px-vs-pt-vs/ Thomas WassermannDas Problem steckt meistens zwischen den Ohren […]

  95. Alex Miller says:

    I always use pixels and haven’t really run into any problems or complaints. Keeping everything positioned right using precentages or ems is a rough business.

    • I used to use px exclusively, too, until I saw that the font size got screwy on iPhones. Have been using em since then and it’s a lot more consistent, although I still struggle with nested font sizes.

  96. […] 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. (For more http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/) […]

  97. […] 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. (For more http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/) […]

  98. narvolicious says:

    Thanks for the great article and info. It really clears up a lot of things. Taking your advice along with the px use for navigation elements (and other stuff I don’t want to break) seems to be the best way to go. I’ll definitely apply it to the next site I build.

  99. John Fields says:

    Thanks for the helpful post.

  100. MJ says:

    Very good synopsis…exactly the explanation I was looking for. Thanks a lot!

  101. A beautifully concise comparison – I always wondered what “em”s were!

    Thanks for sharing!

  102. vicsar says:

    Thank your article solved my dilemma.

  103. […] CSS Font-Size: em vs. px vs. pt vs. percent | Kyle Schaeffer … 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. (tags: font css webdesign development) […]

  104. metrony says:

    can you use decimals for ems??

  105. Zap Media says:

    Thanks for font-size clarification. I’m always confused with this.

  106. […] CSS Font-Size: em vs. px vs. pt vs. percent This entry was posted in Uncategorized. Bookmark the permalink. ← Share your Localhost to friends […]

  107. Ronald says:

    i use percent (%) as well.. though i really didn’t know about em..

  108. Sahil says:

    nice tutorial

  109. Kyle says:

    Very nicely done.

  110. Macauley86 says:

    Interesting. I use % and em font sizes as well.

  111. karla says:

    Very nice tutorial; (%) it is. Thanks

  112. nyobain says:

    i will vote for percent %

  113. […] Should you use px, pt, em or % for font sizes? […]

  114. Sachu says:

    thanks… it helped me

  115. […] results in fonts that don’t scale well in certain browsers. Kyle Schaeffer has an interesting article on why using percentages may be a better option, but from what I can tell, most folks are still in […]

  116. […] to read. Even someone with good eyesight will find it hard to read anything under 10pt. px isn't a suitable unit for font size in web design. <b> is non-semantic; don't use it. Use CSS for bold text. […]

  117. J Soni says:

    Love this topic.

    It has clear my doubts regarding EM, Percentage, Pixel and Points for web designing.

    Thanks a lot and appreciate it. Looking for more articles from you which can help to gain my knowledge.

  118. John Manoah says:

    With all due respect to this article I somehow feel everything else except the “px” seems to be confusing and in most of the cases, misleading. Fluid websites are less common and fixed width ones are out in the large…With W3C striving towards a unified approach, having multiple font-size declaration types is unnecessary. Let’s use one and ditch the rest so that all the browsers would make that “one” accessible. I support “px” :)

    • jim d says:

      Pretty sure that would be a bad idea. One hundred pixels on my laptop is about an inch, but it’s a half-inch on my tablet, and 1.3 inches on my television.

  119. […] are your friends; they’re flexible like elastic and move with the size of your window. Use EMs, not points or pixels for font-sizes. Because no one likes a mobile site with enormous text. The […]

  120. Toyist says:

    In the final rendering of a page everything ends up as displayed as an image x-px by y-px.
    For internal business (forms based) applications I use px for the precise control. But if I I were writing for mobile devices too it sounds like a proportional choice (%/em) makes more sense.

  121. Marie says:

    I find “em” to have too much math involved especially when you build a mockup in photoshop, you use pixels, not em, ex or percent. So in order to match the mockup, I would have to figure out the math of the em to match. That is crazy. I can understand percent on mobile phones, etc. but with the ability to zoom in on a website which will increase the text, I just don’t think it is necessary to do em. And it is not a 508 standard either.

    Example:
    Headline 1 – 1.25em (16 x 1.25 = 20)
    Headline 2 – 1.125em (16 × 1.125 = 18)
    Headline 3 – 1em (1em = 16px)
    Main text – 0.875em (16 x 0.875 = 14)
    Sub text – 0.75em (16 x 0.75 = 12)
    Footnotes – 0.625em (16 x 0.625 = 10)

    Really??!!

    • louie says:

      Read the update that the original author published. If you set your website body size to 62.5%, em’s become relative to px size. For example, 1.2em is equivalent to 12px, 2.4em = 24px, etc..

    • Matt says:

      I ditto Louie. I believe this all depends on who you are designing for; yourself, at your workstation, or the 85 year old grandmother on her iPad who would like to be able to read the content of your clients page; or the 6 year old kindergarden student doing the same, or middle America standing in line at Starbucks or driving to work. Pinching, pulling and general purpose finger play is best left behind closed doors or in movie theaters; at least if you care about your sites bounce rate. Anything less then 100% easy is to difficult for the large majority of those who don’t live in our bubble; oh and they happen to be our clients customers. At least that’s the way I see it.

  122. Gread article,, thanks for this.
    I belive for em and % is better..

  123. Guru says:

    I think this article is little outdated. If your clients are using latest browsers (IE 9 or Firefox 5) I suggest you go with pixels. In these browsers just hold Ctrl key and use mouse scroll wheel to zoom in / zoom out. It is as simple as that. With pixels there is no overlapping or squeezing of text. As other components of web page like images, flash content and divs are measured in pixels, your page stays as designed (assuming commonly available fonts are used). Viewing these pages in mobile devices should not be an issue as long as they support zoom in / zoom out.

    • Kyle says:

      As I mentioned in my article, using pixels is an entirely acceptable technique (albeit inferior in my opinion). It seems that the most prevalent argument against ems is that they are “too hard.” Personally, I don’t see that as a disadvantage, but if you find ems difficult to use, then pixels are certainly a viable alternative.

  124. Madhu says:

    Thanks for posting about font size.

  125. […] good reference for using font size units is the following: CSS Font-Size: em vs. px vs. pt vs. percent Tags: 2010, CSS, Fonts, SharePoint, StyleSheets, Styling Previous postHow to Display the Site […]

  126. Luis Posselt says:

    Kyle I am with you in the way that you setup the Percentages as the default initial text unit and the use percentages or em to modify each specific element on your document. Good Article…

  127. I have been getting heavily into the em and the golden section. The 62.5% reset is fantastic and I really can’t see how people can argue against em because they are too complicated. ‘Simple’ is not always ‘better’.

  128. M.G.Nayar says:

    Thanks for the post on font sizes. It is one of the clearest explanations I have seen on the web. I do my own web site coding and I found it extremely useful. I have saved your article to my hard disk for future reference and will keep track of your further writings.

  129. steve godalming says:

    Not sure if this has been covered – Does it matter what NAME is given to specify various font sizes in the css for users to be able increase percentage – if using Ems and/or percentage??

    steve

    • Kyle says:

      Steve, as far as I know, users can always “zoom,” regardless of how you set up your fonts. Some users also use a “text size” feature in their browser to increase or decrease font sizes as a default setting – this text size feature does not work if you use fixed units like pixels and points.

  130. […] Point (pt) sizes don’t work reliably in browsers, I’d recommend pixels (px) or em’s. More info. […]

  131. Please help says:

    […] Posted by Phreaddee use em's or px instead of points. Phreaddee is 100% correct. http://kyleschaeffer.com/best-practi…s-px-vs-pt-vs/ __________________ […]

  132. Gaara says:

    Thanks for the excellent blog! Very helpful!

  133. Test user says:

    thanks a lot for clear my mind on this concept.. i m always confused in it.. once again thanx.

  134. Hi Kyle

    Thanks, just what i needed. My client needs triple A accessibility on their site and this means changing all the pt and px in font-size to em so that I can use % to make this possible.

  135. WD40 says:

    I’ve just start work on a mobile site, and have been wrestling with how to set font sizes given the wide variety of display methods. Thank you for writing (and updating) an article that gives a clear and concise approach.

  136. […] by a different company, they program their product differently, and font size is one of them. From this link, 1 em is equal to the current font size, which maybe different for different browsers, also user […]

  137. pradeep says:

    thankyou very much ……

  138. Dan says:

    Pixels are now considered acceptable font size units … although they are starting to cause some issues as a result of mobile devices with very high density screens

    Which is interesting, given that the JQuery Mobile library/framework makes liberal use of the px-based sizing for their UI, e.g.:


    label.ui-input-text { font-size: 16px; line-height: 1.4; display: block; font-weight: normal; margin: 0 0 .3em; }

    Interesting and, apparently, timeless post.

    • Splish says:

      I found that comment about pixel sizing and mobile confusing as well. On the iPhone pages are automatically zoomed to match the viewport and so the actual pixel size of the font is irrelevant with respect to the pixel density of the screen, it’s sized relative to the width of the page and further dictated by the orientation of the display (portrait vs. landscape). Pixel values effectively work the same as percentages in this environment since they only describe the relative sizing of fonts and elements when the device is zooming the page to fit the viewport.

  139. […] Schaeffer ha scritto un interessante articolo sul perchè usare percentuali possa essere una scelta migliore, ma da quello che posso dire, la […]

  140. Problema css says:

    […] stylesheet-ul la sursa. Ar trebui folosit em pt ca layout-ul sa poata fi resize-uit usor. vezi CSS Font-Size: em vs. px vs. pt vs. percent | Kyle Schaeffer – Web Design and SharePoint Branding px – em – % – pt – keyword | CSS-Tricks Buzzwords Ltd, unregistered company in England, […]

  141. Thanks for this article, really helped me clarify best use ideas.

  142. Great post… I have always used px but think em is the way forward from here.

  143. Keenan says:

    Great article! This clarified a lot of questions I’ve had!

  144. scryoko says:

    Hello,

    Thanks for the great article! :) Although I do have a question about the current standard being that the base font size should be a percentage and for other CSS rules and selectors, people mostly use ems. I have nothing against that and I do that myself actually but I’ve never really understood why that’s the case. You mentioned that for the other CSS rules and selectors, you can use percentage, yet more people generally use ems. Why is that, do you think?

    Thank you very much! :)

  145. Bill Reid says:

    Thanks for the article and clarification! I have one concern regarding the 62.5% body style though. I understand the logic behind it is to set the body to 10px with the 62.5% setting and then 1.1em=11px, 1.4em=14px, etc. The problem I have is that the em is relative to its container. So if I want a big chunk to be 14px, I set its font-size to 1.4em, but now anything inside that container must have its font-size set relative to 14px, so 1.5em is now really 21px, not 15px. So now we’re back to confusing conversions. I just don’t see the benefit of this strategy. Am I doing something wrong?

    • Cristian says:

      hey Bill… you have a point there… this font sizing is becoming a major headache… emS and %s are useless in navigation menus specially with all these new high density mobile displays.
      I have no idea how to approach that! Got any magic solution?

      • Michael P says:

        Personally, I always use px in any container of considerably limited or fixed size, like navigation menus, fixed width sidebars and footers. That will prevent re-sizing from breaking the layout where those elements are concerned. However, I prefer to give the user control over the font size of my main page content, and for this I use ems. With a browser reset including html {font-size:100%;} and a body tag of font-size:62.5%, you get the decreased variability of % and 1 em now equals 10px. I believe we as web designers need to relinquish a little control to the users, who are after all the main reason we’re doing what we do. Content font size is a personal preference that can vary widely based not only on taste, but visual ability. Millions of people are visually impaired to some degree, and if your pages main text doesn’t re-size to fit their preference, they are just as likely to back right out of your site and keep on truckin’. PLUS, even if you do decide to be a total control freak and absolutely define the font size with px, you can simply change that font-size:62.5% to font-size:10px and the text will no longer re-size based on browser text size settings. And the cool thing is, you can adjust that single value and all your website’s font will change, relative to one another. It’s the most elegant solution I think, both flexible and dynamic. But that’s just my humble opinion. Hopefully it won’t get slammed too much, but hey.. this is the internet, and hater’s gonna hate. Take your best shot, just watch the face guys and girls.

        P.S. Browser zoom is not an excuse to be an inflexible font size power monger fellas! Consider this: our clients pay us to increase their business via being web accessible. The average American (and hence your client’s average customer) is getting older and older, meaning diminished vision and a rampant inability to used “advanced” browser features like zoom. Let’s face it, it’s amazing grandma even figured out how to turn her desktop on. Being stingy with grandma’s font size will only make her feel unwelcome, thus your clients can kiss the chunk of her nest egg they’d been eyeballing goodbye, and now, unemployed, you can go back to living with your mother. Is that what you really want?! Checkmate. Use ems, case closed.

        Haha just kidding, do whatever you want. They’ll get grandma’s money one way or another. Everybody knows grandpa was in charge of the finances.

  146. […] size from its parent. Here is a good blog post to help you understand how each unit type works: CSS Font size units Using "em" in padding will also allow the padding to scale. If you one of the products […]

  147. […] more information about CSS and font sizes, I encourage you to read Kevin Schaeffer's article, CSS Font Size: Em vs. Px vs. Pt vs. Percent. (He actually makes the argument that percentages are preferred; I just happen to prefer the […]

  148. […] Use font size in percent (%). for more info about font size please check following article. http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ […]

  149. bharat says:

    Your article cleared my confusion

  150. Mark J Spinnover says:

    Good article. I totally get your point, and that it’s a good idea to keep things scalable.

    Out of curiosity, I did a ‘view source’ on a goo.gle search results page. Maybe I’m looking at it wrong… but from what I can tell, they use everything there, it seems: pt, px, em and percents, but mostly px and pt.

    I’m having a problem with Firefox and font. The FF fonts displays a little smaller than what I would prefer. I’m also noticing that Google displays the same way. Now I don’t feel so bad. :)

    FF may be a 2nd class browser soon if they don’t get their font inconsistencies resolved.

  151. Julxz says:

    Thanks for this great info.. Now I can build my mobile device sites correctly…

  152. […] Best Practices CSS Font Size […]

  153. Animal Logos says:

    Agreed but still this post is awesome, if you take a broader look then you got that its explaining many things and covering most of things.

  154. […] suggested practice from Kyle: use percent on the body element (body { font-size: 62.5%; }), and then use the em unit to size it […]

  155. […] http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ Share this:TwitterFacebookLike this:LikeBe the first to like this post. Tags: Web Design II Comments RSS feed […]

  156. […] is much clearer and easier to read, I had to play around with font-weights and researched into different sizing techniques to make sure I was doing it […]

  157. […] CSS Font-Size: em vs. px vs. pt vs. percent […]

  158. mic says:

    thank u lot dear . god bless u

  159. […] the fonts are also defined in pixels. If you know about web typography and the available units ( http://kyleschaeffer.com/best-practi…s-px-vs-pt-vs/ ), you'll know that these are the worst possible sizes to use. Basically, pixels and points are […]

  160. Cullen says:

    Thanks so much. It is so comprehensive

  161. surendra says:

    Thank you very much for your clarification. It is very helpful to designers. previously I used to use px in my base font desing so I faced so many problems. Now all my doubts are clear

  162. Sams says:

    Very nice tutorial to clarify font sizing concept. Thanks!

  163. […] styling techniques to specify styles in percentages (rather than in rigid pixels) and fonts in “ems”, a relative size that’s the font equivalent of […]

  164. […] styling techniques to specify styles in percentages rather than in rigid pixels, and fonts in “ems”, a relative size that’s the font equivalent of […]

  165. […] solid article explaining the basics of font sizes (PX/PT/EM/%) and giving a perspective on best practices for what to use in […]

  166. Sebastian says:

    Wow! I found this information very useful and I must say that up until the end point in discussion, I was sold on ems being the applicable choice for base font size. I learned otherwise.

  167. Gerd says:

    To be honest… I work since 5 years with CSS and this is the first time I really understood the difference between em, %, px and pt. THANK YOU! Great job .

  168. Sparky says:

    Hello,

    I am trying to set different color fonts for the same phrase… some words will be highlighted by different color. The thing is that whenever a new type of font appears, it starts in a new line…
    Any ideas why?

    Examples…
    The price of the service is499 US $

  169. Geecko says:

    Cool article. I normally use em for text.

  170. Chris says:

    Hello from 2012!

    It turns out that px is a relative unit, too. The people who write web browsers (in this post-IE6 age at least) are smart enough to realize that displays have different pixel densities. So it’s not like your 15px font is rendered using exactly 15 screen pixels. It is rendered using 15 virtual pixels, which are sized based on the zoom level of the page (along with all of the images and other elements being displayed).

    But px is also an absolute unit, relative to the rest of the page. Unlike em and %, which are relative to their parent element. There are a few voices in the wilderness of comments above who point this out: nested elements and relative font sizes spell wreak havoc on the otherwise elegant 62.5% solution. Think of it this way: ems are local, while px is global.

    So if you’re looking for the easiest, safest approach it is perfectly okay to use px. Your images are sized in pixels, your borders and rounded corners and drop shadows are sized in pixels. And so there is no problem with your text being sized in pixels. Your design won’t break on mobile or HD.

    However, if you are building a fluid layout that uses relative sizes for those other things, then by all means use % or ems for your text. But know that it will be a little less straightforward to convert from design to css, and a little harder to troubleshoot the size of nested elements.

  171. Kevin says:

    Great stuff! Looks like I have some converting to do…

  172. assaa says:

    thamks, Very nice tutorial…

  173. Dubai Web says:

    Even we been in the business for 8 years we still get muddled up with the percentages and the pixels would you believe.. Our favorite is the 12px with grey font colors .. simply cant beat it even our clients here in Dubai think that its the best to use, however in the UK people say that black is the best!!!

  174. James says:

    In my opinion, all text should be hardcoded to no more than 6px. That way, you can fit more content into your pages and, as people have to concentrate harder to read it, it really is a win-win situation.

  175. James says:

    You can also get around the problem of people trying to make the text appear larger via their browser settings by applying a JavaScript hack – so that when they click the browser’s enlarge button, the text stays the same size. :) OR, if you want to teach them a lesson, you can actually make it get smaller – lol, they won’t be clicking that button again!

  176. Chris says:

    The reason 62.5% works is that converting px to em is very easy — divide by 10 and change the unit.

    If body If you have body{ font: 62.5% } then:

    20px –> 2.0em
    12px –> 1.2em etc.

    You can often convert existing CSS using a text editor macro: find px; replace with em; back up 3 characaters; type a .

    That works unless the px number already has a decimal, in which case the macro does this:

    15.5px –> 15..5em

    To guard for that you can either write a more sophisticated macro or search your code for “..” afterwards.

  177. Thanks for differentiating the units, really helpful. Keep Sharing!

  178. ilan says:

    Thanks!
    Good post, exactly what I was looking for

  179. Nidhin says:

    Thanks for the post. Very useful information.

  180. Steve says:

    So what units would you use for your div and other elements? Can you use em for divs for example? It doesn’t make any sense to me to use multiple units in a design. Also, aren’t images in px units? I understand that % is not a unit, but how do you ensure the font scales correctly with images and icons?

  181. […] for font sizes there are a variety of ways to do it, read CSS Font-Size: em vs. px vs. pt vs. percent for a great […]

  182. […] 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EMS优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 […]

  183. Jack says:

    Quick question here: Does the line spacing change automatically when font size change using all units discussed in this wonderful article?

  184. […] Kyle Schaeffer: CSS Font-Size: em vs px vs pt vs % – This article succinctly sums up the whole CSS font sizing thing […]

  185. i m beggienr in web deisgenr. please can anybody explain me what i sbetter.
    12 px or 1 em

    thanks

  186. […] also found this article on the differences between percent and em-based font sizing. It’s a little old, but the […]

  187. Jaime says:

    First of all, sorry if my english is not perfect XD.
    I have a question…..
    ok, Im using ems for my font-size; the text is in a div; but….. the div height and weight are in px.
    So, wen the final user of my website change the font-size, the text chages too, but not the divs.
    ¿can you see the problem? sometimes (depending on the font-size selected by the user) the text has diferent weight, but the div has the same weight. And the design of my web crashes…..
    OK, now my question.
    ¿is there any problem if I use em in the div too?; if I define the weight and the height of the div in em, when the user changes the font-size, the size of the divs chage too.
    Im talking aobut some kind of fluid template made only in em, all the sizes of the web depends by the font-size of the user, so this template can look perfect in any device.
    you know, something like that:

    CSS:

    [code]
    body{
    font-size:1em
    }
    #container{
    height:8em;
    widht: 16em
    margin:0 auto;
    }
    [/code]

    html

    [code]

    hello word

    [/code]

    If the user chages the font size of the web, all the elements of the web changes too, so the text never overflow the div.
    I know that is more dificult to design a web only in em than in px, but I think its more friendly with the new devices (ipad, tablets, e-readers, android, etc.).

    ¿wath do you think about?

  188. Adam Haworth says:

    Really interesting. I use percentage to allow downscale on mobile devices.

  189. […] information and source of this article, here Spread the word:MoreLike this:LikeBe the first to like […]

  190. Kalai pandian says:

    I’m new to the webdesign. Its very useful to me and i had a clear view about these metrics….

  191. Thanks dear. It is really very useful.

  192. BALARAM KUNTI says:

    what is full form of em???as pixel=px;

    • “The name of em is related to M. Originally the unit was derived from the width of the capital “M” in the given typeface.” – Wikipedia
      In other words em is the full name.

  193. Alabi says:

    Learnt CSS by self tuition and have been coding site for about 16 months. I usually used px for font sizing because the first I was read about em and %, the stuff will not going into my head. But I now thought I should step up my game and took a shot at this topic again. Google throw up your blog and this is good. I know have a good knowledge.

  194. Narendran says:

    Thanks a lot for such an useful information. It helped me lot to resolve a weak of my project problem. Here after I will use the font-size as per your suggestions.

    Thanks a lot once again.

    Narendran

  195. jxayxym says:

    Thanks!I will try to design with your method.

  196. Oñay Sheard says:

    Hmm, 4 years since this article has been published. Do you still prefer % over ems? I personally go for ems.

  197. Ningomba says:

    Thanks for this great explaination.

  198. […] Location   • !important • Values   • Units   • em, px & % […]

  199. Samar says:

    Thanks for this explanation. Its been 4 years this article has been published. Wondering if you still prefer % over em?

  200. […] Original Article:  http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/ […]

  201. […] you’re having difficulty getting to sleep, try this as a typical online discussion about setting font sizes. It’s talking about web pages, but they use the same html/ css software language as […]

  202. Thomas says:

    Thanks , really useful..

  203. […] “CSS Font-Size: em vs. px vs. pt vs. percent” and “px – em – % – pt – keyword” […]

  204. Shwetha says:

    good clarification.. :)

  205. Dinesh raj karki says:

    really useful

  206. Neil says:

    This is just what I’ve been looking for. I’m used to using pixels when setting almost every aspect of designs. This will go well with my experiments on responsive design.

  207. […] In this instance, the line-height is measured relative to the font-size. Thus, if the font-size is 16px, the line-height is 1.2 times 16px, or around 19 or 20 px, which is just right. Learn more about these units here. […]

  208. manoj says:

    nice tutorial

  209. luis says:

    Hi, congrats on your article. This thread sure had a lot of comments, and good ones too :)

    The thing with % and em’s in a pixel perfect site is that Opera defaults to the system default font size (usually 10pt) and all the other browsers default to 12pt. (i may be writing the wrong numbers, however they are usually different). This breaks the design and pushes one self to use rigid units like “px”.

    I’d like to avoid this, but at the present it seems impossible.

  210. Kiran says:

    HI Kyle , I Really Thank ful to you for clarifying my Doubt…

    Thanks a lot .. :)

  211. Theo says:

    Very well explained, what about rem?

  212. fabio says:

    we may call this an ‘idiot-proof explanation’. Now this topic is not a mystery anymore to me as well, thank you.

  213. Jess says:

    Great explanation thanks for keeping it simple.

  214. […] More about “em” vs “px” vs “%” vs “pt” you can find on this page […]

  215. […] 在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EMS优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px vs. pt vs. percent这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 […]

  216. Andrew says:

    Thanks for your clear and lucid explanation of this! A most excellent article that clarifies a lot of things for me.

  217. […] CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT […]

  218. PRADIP garala says:

    Thanks

  219. […] a great article explaining the differences between em, percent, pixels and […]

  220. […] 2. CSS FONT-SIZE: EM VS. PX VS. PT VS. PERCENT […]

  221. […] CSS Font-Size: em vs. px vs. pt vs. percent | Kyle Schaeffer – Web Design and SharePoint Brand… […]

  222. bobs says:

    well explained