Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Font sizing with REM and PX (LESS)
// ABOUT
A simple LESS (http://lesscss.org) snippet based on http://snook.ca/archives/html_and_css/font-size-with-rem
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
// MIXIN
.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)
}
// OUTPUTS
html { font-size: 62.5%; }
body {
font-size: 16px;
font-size: 1.6rem;
}
h1 {
font-size: 42px;
font-size: 4.2rem;
}
@larrybotha
Copy link

larrybotha commented Nov 27, 2012

I've written a Sass mixin which allows for generic rem with px fallbacks on any property:
https://gist.github.com/4153104/a5f13471af86e9835f18beda817ed772fcd9973a

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