Understanding CSS Font Sizing

One of the persisting controversies when it concerns CSS (Cascading Style Sheets) and fonts in web design is which value to apply when specifying font sizes for the website or screen. When trying to understand proper CSS font sizing, the trouble comprises a complex one since there are some philosophical and browser support issues corrupting the entire subject and adding to the confusion.

There are a lot of dissimilar techniques of sizing text on the internet, and regrettably, at the current time none of them are 100% successful to a web designer. A few are alright, others more effective, and most altogether are almost worthless.

CSS Font Size Options

Numerous value alternatives exist for font sizing. These include the following:

• percentages (%)
• em
• ex
• inches (in)
• centimeters (cm)
• millimeters (mm)
• pixels (px)
• picas (pc)
• points (pt)
• keywords (xx-small, x-small, small, medium, large, x-large, xx-large)

As a web designer, what CSS font value is suitable to use? Philosophically, the controversy is that screen fonts ought be scalable - resizing in proportionality to the screen resolution. If we base our analysis from that definition, we can narrow it down by excluding the ex's, inches, centimeters, picas', and points for now. Although mainly of value for print, these are not normal alternatives for showing fonts on screen.

That provides us with percentages, em's, pixels, and keywords. All of these should be scalable options, but here’s where the philosophy and web browser support problems get in the way. Internet Explorer (IE) for Windows, for example, has bugs galore when it comes to font sizing.

CSS Font Size Solution

What is the answer? It is a delicate call that you must in the end make as a web designer supported by your target browsers and audience needs. A good guideline is that whenever you are applying fixed designs, pixels will work just fine, but if you want dynamic designs that scale, you might need to merge percentages and ems.

A few designers feel the "default font-size" assigned by the browsers or user-agents is too big. Declaring a smaller than "1 em" font-size for body text is a simple matter. Nowadays, a normal and popular "em-size" for body text is { font-size: 0.8em; } which commonly delivers as the equivalent of 11px (11 pixels).

Luckily, you are able to blend text-sizing selections inside your CSS, which can be of help.

* Get the latest web design tips & advice by subscribing to our rss feed or by email.