Last year's summer I was modifying the design of a web page for make it more "responsive" (adjustable to different resolutions and sizes for web browsers of diferent devices: mobile, laptop, pc, tablet). Reading about this for HTML 5 with CSS (Cascading Stylesheets) 3, I found an interesting measure unit, that I thought that I should write a post about it: the em.
em is a relative (and scalable) measure unit, that represents the value of the width of the M letter (upper case em letter) in the current typeface and point size.
Traditionally, in printing presses, the M was commonly cast the full-width of the square blocks, or em-quads.
The fact that M is commonly the full-width, it's why em is usually represented as a decimal value less than 1 in web designing (e.g., 0.7 em), or as fractions (e.g., 70/100 em .
An algorithm that have to play CSS with em must do a mathematical calculation accoring the points of the typography. For example: a typography of 12 points, 1 em = 12 points.
By default, 1 em = 16 points ( 16 points - typeface ).
In computing, in CSS, the rem or root em, is the font size of the root element of the document, and is constant throughout it; not like the em, which may be different for each element.
A similar measure unit in typography to em is the "x-height", that refers to the distance between the baseline and the mean line of the lower-case letters in a typeface. Typically, this is the height of the letter x in the font.
In computing, in CSS and LaTeX, the x-height is called ex , and the exact ratio of ex to em can vary (aprox. 1 ex = 0.4 - 0.5 em) by font size within a browser according the rounding.
In typography, an en is another measure unit, that represents half of the width of an em, and supposed the width of the uppercase letter "N" . ( 1 en = 0.5 em ) . By default, 1 en = 8 points.
We've seen that this meause units are referred to the point, more exactly the "typographic point". This is the smallest unit of measure in typography, and it's used for measuring font size, leading, and other items on a printed page.
The size of the point has varied throughout the history of printing. Since the 18th century, the point's size has varied from 0.18 to 0.4 millimeters.
Traditionally, in metal type, the point size of the font described the height of the metal body on which the typeface's characters were cast.
The point was first established by the Milanese typographer, Francesco Torniella da Novara (c.1490 – 1589) in his 1517 alphabet, L'Alfabeto. The construction of the alphabet is the first based on logical measurement called "Punto," which corresponds to the ninth part of the height of the letters or the thickness of the the principal stroke.
| 1 point in ... | ... is equal to ... |
| typographic units | 1/12 picas |
|---|
| imperial/US units | 1/72 in |
|---|
| metric (SI) units | 0.3528 mm |
|---|
For more
point definitions and equivalences along the histoy, access to
this link.
 |
| Fournier's printed scale of his point system, from Manuel Typographique, Barbou, Paris 1764, enlarged. |
Since 1980s, the digital printing has largely supplanted the letterpress printing and has established the DTP point (desktop publishing point or PostScript point) as the facto standard.
The DTP point is defined as 1⁄72 of an international inch (about 0.353 mm) and, as with earlier American point sizes, is considered to be 1⁄12 of a pica:
12 points = 1 pica . 6 pica = 1 international inch
In 1996, it was adopted by the W3C (World Wide Web Consortium) for CSS, where it was later related at a fixed 4:3 ratio to the pixel due to a general (but wrong) assumption of 96 px / in screens.
The notation of measurement in typographic points can be represented in different ways. For example
16 points can be written in:
- Traditional sytle: 1P̸4p (1 pica plus 4 points). Where 1 pica = 1P̸ = 12 points.
- Desktop style: 1p4 (1 pica plus 4 points). Where 1 pica = 1p = 12 points.
- CSS defined by the W3C: 16 pt. Where 1 pt = 1 pc = 1 pica .
References:
