Arnt Gulbrandsen
About meAbout this blog
2011-11-28

Baselines

The text we've all learned to read is arranged in lines: Horizontal baseline, regularly sized letters, regular line height, lines neither too narrow nor too wide.

Anyone who breaks those rules disturbs the mind's reading and distracts from the content. Minor violations cause minor disturbance.

Which is fine, I suppose. Ask any advertising agency. If you violate the right norm you can make the brain sit up and take notice of a message it would otherwise skip. Drink Coca-Cola. But it's not something a GUI program should do. GUI programs should form the thinnest possible barrier between user and data.

One of the NextStep and BeOS HCI manuals, I cannot remember which, had a fine collection of screenshots showing this in cruel clarity. I hastily fixed Qt's nasties when I saw those examples, and although much of what I fixed was broken again after I left Trolltech, at least some of it is again good now. Note how the text lines up in this dialog:

Neat.

Everything else is broken, though. Comments takes a nosedive, the Reset/Encrypt/Cancel alignment is not all one could wish for, and the presence of the far-right buttons causes odd line spacing in the TypeEncryption table.

The kword authors didn't actually want to use lots of space around the Revision line, it's just sloppy work on part of Qt's automatic layout algorithm and widgets.

The odd spacing does not carry meaning, it's not meant to be read, so there's no good reason for it to be there at all.

Again, there's some good baseline work. Page Set lines up with All Pages and Print range with Output Settings. But nothing else lines up with anything at all. The dialog is just a jumble.

The same dialog features some better work on another tab:

Notice how calm the Page Border and Mirror Pages boxes look. Those align perfectly. That calmness translates into better function: The brain isn't distracted by the small misalignments, so the data is clearly visible.

I'll finish off this little rant with a an attempt at making two columns:

Sunt autem quidam e nostris, qui haec subtilius velint tradere et negent satis esse, quid bonum sit aut quid malum, sensu iudicari, sed animo etiam ac ratione intellegi posse et voluptatem ipsam per se esse expetendam et dolorem ipsum per se esse fugiendum. Sunt autem quidam e nostris, qui haec subtilius velint tradere et negent satis esse, quid bonum sit aut quid malum, sensu iudicari, sed animo etiam ac ratione intellegi posse et voluptatem ipsam per se esse expetendam et dolorem ipsum per se esse fugiendum.

No web browser should misalign the lines in those two columns. It's the same font, the same text, the only difference is a single boldfaced word, and if the font renderer needs an extra half-pixel to render the boldness or underscore properly, then there's lots of whitespace it can use. There really is no need to shift the next line down.