EMs work as a percentage in that the size of the base font is always 1em, and .7em will be 70% of this (just like 1.2em will be equivalent to 120% of the base font size). To do this, you need to work correctly, although you need to determine the base font size on the body of the document. Thanks to experiments, I found that the font size: 77%; gives you a good base size in all browsers (that is, makes 1em rendering “normal” and readable size). You can try other values from 75% to 80% depending on which font family you want to use. Also keep in mind that relative font sizes are inherited cumulatively - for example:
<style> small { font-size: .8em; } span.tiny { font-size: .8em } </style> <small>This text is 80% of base size where as <span class="tiny">this text is 80% of 80% (or 64%) of base size</span> </small>
This works in your favor, since you only need to give your button class a .7em font size to achieve what you want (now the buttons will have a font size that is 70% of its parent). Happy coding!
2014:
It is worth noting that the browser support for the Root EM module is now so good * that if you are not already using it, you should look into it. The root EM (rem) is tied to the root (document) font size, and unlike the "normal" EM, it does not depend on nesting - it always refers to the size of the root font. Although em is still very useful for most text sizes, precisely because it takes nesting into account, rem great for things like margins and indentation that you might not want to resize with nesting (this is a common reason for inconsistent left margins ), but which you want to resize along with the root size of the html font (usually using multimedia queries ).
You can read more about EMs vs. REM in Design Shack .
*) IE8 is the only common browser (~ 5%) that does not support it - if you need to support IE8, just specify the equivalent pixel size before the rem declaration.