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

  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.