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.

---

What DPI means

I have a small screen on my laptop. It is 10.1 inches diagonal and runs at a resolution of 1280x768. The dots-per-inch (DPI) is 141 (you can calculate that from the physical size and resolution, if you assume square pixels) using my handy DPI calculator.

In comparison, a normal screen's resolution is between 75 and 100 DPI. A 15" monitor at is 85.3 DPI while a 1280x1024 17" monitor is 96 DPI.

But what does this mean? It means you can cram more pixels in an inch on my screen than on the average user's. OJ, so why does that matter? Well, when one does that, it makes everything smaller. Much smaller. And that is exactly how I like it.

What "pt" really means

Almost everyone who has ever used a word processor knows what "pt" sizes are. 12pt font is the default for many word processors and is quite readable when printed on paper. 10pt font causes your bifocaled professors to squint and 14pt (with 1.25" margins, of course) very effectively makes 1.5 pages into 2. However, what most people don't realize is that "pt" is a physical unit of measure - just like inches or miles - and there are roughly 72.27 points per inch (1pt = 1/72 inches).

Thus, when you print your paper, 12pt will always be 0.166" high regardless of what printer you use or what screen size or resolution the computer has. This is, again, exactly the way it should be. Were it to vary, that would be a problem in readability.

So, when you write in CSS that you want your text to be "12pt", that means that you want - regardless of the resolution the computer is running at - the text to be 0.166" high (this does require having a correctly-calibrated monitor setup, but macs come this way by default and windows is starting to as well). If a low-sighted person is using 640x480 to make everything bigger and more readable then your small text will still remain small to them. If you are someone with a tiny laptop, the 12pt text will fill your screen (you can only fit about 30 lines of 12pt text on a 141 DPI screen).

Alternatives to "pt"

pixels

As points were really meant for print, not a screen, you should use the screen's native unit of measurement for fonts: pixels. Most website designs are designed based on pixel sizes. While this isn't great, it's the reality of the situation and designers should make sure that their text comes out the same size as their graphics. Pixels ("px" in CSS) solves that fairly well.

relative sizes

The last solution is the best one - as far as usability and accessibility goes, that is. If you use relative font sizes then your text should be readable on any platform at any resolution. Let the user decide what font size is good for them and make your design scale around it. You can use the following units of measurements to help you do this:

em

"em" is a unit of measure based on the current font size. If there is no current font size, it's then based on the user's default font size. You can make bigger text by doing: font-size: 1.5em.

percentages

These are like the "em", but are a bit easier to understand. You can write font-size: 50% to make the code 50% smaller than the parent element's font size (or the default if you're in the body).

semantic

"larger" and "xx-small" are both valid font sizes in CSS. The former is relative to the current font size, the latter is absolute to the default font size. These are very nice, but lack the granularity of other units.

Conclusion and more examples

This problem has bugged me quite a bit. It usually appears in the websites designed by people with excellent print design skills, but who have not fully moved into the web-based world. Thankfully for me, Firefox has a "zoom" feature which I have to use on approximately 20% of the sites I visit on a regular basis. I hope that this overview will help people understand the terms better and see why it's important to make things accessible.

• A comparison showing a site that uses "pt" (left) and one that uses relative sizes
• Some layouts are very hard to read when "pt" is used on a high-res screen

There are many websites that talk about this subject in more detail. Below are just a few that I find helpful.

• Why Windows Web Pages Have Tiny Text
• The CSS Text Size Conundrum
• More Fun With Font Sizes