advanced code snippet search

Posted By

michellebracken on 08/18/11


Tagged


Versions (?)

Base Font-Size

 / Published in: CSS
 

Using fluid measurements like 'em' or % on your fonts is a great way to help create more fluid designs. It can be a pain though to calculate ‘em’s for every different element. A simple trick is to set your base font to be the equivalent of 10px. Since the default font-size of browsers is 16px you can set a base font-size with the following:

Now if you want your h1 to be 24 px the calculation is much easier

Expand | Embed | Plain Text 
  1. 1	body {
  2. 2	    font-size:62.5%;
  3. 3	}
  4. 4	10/16 = 62.5%
  5.  
  6.  
  7. 1	h1 {
  8. 2	    font-size: 2.4 em;
  9. 3	}

Report this snippet  

You need to login to post a comment.