CSS Font Size Display Choices: px, em, %, pt

| 1 Comment | No TrackBacks
When specifying font size on a website using CSS, developers must choose between four different types of units: pixels (px), em, percentages, and points (pt). This article describes each solution and the solution that should be used. An example table displaying font size comparisons between the different units can be found can be found in the cited resource (1).

Pixels and points are both viewed as being a fixed font size in the browser. Although fonts set using pixels can resize in some browsers, they do not resize in all (such as Internet Explorer). A general rule: fonts sized using the measurement in points should be used for printed content and not screen content. (With this in mind, the web designer can set up a CSS style for print with font size specified in points.) That removes points from the equation.

Fonts set using pixels is not guaranteed to scale with the browser (Internet Explorer) if the user decides to increase (or decrease) the font size. Also, there is a difference in display size between Windows and Mac operating systems when using points due to different screen resolutions. This has not stopped developers using pixels to specify their font sizes, however. Sizing with pixels is easy, and it offers a little more control on the design of the page. In the past, I have used pixels to size my fonts because I liked the control over the position and display; it was also easy to learn when I adopted CSS several years ago.

Unlike pixels, the em and percentage units can scale with the browser. The measurement for em is based on the font. It is the width of the upper case 'M' letter (or 'em dash'), hence the name. Fonts sized using percentages are relative to the page.

To determine the correct font-sizing method (pixels, em, or percentages), we need to decide the goal of the website; the first goal should be to allow users to access the website and read content. The website should be accessible, meaning that it should allow everyone to read the website without problems. (For example, some users with poorer eyesight may need to make the font in their browser larger in order to read it easily.)

How can we make content accessible and readable? One way is to choose a scalable font size. (Other ways include choosing a legible font and an easy-on-the-eye colour, but these are beyond the scope of this article.) A good choice of font size will give the user the ability to resize the text displayed in the browser. With this in mind, the best way to go would be to use either em or percentages.

Now that we have determined that the font needs to be scalable, we are left with the choice of using percentages or em for sizing our fonts. Some suggest that percentages are the way to go; Blogger Kyle Shaeffer states that percentages should be used instead of em because they are the most consistent and resizing the text in the browser when using em is too abrupt (and too small or too large) in some browsers (2). However, other users believe that em is best used. The World Wide Web Consortium backs the use of em to be the best practice for declaring font sizes (3). Yet, others suggest using a blend of em and percentages. An article by Richard Rutter provides examples of different methods of setting font sizes and concludes that font sizes should be set using percentages on the body element and using em for defining font size and line-height to produce the most consistent visual design in all browsers (4). The W3Schools website also shares this idea for the most consistent browser font display (5).

In conclusion, I believe that web developers and designers should use font sizes in em units with a percentage on the body element. A separate CSS file for 'print' should also be developed to set the font sizes in points unit for pages that are likely to be printed.


(1) Briggs, Owen. Incremental Differences. http://www.thenoodleincident.com/tutorials/typography/incremental_differences.html [03 October, 2003].

(2) Schaeffer, Kyle. CSS Font Size: em vs. pt vs. px vs. percent. http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/

(3) World Wide Web Consortium. Web Content Accessibility Guidelines, Chapter 4: The amazing em unit and other best practices. http://www.w3.org/WAI/GL/css2em.htm [26, October 2010].

(4) Rutter, Richard. How to Size Text in CSS. http://www.alistapart.com/articles/howtosizetextincss [20 November, 2007].

(5) W3Schools.com. CSS Font. http://www.w3schools.com/css/css_font.asp [10 January 2011].

No TrackBacks

TrackBack URL: http://jenikya.com/cgi-bin/mt5/mt-tb.cgi/227

1 Comment

Just after study a couple of in the blog posts on your site now, and I absolutely like your way of blogging. I bookmarked it to my bookmark web page list and will be checking back soon. Pls have a look at my web internet site also and let me know what you consider.

Leave a comment

Archives

Recent Comments

  • Julia C. Hanchez: Just after study a couple of in the blog posts read more
OpenID accepted here Learn more about OpenID