Font size

In my opinion, one of the most confusing parts of CSS styling to get the hang of was the font-size property. The large number of possibilities are the problem - in CSS you are given a lot of different measurement units in order to define the size of your font. But which one is the best? I am not to be the judge of which unit is best, but I do have an opinion concerning which unit you should choose.

Font-size - the em measurement unit

The 'em' is a scalable unit designed specifically for web media. The 'em' is designed to take the users preset font-size into consideration, this means, that 1em is always the users preferred font-size. 'Why would you want that?' one might ask. Well, a lot of people prefer a larger font-size due to vision impairment and if you try to force a smaller font-size on them, they might leave your site without ever reading a single sentence. So, using 1em as your standard font size you probably heighten the user experience to those with vision impairment.

But why don't all use the em measurement you might ask? Well, there are two problems: some people prefer pixel-perfect layouts and then a fluid measurement as the em isn't a good choice.

How big is an em?

According to W3C 'an em is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.' In other words - an em does not have a fixed size.

Furthermore, it can be hard to get grip of how big a '2em' text is as the measurement is scalable. If the user has not changed any settings regarding font-sizing, then 1em normally equals 16 pixels and 2em equals 32 pixels. If you are used to using pixels when defining your font-size this might be a hard transition. Here is an example for you to explore how the em unit scales:

<style>
.textLarge {font-size: 2em;}
.textRegular{font-size:1em;}
.textSmall{font-size:0.7em;}
</style>
<p class="textLarge"> To travel is to live - H. C. Andersen </p>
<p class="textRegular"> To travel is to live - H. C. Andersen </p>
<p class="textSmall"> To travel is to live - H. C. Andersen </p>

Font-size - the percentage measurement unit

A lot of people choose to use percentages when defining the size of their font. The reason is obvious: we all know percentage beforehand and it is easy to understand that a font of the size '150%' is 50% larger than a font size '100%'.

If you choose to use percentages as your measurement unit, you can use it in two ways: You can choose to make your font-sizing relative to the users preferences. You do this by adding a declaration to the body:

body {font-size:100%;}

When you do this, you tell the browser to use the users preset font size as your standard font size and then you can scale all of your other text according to this.

<style>
body {font-size:100%;}
h1 {font-size:170%;}
p {font-size: 130%}
.smallerText {font-size: 50%;}
</style>

<h1>The Perfume by Süskind</h1>
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="smallerText">But they couldn't escape scent</span>.</p>
</style>

The difficulty with scaling - parent elements!

You need to be aware of one thing! When scaling font-sizes you scale according to the parent element! This means, that the current font size is always equal to 100% when you scale the next font size. Let's have an example to show why this might become a problem:

<style>
body {font-size:100%;}
h1 {font-size:170%;}
p {font-size: 130%}
.smallerText {font-size: 50%;}
</style>

<h1>The Perfume by Süskind</h1>
<span class="smallerText">A short excerpt</span>.
<p>For people could close their eyes to greatness, to horrors, to beauty, and their ears to melodies or deceiving words. <span class="smallerText">But they couldn't escape scent</span>.</p>

As you can see, there are two instances of the class 'smallerText' and you would assume that they had the same size, right? Well, unfortunately that's not how it works. The parent of the first instance is 'body' where as the parent of the second instance is the <p> tag. This means that the first instance is scaled to be 50% of the body where as the second instance is scale to 50% of the paragraph! If you take a look at the example, you immediately see the size difference - the first instance is a lot smaller than the second.

TIP!

Oh, you should be aware that this scaling 'problem' also applies if you choose to use em's instead of percentages.

Font-size - em vs percentage?

So, which on should you choose - ems or percentages? Well, that is entirely up to you and it depends on which measurement system 'feels' right for you. But I believe that you should fiddle around with both units in order to get to know both systems.

What you have learned

• The em measurement unit is specifically designed for web use
• 2 ems is double the size of 1 em
• Many people find it easier to use percentages as this is a unit we are familiar with - but it behave just like ems!
• Whether you use em's or percentages you scale the text based on the parent element. This means, that if you have a lot of elements nested inside of each other you need to tread carefully in order to achieve the result you want