Skip to content

Instantly share code, notes, and snippets.

@seanwash
Forked from glueckpress/px-rem-cheat-sheet.css
Created September 25, 2015 22:20
Show Gist options
  • Save seanwash/daf0bb5bb2b33b259ce2 to your computer and use it in GitHub Desktop.
Save seanwash/daf0bb5bb2b33b259ce2 to your computer and use it in GitHub Desktop.
Cheat sheet for rem-calculations based upon 14px and 16px.
/*! = $rembase: 14px
--------------------------------------------------------------
* hmtl { font-size: 87.5%; }
* body { font-size: 14px; font-size: 1rem; line-height: 1; }
* 4px 0.28571429rem
* 8px 0.571428571rem
* 12px 0.857142857rem
* 13px 0.928571429rem
* 14px 1rem
* 16px 1.142857143rem
* 18px 1.285714286rem
* 20px 1.428571429rem
* 21px 1.5rem
* 22px 1.571428571rem
* 24px 1.714285714rem
* 28px 2rem
* 36px 2.571428571rem
* 42px 3rem
* 48px 3.428571429rem
* 64px 4.57142857rem
* 72px 5.142857143rem
*/
/*! = $rembase: 16px
--------------------------------------------------------------
* hmtl { font-size: 100%; }
* body { font-size: 16px; font-size: 1rem; line-height: 1; }
* 4px 0.25rem
* 8px 0.5rem
* 12px 0.75rem
* 14px 0.875rem
* 16px 1rem
* 18px 1.125rem
* 20px 1.25rem
* 22px 1.375rem
* 24px 1.5rem
* 32px 2rem
* 36px 2.25rem
* 48px 3rem
* 64px 4rem
* 72px 4.5rem
/*! =Rem base magic derived from Twenty Twelve Theme
--------------------------------------------------------------
$rembase: 16;
$line-height: 24;
---------- Examples
* Pixel value with a rem fallback for font-size, padding, margins, etc.
padding: 5px 0;
padding: 0.3125rem 0; (5 / $rembase)
* Set a font-size and then set a line-height based on the font-size
font-size: 18px
font-size: 1.125rem; (18 / $rembase)
line-height: 1.33333333; ($line-height / 18)
---------- Vertical spacing
Vertical spacing between most elements should use 24px or 48px
to maintain vertical rhythm:
.my-new-div {
margin: 24px 0;
margin: 1.5rem 0; ( 24 / $rembase )
}
---------- Further reading
http://snook.ca/archives/html_and_css/font-size-with-rem
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment