1015 words
After my recent post rebutting the suggestion to have a 16px font size in Safari an interesting discussion emerged helping me to sort out the facts better and – hopefully – make my point clearer. So here we go again. Some facts to begin with:
- David Hyattasked a question about px rather than pt
- A px is defined by it's size "in the eye of the beholder". Assuming uniform viewing distances for the time being, this means the number of device pixels making up 1px depends on the device's resolution.
- In contrast, a pt is a physical size corresponding to 1/72 inch. Thus the number of device pixels needed for it depends solely on the device's resolution.
Thus, both measurement units depend the the screen resolution. The difference between them should be given by a constant. Assuming uniform and average "arm's length" viewing distance of 71cm
as recommended for CSS 2 will give that constant, which turns out to be 5/4. Let me chuck in a few more numbers:
Running a little comparison of the respective units in Safari suggest that the constant Safari uses is about 4/3 (compared to 1.16 in Camino and 1.27 in Internet Explorer).- The previous point is probably not a big deal as it reflects different assumptions about the viewing distance. Although, a little unscientific measuring suggests the distance of 71cm given by the CSS people isn't too bad, judging from both my office and home computing environments, where the distance is between 60 and 70cm. This is also in-line with Apple's recommendations that suggest a 46 to 61cm distance from the screen (for non-laptops). This, however, corresponds more to the ration we find in Camino that to that found in Safari.
- Actual screen resolution of my (first-generation) Powerbook G4 is 91dpi. That of an 12" iBook is 106dpi. Both measured using a ruler and Internet Explorer, which gave the same results.
- Screen resolution used by Safari is 96 dpi according to David. This is also confirmed by my test document, where a 100pt box uses up 133 pixels on-screen – regardless of the screen is is used on. Handily the screen resolution and viewing distance are chosen in a way that makes 1px turn out to be exactly 1 display pixel.
- Just to make things a bit more paranoid, I'd like to add that the innocent line of code
NSLog(@"%f", [[[[NSScreen mainScreen] deviceDescription] objectForKey:NSDeviceResolution] sizeValue].height); returns – surprise – 72.0: party like it's 1984.
OK, what have we got here? For each computer we have three kinds of resolutions: it's actual resolution, Safari's resolution and the resolution returned by an operating system that doesn't care. They are not related in any way.
Thus the point to make is that while David asks a question about 16px, he actually isn't – as what Safari does has nothing to do with px, or pt for that matter, seeing that Safari doesn't care about the screen's resolution. Thus I tried to anticipate the reason for this, which in my opinion breaks down to a simple "'cos the text is too small", not taking into account all the technical arguments given here and in the preceding discussion.
Yes, there is something to fix. But it's not the font-size. Rather it is Safari's and probably OS X's capability to take into account a screen's resolution. Internet Explorer seems to be the only browser to do that. This is the way not only to get it right but also to accomodate both people with higher and lower resolution screens. It's also future-proof not needing more changes as screen-resolutions continue to increase.
This is quite a long post now, so I won't discuss the further points in detail and mention them only instead.
- It is frequently mentioned that Apple "craft" both the hardware and the software. So why not take the benefit? Apple's software can easily know the screen resolution of anything you can buy at their store these days.
- Given that the monitor control panel in OS X has an option to "calibrate" the screen's colours – I am sure that having something similar for the screen's resolution would be more meaningful to most people
- Of course some thought would have to go into how to deal gracefully with multi-monitor setups, TVs etc.
- It looks like OS X isn't designed to cope with different resolutions. Many UI widgets seem to be made to be 'pixel perfect' and aren't made to scale. This is particularly sad, as the rest of the graphics system in OS X should improve with higher resolutions as it seems to work with fractional pixels as well.
- Perhaps the 'small fonts/large fonts' feature that I've seen in Windows turns out to be a good idea. It might just need better presentation as I have yet to see a Windows user who actually understood its meaning.
- As Matthew mentioned, the changing demographic of computer users needs to be taken into account. I'm not sure whether I would really want to recommend newer, higher-resolution, editions of the Powerbook to my dad. He might just find many things too small on its screen.
- Of course there are also short-term reality-inflicted things, such as the current state of 'web-design' to be taken into account. I can imagine that practical concerns as these may have led to the 'convenient' scaling factors used in Safari. Similarly we keep in mind that they caused the whole font-size dilemma in the first place as many people used font sizes on their pages that were 'just readable' on Windows but pixel-garbage everywhere else. The problem with different resolutions and ideas about what they are has been around for a while.
- Thinking about all that, I came to the conclusion that it's probably rude to prescribe a font size for my main text in CSS. Thus I removed that statement in the file. Did anyone find the text too small in the past? I don't like the ratio of the headings' sizes to the text size too much now, though. May have to increase that.
April 12, 2003, 15:36
“Did anyone find the text too small in the past?”
Actually, I did.
April 12, 2003, 16:52
I’ve taken the font-size prescription out of my “ugly but readable” style, we’ll see if anyone notices.
April 13, 2003, 15:00
Probably it’s best to let everyone have their preferred font size. Although it’s only for the text right now.
To make everything scale well, I’d have to adjust all other units to ‘em’ I guess. Doing that while maintainig good looks is probably a bit more tedious and may require extra testing. So I’m going to be slow on that.
April 13, 2003, 19:41
I was blown away when I realized (from reading the Aqua HIGs) that Aqua still measured everything in pixels, like System 6 did. Such a missed opportunity. It’s really sad that people with less-than-perfect eyesight are forced to use a lower, chunkier resolution — rather than being able to choose a larger, more detailed rendering at high resolution.
You cite Windows’ “Large Fonts” option as a solution, but sadly, it only solves a small amount of the problem. For example, at the cafe, we have one Win98 computer where the taskbar malfunctions (apparently irreparably) only at 800×600 resolution, so I’ve set it to use 1024×768 instead. To make it as readable as the other computers, however, I also had to change:
- the “Large Fonts” option
- the title bar font
- the menu font
- the icon font
- the message box font
- the scrollbar thickness
- Internet Explorer’s toolbar (from “Small icons” to “Large icons”)
- Internet Explorer’s font size (from “Medium” to “Larger”).
Even then, there is lots of UI stuck at small size, like tab labels, OpenOffice.org toolbar icons, and the @#$%! pixel-sized text at
Hotmail.
And “Large Fonts” only works semi-reliably at its recommended level of 120 dpi — even then, some dialog labels in Microsoft Office apps get chopped off. Any larger than that, and most applications stop displaying properly. (One notable exception is Mozilla: its UI labels, menus, and dialogs scale appropriately whatever dpi level you choose, though checkboxes and other bitmapped controls are rendered at the same small size.)
April 14, 2003, 9:05
Obviously I don’t know too much about Windows - having tried to keep me exposition to it to a minimum. I just saw it and thought it might be a good idea.
On the web browser level, of course all those pixelated web sites are at fault as well. Doesn’t Opera have a ‘zoom’ option that also enlarges graphics and buttons instead of increasing the resolution for fonts only? I think I saw it once and it does look appalling. But at least people with eyesight problems may be able to see everything.
At the end of the day people would probably need to use vector graphics everywhere to ensure real resolution independence. I don’t see that happening soon as firstly vector graphics are imo harder to create than pixel graphics, perticularly if they are to look neat (and rendering them takes more resources) and secondly they ofte render non-optimally at the small sizes required by today’s screen resolutions.
April 14, 2003, 12:23
Opera’s zoom function is annoying firstly because, most of the time, you only want to zoom in and out on the text and not the graphics. When Opera zooms the graphics as well, often this makes the page wider, so the end of each line of text disappears off the edge of the window, so the text ends up being harder to read rather than easier. Secondly, a large proportion of Web graphics look really ugly when scaled to a level which is approximately but not exactly 100 percent (even when nicely interpolated).
You could have separate zoom levels for text and graphics, but that would be too complicated for most people to understand. A smarter solution (one devised by Todd Fahrner, and yet to be implemented in any browser I’ve seen) is to have a single zoom level which applies to both text and graphics, except when the zoom level is between about 50 percent and about 200 percent; in that range, display graphics at 100 percent and only scale the text. (Todd wanted those thresholds themselves to be configurable, but even that probably would be too complicated.)
Getting vector graphics to look good at low resolutions requires hinting them for commonly used resolutions. Fonts are the most thoroughly practiced example, but the same applies to icons and Web graphics.
April 14, 2003, 18:11
I agree on you assessment of things being too complicated. I think that’s ‘too complicated’ not in the intellectual sense ? after all the consequences can easily be describer ? but more in the ‘can’t be bothered’ department. I think this is the reason for many pieces of software to be so hard/not-fun to use: Everything is described and can be done, thus the programmers did their job. But normally nobody really wants to make all those decisions or care about it.
The zooming method you describe sounds good: It should be both easy to implement and giving reasonably good results. I’m not sure how it would play with ‘standards compliance’, but it should definitely be a good compromise.
April 15, 2003, 2:24
