CSS rules use two options for units: absolute and relative. Initially, only one absolute unit of measurement was known - a pixel. Its size depended on the matrix or monitor, and it was easy to calculate on its own.
Disadvantages of using pixels
For layout designers working in the media, it is important to highlight the content on the page. It should be easy to read, with an optimal line length and a sufficient size so that even a low-vision user is comfortable reading text. It doesn’t matter from which device the user reads the article and how good his eyesight is, it is important for him to understand the content of the article without special devices. When using pixels in layout, an increase in the scale often leads to the fact that the number of words in a line decreases, ugly text breaks appear, or the content completely drops out of the container. Therefore, web developers and designers began to use percentages and relative units of measure, such as EM, REM, when writing code. But they still have not been able to completely supplant the pixels.
The history of the appearance of relative units
Since initially the pages in most browsers did not scale, pixels remained for a long time the only way to describe font sizes. But with the development of web technologies, there is a need to create new units of measure. So EM and%, and then REM, appeared, the values of which were tied to browser standards and were usually 16 pixels. There is a rule of thumb that combines the basic font sizes: 100% = 1 em ~ 16px ~ 14pt. This means that if you do not change the font size in any child elements, by default in the browser it will be about 16 pixels and about 14pt (typographic point), but always 100% and 1 EM.
The use of relative units facilitated layout, making modular elements more manageable. Modern technology requires that when scaling elements on the pages change in size depending on the resolution of the screen or browser of the user. Because EM and REM in CSS have become an indispensable tool for creating sites that require adaptive font sizes. Now most browsers do not have problems scaling text, and their behavior when increasing or decreasing the font size is consistent with each other. But any layout should be checked in several browsers, including outdated ones, in order to understand how the final result will look for different users.
Using relative units
The relative units of measurement that are so common in typography and CSS — EM and REM — are so far less well known to ordinary users than pixels. Not every novice designer or layout designer understands their purpose and uses it correctly. There are still disputes between professional designers when it is better to use one or another unit. Nevertheless, relative units greatly facilitate responsive layout and are considered the most effective method for constructing modular components. EM and REM are used to set the size of various elements - headers, borders, frames. But their sizes are calculated differently.
What is EM
EM is a relative unit of measure that depends on the font size of the parent element. Most often, it is prescribed in the CSS rule for the body tag. In this tag, parameters are set for all elements on the page. How to understand EM units in CSS and calculate their value? Everything is quite simple. If the font-size (i.e. the font size) in the body selector is 10 pixels, 1 EM is also 10 pixels, that is, the layout designer sets the value of this unit on its own. As a result, all other dimensions specified in the EM will be calculated based on this value. Texts whose parameters are specified in pixels and in relative units may not differ visually until they have to be changed. But they are very convenient when creating flexible modular blocks. If you do not specify the font size, but use relative units in the code, they will be calculated by default, and 1 EM will be equal to 16 pixels.
EM Unit Features
There is another feature when using relative EM units. If the font size is set to 2 EM in the selector, then when using EM in the parameters for another property in the same selector, the value of this unit will be applied differently. As a result, the size of the element will double. EM parameters are calculated based on the font size in a specific block. That is, if the font-size in the paragraph selector (p tag) is 2 EM, and for the body it is 10 pixels, then when the p tag is added to the text margin with a thickness of 1 EM thickness of 1 EM, it will be equal to not 10, but 20 pixels.
To get a font size of 10 pixels, you need to use 0.5 EM. Such changes in values in different parts of the code often confuse beginner typesetters. There was also a problem with using EM in CSS - when setting the font size to 0.875 EM, each subsequent nested element was reduced. Undesirable effects were also caused by the use of this unit in margin-bottom. In this case, the font sizes affected the fields around the element, since in EM it was directly related to this parameter of the block model.
CSS REM Units
Now consider what a unit of measure REM and how to use it. The first mention of REM appeared in 2011 in a user commentary on an article by German developer Gerrit van Aaken on the use of pixels in CSS code. This relative unit is close in value to EM, and its name translates as “root EM,” or Root Em. REM behavior is more predictable. The use of this unit in layout makes it easy to calculate the sizes of elements in different parts of the code, since REM in CSS is equal to the font size set for the root element - the HTML tag. But more often this value is also added to the body to eliminate errors with calculations. Using REM in CSS, if its value is not spelled out in the HTML tag, becomes even easier. 1 REM will equal the standard 16 pixels, as is the case with EM, which is not set.
Controversy over using REM in CSS. REM vs EM
REM and EM have their pros and cons. There is much debate among layout designers about which relative unit of measure to use when writing code. It is believed that using REM in CSS makes layout less modular, while EM complicates layout and requires a careful approach and calculations. Each layout designer in the process of work chooses for himself which unit of measurement and where to apply. But at the initial stage, pixels are still preferable. EM is preferable for elements whose properties are scaled based on font-size. In other cases, REM is better.
Applying REM in headers
Consider how the headings of the texts (tags h1 – h6) will change if they are written in REM. Let's say that the header has fields around it - padding, background and the specified font size. If you need to increase the title, the space between the edges of the element will be reduced, so padding will have to be redefined. But then there may be a problem with the fact that all the elements simply cease to fit on the page. But there is a font size in pixels, and then in the browser settings try to change it to a larger one, nothing will happen. When using REM, it will increase and decrease depending on the user's settings.
Root Em Limitations
REM helps create cascading tables with different font-sizes for headings and paragraphs. It greatly simplifies the layout, since you do not need to change the code completely - just adjust the font size in the html tag. There is also a restriction on the use of this unit. In older versions of Opera and IE browsers and in some browsers for Android, they are still not supported. Therefore, developers are forced to use pixels as a fallback and write double code. Modern browsers will read lines with the font size in pixels and translate them into REM, while older browsers simply won’t see code with an unknown unit of measure. But if you forget about it and start developing a site for a specific screen, then you can lose a lot of users who simply will not be able to perceive content that has broken due to the use of REM or EM.
New ways to set text size
The list of units of measure in CSS now contains not only the above options. There are also new items:
- VW - equal to 1/100 of the browser width.
- VMIN - 1/100 of the smaller side of the browser window.
- VMAX - 1/100 of the larger side of the browser window.
- VH - equal to 1/100 of the browser length.
- EX - depends on the height of the letter "x" in lower case.
- CH - is calculated depending on the character "0" in the font of the current element.
Most of these options are also used for designing websites with a flexible layout, where the size of the container is measured depending on the size of the browser window. But for convenient page scaling, EM or REM is usually sufficient.