HomeBlogUsing the Right Fonts in your Website

Using the Right Fonts in your Website

There's something interesting about the Web lately.  More and more websites I get to seem to use tiny unreadable fonts.  Well, unreadable for me—the monitor I spend most of my time on has 1600×1200 pixels in only 15″.  That's a huge resolution (something like 120 dpi).  Give me an website that's using an “11px” font size and I'm going blind soon.

I always wondered “why”?  I think one important reason is Google AdSense.  A notorious trick to increase your click-through rate is to make users confuse AdSense with your own links—which is best achieved if they use the same fonts.  Since it's not possible to customize (enlarge) fonts in AdSense, publishers have chosen to reduce the fonts in their pages.

Here is an example site that shows what I mean: www.ie7security.net. BTW, this does seem a scam site, published for the sole purpose of showing ads; the author didn't even bother to customize the about page—it just displays the WordPress default.  And it has no content—all “news” are “borrowed” from other sites.  Can you believe these guys are making a lot of money?

But I digress.

The problem is even more accented by the fact that many websites are using pixel-fixed dimensions for their layout.  If I enlarge the fonts in Firefox, I see texts truncated.

The Right Solution

I thought about various ways to use a sane font value on this very website.  After research and trial and error, the best I found was this:

body { font-size: 1em; }

It uses whatever the end-user has configured.  But, the problem is that most users don't configure a font size to match their display.  Most probably don't even have a clue this is possible.

So after publishing a first version with the above line I asked a few friends and most told me “man, fonts are huge!”.

The Solution that Actually Works™

What could I do?  Use a 11-12px font to make users of 75 dpi monitors happy?  No way.  I left it at 1em for a while, until my father sent me a piece of JavaScript from the net that dynamically sets the font size depending on the end-user's resolution.

Wow, I never thought of that. :-)  This problem is so essential that I never thought of handling it from JS.  But whatever, it can't hurt.  So I left “1em” in my default page CSS and wrote the following code in the <head> tag (yep, I used the idea, but that's my original code):

(function() {
  var fs = {
    "-1024"      : "12px",
    "1025-1280"  : "12px",
    "1281-1400"  : "1em",
    "1401-1600"  : "1em",
    "1601-"      : "1.3em"
  }, w = screen.width, i, s, a, z;
  for (i in fs) {
    if (/^([0-9]*)-([0-9]*)$/.test(i)) {
      a = RegExp.$1;
      z = RegExp.$2;
      if (s = ((!a || w >= a) && (!z || w <= z) && fs[i])) {
	document.write("<style type='text/css'>body { font-size: "
		       + s + " }</style>");
	break;
      }
    }
  }
})();

Seems it suddenly looks fine for everybody! :-)

But hey, if you still think it's too big or too small, please drop me a line. :-D

Comments

  • By: Dan Nelson Mar 02 (21:47) 2007RE: Using the Right Fonts in your Website §

    Going by resolution alone will never address the problem, since you have no way to know what the display size is.  A coworker has a 1600x1200 20" LCD panel on his desktop (100 DPI), and a laptop with a 1400x1050 14" panel (125 DPI).  I've got a 1280x1024 17" panel (96 DPI), which is larger than the laptop's display but lower resolution.

    Unfortunately, this is one place where MSIE has a leg up on Mozilla browsers; it provides DPI information in screen.logicalXDPI and logicalYDPI.  http://gemal.dk/browserspy/screen.html shows it in action.

    • By: Dan Nelson Mar 02 (21:50) 2007RE[2]: Using the Right Fonts in your Website §

      Your display is an eye-watering 133 DPI :)

    • By: mishooMar 03 (11:44) 2007RE[2]: Using the Right Fonts in your Website §

      Yeah, I know it's not totally correct.  But it's a good compromise.  I think that people having lots of pixels won't mind seeing bigger fonts, even if they have a small DPI (but especially if they don't), while those that have fewer pixels (i.e. 1024x768) will want smaller fonts, no matter the DPI. :)

    • By: StevenMar 27 (07:49) 2007RE[2]: Using the Right Fonts in your Website §

      I wouldn't say that MSIE has a better implementation by simply exposing the DPI. Fonts can be specified in terms of scalable units such as 'em' or 'pt'. These are based on DPI.

      I would actually blame old version of MSIE for the usage of pixel fonts. Windows Microsoft Internet Explorer 5 (and previous I believe) had a nasty font rendering bug where fonts were rendered smaller than they should when using scalable units.

      I find Firefox's font resizing fine. There's a Minimum font size setting in the preferences, and I haven't run into a problem with unreadable text. I'm using a 1920x1200 15.4" Laptop screen, so I can relate :)

      If not, try Opera. Opera IHMO has the best page scaling ability in all the browsers. It scales both images and text and tables (other browsers do just text), and therefore maintaining the layout of table-based pixel layouts.

      • By: mishooMar 27 (10:59) 2007RE[3]: Using the Right Fonts in your Website §

        "I would actually blame old version of MSIE for the usage of pixel fonts."

        Indeed, that's possible..  It actually renders fonts bigger than they should (in my tests).

        Anyhow, the biggest problem I think is with the WYSIWYG design tools, such as Photoshop or Dreamweaver.  I don't think you can do any fluid layout with them and this forces you to use fixed dimensions--which, from an accessibility standpoint, sucks.

        • By: AckanSep 03 (23:11) 2009RE[4]: Using the Right Fonts in your Website §

          I disagree that you cannot do fluid layouts with Dreamweaver. You just have to work around the WYSIWYG mentality. I know what shows in dreamweaver for me is nothing what I actually output. I think it is just a different programming style.

  • By: Eugen May 11 (09:17) 2007RE: Using the Right Fonts in your Website §

    Fonts look too big (for my taste anyway) on a 24" iMac screen.  Love the new site look BTW.

  • By: HarryNov 02 (17:34) 2007My desktop now using very big fonts then normal for all websites §

    Dear Sir,

    I read all your article and now I got a problem in my desktop or websites, No Idea!!
    In my desktop, when I am opening new websites, it opens with very big font sizes which is not a normal size! All the website. Can you please guide me what is wrong with my desktop?
    I have antivirus protection, spam guard, and secure internet!

    Thanks for your co-operation
    Regards
    Harry

  • By: Michel MichaelDec 29 (23:17) 2007RE: My desktop now using very big fonts then normal for all websites §

    I appreciate that you keep this blog going and allow comments. To me feedback is an interesting part of a blog.

  • By: Abeon TechOct 18 (08:59) 2008RE: Using the Right Fonts in your Website §

    body { font-size: 1em; }

    Has always worked fine for me, but it's also worth noting that browsers add different widths padding and other info. So set them to 0 or 1 if needed

  • By: Sergio AbreuFeb 24 (14:42) 2009JS Calendar §

    I am a programmer and have contributions of code for JS Calendar.
    It has little improvements that Firefox users will like (nowrap in the month/year name, hability to manipulate different formats like '%Y%m' etc. Please checkout the JsCalendar blog and tell me a better way to contribute to JS Calender project.