Complete Beginners Guide To REM, EM, and PX (Why you shouldn’t always use PX)

  | 
By
Fabrizio Van Marciano

This post will cover all the essential aspects of using rems, ems, and pixels in your website design projects.

These days, I don’t spend as much time writing code as I used to, specifically since the existence of WordPress website-building tools like Oxygen, Breakdance, and Bricks Builder.

That said, I honestly believe it’s helpful to understand some basic HTML and CSS, even when using drag-and-drop website builders. It’s not essential, but it certainly helps a lot.

Learn more about my WordPress visual design courses. Check this page.

What is the difference between REM and PX?

Let’s first talk about the difference between rem and px in CSS. If you are completely new to all of this, hopefully, you’ll find this post useful

rem stands for “root em and refers to the font size of the document’s root element. This means that the size of an element defined in rem will be relative to the size of the root font.

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.

So why would you use one over the other?

Well, using rem can be useful if you want to create 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.

On the other hand, using px can be useful if you want complete control over the size of an element and ensure that it always stays the same. This can be helpful if you’re designing something like a graphic or an icon that needs to be a specific size.

In conclusion, rem and px are two units of measurement in CSS that can be used for different purposes. rem is useful for creating a flexible and responsive design, while px is useful for having precise control over the size of an element.

How to set the root font size and use REMs?

In your document, i.e. stylesheet, you can set the root element font size to 62.5%. Here is an example:

/* Root Font 
------*/
html {
    font-size: 62.5%;
}

If you’re using a website builder tool like Oxygen, you can add this to your main stylesheet. For Bricks Builder, from inside the editor, you can navigate to settings > theme styles > typography, and you should see the HTML font-size option. However, it can be confusing sometimes because Bricks seems to have multiple places to define the font size.

OK, so I’ve set this at 62.5%… now what?

At 62.5%, it means that 1.6rem translates to 16px (1.6 times the size of the root font). However, if you set the root font size at 100%, this would translate to 1rem = 16px.

It’s much simpler to recognize that 1.6rem is 16px, which is why we adjust the root font size to 62.5% and not at 100%.

In our style sheet, we can continue using the rem unit to size our fonts. Here are a few examples –

/* Examples of using REM in our CSS stylesheet
------*/
/* Paragraph text
---*/
p {
   font-family: Open Sans;
   color: var(--text-light-80);
   font-size: 1.8rem; /* Translaes to 18px */
}
/* H1 heading element
------*/
h1 {
   font-family: Poppins;
   color: (--text-light);
   font-size: 5.4rem; /* Translaes to 54px */
}

What is EM?

em is another unit of measurement in web design that is relative to the font size of the parent element. 1em is equal to the current font size. For example, if the font size of the parent element is 16 pixels, then 1em is equal to 16 pixels.

The use of em units allows for scalable web design because it allows the font size to be set relative to the rest of the design. This can be useful for creating responsive layouts that look suitable on different screen sizes and devices.

To set the font size of an element using em units, you can use the font-size property in CSS. For example, you could use the following code to set the font size of a paragraph element to 1.6em, which would be 1.6 times the size of the font size of the parent element:

/* Paragrapht text size
------*/
p {
  font-size: 1.6em;
}

em units can also be used for other CSS properties that accept length values, such as marginpadding, and border-width.

Should you always use REM or PX in web design?

It’s generally a good idea to use rem units for font sizes and px for other properties such as width, height, padding, and margin. This is because, as already mentioned, rem units are based on the root element (html) of the document and are therefore more flexible and responsive than px units.

Recommended: How to add fluid responsive typography in Oxygen Builder

One advantage of using rem units are that they allow you to size elements relative to the root element, rather than to their parent element. This means that you can set a base font size on the html element, and then use rem units to specify sizes for other elements that are based on that base size. This makes it easier to adjust the overall font size of your design without having to update each element. I hope this makes sense so far.

On the other hand, px units are absolute units that are not affected by changes to the root element or parent element. This can make them less flexible and responsive, but they can be useful for ensuring that elements remain a specific size on different screen sizes and resolutions.

Ultimately, the choice between using rem or px units will depend on your specific design needs and the level of flexibility and responsiveness that you want to achieve. It’s generally a good idea to use a mix of both units in your design, depending on the specific properties and elements that you are styling.

Wrapping up

If like me, you’ve been so used to using px for many years and are making the transition to using em and rem in your design, keep at it. Once you are over the habit of using only px, and make use of other units you will find your web design projects will flow more freely.

Need help with your WordPress website? Click here to see how I can help you. Or check out my Membership Options here. You’ll get access to many more tutorials like this as well as over 200 hours of HD video tutorials and lesson topics.

Go straight to the main video