Fonts inside a font family display different in size

Question

Whenever I come at the point in my designs to select the font, this common problem occurs (common for every designer) ,

For example we set the font family and font size for a paragraph as follows,

p {
    font-family: 'Source Sans Pro', Arial, Verdana, sans-serif;
    font-size: 13px;
}

In CSS (as everyone knows) when the first font in the font family is not present, it selects the second font, and if the second is not present it goes for the third one and so on.

The problem is that Arial is bigger than 'Source Sans Pro' at 13 px, and Verdana is bigger than Arial at 13 px.

Look at this image:

This is the problem every designer face every single time they think the font family for a design.
I wish there was some CSS method or hack by which we tell the browser to take the 'Source Sans Pro' at 13px, but if its not present than don't take Arial at 13px, instead take Arial at 12px, and if even Arial is not present than take Verdana at 11px.
e.g. font-family-size: 'Source Sans Pro' 13px, Arial 12px, Verdana 11px; (this rule isn't there in CSS, its just my wish)

Summary: We can assign a single size for the whole font family (font family which contains more than one fonts), now in practical every font size display different (smaller or bigger) than other fonts in the same font family.

Answer 1

What you are looking for is the font-size-adjust property — a nearly perfect solution to this problem. Of course, browser support is terrible: it only works on Firefox.

Here's an example (open in Firefox): http://jsfiddle.net/zL6vL/1/