Using percent for font size?
In CSS3, use rem
(root em
). Sizing will not be affected by em size of the parent element.
The root font size is set by setting the font size on the :root
pseudo-element, like so:
:root {
font-size: 16px;
}
try using this
body {
margin: 0px;
padding: 0px;
font-size: 62.5%;
}
body>#wrapper {
font-size:1em;
}
so, when you say something like 1em inside the "wrapper" you'll have a size very similar to 10px. here's a example table:
3em == 30px
.5em == 5px
8.5em == 85px
This will help you in the transition
P.d: of course, you need a wrapper tag after the body
The standard in web design as far as I have experienced it is to use a percent to set the font size in the body, then to use ems to change the font sizing after that. You could use percents outside the body tag with no adverse side effects, but I think many developers find ems easier to work with (anyone is free to check me on this).
The danger comes if you use ems to set the body font size; older browsers choke and incorrectly display the text, especially when zoomed.