AtoZ CSS Quick Tip: Benefits of rem and em Values

R is for rem and em

In the original screencast video we learned all about the :required pseudo class which is useful for styling forms with fields that must be filled in.

As much as forms, validation and styling state are big topics there isn't too much we didn't cover on the topic of :required the first time around. So instead, let's look at a couple of quick tips for using the rem unit of measurement. But first, let's look at another type of relative unit: the em.

The Pros and Cons of using em

When working in a responsive project it's more flexible to use relative units like em for sizing text and spacing in and around elements rather than pixels. This is because this unit is relative to the font size of its parent element, allowing an element's size, spacing and text content to grow proportionally as the font-size of parent elements change.

Using these relative units enables you to build a system of proportions where changing values of font-size on one element has a cascading effect on the child elements within. A system of proportions is a good thing, but this behavior of em does come with a downside.

Continue reading %AtoZ CSS Quick Tip: Benefits of rem and em Values%

by Guy Routledge via SitePoint