CSS REM Scale Helper

REM CSS units have been around since Internet Explorer 9, but their real value came with the responsive design movement. The ability to scale a website’s margin, padding, font size etc based off the root HTML font size is a pretty powerful thing, unlike the em which is based off the inherited font size.

Using the CSS calc function to set the font size on the HTML element means you can scale at varying rates.

The way I usually approach it depends on the design I’m given, if I get a design that is 1680 pixels wide, then I make sure that browser’s font scale is 1:1 at that resolution. End result meaning 16 REM would calculate to 16 pixels when the browser is 1680 wide, just like the design. Then with a little bit of math, you can make a formula which sets the scale rate from minimum and maximum resolutions you want to scale from and to.

The resulting CSS formula turns out to something like this:

html
{
  font-size: calc((((100vw - {RESOLUTION_FROM}px) / {RESOLUTION_RANGE}) * {FONT_SCALE_RANGE}) + {FONT_SCALE_FROM}px);
}

This can be a bit time consuming and tedious when doing various break points and figuring out the from and to scale rates, however a CSS pre-processor does make it a little bit easier, but still not ideal.

To make life a bit easier I’ve made a little utility so you can visually see the differences and play around with different break point scales, follow the link below:

http://vdhdesign.co.nz/utils/rem-scale-helper/index.html

Published by Matt van der Haas

Matthew van der Haas is a lively, motivated, professional yet sarcastic web developer who loves nothing better than exploring new technology. Having not being used to writing in the third person, Matthew tells a story of how he's had over 10 years of professional web experience, and experience in front of a computer since he opened his eyes. At a small age Matthew was described as knee-cam, due to being interested in taking video when he was as tall as the height of peoples knees. Matthew also enjoys the hardware side of things, enjoys good old fashioned tidy soldering and wiring job, as well as playing with GPIOs on the Raspberry PI

Leave a comment

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