Author: Edit Olah

Font sizing

px, em, and rem

Font sizing is a fundamental topic to get your head around when starting a web project. When researching this subject, I learnt that font-sizing can affect the sizing of other elements as well, since it is used to calculate the value of em and ex units.

Basic definitions of used length units:

px:

Pixels (px) provide accuracy in sizing. When using px for font sizing, you are telling the browser to render the height of the font at the exact number of pixels you specified. (Note: browsers might render this slightly differently as they use different algorithms.)

em:

In traditional typography it used to mean the width of the letter ‘M’, hence the name. Since not all languages have the letter ‘M’ in them, it came to mean the height of the font in general. Em is dynamic in the sense of it being calculated based on the font size of the parent element. One important thing to remember when using ems as length units is that it compounds, which means that it will have a multiplication effect in nested elements.

rem:

Otherwise called ‘root em’, rem is also relative length unit, but without the compounding effect, as it is calculated based on the font size specified in the root element (html element). This means that there is a constant single font size based on which all the rem units will be calculated.

I decided to use:

  • px for margins and borders and everything that needed a constant sizing
  • em for fonts and things that are relative to fonts
  • rem for fonts where compounding needed to be eliminated

Based on Jonathan Snook’s article titled 'Font sizing with rem', I specified the base font size in the html element in percentage in a way that the 16px font size, that most of the browsers set as default, would be set to 10px to make further calculations easier.

The way to calculate em is:

em = desired pixel value / font size of the parent element in pixels

0.625 = 10px / 16px

So in your CSS:

html {
   font-size: 62.5%; /*if browser default is 16px, this equals 10px -> 10px = 1em*/
}

In this way, if you want to have a header 1 with 18px as font size, the conversion is simple:

h1 {
   font-size: 1.8rem; /* or em */
}

For more information read the article on font-size on the Mozilla Developer Network.

Read more about how I built this website here:
Barefoot in the Park website project – Responsive Web Design

Happy coding!

Further reading:

Vertical rhythm: The Elements of Typography Style Applied to the Web, Richard Rutter’s web publication

Improving layout with vertical rhythm: Tuts+

Compass – vertical rhythm: Compass website

Modular scale: A List Apart

How to Size Text in CSS: A List Apart

Related blog posts

  • Avoiding using floats

    Avoiding using floats

    Using inline-block grid and justify instead

    Utilising built-in basic behaviour of HTML and CSS can give you a break...

    More details >>

  • Intrinsic Ratios

    Intrinsic Ratios

    Fluid, dynamic element height with padding-top trick

    One of the main learning points of building this website was that there...

    More details >>

  • Responsive web design

    Responsive web design

    Basic concepts

    I have been working with websites designed to be responsive since I started...

    More details >>

Contact Edit

Get in touch

If you are interested in hiring me, please drop me an email. I would be happy to send you my up-to-date resume.

Drupal Association member
Image of Edit