Skip to content

Instantly share code, notes, and snippets.

@Victa
Created September 11, 2011 09:13
Show Gist options
  • Star 9 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Victa/1209370 to your computer and use it in GitHub Desktop.
Save Victa/1209370 to your computer and use it in GitHub Desktop.
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

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