CSS Tips – em, px, pt, % explained

CSS Tips when handling font sizes

In my early years of development, I always used “px” for sizing my fonts.  I guess it came from using word processors growing up.  But that is not necessarily the best way to handle font sizes, so here are some CSS Tips to help you when it comes to font sizing in websites.

Now imagine having a piece of paper that was 4.25″x 5.5″ and you used the font size 12px and typed out the phrase: “Can you see me now?”

CSS em vs. pxUsing the ’em’ scale for the font size, you can see that when the piece of paper (which represents a screen size) is increased, in this case, doubled in size from 4.25″ x 5.5″ to 8.5″ x 11″, the font automatically grows along with it.

However, when using the ‘px’ scale for the font size, the font size did not grow along with it.

This is also true in reverse.  Imagine setting the font size (using ‘px’) for a website designed on a computer, then you go to look at the same site on a smartphone, the site will adjust to the screen (if you have the site set that way) but the font will still be larger in comparison than the elements around it.

Definition Of Each Style

px – is an absolute unit of measure that is 1/96 of an ‘in’ unit. Use it when you want something to always be that size, like a border around an image or if you need a font to be a fixed size like in a banner.

em – is NOT an absolute unit of measure. It is relative to the user’s browser, unless you have over-ridden it by setting your font size with an absolute unit. Mostly used for font sizes but has other uses with margins and padding.

% – is another case of a relative unit of measure. Perfect for when you would like to set the width size of your columns, let’s say 75% for your content and 25% for your sidebar content.

pt – is an absolute unit of measure, traditionally used in print media. One point = 1/72 of an inch.

Final Thought

If you set your body element up with a font size like 62.5%, you can then use the ’em’ unit to size your fonts from there. I hope these CSS Tips will help you in your future web designs.

Leave a Reply

Your email address will not be published. Required fields are marked *