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

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.

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.

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.