{"id":587,"date":"2013-10-19T01:11:30","date_gmt":"2013-10-18T19:41:30","guid":{"rendered":"http:\/\/www.prasadk.com\/my-press\/?p=587"},"modified":"2013-10-19T01:12:04","modified_gmt":"2013-10-18T19:42:04","slug":"css-font-size-em-vs-px-vs-pt-vs-percent","status":"publish","type":"post","link":"https:\/\/www.prasadk.com\/my-press\/css-font-size-em-vs-px-vs-pt-vs-percent\/","title":{"rendered":"CSS Font-Size: em vs. px vs. pt vs. percent"},"content":{"rendered":"

CSS Font-Size: em vs. px vs. pt vs. percent<\/h1>\n
\n

One of the most confusing aspects of CSS styling is the application of the\u00a0font-size<\/strong>\u00a0attribute for text scaling. In CSS, you\u2019re given four different units by which you can measure the size of text as it\u2019s displayed in the web browser. Which of these four units is best suited for the web? It\u2019s a question that\u2019s 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.<\/p>\n

Meet the Units<\/h2>\n
    \n
  1. \u201cEms\u201d (em):<\/strong>\u00a0The \u201cem\u201d 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.<\/li>\n
  2. Pixels (px):<\/strong>\u00a0Pixels 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\u2019s 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.<\/li>\n
  3. Points (pt):<\/strong>\u00a0Points 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.<\/li>\n
  4. Percent (%):<\/strong>\u00a0The percent unit is much like the \u201cem\u201d 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.<\/li>\n<\/ol>\n

    So, What\u2019s the Difference?<\/h2>\n

    It\u2019s easy to understand the difference between font-size units when you see them in action. Generally,1em = 12pt = 16px = 100%<\/strong>. When using these font-sizes, let\u2019s see what happens when you increase the base font size (using the body CSS selector) from 100% to 120%.<\/p>\n

    \"font-size-1\"<\/p>\n

    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\u2019s 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.<\/p>\n

    Em vs. Percent<\/h2>\n

    We\u2019ve 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.<\/p>\n

    In the example above, we used the percent unit as our base font-size (on the body tag).\u00a0If you change your base font-size from percent to ems<\/strong>\u00a0(i.e.\u00a0body { font-size: 1em; }<\/strong>), youprobably<\/em>\u00a0won\u2019t notice a difference. Let\u2019s see what happens when \u201c1em\u201d is our body font-size, and when the client alters the \u201cText Size\u201d setting of their browser (this is available in some browsers, such as Internet Explorer).<\/p>\n

    \"font-size-2\"<\/p>\n

    When the client\u2019s browser text size is set to \u201cmedium,\u201d there is no difference between ems and percent. When the setting is altered, however, the difference is quite large. On the \u201cSmallest\u201d setting, ems are much smaller than percent, and when on the \u201cLargest\u201d setting, it\u2019s 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.<\/p>\n

    The Verdict<\/h2>\n

    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.<\/p>\n

    The winner:<\/strong>\u00a0percent (%).<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    CSS Font-Size: em vs. px vs. pt vs. percent One of the most confusing aspects of CSS styling is the application of the\u00a0font-size\u00a0attribute for text […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0},"categories":[7],"tags":[],"_links":{"self":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/587"}],"collection":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/comments?post=587"}],"version-history":[{"count":2,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/587\/revisions"}],"predecessor-version":[{"id":591,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/posts\/587\/revisions\/591"}],"wp:attachment":[{"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/media?parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/categories?post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.prasadk.com\/my-press\/wp-json\/wp\/v2\/tags?post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}