Fontified Whine

This is going to be another long-winded, nerdy entry, but it’s perhaps a dash more ranty than the last one. I believe that by examining these two entries with modern instrumentation, it may be possible to discern the atomic value of entertainment!

I have a user here in my workplace who just got a new, extra-big flatscreen, and wanted some help with setting it up so that it’s usable. The screen’s native resolution is 1280×1024; he’d been running at 800×600, and his fonts didn’t look quite right because of it. So his request was, “I want my fonts to have nice crisp edges, and I want them to be big enough that I can read them easily with these old eyes.” Simple?

Well, not so much.


Some terminology:

A display’s “resolution” is the number of pixels tall and wide that it is displaying at any given time. CRTs can change the number of pixels that are packed into a certain size of display, so the number of pixel-sized slots on your screen is always the same as the number of colored blocks your computer wants to put into them. Not so, LCDs – An LCD has a fixed native resolution, so regardless of the number of pixels it wants to display, it’s going to to display that using the fixed number of pixels the monitor will permit. So the the colors around what should be crisp transitions from white to black, for example, will look like they’re bleeding a bit of grey between them.

A “point” is a typographical measurement that’s meant a few things to a few different people over the years, but if you’re working with computers href="http://en.wikipedia.org/wiki/Point_%28typography%29">it means 1/72nd of an inch, so a 14pt font is roughly two-tenths of an inch tall, if you’re using a Mac. On a Windows machine the standard isn’t 72 dots per inch, it’s 96 dots per inch, for reasons that are best not talked about. A 14-point Windows font isn’t actually 14 on-paper points, it’s about three quarters that. A pixel is the aforementioned little block on your screen, the atomic element of computer-displayed images – pixels can have arbitrary dimension, are generally square and always a single color. The thinnest line you can display on your screen is one pixel wide.

If like my colleague you are working in Windows, some fonts are measured in pixels, others are measured in points. There are many other units of typographic measurement out there, and the primary benefit of learning them is the fast and easy identification of pedants and conversations you’d rather avoid.

This is where the problems start.

When you are looking at a document in Word, the document itself displays a font measured relative to the width of the displayed page of text, in points. href="http://en.wikipedia.org/wiki/WYSIWYG">WYSIWYG, this is called, meaning What You See Is What You Get, terminology that mattered quite a bit twenty years ago. In Word, you can control the size of the font in the document by changing its point size, which will affect its size on the printed page, and with the Zoom option, which will affect the that document’s presentation on the screen. Neither of these options will change the size of text in the menu bars or option screens.

If on the other hand you are looking at a document in Internet Explorer, you have two ways to change the size of the displayed fonts. One is the Text Size option under the View menu, where you have the options of changing the default size of the displayed font. Your options are “largest”, “larger”, “medium”, “smaller” and
“smallest”. More fine-grained control is impossible, and changing it away from “medium” is very likely to break your web-browsing experience in surprising ways. You do have the option of ignoring the font sizes specified on the web page itself, but that will make about two-thirds of the Web look like somebody sneezed a faceful of Alpha-bits all over your screen.

Changing your menu-bar fonts has a similar disconnect; in your display settings, you have the option of “normal”, “large” and “very large”, but the screen real-estate given over to what’s typed in those fonts won’t always change so once you’ve made your fonts big enough to read, you won’t be able to see all the text. Trying to fix that? Good luck. It’s tedious and finicky and a huge pain in the ass; Windows doesn’t automatically rearrange icons, despite the “auto arrange icons” setting, when you change how they should be laid out. You’ve got to uncheck, then recheck that option to see the results, and adjusting the fonts without adjusting the icon spacing, for example, means they’ll just run over each other anyway, so you’ve got to go back and fix that, ad nauseum.

So why would anyone do any of that? The answer is “Outlook”. Outlook uses the same widgets to display HTML mail that Internet Explorer uses to display anything else, so if you want to be able to read your mail in the fonts of your choosing, rather than the six-point microfonts that Bob down the hall thinks are cool, you need to go into your IE accessibility settings and tell it to ignore the font information specified on web pages and use your own. Read that again, because it’s super-awesome: if you want your mail to be reliably readable in Outlook, you need to deliberately break the way web pages are displayed in Internet Explorer. And that’s before we even get the message-list windows set up; they have their own set of configuration options hidden away in an obscure Outlook submenu.

And it only gets better.

Setting your screen’s resolution to anything higher than 800×600 means that in addition to your fonts being too small, big chunks of the internet are going to be a blank, monochromatic space. This is not because of a problem with your screen, or your computer, or anything except for the apparent fact that web-designers
are idiots. Setting your screen resolution to anything higher than 800×600 means that web pages generally have great big empty margins. At 1400×1050, my laptop’s native resolution, the Internet is about half-empty. This is not accidental; web designers have, apparently en-masse, decided that the entire world
runs at 800×600, and that they want per-pixel control of how their webpages display. If you’ve got a big screen, head over to the CSS Zen Garden and click around for a bit if you want to see it in all its meathead glory. Here’s a screenshot of one of their pages as rendered on my laptop. by no means the sole or most onerous example.

So, to sum up, on modern computer screens:

  • Leaving your screen’s resolution set to 800×600 looks like
    crap, but

  • setting it to the native resolution might make your
    fonts too small to read without your nose five inches from the
    screen, and

  • the only ways of fixing that either break something
    else, break lots of something-elses, will drive you insane, or all
    three, and finally,

  • the fact that an awful lot of web designers are a bunch of goddamned monkeys is not excused by the fact that a bunch of OS UI designers are a bunch of goddamned monkeys, too.
  • I strongly suspect that all of this stuff is related to the fact that virtually all accessibility software is a sick joke.

But you people don’t come to me just for the rants, no! I provide straightforward solutions to your practical problems, and that’s why you love me so. So what to do? The answer, it turns out, is ““suck it up”. Either you can easily read tiny little fonts and go with native resolution, or you can crawl into that sewer on your hands and knees and drown. Or you just leave it at 800×600, and if you don’t like it you can choke on it. Use Firefox for
your web-browsing, because it lets you (control-plus, control-minus)
quickly and easily change the font sizes. If Outlook is mandated
at the office, at least you can close out IE and never look back.
Desktop configuration in every version of Windows up to and including
XP/Pro doesn’t work right, and never will. The Web doesn’t look right
in IE, and never will. Most of the web will look like crap no matter
what you do, because self-satisified, asshat web designers are so
attached to their pixel-perfect layouts that basic, trivial stuff
that worked right ten years ago may never work properly again.

Truly, we live the future!

11 Comments

  1. Posted October 23, 2005 at 1:54 pm | Permalink

    Ctrl-ScrollWheel will have the same effect in IE and OutHouse as Ctrl-+/- in Fireyfox.

    But CSS authors have a tendency to disable that feature, so it only works in webpages that were written in vi by a bearded old man too arthritic to grip a mouse.

  2. Mike Bruce
    Posted October 23, 2005 at 4:02 pm | Permalink

    Are you talking about changing the font size in the Appearance tab, or changing the DPI setting in Settings/Advanced?

    I’ve found changing the DPI setting to be pretty reliable. My dad, for example, is running at 1280×1024 on a 17 inch monitor, and the fonts are not absurdly tiny (although, frankly, there isn’t much to be done about insane web design people that set the font size to 8pt; if you make that big enough to read comfortably, all of your more standard 10-12pt fonts are comically huge), and practically nothing seems broken.

    Blank space: blame CSS for pretty much sucking. Doing multi-column layouts is horrifying, and I think everybody just gave up at a certain point. It’s also the case that columns of text shouldn’t exceed a certain width, for ease of reading. But that should ideally be done in ems, of course.

    I rarely notice, because I don’t run my browser (or anything else) full screen.

  3. Posted October 23, 2005 at 4:28 pm | Permalink

    There’s a very easy fix for Outlook that doesn’t involve changing anything in IE’s settings. I simply tell it to display all mail as plain text. it whines when you initially set that, letting you know that you’ll no longer be forced to suffer what every tasteless asshole on the planet thinks is awesome graphic art, like black text on a black background with black images, but hey, at least you’ll be able to read your mail.

  4. Jason
    Posted October 23, 2005 at 5:34 pm | Permalink

    I have to agree with Mike Bruce. As a Web person my choices pretty much amount to “make the page unreadably wide and look like shit” and “make the page a fixed width and have unsightly margins”. I hear that one of these days the W3C will apply some pixie dust to the Web and let me do columns that aren’t a pain to code, but I’ll believe it when I see it. Until then, the hideous margins are the least-worst choice to me.

    What would be nice would be to say something like <div style=”min-col-width: 350px; max-col-width: 600px;”> and just let the browser Figure It Out. It’d also be nice to land a human on Mars in my lifetime. I’m thinking Mars will happen first.

  5. Mike Bruce
    Posted October 23, 2005 at 5:47 pm | Permalink

    I have to agree with Mike Bruce

    My six favorite words!

    CSS3 (or, in any case, beta versions of Firefox) has dynamic multi-column support, but only for flowing stuff, like in a newspaper article.

    CSS2 (7 years old, and still not 100% supported!) actually has min/max height and width. The real problem is positioning multiple divs next to each other in a sane way.

  6. Mike Hoye
    Posted October 23, 2005 at 8:56 pm | Permalink

    Jason: thing is, “unreadably wide” is something that the user can fix with a click. Unsightly margins, not so much. Like font sizes, like everything else I’m talking about here, the right answer is “let the user choose” and he wrong answer is “It should look like the mockup I put together in Photoshop no matter what”. That’s crazy talk, and the fact that you’re going that route at all suggests to me that you’ll be doing it even when there are strong alternatives available.

  7. Posted October 24, 2005 at 6:06 pm | Permalink

    First of all, your talk about how Macs have this gloriously correct 72 dpi thing is so much hooey. DPI on a monitor is a function of the number of pixels you have and the size of your display. You’ll note that Apple displays do not have a consistent size to pixel ratio, which is what you’d need for the DPI setting to actually mean something.

    Secondly: It is fucking HARD to make a liquid layout that handles a wide range of sizes. Even if you do it right, weird shit happens when the screen gets too small for the layout; that doesn’t happen if you just fix it at 800×600 and go.

    Third: You can totally do the max-width and min-width thing. In Firefox. I do it on my blog, unless I’m misunderstanding something.

    Fourth: Blame Windows app developers for a bunch of this crap, as they don’t test with different text sizes, so hard-code sizes in their buttons and what-not. I think Indigo (sorry: Windows Presentation Foundation) is supposed to be the magical fix-all.

  8. janice
    Posted October 25, 2005 at 7:19 am | Permalink

    The web page fix is to use em sizing on fonts and borders, etc. If the user chooses to increase the size (whichever way their browser of choice allows) proportions are preserved.

    Maybe MS’s Word folk could be harassed into using em, too? If enough people ranted at them… maybe?

  9. Mike Hoye
    Posted October 25, 2005 at 1:17 pm | Permalink

    I believe that modern science has successfully proven that “it is hard” is an excuse, not strictly a reason. I don’t claim that Macs have some miraculous effect on the measurement of dots per inch, just that their default setting is in line with what everyone in the world thinks it should be, at least, and Windows significantly different.

    Wierd shit happening because of different screen sizes? You don’t say! Try adjusting your screen settings down to 640×480 in Windows. Then try adjusting them back! You can’t because the display settings dialog is more than 500 pixels tall, and the buttons run off the bottom of the screen. Sure, you can, if you know how, find your way ’round with tab and guess at it, but if you’re the sort of person who needs low-res screens? You’re just generally screwed.

    Which is, of course, the thrust of my argument here. If you’re not happy with the default settings, there are a variety of forces collaborating to keep any thing else from ever working properly.

  10. Mike Richters
    Posted October 26, 2005 at 12:15 pm | Permalink

    Too bad Adblock isn’t able to block stylesheets…

  11. Mike Hoye
    Posted October 26, 2005 at 12:18 pm | Permalink

    Hey, there is that “format documents using my style sheet” option in IE. I’m sure that in somebody’s mind somewhere that has a hope in hell of working properly.