Is sizing fonts using "em" still relevant?

Those of you who use em when sizing fonts will know that they can be a headache when dealing with nested elements, and having to make the px -> em calculations (to ensure your design interpretation is correct @ 100%) consumes extra time.

With these (admittedly minor) issues in mind, and given the recent progress the major browsers have made towards natively dealing with accessibility issues such as page scaling / zooming, is using em to size fonts still considered worthwhile? *

*legacy browser (IE6) support excluded.

Do not specify the font-size in absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser). Keep the usage of such units for styling on media with fixed and known physical properties (e.g print)

If you will use this method, no need to calculate

You can set the font-size of the body to 62.5%(that is 62.5% of the default of 16px), which equates to 10px, or 0.625EMs. Now you can set your font-size in EMs with an easy to remember conversion, divide the px by 10.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc…

This makes everything SUPER easy to remember and eliminates the need for conversion tables. Of course, you will still need to use a conversion table for nested elements when using EMs, if you are not being specific in your CSS, which is a whole separate issue.

But 76% is much better and you can use this to calculate http://pxtoem.com/

Yes it's still relevant:

IE6 is still widely used and is unable to resize the fonts defined in px. => Usability issues. That alone is a no-no.

and

IE 7 and 8 don't resize text sized with pixels either, actually. They do have page zoom, but some people prefer to incease text size only.

Here's a summary of what's good and bad about font sizing in general.

I personally like ems. Others, like Chris Coyier over at CSS-Tricks.com likes pixels. (Chris has an excellent article on the different font units).

It really comes down to personal preference.

Almost similar or related questions on SO

https://stackoverflow.com/questions/1890970/should-we-still-use-em-and-for-defining-the-font-size-of-the-website-elements

https://stackoverflow.com/questions/293247/is-there-really-any-point-to-using-relative-font-sizing-in-css

https://stackoverflow.com/questions/609517/why-em-instead-of-px

https://stackoverflow.com/questions/132685/font-size-in-css-or-em

https://stackoverflow.com/questions/520939/css-font-size-relative-vs-absolute-values-which-to-use

Problem with EM

https://stackoverflow.com/questions/1377449/problem-with-em-unit/1377477#1377477

Helpful online tool for px to em

http://pxtoem.com/

http://riddle.pl/emcalc/

http://convert-to.com/pixels-px-to-em-conversion.html

Convert entire site from px to em (This tool is still in development)

http://converter.elementagency.com/

EM Calculator AIR application (will work on all os)

http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

http://jameswhittaker.com/projects/apps/em-calculator-air-application/

Windows apps

http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/

http://www.storkas.com/Projects.aspx(go at bottom)

Pixels to Ems Conversion Table for CSS

http://jontangerine.com/silo/css/pixels-to-ems/

http://reeddesign.co.uk/test/points-pixels.html

emchart

http://aloestudios.com/tools/emchart/

http://aloestudios.com/code/emchart/

Some more articles on this issue

http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

I have built full em zoomable sites in the past. In fact, every dimension in my company site ( http://kingdesk.com ) is em based. In all my recent work, I have abandoned such practice for four reasons:

1. EM Maintenance is a b*tch. It is one thing to get the math right on nested elements during the initial design, but reorienting yourself after some time away is burdensome – to the point of just puting in fixed units at the expense of breaking the em-zooming effect.
2. Browsers have come a long way in the past 2 years. The current version of every major browser supports page zooming natively.
3. It is true that these sites are less accessible to visually impaired users in IE6, but there are abundant freely available tools for them that resolve this issue. If there is not a reasonable alternative, I have a moral obligation to facilitate their need. If there are 4 ADA accessible ramps to my front door, I'm not going to demo the steps and replace them with a 5th.
4. I figure it saves me 20% in my design time.

I now design exclusively in fixed units, and have never once had a problem or complaint.

Oh, and if you're wondering, I no longer try to make sites look pixel perfect in IE6. They are still navigable, and decent looking. But time moves on and 9 year old browsers receive the attention they are due.

This article posted in "A List Apart" by Richard Rutter is still relevant,

How to Size Text in CSS http://www.alistapart.com/articles/howtosizetextincss/

If you look at the iterations, you'll see that,

Text size in pixels – iteration 1

> The result is that Safari and Firefox > still resize the text, whereas IE6 and > IE7 do not. The text can be resized in > Opera and IE7 by using the page zoom > tool, which magnifies the page layout, > text and images within.

Text size in ems – iteration 2

> The results show that, across all > browsers, text at the medium browser > setting is rendered identically to > text set in pixels. It also > demonstrates that text sized in ems > can be resized across all browsers. > However IE6 and IE7 unacceptably > exaggerate the smallness and largeness > of the resized text.

Body sized as percentage – iteration 3

> The results show that the difference > between larger and smaller browser > settings in IE6 and IE7 is now less > pronounced, meaning we now have all > browsers rendering text at an > identical size on their medium > setting, and resizing text > consistently.

Setting line height in pixels – iteration 4

> The results show that the 18px > line-height is inherited by all text > on the page....Unfortunately the > results show that the 18px line-height > is not scaled by IE6 and IE7 when text > is resized, meaning the largest > setting appears to squash the text.

Setting line height in ems – iteration 5

> The results show accurate, > consistently resized text and > line-height across all browsers. > Perfect. Or nearly so.

The Safari monospace problem – iteration 6

> The results show consistently resized > text and line-height across all > browsers, including the monospaced > text in Safari 2.

Even though this article is dated 2007, it's still very much relevant. Setting font sizes is more than just setting an em (or px).

Don't use em when you really mean %. The only reason em works is because in CSS 1em which is suppose to represent the size of the letter "M" (em comes from "M") is actually equivalent to the font size. So when you're writing 1em you are actually writing "100% of inherited font-size". The em is meant to be used when specifying box dimensions relative to the font-size (which is rare, really really rare).

This hole "you can't re-size it in browser" is a modern day myth that dates back to the stone age, when browsers text resizing was a frontend feature and thus there was still some truth to it.

Will my layout magically not break if I use ems? Of course not, that's just wishful thinking!

Do modern browsers offer text zoom?

In short: not by default. Browsers offer a page zoom by default, and this is buried deep inside the menu bar usually under view. You can expect some of your users to know the shortcut Ctrl+MouseWheel but actual text zoom is more tricky. With the modern trend of doing away with the menu bar (note: as of this writing FF4 beta also does away with it, by default) you should consider users requiring text zoom are those in real need of it. I say this because the trend of tutorials/advice on the net is to simply glorify elastic layout and being able to re-size text but not really the issue. Sadly too many "professionals" in elastic/em/fluid layouts completely miss the point: site should look okey if I zoom to 300% or higher! If it just looks good at things like 130% or 170% that's completely pointless and waste of effort and only really useful when they were stupid enough to set their base font to something like 10px or lower (way too small for large bodies of text).

The other issue is "some browsers don't zoom", out of those IE6 is the only relevant one, because it still holds some small share of the internet. If you think otherwise, you've probably been reading some articles from 2002 or so (ie. 1 years after it's introduction), wake up to reality:

• Is your audience using IE6 and does not know any better? Unless you have some statistic backing, assume: NO. Also, should you design for IE6 first? The answer is always: hell NO. Design in the most technically advanced, comprehensive, and standards compliant browser you can find. Usually the tug-of-war is between Safari and Opera. Firefox is not really that far behind but typically implements them as -moz- rules and is slow at converting to non -moz- rules.

• What are the chances of someone who is using IE6 to actually know of font-size tools? If in doubt assume Zero. What are the chances of people actually using IE6 (in our day and age) care for font-size of all things? If in doubt assume Zero.

• If you do happen to have IE6 users one innocent thing you can do is give them a informative push in the right direction, discretely. Example: "Your browser, Internet Explorer 6, contains numerous security flaws. For your safety and that of your company assets you are encouraged to upgrade (or ask your administrator to upgrade) to a newer version: http://www.microsoft.com/nz/windows/internet-explorer/default.aspx (it's absolutely free!)"

It may also be useful to know the current trend (as per sites like Google) is kill IE6 asap! You are by no means being professional by supporting this cursed browser from almost a decade ago, along with other monstrosities such as IE5.5. Before reading advice in web design, check the date.

How to use various font sizes

• pt ("points") is the size for print, and only print! A point is defined as 1/72 of a inch and roughly 0.3527 mm. Never ever use pt for screen styles because the browser will have to guess; and a lot of browsers are really awful at guessing! A pica is 12pt.

  I wish there was a polite way to say this, but any time you see points used for screen style (be it a online reset script, vanilla script, etc.) the author was a idiot. Even one simple proof-view should have shown the point measurement is off.

• ex (abbreviation of "x-height") is a CSS fancy unit which if you're lucky you might never ever use.

• px ("pixel") is the more precise cross-browser AND cross-platform consistent unit there is. While your browser can not know exactly how tall (in mm/inches) a screen is, pixel perfect precision is pretty easy. User pixels in setting (base-)font sizes for screen display of various key elements, in particular when those elements are pixel perfect themselves. A simple example: text on a image. Even if you use only em or % values in your entire code you are still relying on a 16px base set by the browser (when displaying for screen).

• % is the relative size. Use % whenever you just mean to say: this many times bigger/smaller then the parent. It can be used as a base and thus the style in theory could be used for both screen and print and other media. But (and this is just my own opinion) you probably want to create a separate style for each media where at the very least you set the most appropriate base font-size and family for that particular medium. It is hardly "too much work".

• em (as in "M") refers to the size of the letter M, and is a typography measurement (like point), but in CSS it is simply equal to the font-size, when dealing with screen. If you are dealing with print, god knows if it won't just revert to the typographically correct "size of M" instead of "size of typeface" (remember CSS is not just for screen). It is most appropriate to use a em when specifying a dimension for the enclosing box relative to the text. Use it only when you can't use %, as a percentage is more clearer and better code in general.

• named sizes: xx-small, x-small, small, normal, large, etc., should be avoided! You might notice though experimentation that "small" is practically 12px or 75%, but a lot crisper. However, they are inconsistent cross-browser. Small in Firefox is smaller then small in Safari, so never ever use them.

Rule of thumb: always write what you mean in the context with the most concise syntax.

---

The real question: how do I give my users the ability to resize text

User who need bigger text are users with poor vision. Poor vision should not be confused with being totally blind when text is of a certain size. Given how wide the types of eye problems are, typically offering a small increase in size such as say 130% or 160% or so, is just no where near enough. You are just trying to be fancy, and it doesn't work at all!

What you want is to give your users the ability to resize the text they wish to read. And the recommendation is to offer a simple A/A (2nd "A" should be smaller; complementing it with text such as "normal", "2x larger", etc., is useful). Place this somewhere visible, the most common position is in the right top corner of the content the user wishes to read. The context of "content" is very important:

• Users care only for what they want they want to read. They are not totally blind, and you upping the base font-size is not exactly "curing blindness". If you have a title of 50px, yes they probably can see it fine, no need to make it 150px! You can very easily put the font-size switch on the article and have it affect only the body and that will work out great!

• Make your site navigation user friendly; if you need a magic switch to make that text bigger for some of your users to read then you probably need to make it bigger by default! Note: a interface that is meant to be used over and over such as a control panel is less affected since your users only have to put on their glasses and read that fine-print one time, but should still be largely easily accessible by all. (I'm referring to techniques of making destructive actions hard to accidentally click, which take precedence over such issues)

If you must make your entire site "elastic" (ie. dynamic based on font-size)

• first and foremost make sure if the user was to use one of the browsers No Style or Accessibility Style features (see: Opera) your site looks at least somewhat decent. Users with actual problems (and not just fooling around) are more likely to use those then try to resize immediately.

• Next make sure you have a visible switch for resizing text. Modern browsers don't resize text by default, don't assume your users are going to change those defaults.

• When users use the switch make sure different levels tweak the titles and various other elements. Make sure everything gets bigger, but make things like titles only grow slightly so they don't just fill the entire screen (assume the users windows is not maximized).

• Then, can you worry about every other headache envolved with elastic layout.

• Though all this analyze the line-height and make sure to pick a value that scales gracefully for your increments and typeface.

Note: extremely large font sizes are not the rare ones, its the other way around. Typically the preferred sizes are 12px (don't have anything lower for base, ever!), 16px and just monster large.

Although allowed, I've always felt it's a little nonsensical to size your fonts using em. When used for font sizing, it's a relative measure, and I think it just adds confusion to your CSS. If you really mean to give your font a size relative to it's parent font size, use percents. (font-size: 0.8em is equivalent to font-size: 80%, but the percent is more sensical.)

Otherwise use one of the absolute units. Browsers handle and scale them fine now.

Ems are very relevant for keeping your layout in proportion. 1em is, in digital typography, the size of the design space for each letter and is equivalent to the point size of the font, e.g. if the current font is 12pt then 1em is 12pt.

Percentages and Ems are not interchangeable - whilst it may or may not be preferable to specify a font-size relative to the parent as 80% rather than 0.8em, for example, the same doesn't hold true for anywhere else. If I want a 1em margin around an element that's entirely different from specifying 100%, which in that case would be relative to the amount of space the element occupies.

Specifying absolute units will throw the design into chaos. If a user chooses to enlarge their font, some browsers may not scale the text - and nor should they, pixel size should be independent of point size. There is also the issue that if you use relative sizes for fonts and absolute sizes for other measurements then your design will probably die a horrible death, so you should therefore specify all measurements relatively where possible, which means using ems. Browsers that confuse "enlarge font size" with "magnify this web page" on the grounds that "the user wants to see everything bigger and it will keep the page how the designer intended" are wrong, no matter how helpful it may seem. It's things like that which caused HTML to be such a huge mess in the first place.

I also don't see the merit in specify a body font-size of 62.5% - whilst it may make measurements easier because 1em = 10px, there are a couple of problems. First, you are still technically working in pixels, and secondly it assumes that the user's default font-size is 16px. If you rely on this ratio anywhere in your layout (such as matching image sizes), your design may suffer should the user have a different default font size, and if you are not relying on it and everything is relative then the font-size doesn't matter because everything will scale to match.

So yes, ems are still worthwhile.

Sizing fonts in ems doesn't really make much sense, because 1 em is the font size, by definition.

Sizing other elements in ems is critical, because it means that when you decide to change the font size, you don't end up completely hosing all your margins, padding, and other layout aspects.

I never use pixel sizes for fonts in any program (except Photoshop I suppose, since it just had it in pixels by default). I've always used point size (such as in Word) and have since moved to scaling relatively in CSS with em. I set the body font-size then scale using em.

Maybe I'm just used to knowing how big point sizes are on screen and in print. I can never guess the size of a pixel font height so I don't use it.

Always use "em", percent, or absolute names like "medium" for both font units and layout dimensions so the whole website scales with the user's browser settings. The exception is cross-browser style sheets that must deliver pixel-based font units for older agents like Internet Explorer 2-5, Netscape 2-4, etc. I have special style solutions that serve older browsers pixel-based font values only. My websites are 99.99% cross-browser compatible using this solution.

ONLY use "rem" for new browsers font size settings, not older cross-browser ones as its not supported for a wide range of older browsers.

NEVER use pixels for anything but images or strict layouts that you do NOT want to scale beyond zoom.

I always use "medium" for my default font-size. Why? Because every browser in the past had a different idea of the default font-size. There's NO WAY you can know that. Several posters here keep saying 16px is the default medium size font. Sorry, it is not. In older browsers it was 13px. Many others used completely different pixel sizes. Example of default font sizes for different browsers is below:

Device / browser | Default font size

Opera Mini 4.5 | 13px

Palm webOS 2.0 & webOS TouchPad | 14px

Opera Mini 7 | 17px

AOL 9 | 20px

Cybook Odyssey (e-book reader) | 21px

Blackberry 6.0 | 22px

NetFront NX | 23px

Kindle 32 | 26px

This is why you NEVER use pixel font sizes for fonts! Your website and layout should serve the USER'S FONT SETTINGS, not the other way around. There are lots of people that scale fonts in their browsers now with and without zoom, and for many reasons (eye problems, 4k televisions, small device screen, age, distance of screen from viewers, etc.). So pixel fonts would not be readable to those people as they would not scale for them or zoomed content not fit their device ratio. Scalable fonts would.

BTW.....Bootstrap fails as that framework is still stuck using pixel based fonts, ignoring a whole range of user-agents and user settings around the world.

That's why young developers that argue zoom is all they need now to deal with the variables of new "device pixels" on HD screens in order to rationalize static pixel units in their CSS are very uninformed about the purpose of web page development. We must serve the content and its user's various needs, not our pretty layouts and the huge egos that built them.