I will begin with some background knowledge about CSS properties and values, which I think is necessary. Then I’ll discuss the differences between absolute length values and relative ones. REM is a relative length value.REM
In the last two parts I discuss why REM is useful with regard to font size, and how it can help make webpages responsive. Let’s get to it.
What you need to know
In this section I will first say a few things about CSS, as a way of introduction.
What is CSS?
CSS (which stands for Cascading Style Sheets) uses properties and values to create all the aesthetic magic that goes on in webpages.
Say, you want to enhance your image with a beautifully crafted border,
and you want the edges to be a solid black line. In this case border would be the property to choose,
and solid the value. This is a keyword in CSS that instructs it to create the desired solid border.
As you may have guessed, there must be different kinds of these values,
seeing that merely a solid line as a border is not much of an adornment.
The property border indeed accepts keywords, colors, and lengths. Actually, this is because border is shorthand for border-width, border-style and border-color. So instead of specifying each of these properties, border accepts these values for all of them at once, like so:
What you need to know
In this section I will first say a few things about CSS, as a way of introduction.
What is CSS?
CSS (which stands for Cascading Style Sheets) uses properties and values to create all the aesthetic magic that goes on in webpages.
Say, you want to enhance your image with a beautifully crafted border, and you want the edges to be a solid black line. In this case border would be the property to choose, and solid the value. This is a keyword in CSS that instructs it to create the desired solid border.
As you may have guessed, there must different kinds of these values, seeing that merely a solid line as a border is not much of an adornment.
What is REM in CSS?
The property border indeed accepts keywords, colors, and lengths. Actually, this is because border is shorthand for border-width, border-style and border-color. So instead of specifying each of these properties, border accepts these values for all of them at once, like so:
Reasoning backwards from 2rem to px is not a hard task.
But do you need to keep a calculator nearby to know the exact font size of your sub-heading which you set to 1.125rem (that’s: 16 * 1.125: 18px)?
Thankfully there is a clever way of dealing with this problem.
Keeping in mind that you can also specify the font size of the root element with a percentage (%),
developers have found that 62.5% of the default value of the root element equals 10px. This simplifies things really nicely:
Using REM (or another relative length value) for font-size is a must for accessibility,
because px in some browsers doesn’t resize when the browser settings are changed.
Some people, for example, need to zoom maybe up to 400% to be able to read your text, due to a visual impairment. Using REM you make sure that your text respects these needs, because the font-size is defined relative to the default font-size a user has chosen.
Responsive Web Design with REM
Let me first say that responsive web-design is an extensive subject, with many different aspects. There are two certificates about responsive web design in freeCodeCamp’s curriculum (check these out at https://www.freecodecamp.org/learn, if you’re interested).
Below I’m going to concentrate on how REM can help with making webpages responsive.
Google encourages you, in this article about responsive web design,
to restrict line length to not much more than 10 words.
This is in accordance with classical readability theory.
They advise that you should use media queries with break points chosen in such a manner that the width of your content/
text lines are not too long. This helps provide the best possible reading experience.
Here is an example inspired by this article by Adrian Sandu: