Designers seem confused about which one to use for defining font-size, spacing, etc.. px or rem or em or vh ? and they are rightly confused because most of WordPress plugins & themes including elementor give options to set font sizes via px, em, rem and vh.
I would not like to get into the debate, as many others online are already doing so and everyone seems right from their point of view.
Lets discuss differences between px, rem, em and vh
The basics
- rem: rem units are relational to the font-size value of the HTML tag. For example, if the font size of the HTML tag is 16px (that is the default size for an html document), then 1rem unit is equal to 16px. That makes .5rem=8px, 2rem=32px, etc.
- em: em units are similar to rem units, but whereas a rem unit always references the HTML tag, an em unit is relational only to it’s nearest defined parent element. For example, if the div wrapper for a callout is set to font-size:20px, then any child element set to 1em would be the equivalent of 20px, .5em=10px, 2em=40px, etc.
- vw & vh: the vw (view-width) and vh (view-height) units are relational to the viewport size, where 100vw or vh is 100% of the viewport’s width/height. For example, if a viewport is 1600px wide, and you specify something as being 2vw, that will be the equivalent of 2% of the viewport width, or 32px.
- px: Pixels are defined as a single point in a graphic image, and are often tied to viewport resolution. If a viewport is 1600×90, that typically means that there are 1600px pixel columns & 900 pixel rows, with a pixel in each cell. This definition is maybe overly simple when factoring in dpi or pixel density, but can stand as reference for the most part.
Source: Codepen
How I use rem ?
/*mobile*/
@media screen and (max-width: 480px) {
html {font-size:10px;}
}
/*tablet*/
@media screen and (min-width: 481x) {
html {font-size:13px;}
}
/*laptop*/
@media screen and (min-width: 1281px) {
html {font-size:16px;}
}So now I want to define headings font-size in rem
h1 {font-size:3rem}
// on desktop its 48px | on tablet its 39px | on mobile its 30px
h2 {font-size:2rem}
// on desktop its 32px | on tablet its 26px | on mobile its 20px
header {margin-top:2rem}
// on desktop its 32px | on tablet its 26px | on mobile its 20pxrem saves time, while em values are tough to remember, but still, em is useful in certain scenarios.
To conclude my personal preference is rem over em and px.