Tag: CSS

Hi Again,

Today i will be discussing the use of em, rem and px in responsive design mode. In the classical web design we used to use px for fonts and other metrics, and still many of us are using this kind of practice. But is there something wrong with this approach? Suppose you have a scenario where you need to play with the font sizes. Suppose you need to increase the font size of a particular section, so in that case one approach is going through each child element and setting the font sizes to a desired value. Still thinking what’s wrong!

In the time where you would want every part of your application to be modularised. You also need to take this into consideration. Follow a particular structure when you are using metrics in your CSS. Nowadays we are more focused towards making our site responsive. In that case a structured CSS may come in handy, as it is observed that the fonts are desired to be a bit larger as compared to desktop version to improve visual quality and refinement.

This is where you want your fonts, padding and margin to be relative rather than absolute. This is to avoid the scenario of modifying these metrics for every element and this also makes the CSS lengthy. So CSS offers rem and em to add the relative nature to your metrics.

Now lets understand what rem and em is. Every browser predefines a certain font-size to every element that inherits html and body. So whenever you specify the font-size of a element, it basically overwrites that browser’s property. Browsers also follow rems and ems to specify the default font-size. Now Rem is relative to the html tag’s font-size, while the em is relative to the current element if the font-size is specified inside that element or relative to the nearest parent that has font-size specified. I know this sounds confusing, so i m sharing a Demo to explain things better.

View on Codepen

By default the html’s font-size is set to 16px. So when I use 1 rem unit it means I m assigning 16px font to that element. Here i have overwritten it to prevent browser dependency. You can inspect the output in console in the computed section to see what i was talking about.

Now we need to follow a particular convention to make good use of rem and em. Use rem for Global styling while use rem for local styling. Like specifying the container divs style in rem, and for elements like h1,h2,p etc. use em styling. That makes the fonts more scalable and easy to edit.

Thanks.

If you found this post useful do comment or like. 🙂