I'm sure you've noticed the many font-size units that are out there being used on the web. There seems to be an endless debate as to which unit is "the best," especially between pixels and ems. My take on it depends on what type of project you're working on and what goals and requirements you have. Let's dive in and take a look at the different font-size property units.
To make things easy, the units are split into relative and absolute groupings.
Relative font sizes:
font-size: px– pixels
font-size: em– measures width of a font
font-size: %– percentage
font-size: ex– x-height of a font
Relative fonts can be resized by the browser and are recommended for screen use (computers, tablets, mobile, etc.).
Absolute font sizes:
font-size: in– inches
font-size: cm– centimeters
font-size: mm– millimeters
font-size: pt– point
font-size: pc– picas
font-size: xx-small, x-small, small, medium, large, x-large, xx-large
Absolute fonts render inconsistently across platforms and can't be resized by browsers or other devices. The only reason you may want to use any of these units is for printer friendly stylesheets. Other than that, it's not recommended to use these for screen use.
In addition to the font sizes above, CSS3 has introduced a few more:
font-size: rem– root em
font-size: vw– 1/100th of the window's width
font-size: vh– 1/100th of the widow's height
Here's what the W3C recommends for screen and print font sizes:
- Recommended: em, px, %
- Occasional use: ex
- Not recommended: pt, cm, mm, in, pc
- Recommended: em, cm, mm, in, pt, pc, %
- Occasional use: px, ex
- Not recommended: N/A