Search the blog

rems are arguably the best unit but aren't as easy to use as pixels. This function allows you to use pixels as you normally would but sent via as SCSS function. This not only lets you easily use rems instead of pixels but it means you can change the realtive size of all your fonts from a single setting.

/* Basis for rem function; increase/decrease to change sizes globally */
html { font-size: 100%; }

/* Function */
@function rem($pixels) {

    @return #{$pixels / 16px}rem;


/* Example usage */
.class { font-size: rem(18px); }
Tim Bennett is a Leeds-based web designer from Yorkshire. He has a First Class Honours degree in Computing from Leeds Metropolitan University and currently runs his own one-man web design company, Texelate.