RWSmith Designs.

Extraordinary Web Design

Why rem font sizing is a smart approach for web typography.

I am a fairly recent convert to using rem font sizing having used ems extensivley for past projects. Most of us know due to issues with text resizing in IE that we shouldn’t be using px values for our font sizing. Here ems jumped to the rescue and have, for a number of years been the standard for web typography.

The issue I always had with ems is a lack of control when it comes to nested parents and the fact ems inherit values from immediate parents.
A parent element with a set font size of 1.4em and it’s child element also has a font size of 1.4em will not be the same size, the child’s text being much larger having inherited it’s parents, font size then multiplying it by 1.4.

The problem there is apparent if we have a complex design. It can become very time consuming and tedious to keep control of font sizes.

Thankfully there is another unit we can use: REM
Rem’s behave very similarly to em’s in that they are relative, however the beauty of rem’s is that they are relative to the root html element of the site and not it’s immediate parent container. This clearly makes rems incredibly easy to manage especially when compared to ems.

I am an advocate of responsive design and I like my typography to remain responsive also and rems work beautifully for this. Using media querys I set a global font size that changes depending on the screen size. All the subsequent rem font sizes will remain relative to the root declaration.

Here is an example of how I might set up the typography for a project:

Another beautiful thing with rem font sizing is that it’s very easy to create a fallback for older, non supporting browsers such as IE7 and IE8. You simply add in a px declaration before the rem declaration and the no supporting browsers ignore the rem declaration:

So there we have it. Logical, easy to manage typography using rem font sizing.


Leave a comment

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

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process