A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how they like, which includes the font size and the size of the screen.
Because of this, it is generally accepted that ’em’ or ‘%’ are the best units to use for sizes, rather than ‘px’, which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example.
By default the ’em’ is a standard of the default size. For instance, if you set {font-size:2em}, you are telling the browser “make the font two times the current size.”
Using ’em’ units can be a bit overwhelming when you first start using them, but here is a tricky bit of way to use the functionality (sizeability) of the ’em’ unit while keeping the ‘px’ thought process in your head … you’ll have to do some math, but if you can move a decimal, you can use this:
- start by setting your font-size in the body to 62.5%
body {font-size:62.5%} - from there on out, for every element that you size (font, border, width, height, margin, padding, etc) all you have to do is divide whatever ‘px’ value you would have used by 10 and add ’em’
Keep in mind; however, that for people who use the “text resize” feature in their browser (IE, really), EVERY element that uses the “em” as a unit of measurement will grow/shrink accordingly. So, if you want just the body text to resize itself, only use “em” on that part, otherwise, any boxes or borders or margins or padding you have set on other things using “em” will grow/shrink as well. Just a little tip.
Example:
instead of –h1 {font-size:18px}
use –h1 {font-size:1.8em}← see, moved a decimal one place (divide by 10)