Em Calculator. How to Size Text in CSS. There’s been a welcome resurgence of interest in web typography over the past year or so, with many articles and conference talks offering techniques and theory.
Frequently asserted is the notion that good typography requires accurate control of font size and line-height. But this is the web: it’s a special medium where the reader can have as much control as the designer—the implication being that text on the web, while bending to the designer’s will, must also be reliably resizable across browsers and platforms. In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice that satisfies designers and users and works across browsers and platforms.
We’ll reach our destination by the traditional method of trial and error. With more than a nod to Owen Briggs’s pioneering work of 2002, I have created a base case with six iterations and 161 screenshots. PXtoEM.com: PX to EM conversion made simple. Adamdscott. This post is part of a series entitled Better Web Typography that I will be publishing over the coming months.
Ems are a relative unit of measure for type, meaning that 1 em is equal to the current type size. For example, the typical default browser body text is 16px, so writing: is equivalent to writing.