Font Sizes in Responsive Design: px vs. pt vs. em vs. percent?

As a front-end developer, I personally love working with CSS. I have been working a lot with responsive design lately, and as I pointed out in an earlier post on designing for mobile devices, one of the things to keep in mind was phone number formats. Another thing to keep in mind when developing for mobile devices is the CSS font size.

Pixels (px) as CSS font size

Pixels have fixed sizes. One pixel is usually equal to one dot on the screen. Because pixels are fixed sizes, they do not change. This can be a good and bad thing. It allows web developers to make the most accurate, or “pixel-perfect”, rendition of web designs. However, because they are a fixed size, pixels do not size up or down. That means that fonts will be rendered smaller on a screen with higher resolution than on a lower resolution screen.

Points (pt) as CSS font size

Points are a unit of measurement used in print. Points are based on an inch on a ruler, and one inch is equal to 72 points. This unit also varies greatly between different browsers and screens when used in CSS. Points are very good for setting up a print CSS to overcome that browser issue, but other than that, I would not recommend using points for developing websites.

Em as CSS font size

Ems do not have fixed sizes. They are scalable, and for that reason ems are good for mobile web development. Ems are relative to the font size set in the CSS. If you don’t have one set in the CSS, then 1 em will usually be equal to 16px, which is usually the default font size in browsers. One bad thing about ems is that they cascade, making pixel perfect designs a little more complicated. For example, let’s say the body font size is set at 16px, and the parent div has font size of 1.2em. If you have a paragraph in that div with font-size: 1.2em, then you will have a font in that p tag that is 1.2 em of the 1.2 em of the 16px font, or roughly 23px on the p tag instead of ~19px that you would expect.

Percent (%) as CSS font size

Percents are also scalable like ems. However, 100% is equal to the current font size. Think of it this way: 1.5em is 1.5 times larger, and 150% is 150 percent of the font size. Percents are also good for mobile development because of their scalability. However, they do cascade like ems.

Except for points, all of the units above are good choices for front end web development. Ems and percents are particularly good for mobile web development.