CSS: font-size: inherit * 70%?

Question

Is there a way to specify the font size for a class to be, say, 70% of the inherited font size?

I have a general "button" class that sets up my buttons with the appropriate borders, background, etc. I use it in multiple places, including one where the font size is fairly small and another where the font size is quite large.

<div style="font-size: 26px;">
Push this: <input class="button" type="submit" value="Go">
</div>
<div style="font-size: 10px;">
Push this too: <input class="button" type="submit" value="Go">
</div>

In both instances I'd like the button font-size to be about 70% of the font size of the span or div the button is in.

Can I do this with pure CSS?

Solution 1

EMs do work like percentages in that the base font size is always 1em and .7em would be 70% of that (in the same way 1.2em would be equivalent of 120% of base font size). For this to work properly though you need to define a base font-size on the document body. Through experimentation I've found that font-size: 77%; gives you a nice base size in all browsers (that is it makes 1em render in a "normal" and readable size). You may want to try other values between 75% and 80% depending on what font-family you want to use. Also bear in mind that relative font sizes are inherited accumulatively - 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 favour as you would only need to give your button class a font-size of .7em to achieve what you want (the buttons would then always have a font size that is 70% of its parent object). Happy coding!

2014 edit:

It's worth pointing out that browser support for the Root EM unit is now so good* that if you're not already using it it is worth looking into. The Root EM (rem) is tied to the root (document) font size, and unlike the "normal" EM it is unaffected by nesting - it always relates to the root font size. While em's are still very useful for most text sizing, precisely because it does respect nesting, the rem is great for things like margins and padding, which you may not want to change size with nesting (this is a common cause for misaligned left margins), but which you do want to change size along with the root html font size (typically using media queries).

You can read more about EMs vs. REMs over on Design Shack.

*) IE8 is the only common browser (~5%) which does not support it - if you need to support IE8, simply include an equivalent size in pixels before the rem declaration.

Solution 2

In CSS, if you give a relative unit, it is by default relative to the size you inherit from. That means, you could just define the font-size of the button as "70%".

There are also two other relative units handy for font sizes: em and ex. 1 em is the width of the letter 'M', 1 ex the height of the letter 'x' -- obviously also inherited.

You should not use px as font-size, as in your example. px doesn't obey the DPI of the screen. For example on my screen, both 10px and 26px would be small. You should use 'pt' instead, or even start with 'em'.

Solution 3

Try:

font-size: 0.7em;

Here's some more information: How to Size Text in CSS at A List Apart

Solution 4

<input style="font-size: 70%" class="button" type="submit" value="Go">

?

View more solutions