Question: What is the difference between using px, pt, em and % when controlling or adjusting the size of text and in what context should each be used?
Besides the fact that he has a cat, Kyle Schaeffer sounds like the best friend I never had. He began working on designing websites as a young teen, loves to hike and has a beard. What more could you really ask for?
Schaeffer’s personal site (which also serves as his blog) explored the question about “CSS Font-size: EM vs. PX vs. PT vs. PERCENT” back in September 2008. Quite a while back, so I’ll go ahead and say it’s safe to assume that his conclusions about the acceptable changes is correct. In fact, Schaeffer provided a blog update in 2011 to confirm or challenge any original hypothesis he concluded.
What is the difference between each?
For our basic understanding, the breakdown for each of the “units” are as follows…
- “Ems” (em) is always equal to the current font size, so say the font you’ve chosen is a size 12, then the em would be 1. If you wanted to increase the font size to 24, the em would be 2 and so forth and so on. Similarly, if you wanted to scale down to .5em, the font size would be 6. The key take-away for ems is to
- Pixels (px) is a unit that we generally use to define the visual makeup or “dots” on the computer screen. Pixels are good for designers who strive for perfection while creating a document or image, but the downside to using pixels is that they are not across the board friendly and cannot truly accommodate re-sizing, either large or small.
- Points (pt) are gradually going out of style and were originally used for print media. While it is still okay to use points, the best choice for screen design (as opposed to paper format design) is to use something different.
- Percent (%) is the up and coming unit, gradually becoming the more commonly used way to adjust the font sizing through the CSS style-sheet. Just as the pixel and point are interchangeable, em and percent share some of the same characteristics. Schaeffer describes that when you use percent, you have more control over the scaling of the font size.
What does the difference look like, visually?
Let’s think of it this way: 1 em = 12pt = 16 px = 100%
So, the use of each really depends on how much you want to be in control of your styling through the CSS sheet. As we become more and more familiar with the shortcut terminology for creating our web page designs, we must become more aware of what exactly is changing on the browser window. For example, according to Chris Coyier of CSS Tricks, when we use “keywords” like x-small, small, medium, large, and x-large, we are not only calling a general format for the text, but in doing so, must be conscious of the little details, especially when being loaded onto other platforms.
According to the resources available online, designers should consider using em and % together instead of the gradually outdated points and pixels. Thus, when using em and %, always remember that em is a “multiplier of [a] current em value,” kind of like x=y so 2x = y and percent re-sizing is “relative,” making cascading user friendly.