I've read a lot about the pros and cons of sizing with either relative or absolute font sizes. Fixed sizes don't zoom in IE6 but that's not much of an issue these days. Accessibility is important, but I assume that all good accessibility software is built to deal with these issues?
I guess it mainly comes down to whether you want to be able to change all font sizes with one rule (i.e. the default font size you set) or whether you want to be able to change a font size somewhere without affecting nested elements (this is the thing that frustrates me most!).
Anyone have any tips?
They Are Just Optical Reference UnitsPixel values are no longer based on a hardware pixel. It just wouldn't work and will look very different for many screens and resolutions. They are instead based on an optical reference unit.
You should set the font-size in the body tag to 100% . That way, people who visited your site will see the text at the right size for what they have set in their browser. For instance, people with low vision may set the text size larger. If your font-size is set to 100% , they should see it exactly as desired.
So to answer our original question, “what changes in our design when using rem instead of px ”. The answer is, for all users not changing root font-size (which, no doubt, is the large majority), absolutely nothing changes and your design looks just as it would with px .
Absolute units are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of some other element. Relative units do not have an objective measurement. Instead, their actual size is determined by the size of a parent element.
According to YUI Font CSS,
Always use percentages as the units because they render more consistently than ems, and because they allow user-initiated resizing (unlike pixels).
Relative font sizes work pretty well when they are part of a framework like YUI. Especially because they normalize how fonts work across browsers.
Personally, I do throw in absolute px every once in a while, but typically only for text that must somehow match up size-wise with some other design elements (like a menu).
The % stuff does break down when you assign % to a certain element and then a different % to a contained element. But that's the only real gotcha I've found.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With