Size text with em in your CSS – Explained with example

Sizing text for the screen using ems in your Cascading Style Sheet (CSS) can be a problem, if you are not a web designer and have never spent any time reading about the differences between the various units that can be used to measure text size, especially pixels (px) and ems (em) which are the most frequently used. I am sure there are a lot of guides out there that explain the issues that arise by using either one of the aforementioned units, but I consider the article How to size text using ems a very good place to start, if ems is what you aim for.

It seems that the main advantage of using ems instead of pixels is that text size can be translated correctly by all major browsers when the user resizes the text from within the browser, overriding the text size defined in the CSS. I feel that, once again, people are forced to waste their valuable time because of Microsoft’s old-fashioned methods of protecting its investment by not following the established standards, so… well, taking into account that Internet Explorer (IE) is still a very popular web browser, I guess that noone can actually avoid reading about the pros and cons of using ems or pixels to size text for the web.

Size text with em in your CSS – Explained with example by George Notaras is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Copyright © 2008 - Some Rights Reserved

2 responses on “Size text with em in your CSS – Explained with example”

keramida February 26, 2008 at 06:30Permalink →

Using explicit pixel-based sizes seems like a good idea. It isn’t. The main problem with the `reasons’ someone presents for choosing pixels is that they are, mostly, advocacy for mixing content with the presentation of the content.

The people who have been involved in the typesetting of articles, leaflets, books, manuals, technical reports and many other printed works already know that it is important to separate the content of a document from its presentation style.

Typesetting is one of the fields of human endeavor which has much to gain from technical advances. The typographical units invented by the typesetters of old, are not just a “naive” attempt to avoid using centimeters or millimeters everywhere. One of the reasons is precisely related with the “fonts” and the “size” of the text involved and how these can be described to another person.

Communicating layout information is, of course, possible with millimeters and centimeters too. We could, for instance, describe the layout of a page in a manual by saying that:

* The page is 21cm wide, and 29cm high.
* Each paragraph of text is exactly 160mm wide, which gives us enough horizontal space for about 16 words when we use Times New Roman fonts scaled at 10/72in.

The page dimensions, that commonly refer to the physical size of the paper, are probably easy to understand when described in cm/mm. Note how we are tied to a particular font family *and* a specific size to describe the width of a paragraph though.

Now, compare this with:

* The page is 21cm wide, and 29cm high.
* Each paragraph of text is justified and about 35em wide.

There’s no need for extra information about the size of the font or the font family here. An experienced typesetter can quickly look at 35em and visualize a complete line’s width. His experience about the average word length can help him quickly understand if this is a line that is going to be too long. His prior experience with laying out text on a page can help him judge if there’s enough space to typeset a single-column or two-column layout, and so on.

That’s just touching the surface of the real issue, but I’m only trying to say that the “typographical units” were made for a reason, and that reason is “to facilitate communication of complex layout information among typesetters”.

A modern web browser is, in essense, a typesetter. The designer of a CSS style is a second “typesetter” who is assigned the task of communicating to the “typesetting machine” his layout and design ideas. Building upon the experience of the typographers and typesetters who introduced the “em” units is just a way of communicating with the mechanized typesetter in a “higher level” :)

George Notaras Post authorFebruary 26, 2008 at 17:25Permalink →

Giorgos, thanks a lot for stopping by and writing all this educational information. I admit these issues are all new to me as I have never spent much time on the details of typesetting. It seems that the reasons for using ’ems’ instead of ‘pixels’ are by far deeper than I had initially thought. As you have written it, typographical units were invented for a reason. Now, it is clear.

Again, thanks for your feedback :)

keramida February 26, 2008 at 06:30Permalink →

Using explicit pixel-based sizes seems like a good idea. It isn’t. The main problem with the `reasons’ someone presents for choosing pixels is that they are, mostly, advocacy for mixing content with the presentation of the content.

The people who have been involved in the typesetting of articles, leaflets, books, manuals, technical reports and many other printed works already know that it is important to separate the content of a document from its presentation style.

Typesetting is one of the fields of human endeavor which has much to gain from technical advances. The typographical units invented by the typesetters of old, are not just a “naive” attempt to avoid using centimeters or millimeters everywhere. One of the reasons is precisely related with the “fonts” and the “size” of the text involved and how these can be described to another person.

Communicating layout information is, of course, possible with millimeters and centimeters too. We could, for instance, describe the layout of a page in a manual by saying that:

* The page is 21cm wide, and 29cm high.
* Each paragraph of text is exactly 160mm wide, which gives us enough horizontal space for about 16 words when we use Times New Roman fonts scaled at 10/72in.

The page dimensions, that commonly refer to the physical size of the paper, are probably easy to understand when described in cm/mm. Note how we are tied to a particular font family *and* a specific size to describe the width of a paragraph though.

Now, compare this with:

* The page is 21cm wide, and 29cm high.
* Each paragraph of text is justified and about 35em wide.

There’s no need for extra information about the size of the font or the font family here. An experienced typesetter can quickly look at 35em and visualize a complete line’s width. His experience about the average word length can help him quickly understand if this is a line that is going to be too long. His prior experience with laying out text on a page can help him judge if there’s enough space to typeset a single-column or two-column layout, and so on.

That’s just touching the surface of the real issue, but I’m only trying to say that the “typographical units” were made for a reason, and that reason is “to facilitate communication of complex layout information among typesetters”.

A modern web browser is, in essense, a typesetter. The designer of a CSS style is a second “typesetter” who is assigned the task of communicating to the “typesetting machine” his layout and design ideas. Building upon the experience of the typographers and typesetters who introduced the “em” units is just a way of communicating with the mechanized typesetter in a “higher level” :)
George Notaras Post authorFebruary 26, 2008 at 17:25Permalink →

Giorgos, thanks a lot for stopping by and writing all this educational information. I admit these issues are all new to me as I have never spent much time on the details of typesetting. It seems that the reasons for using ’ems’ instead of ‘pixels’ are by far deeper than I had initially thought. As you have written it, typographical units were invented for a reason. Now, it is clear.

Again, thanks for your feedback :)

Related Articles

2 responses on “Size text with em in your CSS – Explained with example”