Adjust font size depending on which font is used from a font stack

Question

I\'m using one of the new google api fonts for a heading on a site. It\'s Yannone Kaffeesatz and is quite a condensed typeface.

My font stack is as follows:

Answer 1

One property which slightly changes font size depending on font is font-size-adjust. It's CSS3, only supported by Firefox.

But I don't think you want to tweak the size as much as aspect ratio, making Arial narrow. Squeezing a font (e.g. the letter spacing) becomes ugly quick. Instead, you should start with more condensed fonts in your stack.

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html studies condensed font options in detail. One of the trickier findings there is font-stretch: condensed which e.g. helps access e.g. Arial Narrow on windows (with Office).