Fonts within a font family vary in size

Question

Whenever I come to a point in my projects to select a font, this common problem arises (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 you know), when the first font in the font family is missing, it selects the second font, and if the second is not, it goes for the third, etc.

The problem is that Arial is larger than "Source Sans Pro" at 13 px , and Verdan is larger than Arial at 13 px .

Take a look at this image:

This is a problem that every designer faces every time he thinks about the font family for design.
I wish there was some CSS method or hack that we tell the browser to take “Source Sans Pro” at 13px , but if it isn’t , then do not accept Arial at 13px, instead take Arial at 12px , and if even Arial no, than take Verdana at 11px.
e.g. font-family-size: "Source Sans Pro" 13px, Arial 12px, Verdana 11px; (this rule is not in CSS, it's just my desire)

Summary We can assign a single size to the entire font family (a font family that contains more than one font), now almost every font size has a (smaller or larger) font than other fonts in the same font family.

Answer 1

What you are looking for is this font-size-adjust property - an almost perfect solution to this problem. Of course, browser support is terrible: it only works with Firefox .

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