Which is the more preferable font size reset?

Up until now, I've been using a 14-pixel reset in my theme's main CSS file, but after looking online, I see that a lot of web developers prefer a 10-pixel reset;

Here is what I'm currently using:

/* reset.css */
* { font-size: 1em; }

/* dark-theme.css */
body { font-size: 0.875em; } /* 14 pixels equals 1.0em */

Here is what I've seen preferred by others:

/* reset.css */
* { font-size: 1em; }

/* dark-theme.css */
body { font-size: 0.625em; } /* Now, 14 pixels equals 1.4em; easy! */

With a simple decimal calculation, I can see the latter method being easier to work with. Other than that, is there any real upside to the 10px method, or any downside to my 14px method?

I use 14 pixels because I find that Tahoma and Segoe UI are both at optimum reading size for the majority of users, with text resize options available if required. A 16-pixel font size looks too cluttered for my personal taste.

The answer is neither. The idea that 1em = 16px is only true in two scenarios:

• The browser's default font-size is 16px and the user has not adjusted it

• The user has specified that they want a default font-size of 16px because the browser's default was something other than 16px

There is no way to accurately convert between em and px. If you genuinely want a 14px font-size because your chosen font looks best at 14px, then specify that size:

html { /* or body, doesn't matter */
    font: 14px Tahoma, sans-serif;
}

You're still free to use relative font-sizes elsewhere if that's what you desire (I recommend that you do: you will only have 1 location where you have to adjust your font-size). Just keep in mind that your specified font may not be available on the user's device and the fallback font might have very different characteristics than you're expecting (eg. the letters might be the same height, but have a different width or vice versa). You also might make your user upset because text is too small for them to read.

Honestly, the later example is a terrible practice that should have stopped a long time ago. The idea that scaling everything to 10px makes math easier is a fallacy, especially when you consider that it is never safe to assume that 1em = 16px.

Here's a pretty common scenario showing why this important to understand:

Imagine your typical 2-column blog. Sidebar on the left, blog content on the right. How big do you make the sidebar? You think to yourself, "300px sounds good", so you do the math: 300 / 16 = 18.75 and use 18.75em as your sidebar's width. Now you want to add an image to your sidebar that's 300px wide. Does it fit? How well does it fit?

If the user's font-size is smaller (rare, but it could happen. I've seen one source claim that iOS browsers have a default of 14px, but couldn't find anything confirming this), then the image overflows out of the sidebar. If the user's font-size is larger because they have poor vision, then it fits with lots of extra space. Extra space is usually ok, but you need to make sure you understand that this can happen and that you need to be able to plan for these scenarios.

Related:

• http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

• http://csswizardry.com/2011/05/font-sizing-with-rem-could-be-avoided/

StackExchange Code Review Q#36364, answer score: 8