05 Nov Know more about rem and em

The way we create web pages is constantly changing. Either by technological advances, new devices or innovative processes, web development always has to be at the forefront of change.

Web development is a very broad term, it is difficult to address everything that the word “web development” encompasses because within it there are many things such as HTML5, CSS3, PHP, Ruby, Frameworks, etc … But in this post we want to talk a little bit about the font sizes on a website, because today we are using new way to declare font size values ​​that can be a little more viable regarding the adaptation of it to different screens and devices. We want to make it clear that in this post we will be using more technical language that we usually do.

Nowadays “em”, “rem” and “percentage” are new measures that help us adapt sources as browser settings, and this we can try by going to our browser (preferably chrome for this test), going to options and seeking a configuration option called Web Content. Change the default font size. After making the change if we are to navigate pages we will see that not all pages are concerned about the size of the source as seen in the following example:

To explain this better, an “em” is usually the size of a letter of an element to which this measure is being implemented, this means that if an item is assigned a font size of 16 pixels, then 1em is equal to 16px in any case, by default 1em=16px because browsers define a default font-size of 16px to HTML.

The “em” unit is scalable and is dependent on its parent element, for example if we have a header with the same font-size to 1em (16px), the child element is a source of 1.3 em, so that it is displayed 30 % larger than that of the container (header), say something like this: Header = 1em (16px) then the child measured 1.3em (16px x 1.3 = 20.8px). This is sequential, that is, if within the header child you add another child, the measure will increase 30%.

If you do not like to have all this mess and keep only an accurate measure for each font size and also adaptable to user settings, you can also use the measure “rem”. The rem unit (or “root em” unit) has pretty good browser support: IE9+, FF3.6+, Chrome, Safari 5+, and Opera 11.6+.

The rem unit is pretty straightforward. It lets you base your em units on a ‘root’ unit defined on the <html> element. This way, you could go nuts with font-size settings in all sorts of places in your stylesheet, and any sizes defined with ‘rem’ would be relative to the root unit, and would not inherit from the parent as is the case with ’em’ (which you could still use, allowing you to create different root unit contexts while still being able to reference the root unit).

As an extra point, is important to emphasize that these values ​​are not used to define only font sizes but are also used to define values ​​within the layout container.

Changing to this type of measurement in your web development matters because of a very important reason: responsiveness. Em and Rem units will respond accordingly when displayed in diferent devices with different measurements and resolutions. This units allow for a flexibility and adaptability imposible with the pixel, and is especially useful for typography.

In conclusion, many developers recommend using the measurement values ​​rem to define font sizes, but there are others who just recommend using em instead of rem, in the end the key is studying the most comforteable way for YOU best way to develop, but also we stress that it is important to consider these values and measurments ​​when developing your websites, so if you have not, like us, and start using the super intuitive em and rem in your website.