Q:

How to make font-size less for 2px than parent element?

I have two <span>s. First is font-size: 14px; and I want to reduce font-size of child <span> for 2 px;
<span>14px font <span>12px span</span></span>

How to do this without obvious setting font-size: 12px;? Is it possible with CSS? Or should I use jQuery?
jsFiddle, of course.

A:

If you don't mind using a feature with less than full support, I believe you could use CSS3's calc() For example:
font-size: calc(100% - 2px);
According to the spec the spaces around the operator are necessary. calc(100%-2px) may not work.
Unfortunately, this doesn't work on a lot of older browsers including IE8 and iOS Safari < 6. If you want to support them, a javascript solution like Quentin or Zeaklous came up with is your best bet.
References: 

http://www.sitepoint.com/css3-calc-function/
http://css-tricks.com/a-couple-of-use-cases-for-calc/

A:

CSS has no features which allow the setting of a value plus or minus a number of length units. @Yumecosmos points out that modern browsers support calc.
You could use relative units: font-size: 85%, but that wouldn't be 2px except when the parent font size was 14px (and even then it is approximate).
If you want to read the current value and then subtract 2px from it then you can break out the JavaScript.

