REM and EM in CSS

font units REM and EM

Why REM and EM for font size? One of the most confusing aspects of CSS styling is the application of the font-size attribute for text scaling. In CSS, there are different font units, pt, px, em and %, by which you can measure the size of text as it’s displayed in the web browser. Which of these four units is best suited for the web? Nowadays scaleable font units are most popular. EM is scalable, but in CSS3 there is a new unit called ‘REM’.

What is REM and EM in CSS?

Before we talk about REM, we should know what is EM in CSS.

EM

The “em” is a scalable unit that is used in web document media. The “em” value is based on the width of the uppercase M. An em is equal to the current font-size, for instance. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px. Ems are scalable in nature, so 2em means 2 times the size of the current font. Ems are becoming increasingly popular in web documents due to scalability and their mobile-device-friendly nature.The ’em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses.

Example For EM usage

    body { font-size:62.5%; }
    h1 { font-size: 2.4em; } /* =24px */
    p  { font-size: 1.4em; } /* =14px */

If the browser default font-size is 16px, 62.5% of 16 is 10px. So 1 em is 10px. Same way, 2.4em is 24px, 1.4em is 14px.

REM

REM and EM
REM stands for ‘Root EM’. REM unit allows you to define a root em unit value on the html element, then use values on subsequent elements that are relative to the specified root unit. CSS rem unit to scale specific page elements while leaving others unaffected.

Why REM?

One of the problems with using “em” as font sizes is that they cascade, so you are forever writing rules that select nested elements to reset them back to 1em. The Problem with em-based font sizing is that the font size compounds. A list within a list isn’t 14px, it’s 20px. Go another level deeper and it’s 27px! These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect. CSS3 now has rem (“root em”) to prevent that issue.

Example for REM usage

     html { font-size: 62.5%; } 
     body { font-size: 1.4rem; } /* =14px */
     h1   { font-size: 2.4rem; } /* =24px */

Browser Support for REM

All the latest browsers suppot ‘REM’ unit. For browsers which does not support ‘REM’ unit, we have to use fallback option with ‘px’.

     html { font-size: 62.5%; } 
     body { font-size: 14px; font-size: 1.4rem; } /* =14px */
     h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */

Why REM and EM are Special

Em essentially works like percentage values, making a letter the same “size” despite typeface or size. Because of this sliding scale nature, em are called relative units. This approach is a popular solution for measuring type, but doesn’t work as well for other measures such as spaces or margins.

The advantage to using em as a basis for type sizing is that by changing just the parent size, you can change all of the type sizes simultaneously. This option also helps all users get a similar experience when viewing a site – whether using different browsers online or using different devices – because some older browsers will not re-size text set in pixels. The end result? No matter how you view the type on a site, it looks as intended — zoomed in or out or on different devices. So, REM is evolved from the EM concept.

So, when we use the units REM and EM in CSS, we should know well how it works. Hope this article help you to understand REM and EM in CSS, and you can use this in your projects.

Leave a Reply

Your email address will not be published. Required fields are marked *