Size Matters, But Fun Counts: Exploring Font Sizes with Pixels and REM

During a recent workshop, the issue of Font Size came up, and I was a little quick to answer. I wanted to provide a little more detail, so in this article, I will talk about the units used on a webpage for defining size.

I should warn you that for some bloggers, this will be an “advanced” topic. It involves taking a bit more control of your webpage then some will feel comfortable with.

I will do my best to make it more comfortable…

I should also mention that the ideas explored reply to many different elements of a web page – the size of the type (font) on the screen, the padding in a block, the margins outside a block, images, etc… This article will focus on font-size.


Pixels, or px for short, is the most straightforward measure of size. It’s like a tiny dot on your screen that helps measure sizes and distances. Imagine your computer or phone screen is made up of a grid of tiny squares, and each square is a pixel. When you use pixels in CSS, you’re telling your browser how many pixels wide or tall something should be.

For example, let’s say you want to make the text in your website heading bigger. You can use the px unit to specify the size. If you set the heading’s font size to 24px, it will be 24 pixels tall. Easy, right?

How Big is a Pixel?

Unfortunately, that’s like asking “How big is a hole”? It depends…

I have a 27″ Monitor for my computer. 27″ refers to the DIAGONAL size of my screen, from corner to corner. Monitors vary, but for my monitor, that means the width and height of my computer screen is about 60 cm x 35 cm (you will see why I switched to metric in a moment).

But I can set my screen to different resolutions. A typical HD display is 1920 pixels by 1080 pixels. That means a pixel needs to be a little bigger than 0.0312cm x 0.0324cm.

If I change the resolution of my monitor to 4K (3840×2160), the pixel size is 0.0156cm x 0.0162cm. This smaller size is why the 4K picture is much sharper, but also why the words on. the screen are harder to read.

Lost yet? Me too. All you really, need to know is you have very little control over actual pixel size.

When we start looking at mobile phones, pixels are even smaller.

Lost yet? Me too. All you really need to know is you have very little control over actual pixel size.

How Big is a Character?

Ah, now we are talking. The size of characters on a screen are defined by a style setting called “font-size“. Themes set different font sizes based on whether the text is in a heading, in the body, on a button, etc… If left undefined by a theme, the browser determines the font size.

Remember this number – 16. The default font-size set by most, if not all browsers is 16 pixels or 16px. This number refers to the HEIGHT of each character – width changes based on the character.

By specifying the font size as the height, styles ensure that the text remains consistent and readable, regardless of the specific characters used or their widths.

When a font is designed, its glyphs (individual characters) are typically created with a specific vertical size in mind. The vertical height of the font determines the space needed to accommodate the tallest characters, like uppercase letters or accents on certain characters.

Root Font Size

The root font size is the default height of a font set by a browser. Usually 16px.

But a user can change the default font size.

Changing Root Font Size in Chrome.

In the image above, the default root font size is 16px, but users could change it to 14px, 18px, or whatever they wish.

If a WordPress theme is well designed, and you leave the size settings alone, when a user changes the default font size, everything else (headers, button text, body text…) should change with it. But once you override the font size….

Let me give you an example.

Blogger A writes a some text. S/he decides they want to emphasis a sentence by enlarging the font used for that sentence. They choose to increase the size from the default to 19px.

Nice, right?

Until the user changes the default font size.

In this example, the user has changed the default font size from 16px to 24px in the browser:

Notice how the default font size has increased, as the reader requested, but now the paragraph that the blogger changed looks smaller instead of larger. Why?

Well, by taking control, the blogger indicated the second paragraph should be 19px, so that it was larger than the rest of the text. When the reader changes the default font size to 24px, the second paragraph is still set to 19px, because that’s what Blogger A said it should be.

This type of design does not respect the needs of the reader, who may be visually impaired. It also doesn’t respect the wishes of Blogger A, who wants the text of the second paragraph to be larger.

But wait, we have a solution!


REM, or Root Ephemeral Unit, is a fancy term that simply means “size relative to the root”. So if the root font size is 16px, 1rem = 16px;

I REM = 16px

If the reader changes the default or root font size to 24px, 1REM is now 24px;

I REM = 24px

How Does REM Help?

If Blogger A uses REM instead of pixels to define the second paragraph,

the default size changes from 16 px to 24px. Now the size of the second paragraph also changes, from 19px to 28px.

Where Did Those Numbers Come From?

OK, time for some math.

If I want to express 19px in REM, I simply divide 19/16.

This gives me a value of 1.19. Blogger A sets the second paragraph to 1.19 rem, and everything looks the same as before.

I REM = 16px
I.19 REM = 19px

Now when the reader changes the default from 16 to 24, the second paragraph changes with it.

I REM = 24px
I.19 REM = 28px

This is the power of REM

How do I know what the Root Font-size will be?

You don’t – and you don’t need to. Just assume it’s 16px, and everything else usually falls into place.

This might help. Here are some commonly used values:

8px0.5 rem
12px0.75 rem
14px0.875 rem
16px1.0 rem
18px1.1825 rem
24px1.5 rem
28px1.75 rem
32px2.0 rem

Of course, you could go smaller than 8px, but I wouldn’t recommend that for web fonts.

Can’t I just use a percentage value?

Yes, but that can be more complicated and a topic for another day.

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *