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?

Answer 1

Try:

font-size: 0.7em;

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

Answer 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'.

Answer 3

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

?

Answer 4

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 acheive what you want (the buttons would then always have a font size that is 70% of its parent object). Happy coding!