How to size text in CSS
Richard Rutter, writing for A List Apart:
Sizing text and line-height in ems, with a percentage specified on the body […] was shown to provide accurate, resizable text across all browsers in common use today. This is a technique you can put in your kit bag and use as a best practice for sizing text in CSS that satisfies both designers and readers.
Although it was penned in 2007, Rutter’s method is still a best practice. Be sure to keep the root size at 100%. You may have seen root sizes of 62.5% (a leftover convention from the days of pixel-sized type) or 125% (a seemingly easy way to bump up all sizes at once), but we really shouldn’t use anything other than 100% because em-based media queries don’t pay attention to this root percentage. It’s as if they’re always seeing 100%. So if we use anything other than 100%, then 1em in a media query and 1em in a CSS property value cease to be equivalent.
Shared by Tim Brown on December 11, 2013. Last updated on June 23, 2014.
Topics: Web fonts