This post will cover all of 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, especially since I prefer to use WordPress and website-building tools like Oxygen and Bricks Builder a lot.
That said, I honestly believe it’s helpful to understand some basic HTML and CSS, even when using website builders. It’s not essential, but it certainly helps a lot.
What is the difference between REM and PX?
Let’s first talk about the difference between rem and px in CSS.
rem stands for “root em“ and refers to the font size of the root element of the document. 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 that an element defined in px will always have the same size, regardless of the size of the root font.
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 size of the root font. 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 to have 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 font size of the root element to 62.5%. Here is an example:
/* Root Font
------*/
html {
font-size: 62.5%;
}
If you’re using a website builder tool like Oxygen Builder, you can add this to your main stylesheet. For Bricks Builder, from inside the editor, your can navigate to settings > theme styles > typography, and you should see the HTML font-size option.
OK, so now what?
At 62.5%, it means that 1.6rem translates to 16px (1.6 times the font size of the root font). However, if the root font size was set at 100%, this would translate to 1rem = 16px. However, it’s much simpler to recognize that 1.6rem is 16px, so we adjust the root font size to 62.5% and did not have it set 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: #494949;
font-size: 1.8rem; /* Translaes to 18px */
}
/* H1 heading element
------*/
h1 {
font-family: Poppins;
color: #494949;
font-size: 5.4rem; /* Translaes to 54px */
}
What is EM?
em is a 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 good 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:
p {
font-size: 1.6em;
}
em units can also be used for other CSS properties that accept length values, such as margin, padding, 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.
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 individual 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.
