3

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?

|improve this question
  • 1
    Sorry no, 20 points is 20 points, and 20 points is 20/72 of an inch. No two ways about it. Differences come about when you size in pixels, as you then become dependent on the dpi of the output device (printer or screen). That is exactly why you should always use device independent measurements. – Marjan Venema Feb 5 '13 at 19:10
  • Can you give me a practical example where I can test this? You seem to be talking of the theoretical "20 points" which is unfortunately, completely different from the ways different apps and platforms have implemented it. – Robinicks Feb 5 '13 at 20:29
  • @MarjanVenema somewhat true, but points rarely measure the actual height of the characters. That's where a lot of the confusion arises. As for pixels, that's also somewhat true, but not entirely either, as pixels are a virtual concept when it comes to CSS. – DA01 Feb 6 '13 at 1:03
4

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).

|improve this answer
  • Just to clarify that last point, that's slightly old advice. It applied mainly only to IE6 and even then, it was due to IE not obeying standards (as usual). – DA01 Feb 6 '13 at 1:04
  • @DA01: It applies to IE7 too, and the CSS 2.1 spec makes only a recommendation (not a requirement) for pixels to be a relative unit of measure, and leaves the implementation of magnification up to the UA. – Kit Grose Feb 6 '13 at 3:39
  • true. IE7 seems to be a problem too. Still, I hate suggesting things because of old versions of IE. ;) – DA01 Feb 6 '13 at 3:47
  • @DA01: Yeah, it's not the most fun in the world. But all the tricks I've developed over the years to fix IE bugs are going to be obsolete soon; might as well make use of them in the meantime ;). – Kit Grose Feb 6 '13 at 4:02
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.

|improve this answer
  • 1
    +1 On the same machine for the same user, the variance should be limited to different applications handling measurements differently. – Marjan Venema Feb 6 '13 at 7:36
1

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):

enter image description here

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.

|improve this answer
  • Nice article about PPI, but still doesn't give me a workable method to quickly convert between the various industry (non)standard pixel font sizes. I'm looking for a comparison table or calculator, if such a thing exists. Thanks. – Robinicks Feb 5 '13 at 20:28
  • @Geotarget I doubt any such thing exists, as so much of it is subject to the actual content being manipulated (for instance, the size of a pixel in photoshop depends on the size of the image one is working on and wants it printed at). – DA01 Feb 6 '13 at 1:12
1

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.)

|improve this answer
  • That's all true for measuring real-world physical pixels. Just remember that software isn't necessarily obeying that and will be using a non-physical pixel. – DA01 Feb 6 '13 at 1:10
1

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.

|improve this answer
  • This isn't a unit of measurement one has direct access to in terms of spec'ing, though. It's something the system rendering does. – DA01 Feb 6 '13 at 4:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.