Breaking The Habit
It's tough to break the habit of using
px everywhere to define
font-size in your code. Though, if you care about having a flexible and responsive layout, I highly recommend making the jump over to either
em. This article goes over the differences between
em while discussing which one I prefer and why. I am going into this post with the assumption that you already understand the benefits of moving away from using fixed
px values when dealing with fonts.
What Is REM?
rem stands for "root em" which is the
font-size of the root element. In an HTML document, the root element is the html element, but often times you will define the root
font-size in the
body of your CSS. Now
em on the other hand will use the font size of it's parent class instead of taking the root
font-size. This can be best explained by looking at a live example.
Examples in Code
font-sizevalue in the codepen to see how EM reacts compared to REM.
Which Is Preferred?
rem in just about every instance because it is convenient and flexible to always work from a set base
font-size. You also don't have to worry about constantly resetting child elements every time a parent element has a larger
font-size. In addition, you can easily update the
font-size of the
body element and the entire site will scale relative to the new
font-size. You can then utilize media queries to fine-tune the site on various breakpoints to improve the user-experience on numerous devices and screen sizes. Not to mention, if the user has their default
font-size increased due to accessibility settings in the browser, the site will automatically scale to be relative to the user's accessibility settings.
Updated July 9, 2015
If you would like to evolve your business with usability testing and other online marketing solutions, please contact my company, CyberBytes Inc. at (716) 876-1824 and ask for Alex or visit our website to get a free quote!