CSS font size and its units explained

With the web 2.0 style web designs, minimalist designs etc, one thing is certain – fonts are playing a very important part of the visuals of the site. Gone are those days where big images, boxy buttons were “The thing to do”. And another aspect is the different mediums through which our websites are accessed now. A mobile, PDAs, Notebooks, iPADs and the list goes on. So, the question is how to get the best out of fonts and make them readable across all platforms. Yes, font size plays a very important role and so the unit does matter.

So, what are the different units available to us?

1. Pixels: One of the most popular unit in css. Pixels are the best choice when a designer wants pixel perfect control over their website. But, the problem is that a pixel does not understand scaling. They will not scale as per browsers of a computer and say a browser of a mobile. So, the look of your website is :P
2. Ems: This is considered to be one of the best options to handle such problems. They can scale, they can be given in percentage which gives you a lot of flexibility as per the base scale of the fonts. In general 1em is almost equal to 12pt.
3. Points: They are the units best suited for print, but some how they are also used. They are fixed and so they don’t understand scaling when the base font is small or big. Personally I never use them.
4. Percent: Well they are one of the most important of all. Base is 12pt which is 100% in percent units. And they scale very easily as per different percentage.

So, the thing is points and pixels are fixed and they will not change their dimensions as per requirement. So, we can stop thinking about them for now. The next two are “Ems” and “Percent”.

Let’s look at some small HTML mark up.

Example

So, here I have 4 span tags with four different class. And each class has a different font size based on different units. And my base font-size, i.e. the body font size is 100%. So, you can see all the text are of same size:

Example

Now, I will increase the base font-size/body font size from 100% to 200%. You will see that the percent and ems have scaled up, but that was not the case with point and pixel font size text.

Example

So, you can see that points and pixels were out of the question. And the other one being ems and percent. The major difference between “Ems” and “Percent” is when the browser Text Size is changed like in Internet explorer ems behave in a very strange way. When the text size is smallest, they are almost unreadable and when at the maximum, they are huge. This is adjusted in percentage. Although some may find that better option. But in general although “Ems” is THE upcoming standard unit for font-size, sometime you may have to rely on percent when you want a platform independent website.