Staticfree Blog

Many people have websites that have poorly-chosen font sizes and they don't even realize it. They use the unit of measurement known as "pt", thinking that it will make font sizes more consistent. This is akin to the people who make a website design and change the foreground color, but leave the background color to be the default. In both cases, the designer made bad assumptions about the reader's configuration.

To the point

Shown here is a popular website as seen on my small laptop screen. The text on the left window is much too large for the design. Compare to the window on the right that respects the browser's default font size.

You should not use point sizes for screen font sizes. Instead, you should use pixels, as no doubt the rest of your website is designed based on pixels. If it's not pixel-based and it's relative (yay!) then let the user choose (by using the default font size and relative sizes from that). This is because screen resolutions are not all the same and users generally know best when it comes to what font size they prefer reading.

In your site's CSS, instead of font-size: 12pt use font-size: 14px. These should look roughly the same on a normal, 85 DPI screen (see below for talk on DPI) but on a high-res screen (say, 141 DPI) 12pt text is 23 pixels high! If your site design is done in pixels - that's going to be a problem.

Nifty! Google's calculator can convert from pt to px at any given DPI. Just enter "12 points in inch / 85" (try it) in the search box and it'll give you "14.1666667 inch / 85" aka "14 pixels". You can do the same thing using the *NIX units program. If you know your DPI, you can just replace "85" with the appropriate DPI.

See more ...