Length units and interoperability

Hi,

I would like to open a discussion about the difficult question of length units.

I’m a big fan of the "point" unit for the font size, because it is a physical unit (about 0.3mm) and ensures the text being displayed in an acceptable size regardless the screen resolution. On the contrary, specifying font size in pixel can lead to excessively small texts on high resolution screens.

For the size of other elements, like the width of <div> blocks, I generally use pixels.

Now, assume you have a text which size is given in points inside a <div> which width is specified in pixels. It can display well on your screen, but if someone else is viewing the same page on a high resolution screen, the <div> could be not large enough to display the text like you want. This is especially true if inside that <div> are several "float:right" and "float:left" elements that you hope to display on the same "row".

As I’m using physical units for fonts, I have considered also using such units for other elements.

The code below displays as a square which side is 62 mm long when measured with a ruler on my screen (Windows OS, 15’’, 1024x768 resol).
This is because, with computers, mm and cm are not true physical units but logical units.

I assume that if specifiying sizes in mm or cm, things display differently for Macintosh users as the screen ppi is different.

Would the solution be using the physical "pt" exclusively ?

On the contrary, the author of this page recommends not using "pt" for font sizes http://hsivonen.iki.fi/units/

Which is to you think the best approach to get more or less similar layout on all operating systems and screen resolutions ?

The most important for me is not that elements displays exactly the same absolute size on every system, but that the relative sizes are respected. However, as explained above, the all-in-pixel approach is not my favorite one because screen resolutions may vary a lot and make text hard to read.

Thanks for sharing your opinion.

Indeed, the web is not print, and fixed units for font-size should be avoided. And there’s more to it than just size.

http://www.alistapart.com/articles/on-web-typography/
http://www.alistapart.com/articles/emen/
http://www.alistapart.com/articles/howtosizetextincss/

Hi Susan,

Thanks for your answer and the links. I agree that there is more than font-size. How fonts are available and display in several browsers is another important thing.

Verdana, Arial and Century Gothic as there recognized by most browsers.
I avoid using special symbols when using Century Gothic.

Concerning units, I avoid units using "em" for font-size, as it leads to different rendering, especially when specifying relative sizes in CSS.

I’m aware that "web is not print". However, there are situations in which you need to set the size of some element, while accepting small changes depending on browser, resolution and operatig system. Specifying sizes relatively also has drawbacks.

At least "pt" appears me as ensuring some bounds and avoiding "random results".
However, converting all to "pt" is not practical.

The trick to using em is to define a specific font size at the beginning of your CSS file, with some type of global definition, then your ems will be relative from that.

Thanks.

The * in stylesheet also has effect of canceling default size for titles (h1, h2,...).

For people interested, I’ve attached a small example file that shows what is special with the "em" unit.

I found this interesting:
http://destination-code.blogspot.com/2008/10/font-size-absolute-length-units-pt-pc.html
I assume that some things are valid for Windows only.

Could some Mac user, using a ruler, tell me which size displays the following square on screen?

Maybe a solution for fine grained control of font size is using a main stylesheet that does not specify the font sizes, combined with a script that loads different stylesheets depending on wether the computer is a PC or a Mac.

http://chromadesign.com/ourThoughts/classes/css/lesson04/fontSize.htm

From what I read the "pt" unit should be reserved for "print" stylesheets, and it is better to use the "px" unit for screen display.

My honest take on it is to run with pixel type units as a base font-size very early in your stylesheets on your body tag, then to use percentages or ems everywhere else.

Mark Boulton is one of the masters of web typography and grid systems. You might want to peek at his advice:

http://www.markboulton.co.uk/journal/comments/five-simple-steps-to-better-typography

Hi Ryan,

Thanks for the link to Boulton’s site.

I agree that setting a size in px early in the stylesheet is good idea. My stylesheet already used percentages a lot, so that I just had to adapt very few "pt" length to "px" ones. If the text appears to small to a visitor, this is in general because he uses a large screen with a high resolution, and he still can zoom the page with most browsers.

I mostly use "em" for paddings, as this helps ensure that there is always enough padding in containers. I avoid using this unit for fonts because it makes text size difficult to predict when relative sizes (%) are set for parent containers.

"px" was a good choice for me and I renounced using different stylesheets for Windows and Mac.

1.2em when you have a base font-size set to 10px = 120%. 1.4em=140%, etc. 10px as a base fontsize setting makes it easy too to mix and match how you want it and think about it most easily. Honestly any combination when you set the base font-size on the body tag works out to be the same whether you use ems or percent (when you shift the decimal over a couple of places for ems, and vice versa).

Yes, but look at this:


Sometimes, you need to put some text inside "scaled by percentage" elements back to the original size. If in above example, you replace ### with "1em", the text inside the <span> remains scaled at 144%. If you replace ### with 13px, you go back to original scale if the font-size for your body was 13px. This is why, I like "px" because it makes easier to set things like you want them to display.

"em" of course also has benefits.
I especially like "em" when I want to ensure some gap between elements and borders and use this unit a lot for margins and paddings.