Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Font sizing with REM and PX (LESS)
A simple LESS ( snippet based on
It doesn't do much but saves you typing things twice, allowing you to use rem as a unit for font-sizes
and giving a px fallback for IE
.font-size(@font-size: 16){
@rem: (@font-size / 10);
font-size: @font-size * 1px;
font-size: ~"@{rem}rem";
// USE
html { font-size: 62.5%; } // Needed to make 1em equal 10px
body {
.font-size(); // Uses the default font-size of 16
h1 {
.font-size(42); // Gives a font-size based on 42px (the font-size of life, the universe, and everything)
html { font-size: 62.5%; }
body {
font-size: 16px;
font-size: 1.6rem;
h1 {
font-size: 42px;
font-size: 4.2rem;
Copy link

larrybotha commented Nov 27, 2012

I've written a Sass mixin which allows for generic rem with px fallbacks on any property:

May help you out if you're using px fallbacks already on other properties!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment