font_image

Web font sizing

Date :
21 July 2014
Authored by :
Le Tong

Until recently, I never heard of rem units. I have used em, pt and pixel (px). The latter two of which can be used in cases where the output environment is known (such as print layouts) and where scaleabiity and flexibility to adapt to various screen sizes is not a requirement.

However, if you have responsive designs in mind especially for the online medium, absolute unit lengths like px and pt will present a usability problem as it restricts the user from being able to change the size of fonts using the browser.  You could have ugly white spaces, readability problems for the person who can’t read small fonts that couldn’t be scaled up as well as a mangled looking page if relative units are used on other webpage elements. There are ways around this problem but it is a problem none the less that could easily be avoided. How do you do this?..you might be asking.

Em units are relative unit lengths and have become more common to enable fluid/ responsive designs. The W3C best practices recommend creating web pages based on responsive designs that use relative units of measure. The ability to resize text is a success criterion under WCAG 2.0 and therefore should be a core requirement in web development.

WIth the above in mind, It would then be practical to use fixed font sizes for your print stylesheets and relative font sizes for the screen presentation.

Understanding em unit

An em unit is defined as

“equal to the computed value of the font-size property of the element on which it is used”.

 For example if you have:

.element  {

font-size:20px;

}

Then this means that 1em on that element  or any of its children would be equal to 20px. If you now add to the CSS class above to get the following:

.element {

font-size: 20px;
height: 4em;
width: 4em;

}

Then the height and width is equal to 80x80 pixels.

The em is based on the base setting but if the element doesn’t have a specified font size then the default value for 1em is equal to 16px.

REM..the new unit on the page

CSS3’s latest unit is the rem unit (or “root em” unit).  It is defined as

“Equal to the computed value of ‘font-size’ on the root element”

“When specified on the ‘font-size’ property of the root element, the ‘rem’ units refer to the property's initial value.”

 It allows you to base the em units on a root unit defined on the <html> element rather than relative to its parent element. This way you won’t get tangled up in compounding font sizes though nesting of elements as it is the case for em units.

If no font size is defined in the <html> element then the rem unit will be the default 16px.

 

Further reading: