As a web designer, my focal vocabulary is highly specialized. Like those wild Inuits and their hundreds of words for snow (apparently a myth?), my language of HTML and CSS offers many ways to speak of what an outsider would consider essentially one thing. For instance, the CSS font-size property.
And this is where my curiosity got the best of me — what is the difference between the font-size units em, px, pt, percent and value?
For brevity’s sake, I will try and keep it simple.
Using the em and percent units allow for easier, more consistent scalability—of growing essentiality paralleling the mobile web movement—though they can be more difficult to control on a precision level due to the mathematics that determine the units’ actual display size. Still, they are the more highly recommended standard units for web document text. The units of pixels (px) and points (pt) allow for fine-grained control over font sizing, however, they do not allow for graceful, dynamic scaling. (It should also be pointed out that point values are typically only used for print materials, and should be reserved for print CSS, if used at all.) As for the value properties, or keyword values of font-size CSS—you know, x-small, medium, larger, etc.—if you use them, you’ll only be proving Adam Sandler right, they are all going to laugh at you.
For more in-depth coverage of the differences between these units, and suggested methods of combination usage, I recommend reading these articles:
CSS Font-Size: em vs. px vs. pt vs. percent and px-em-%-pt-keyword
And because we all love charts, here’s a side-by-side comparison of unit values:
Now for the good, the bad and the ugly.
The good:
The bad and the ugly:
From what I can tell, all font rendering is browser dependent, i.e. a 16px font will not look the same from one browser to another, and there will be a marked difference between a 16px font on one browser and a 12pt font on another browser and a 100% font on another browser. An even uglier scenario, and I’ve seen this happen often, different team members prefer different units and pretty soon all the elements on your site, though they are all technically sized the same, look horrible together because they are ever so slightly different from one another. If you didn’t read my blog about standards, I’d recommend you do that after you finish this one.
A couple other interesting points to keep in mind—user-initiated browser text size handling adjustments and effects of retina-display resolutions on text rendering.
First, user-initiated browser text size handling adjustments.
Depending on what unit you’re using to control font-size, if a user uses browser settings to zoom in or out on your text, it will be displayed in different, and sometimes undesirable and uncontrollable ways as is illustrated in the example above. Try and remember to test for this.
Second, as Kyle Schaeffer points out, with mobile devices beginning to cram more and more pixels into their hi-def displays, you should be careful when using pixel units. Think about it—a 12px font displayed on a screen with a resolution of 300px per inch sounds like a recipe for disaster, doesn’t it?
I make no recommendation for standardization of usage with regards to CSS font-size. I understand each unit’s inherit strengths and weaknesses, and appreciate having the array from which to choose. Personally, the percentage unit is my preferred font-size unit because of its cross-platform upside and relatively linear and familiar mathematics foundation.
What is your take on this issue? Have you a preference?
Update
- Nice little tool that compares screen type: http://www.typetester.org/
Leave a Reply