Let’s do a back-to-the-basics refresher of absolute and relative font size units for the web. Print designers are almost spoiled for choice when it comes to selecting a unit for measurement of type. Though there are a number of font unit options to play around with in print, they become irrelevant once the content is printed. In the case of web though, the choice of font size units become key and remain relevant even after the website is up and running due to the interactive nature of the medium, the fact that text rendering can vary on different browsers and devices, and the powers users have in terms of being able to change their default font sizes and zooming of content. Web developers have the option of specifying font-size in CSS with keywords such as xx-small, x-small, small, medium, large, x-large, xx-large and even relative keywords smaller and larger. Despite being consistent on various browsers, these keywords do not offer a lot of control and are less used, so we will focus our discussion on the most popular four web choices: em, %, px, and pt. Additionally, there are the rarely-used picas (pc), and exes(ex). Is there a single clear winner? Or should we take a horses-for-courses approach and choose our unit depending on specific layout and scalability demands?

em

em is increasingly becoming the preferred unit of measurement in web typography. It is scalable (or user-resizeable), hence is also suitable for use on mobile devices, and is W3C recommended as a best practice. By definition it is the point size, or more generally, the height of the current font. Historically, the unit was derived from the width of the capital “M” in the currently used typeface, since ‘M’ was commonly cast the full width of square blocks in printing presses. However, in modern typefaces, the character ‘M’ is a little smaller than one em wide. For web, one em (1 em), therefore, is the height of the current font. Modern browsers, when no styles are applied, have a font size of 16px by default. If the website’s stylesheet does not have a font size specified already, 1em will be 16px, 2em will be 32pt, 0.75em will be 12px, and so on. When using ems for sizing fonts, the fonts will resize according to the browser’s default font size setting. The major advantage of em is that it is a relative measurement unit.

Initially, using ems (or relative font units, in general) can be tricky for a new user due to its cascading property especially if there is multiple nesting of elements. If the top-most parent element’s font size is defined by ems, every descendant element’s size (if defined by ems) scales with respect to its parent. So if the body tag is styled as 1em and the default browser setting is 16px, then all text under body will be of 16px size. If there is a p (paragraph) element inside the body with 0.75em font size, the text under p will be displayed at 16 x 0.75 = 12px. Now, if there is a span tag within p, and it is not defined in terms of font size, the text within it will retain that of p (i.e., 12px ). However, if the span tag also has a specified font size of 0.75em, all text under span will be displayed at 12 x 0.75 = 9px. If you change the default text size of the browser now, the text sizes will change accordingly.

body{
font-size:1em; /* 16 x 1em = 16px */
}

p{
font-size: 0.75em; /* 16 x 0.75 = 12px */
}

p span{
font-size: 0.75em;  /* 12 x 0.75 = 9px */
}

However, note that if an element’s font size is specified by an absolute unit like pixel, and its child elements are specified by em, the structure will lose its scalability and the nested elements’ font size will snap to their parent’s font size. Let’s say body font size is set as 12px, and it contains a p element with font size of 0.75em. In this case, the size of text under the p tag will be fixed at 12 x 0.75 = 9 px and resizing the browser settings will not affect it.

ems are particularly useful for fluid or elastic web layouts and (hello!) they even resize in IE6.

Percent (%)

Percent is almost identical to em in concept when applied to text related CSS properties like font-size or line-height. Percent is also a fully scalable, relative unit. Here, the current font-size is treated as 100%.

A result similar to the example presented above for em-s can be implemented with percent as follows:

body{
font-size:100%; /* 16 x 100% = 16px */
}

p{
font-size: 75%; /* 16 x 75% = 12px */
}

p span{
font-size: 75%; /* 12 x 75% = 9px */
}

Although em and percent are similar in theory, website usability tests seem to suggest that percent offers a more consistent display across browsers, especially in IE6, where em text tends to scale abruptly when browser font size settings are increased or decreased considerably.

Pixels (px)

A pixel (picture element) can be thought of as one dot on the computer screen (the smallest division of a screen’s resolution). Pixels are preferred by a lot of web designers and developers and are widely used since they are easy to work with, provide more control, and allow the designers’ Photoshop mockups to be replicated in a pixel-perfect manner on the browser. It is also likely to provide the most satisfying results, from designer point of view. The obvious user experience-related drawback of pixels is that they do not scale up or down to suit user preferences or device screen sizes. In older browsers that do not have the option of zooming, a font set at 12px will stay 12 pixels tall. Period.

Points (pt)

A point is 1/72 of an inch (i.e, 72 points = 1 inch). It is also an absolute font size measurement unit and does not scale. Points are traditionally used in print and are more suited for that medium. Point values can be put to use for print style sheets.

–

Note that these units are often not restricted to fonts. Just like a div can have heights set in pixels, it can also have heights set in ems. In such a case, the height of the box becomes “elastic”. And even though percent and ems are similar in theory, the similarity is restricted to font related properties only. Note that 100% width or height set to a div or any HTML element is completely different from setting 1 em height or width to them. Let this discussion not scare you off thinking you will now need a calculator during xHTML/CSS conversion. Generally, 1em = 12pt = 16px = 100%. You can also take the help of online tools like PXtoEM.com and Em Calculator.

Cheers.

Latest posts by Smarajit Dasgupta

  • Share/Bookmark