handle browser minimum font size

fixes #6850 

currently the site zooms fine, but it doesn't handle minimum font sizes well. This is because although, when the min font size is set, breakpoints (in ems) respond as you'd expect, other layout dimensions (grids etc) are laid out in rem, assuming 1rem = 10px. By setting a minimum font size, the user overrides our rem size, so that 1rem = whatever they've set: 16px for example. 

consequently anything 10rem wide goes from 100px to 160px etc, at the same time as some text displaying larger and breakpoints kicking in earlier. Basically, we're laying out the page assuming we know the pixel size of a rem, when actually we don't.

This can be handled by not setting the rem size, so that 1rem = 1em = browser default. then, layout and breakpoints use the same number of pixels. 

this means, though, that any fonts larger than the base are still not adjusted, while those smaller than it are. Given we've already converted them from pixels to rems, the relative relationship between font sizes is already captured in the CSS. 

Therefore, by also explicitly setting the base font size to the browser's (in the first steps js, and only where it is not the baseline against which we calculate rem values), we can effectively zoom the page, so that any semantics/hierarchy implied by the font-size choices are also maintained

it seems to work as expected. @mattosborn @phamann @ironsidevsquincy @uplne @sammorrisdesign - is there anything glaring (or subtle) here you can think of that would cause problems?

here's a screen shot of the current state of the branch http://www.browserstack.com/screenshots/2babca766a0d9b9195b7263457290715ac98603c
this block only runs if the browser is "modern" as far as we're concerned - https://github.com/guardian/frontend/blob/safari-font-boost/common/app/views/fragments/javaScriptFirstSteps.scala.html#L78

So just need to make sure we're not excluding any browsers