How to make different font families appear same size? (computationally)

Question

How do I make text appear roughly the same size across different font families? I can't do this by manual means, it has to be done in software.

In my web app a user can select from many different font families (all of Google Webfonts for starters) and I need to offer them a preview of their selected fonts, e.g. at the equivalent of 16px or whatever. Trouble is different fonts have very different visual sizes, e.g. Tangerine appears about half the size of Roboto or Open Sans, looks odd when one of the fonts in a preview list is rendering half the size of the others!

I've tried different CSS font-size measurement units, e.g. px, em, ex, inherit, etc. but nothing aligns the sizes so they appear roughly all the same size.

I thought 'ex' should do it but it seems to have no effect in making fonts appear visually similar sizes (even tho my understanding is it's supposed to). CSS font-size-adjust property doesn't work either - it's only Firefox for a start.

Example code below. I can do a solution front end (e.g. Javascript, and I'm using Bootstrap 3 and JQuery) or backend (PHP in my case).

Any suggestions very welcome! Many thanks.

<!DOCTYPE html>
<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT' rel='stylesheet' type='text/css'>

</head>
<body>
<span style="font-family: 'Open Sans', sans-serif; font-size: 4ex; font-weight: normal;">Open Sans</span><br>
<span style="font-family: 'Roboto Slab', serif; font-size: 4ex; font-weight: normal;">Roboto</span><br>
<span style="font-family: 'Tangerine', cursive; font-size: 4ex; font-weight: normal;">Tangerine</span><br>
<span style="font-family: 'Josefin Slab', serif; font-size: 4ex; font-weight: normal;">Josefin Slab</span><br>
<span style="font-family: 'Old Standard TT', serif; font-size: 4ex; font-weight: normal;">Old Standard</span><br>

</body>
</html>

Brian Leishman Brian Leishman · Accepted Answer · 2015-04-23T15:22:59

Running these within a JS Fiddle (http://jsfiddle.net/c2hjr5qz/) all the fonts appear to be the same width to me, but one thing you can do to make them all align properly would be to set the line-height of the objects like so

span{
    display:inline-block;
    line-height:48px;
}

How to make different font families appear same size? (computationally)

1 Answers