Using REM instead of Pixels

Introduction

In this lesson, we explore the advantages of using REM over pixels when building author websites. REM units enable flexible, responsive layouts and enhance accessibility by respecting user preferences for font size. You’ll also learn a simple CSS tweak to make using REM more intuitive, ensuring your site looks great and functions seamlessly across all devices.

Return to the Style Guide

In the previous lesson we created, saved and published our Style Guide Page. Let’s go back in and edit it with Breakdance.

• From the wordpress admin dashboard go to Pages > All Pages
• Hover over the Style Guide page
• As you can see we now have an option to edit in Breakdance
• Click on that to open the Breakdance editor

What is rem?

In CSS rem stands for “root em”, a unit of measurement that represents the font size of the root element. 

rem stands for “root em“ and refers to the font size of the document’s root element. This means that 1rem equals the font size of the html element, which for most browsers has a default value of 16px. Using rem can help ensure consistency of font size and spacing throughout your author website

And pixels?

px, on the other hand, stands for “pixels” and refers to the fixed size of an element in terms of the number of pixels on a screen. This means an element defined in px will always have the same size, regardless of the root font size.

Why choose rem?

I use rem for two reasons.

• Rem is better for flexible and responsive design layouts that adjust to the root font size. This can be helpful if you’re designing for different devices with various screen sizes.
• Improved Accessibility.

From the A11Y Collective website

Rem units (root-em) scale relative to the root element’s font size, typically the element. This makes them particularly useful for accessibility because users can set a default font size in their browser preferences that the rem units will respect. This ensures that the website scales appropriately to the user’s settings.

The One Problem with rem

There is, however, one problem with rem. 

The default value of 16 pixels.

1 rem equals 16 pixels but what if I’m coming from a history where i like to use a consistent 30 pixels of spacing between elements?

Some quick calculations tell me I need to use 1.875 rems.

Except on some pages I need a 60 pixels gap to define the distance between two pieces of information which takes me back to the calculator to find I need to set 3.75 rems and now building this website is becoming a maths problem. I’m a writer. Life is hard enough without extra maths.

How to fix rem

There is an easy solution to fix this.

We are going to change the root font size of rem from 16 pixels to 10 pixels.

Instead of 1 rem equaling 16 pixels it will equal 10 pixels.

Now if I’m moving from a 30 pixel gap I need 3 rem. If I want 60 pixels I’ll use 6 rem.

That’s a lot easier to manage.

A very short primer on CSS Code

To change the root font size in Breakdance we have to use a small piece of CSS code.

Cascading Style Sheets more commonly referred to as CSS is the language we use to style a Web page. 

If a website was a car we’d use HTML for the car’s skeleton, forming the basic structure and frame. CSS adds the paint and finishing touches, making the car look appealing with colour, style, and design.

WordPress and Breakdance do 99% of the heavy lifting of HTML and CSS so we don’t have to but sometimes, when we want something customised we need to use code.

I know I said this was a no-code course but it’s just this one little piece and all you need to do is cut and paste. Luckily Breakdance makes this easy as well.

How to change root font size in Breakdance

To change the root font size in Breakdance

• From inside the Breakdance Editor 
• Go to Global Settings
• Code
• Under CSS click on Add Stylesheet
• Paste in the code below

html {
font-size:62.5%;
}

You may have noticed a complete lack of change over in the live preview. That’s because we have defined our new root font size but we haven’t told Breakdance what to do with it yet. We’ll cover that in the Global Typography lesson that’s coming up.

This isn’t just me

This change to the root font size has become standard practice among web agencies building accessibility into website from the ground up.

I don’t consider myself to be an accessibility expert but as I learn better ways for sites to be available to all visitors. This includes using rem for font sizes and spacing to make it more accessible to users who have changed their browser’s default font size and px when I need fixed-size elements that won’t change, such as for borders or shadows. I will update the lessons and the author website template for improved accessibility.

Summary

This lesson covered the benefits of using REM for author websites, focusing on its role in creating flexible, accessible designs. We explored a simple CSS method to customise REM for easier calculations, making your site-building process more efficient and user-friendly. By adopting REM, you’ll ensure your website is visually appealing and accessible to a broader audience.”

These elements align with the lesson’s aim of educating authors on web design best practices while focusing on simplicity and accessibility.