16 comments

[ 6.2 ms ] story [ 43.1 ms ] thread
A 12pt font should be 4.216867mm high everywhere. A 1em font should probably be readable by someone with average eyesight everywhere and a 12px font may require a magnifying glass to read but should still be legible when you use one.

We have different scales and units for a reason, the stupid part is that computers pretend to use physical units and then actually give you something different. So either remove all references to physical units from your graphics libraries or actually try and get it right. Don't arbitrarily redefine units we've been using for hundreds of years because your API sucks.

What? As a game developer what data type and value should I specify for font rendering on an iphone, ipad, 32" 720p LCD, 42" 1080p LCD, 60" 1080p LCD, and 120" 1080p projector? Bonus points for solving a similar set but for printed text ranging from index card to billboard size.

This is not a simple problem with a simple solution. If it were simple then there wouldn't be multiple topics and giant discussions associated with each.

How about: Incident viewing angle a length can be perceived at average viewing distance?
Even this is not sufficient information to re-flow the design as many users prefer larger screen objects or may simply be unable to use your application due to vision problems or other disabilities.
who says it shouldn't be zoomable?
Certainly but you need to consider how your UI responds to a more (or less) constrained space as the zoom changes. It's hard to implement designs that adapt to that with the tools we have right now.
I'm not trying to suggest that designing for different display sizes is simple. You are conflating two problems.

Firstly there is the problem that devices have a wide variety of screen sizes and usage scenarios. Your phone has a different number of pixels per arc-second than your laptop.

Then there is the problem that your computer is actively lying to you about what physical units are and what the screens DPI actually is. This makes working around the first problem harder.

The first problem requires a judgement call by the developer, and even some input from the user in many situations since e.g. some users just prefer bigger text. (Although most games dont seem to care about this so arcseconds/pixel at the "intended" viewing distance is probably a reasonable way to scale the text.)

The second problem is so horribly endemic that I doubt it will be fixed in any meaningful way for a long time.

So rename pt to something else in the API, if it really bothers you. But don't try and make all the existing software that uses a "12pt" font be 4.216867mm, because rightly or wrongly that isn't and has never been what it means in a computing context.
Nobody suggested doing that.
The original article this one is replying to did.
No it suggested making physical units actually get rendered at the size they describe. It didn't specify an implementation.
> A 1em font should probably be readable by someone with average eyesight everywhere

Huh? this makes no sense, as ems are relative units, while points are absolute [0]. If the element has an inherited or defined text-size of 8pt, then within that element, 0.5em==4pt. Hence 1em in <body> is (by default) the default font size of the browser, generally 16pt.

On topic: 12pt should be the same physical size everywhere. 12px should be the same logical size everywhere.

[0] http://jsfiddle.net/8Mv6x/2/

em's are relative yes. However at least on the web there is always a default that you are being relative to. It's this default that should (and is currently) generally configured to be readable.
Incidentally, using arc-seconds-per-pixel does not necessarily make a good default - I want a smaller text size on my iPhone not just because I hold it closer to my face, but also because there just isn't as much screen real estate and I prefer to deal with somewhat smaller text to avoid scrolling.
My approach is to leave it to the device manufacturer/user and only use % based font sizing. CSS wise, for layout I then rely on % for horizontal spacing/positioning and em's for the verticals, which act as a kind of "em = line" system. Even though an em is rarely a line is a baseline sense, it makes cross-device design a lot more painless leaving the base unit to the device itself.
Points are a unit of measurement that have no place in CS other than in determining the size of text when it is printed. Don't use pts because they make no sense for the medium.

Graphic designers as a group have yet to shed the "limitations" of their education which is STILL grounded in the print world. It is why we still see so many websites that are just strips down the middle of a large screen rather than flowing to fit the screen.

Could you imagine if a similar design strategy was used for developing applications? Every app would have a fixed window and none would go full screen.

Maybe designers should stop doing mockups in a static format such as Photoshop and start doing their mocks in a browser.

Seriously, if you can't figure out how to work with dynamic content do us all a favor and go back to designing printed material.