Advantage of setting font-size to greater than 100%

Question

In this very awesome guide to developing a responsive design, the author discusses setting a fixed column width that becomes fluid at smaller screen sizes:

Content is 37.62136em wide (multiply that with 16px browser default and the 103% font-size I have on content = 620px) until the smaller viewports when it expands to 100% width.

The part that puzzles me is using font-size: 103%. The result is that the browser renders the text as 17px, so why not set that manually and calculate the content div's width based on an em of 17px? Perhaps using a font-size of greater than 100% has other side-effects I'm not aware of?

Answer 1

I don't think there is any secret-sauce in the choice for 103%. My guess is that 103%/17px is what looks best for the typeface.

As long as you are setting everything else in em units, you can easily scale the font-size on html or body to have those changes reflected throughout the site. That base font-size (which I typically leave at 100%/16px) is a matter of preference.