Is sizing fonts using "em" still relevant?

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.

Font size in css http://easycaptures.com/fs/uploaded/213/2470522253.png

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

Should we still use em and % for defining the font-size of the website elements?

Is there really any point to using relative font sizing in CSS?

Why em instead of px?

Font size in CSS - % or em?

CSS font size: relative vs. absolute values. Which to use?

Problem with EM

Using relative instead of fixed size in CSS

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

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

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.