css body font,CSS Font Sizing

Following on from last week's article in which I briefly discussed css pixel sizing, I decided to look into the different ways you can declare your font size with CSS.

Meet the Units

There are several different ways you can declare the size of a font in CSS. Broadly speaking, the units fall into one of two categories - absolute and relative.

Absolute units are fixed and (mostly) relate to some physical measurement. Once they are declared, their size cannot be altered by changing the font size of some other element.

Relative units do not have an objective measurement. Instead, their actual size is determined by the size of a parent element. This means that their size can be altered by changing the sizing of that dependent element.

Here is a brief overview of some of the units -

Unit

Type

Description

px

Absolute

pt

Absolute

1 point is 1/72 of an inch

pc

Absolute

1 pica is equal to 12 points

%

Relative

Relative to the parent element’s font size

em

Relative

Relative to the parent element’s font size

rem

Relative

(root em) Relative to the html font size

keyword

Relative

xx-small, x-small, small, medium, large, x-large, xx-large

vw

Relative

1/100th of the width of the viewport

vh

Relative

1/100th of the height of the viewport

vmin

Relative

1/100th of the viewport’s smaller dimension (height or width)

vmax

Relative

1/100th of the viewport’s larger dimension (height or width)

You can see an exhaustive list of units here, but I will focus on what I think are the most relevant units - px, pt, %, em, rem, and vw.

What's the difference?

The difference between these units can be difficult to understand conceptually, so it is best to demonstrate their differences with practical examples.

Example 1 - Default Settings

In a blank HTML document, without you declaring any font sizing, there are default settings used. In most browsers, the default font size for the html and body tags is 100%. This equates to the following -

100% = 1em = 1rem = 16px = 12pt

This means that if you set the font size of one

to 100% and another

to 16px, they will render as the same size on screen. You can see this demonstrated here -

Example 2 - Absolute vs Relative Units

The difference between absolute and relative units can be highlighted by altering the html font size. If we set html { font-size: 200% }, this will affects only the

s with relative font size units.

This is a key advantage of using relative units. With the ability to scale the font sizes so easily, you can create a truly responsive site, just by altering the html font size. Max Luster has a great example of this here.

Example 3 - rem vs em (and %)

The Em (and %) unit works by calculating the current font size based on the parent element's font size. For example -

html {

font-size: 100% /* =16px */

}

body {

font-size: 2em; /* =32px */

}

p {

font-size: 1em; /* =32px */

/* font-size: 0.5em; =16px */

}

Because p inherits from body, which inherits from html, the paragraphs set in em and % units turn out twice the size we may have intended.

When you use em units for an element, you have to take into account the font size of all the parent elements. As you can see, this can get complicated and messy pretty quickly.

The solution to this problem is rem. rem is calculated based on the html font size only, not the parent element. For example -

html {

font-size: 100% /* =16px */

}

body {

font-size: 2rem; /* =32px */

}

p {

font-size: 1rem; /* =16px */

}

Using rem allows you to have the scaling abilities of em and %, but without having to deal with nesting issues.

Example 4 - Viewport width sizing

The vw unit, a new CSS3 unit uses the viewport width to calculate the font size. This allows for a more fluid responsive font sizing.

Although this seems like a great unit for responsive design, I personally am not a fan of it. It doesn't give me enough control over the size of the font, which almost always works out to be too big or too small.

My Method

Until I did this research, I was just using pixels to set my font sizes. This is because, nowadays, most browsers allow the user to zoom in if the text is too small for them, and so there is no accessibility issue.

However, I have found this method quite limiting in terms of ability to scale. Although my font sizing looks good on medium and small screens, it could be better optimised for larger ones. Even if users have the option to zoom in, that isn't something we want them to need to do.

My solution is therefore to work with rem (using pixels as a fallback).

html {

font-size: 62.5%; /* sets the base font to 10px for easier math */

}

body {

font-size: 16px;

font-size: 1.6rem;

/* sets the default sizing to make sure nothing is actually 10px */

}

h1 {

font-size: 32px;

font-size: 3.2rem;

}

This allows me to scale up my font sizes simply by writing -

@media screen and (min-width: 1280px) {

html {

font-size: 100%;

}

}

This method uses pixels as a fallback unit because rem isn't supported on IE8 and below. One issue this creates is when I change the base font size for scalability like above, this doesn't apply for the fallback font size. However, I don't consider this a huge issue because the ability to scale for larger devices is more of an extra feature than it is a core one.

If you have any ideas of how I can improve on this, let me know in the comments. I might also write a SCSS mixin so I don't have to input both the fallback and the rem units.