Is there a unified font size metric across all applications?

Question

This is not precisely UX related, but very important to user interface design in general. In summary, across applications (Photoshop, Dreamweaver, Flash) and platforms (Browsers, .NET, Mac, Silverlight, etc) font sizes are always inconsistent. Some measure it in points, pixels, em, mm, twips and others, but 20 points in Photoshop is always different from 20 points in Dreamweaver.

This makes it very hard to judge font sizes for GUI and web page user interface design in general, and its impossible to memorize numbers since the same number means different things to different apps and platforms.

So is there a unified metric or calculator that gives you corresponding font sizes across applications?

Answer 1

Sadly, not really. What you're asking for is an absolute unit of measure, which should make points, picas, millimetres, inches, etc. all valid option (for any defined definition of "point", at least—it used to mean 72.27 PPI, but was standardised to 72 PPI for PostScript).

When the Macintosh was first released, its physical screen density was, it just so happens, 72 pixels per inch (so 1px was equal to 1pt). Therefore the Mac system software standardised on 72 PPI. Unfortunately, that meant rendering fairly standard size text (e.g. 10pt) at a very small size (10px tall), which—without the benefit of print resolution—is a very crude representation of your fonts.

So Microsoft decided in Windows to represent the screen in software as 96 PPI (regardless of the actual size of the pixels on your monitor). Physical screens were still being manufactured at 72 PPI, so the elements on screen were therefore one third (33%) bigger than they really were in print. So a 1-inch square on screen would represent a 0.75-inch square in print.

Now you mention you're trying to make Photoshop's units match Dreamweaver's. Make sure your Photoshop document uses the correct PPI (in the Image Size window) for your platform. If you're receiving designs from a Mac version of Photoshop and then marking it up in Dreamweaver on Windows you'll want to change the document to use 72 PPI instead of 96 PPI (or vice versa if you're going the other direction).

Be aware, though: absolute text sizes are not recommended for use on the web:

Do not specify the font-size in pt, or other absolute length units for screen stylesheets. They render inconsistently across platforms and can't be resized by the User Agent (e.g browser).
Keep the usage of such units for styling on media with fixed and known physical properties (e.g print).

Answer 2

I don't know if this answers your question entirely, but some more details:

Points, when used to measure type, don't actually tell you the height of the characters. Rather, they tell you the height of the invisible bounding box that surrounds the character. This is due to how physical type used to be created (a character on top of a piece of lead or wood). As such, two typefaces in the same point size may very well have entirely differenlyt sized characters.

That said, in general terms, as many have stated, a point is designed to be a specific physical unit of measurement 1pt = (in the digital age) 1/72nd of an inch. So a 72pt square should be printed on paper as a 1" square.

Pixels are another goofy one. On physical devices (Screens) a pixel is a specific thing...one RGB 'dot'. And these will vary in size wildly from screen to screen.

In CSS, however, a pixel is a 'virtual' measurement. And roughly translates to 1/96th of an inch.

In PhotoShop, however, a pixel should represent one pixel of data in the image, which will vary on the size you print your image.

On top of that, remember that users can modify these settings in their web browser as well. So, ultimately, there's quite a bit of variance here.

Answer 3

Pixels have different sizes which make the visual effect of the same font size differ between screens. The useful measurement here is not only the font size, but more how many pixels you have per inch. If you have 72 pixels per inch a 18 px font would look much bigger than on a 96 pixel per inch screen.

You can see the same effect in photography (image from outbackphoto.com):

Even though the reasoning on the image is for cameras - it works the same way on screen. More to read on the topic is found on the Wikpedia article Pixel denisty:

Pixels per inch (PPI) or pixel density is a measurement of the resolution of devices in various contexts: typically computer displays, image scanners, and digital camera image sensors.

Answer 4

The whole point of points (heh, sorry) is to be device-independent. Various applications are supposed to know how to display a 12-point font as a 12-point font, and not any larger/smaller. Of course the user might change the magnification of the screen (Apple-Shift-+ on many MacOS apps), which will further affect the font size.

If you need to convert from pixels to points, then you need two bits of information:

• The physical dimensions of the screen
• The pixel resolution of the screen

The formula for the vertical pixels-to-points conversion is:

(pixelCount * verticalScreenInches * 72) / verticalScreenPixels

Note that the vertical pixel size isn't always the same as the horizontal pixel size. (ie: Pixels are not always square.)

Answer 5

Take a look at the device-independent pixel, a unit of measurement that appears consistant across all hardware applications (in theory, anyway). In fact, the pixel size depends on the anticipated distance between the viewer and the screen, so the farther your eyes are from the device, the larger the pixels should be!

A List Apart has more information.