CSS font-size changes when font-family falls back

Question

I want to use a font (gill sans) which renders very small due to a short x-height etc. etc. If I set this at a reasonable size, and then a browser falls back to a more typical font I've specified in the font-family, the fall-back font renders very large - can I set the font-size according to the font the browser is using?

Answer 1

I had the same issue using Calibri (slightly smaller compared to most sans fonts). I ended up doing the following (assumes you have jquery):

1. Get Remy Sharp's font detection script http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

2. Add the following to the $(document).ready() function:

   $(document).ready(function() {
       font.setup();
       if(!font.isInstalled('Calibri'))
           $('body').css('font-size','87.5%');
   });
   

So now if the user doesn't have Calibri we see Arial at 87.5%. This only applied to elements where font-size was not defined/inherited. Wherever font-size is explicitly defined will have to be adjusted as well (maybe add a class to those elements and change the jquery selector to $('.adjustClass')).

Would be nice if you could just do: font:11px Calibri, 10px Arial; - but no such luck :)

Answer 2

There was an interesting article written a few weeks ago that addresses this topic.

You can read the article here: http://kilianvalkhof.com/2009/css-xhtml/combining-cufon-and-font-face/

In short, the article is utilizing a few methods... @font-face for modernized browsers, a jQuery font detection script, and Cufon for font replacement if prior methods fail.

This is not a perfect solution. And like many above me stated, your best bet is to use a font that degrades gracefully.

Try setting your font-stacks to something like 'GillSans, Calibri, Trebuchet, sans-serif' - for paragraph copy, or 'GillSans, Trebuchet, Calibri, sans-serif' - for titles and headings

Answer 3

I would recommend that you try and specify cascading fonts that degrade gracefully when fonts are not available e.g.

Arial, FontThatsLikeArial, FontThatsALittleLikeArial, FontThatsALittleLessLikeArial, Sans-serif;

Alternatively if you want tight control over your fonts, take a look a cufon, that doesn't require your users have any plug-ins and works on most modern browsers. https://github.com/sorccu/cufon/wiki/about

Answer 4

can I set the font-size according to the font the browser is using?

Unfortunately, no, not in CSS.

Answer 5

I would recommend you using typical Fonts that are found on most (/all) machines that access the website you are building. The view of a website shouldn't differ because of the browser (IE-related problems is another topic...). Use common fonts or alternatives that do work similar...

Answer 6

You can specify a font-size in the body selector and thus neutralize the browser's default size, i.e.

body { font-size: 62.5%; }

62.5% is a good baseline because it allows you to easily use ems to relatively set the font-size of elements in the body.

At 62.5%, 1em = 10px, 1.2em = 12px and so on.

Just set a font-size in the body as baseline and style elements accordingly.