CSS Units

CSS has 3 different units that you can use when you are looking to size elements such as fonts.


1. Pixels

Pictures and dots? Sound familiar?

Pixels are commonly used as a unit in programming to control the size of an element: pixel units.

If you assign a size value of 12, the most significant letters in the paragraph will be styled 12 units larger than the rest.

The short letters will, therefore, follow the order.

Pixels are software friendly because they let you manipulate the resolution and the screen as desired.

However, for websites, pixels can be quite problematic.

Different users viewing your website, see it on multiple screen types and sizes.

A pixel font might appear tiny on smaller screens and large on others.

For this reason, most web designers choose 12 as the pixel size as it adjusts well on most screen sizes.


2. EM

Worried about pixel disorientation on different screen sizes?

How about you let the user decide what font size they want?

EM is the way to make sure that your website adjusts to the font size preferred by the users.

Metric wise, 1 EM = the font size set on the user’s device.

EMs increase the readability of text without any glitches, no matter what the user’s screen size or a resolution.


3. Percentages

Percentage functions are quite similar to EMs.

The specified value is the exact percentage of the font setting in the user’s device.

Hence, 80% = 0.8em

Percentages are important when you want to specify the width of different elements.

If you want an HTML table with 5 columns and you want the width of the table to adjust evenly to the user’s device, the screen size will be adjusted.

You do this by assigning a 100% value to the table width and 20% value to the column width.

That will keep the table the full width of the screen, regardless of the size of the screen, and will keep each column to 20% of the width.