Loss of roots in design

[There is also a PDF (860 Kb) of this article, as it originally appeared in the July 2004 issue of DESIGN IN-FLIGHT. The version below is slightly expanded.]

I learnt what a ‘widow’ was early on in my dealings with blocks of text. So it came as some surprise to me, after a few years on the job and every single page of the Letraset catalogue committed to memory, that this widow nursed an accompanying ‘orphan’. It took an old-school sub-editor with an obsolete but beautiful Monotype typescale in his top pocket to point out to me that we really should also be getting rid of orphans and not just widows, that the ends of sentences left at the bottoms of columns were just as ugly as the ends of sentences left at the top of columns, just less obviously so. [See note on orphans and widows.]

He had a point. I’d been blind to it.

A few years later I decided to get an old letterpress printing machine and trays of lead type. Suddenly I discovered that the quaint terminology of typography that had lost its meaning found its meaning afresh. Leading was made of lead, spaces between words came in three varieties: thin, mid, or thick. More variety was available by combining them. Then there were lead ens, ems, double ems, triple ems.

It was through not tightening my ‘26 soldiers of lead’ tight enough in the forme before printing one time that a thick found its way to ‘type height’ and so took ink from the rollers, which explained to me in a flash why in some old letterpress books you sometimes saw an inexplicable black rectangle between words.

I had no idea. So that’s what it was.

I learnt more about typography through letterpress printing than I ever realised there was to know. Despite the mathematical perfection of computers, the old way of doing it seemed vastly more precise. Hand-justification had many insights to offer. There was a certain Zen to it, I learnt I could hand-justify more attractively by reducing space in a line of text rather than by increasing it, reducing it to such an extent the words were almost touching, yet varying the space between words according to their terminal and initial letterforms.

For instance, rather than a thin, mid, or thick, a homemade sliver of three-sheet card cut to type size would make a perfect space between two rounded letters, such as a word ending in ‘o’ and one beginning with ‘c’. The concept of ‘optical space’. You had time to devote to individual letters in a block of type.

I took this learning into the desktop-publishing (DTP) world, where many aesthetic compromises had taken hold and become normal practice. Nonetheless, with typographical ligatures in ‘expert’ and then Opentype Pro fonts (ff, fi, fl, ffi, ffl) and kerning/tracking you could at least spend a little time on refinement here and there, particularly if you turned off automatic hyphenation. But in general art departments had little time for this kind of fiddling and the routine of emptying text into columns and forgetting about it inevitably soon took over.

On my own DTP projects at home, however, I would spend hours on kerning individual letter combinations in body text that irked me as I came across them, sometimes over a 200-page book regretting that I’d started. The closer you looked, the more imperfections you’d see. Only the pride of a job well-done that comes from hand-setting type in lead would ever make a person consider kerning individual words in body text. The irony is that lead body type never needed kerning (I sometimes kerned at display size – a job done with a hacksaw).

It struck me that as technology advanced it became ever harder to reach the aesthetic standards previously easily attainable. And new media brought a new set of problems so it took just as much time to do it worse. Not that I would want to go back to my Imperial 55 typewriter and abandon the word-processor.

Most daily newspapers today are published in far fewer editions than when they were printed letterpress. And to my taste modern newspapers seem blandly designed compared with those of the 30s and 40s.

To find typographical ligatures being used in a recently published book is the sign of a good designer at work, yet in letterpress books it was the norm.

And then came the web. And the mass amateurization of aesthetic skill.

These days many programmers fancy themselves web designers and the terminology of typography is disappearing from what will one day be the primary medium of publication. Web designers in general don’t seem to spend a great deal of time on even typographical basics. The minority who know about typography usually learnt it elsewhere and brought their knowledge with them when they came to the web. Most of the 20-something generation of web designers have probably bypassed print design altogether, finding it irrelevant rather than an essential tradition.

People without a design background start to see that they can produce designs almost as good as the designs of those they consider to be true professionals. It’s not hard when all you’re doing is copying a few types of layout and altering them slightly.

The next generation of web designers will probably be completely cut off from the roots of their art and only a few will venture to study it. CSS is impressive for its positioning precision, yet few web designers seem to have natural aesthetic flair for the juxtapositional relationships between page elements and harmonies between colours. I’d venture to suggest they haven’t had enough time to develop their talent aesthetically, being too bound up in the technology of it. It takes a long while for design aesthetics to settle in your mind.

Most web designers are too busy learning PHP, Javascript, and indeed are expected to apply themselves more to backend solutions than to the sheer look of the site. To declare oneself purely a designer these days is almost like an admission of not being up to the real job of managing servers and coding up the database. To say that primarily you’re interested in various shades of red and how they go together, and pastel colour schemes versus bold primary colours, size of type and column width, is asking for trouble. Those who commission the jobs don’t want people with highly refined aesthetic design skills any more, they want a techie jack-of-all-trades.

Being a designer and only a designer you start to feel like a know-nothing charlatan hawking an insufficient portfolio, eventually you get the message, you retire, write books, and design the occasional website for friends to keep your hand in. Your designs are much admired and people wonder why you gave up professionally something you clearly have a gift for.

Frequently I follow back links to sites of ‘web designers’ who have commented in design blogs. Nine times out of ten the design of their site is mediocre and they’re writing about programming or iPods. This is web design today, the aesthetic passion and cultured tastes of yesteryear have flown out the window to be replaced by an ever more burdensome weight of technological know-how that must be absorbed. I see this clearly coming from a print design background, but I can understand that those who started off on the web don’t want to see a problem when the solution involves looking beyond the web.

*

Orphans and widows

Authorities disagree on the definition of a ‘widow’ and an ‘orphan’, but the way I was taught to look at it involved the aide-mémoire that a widow ‘goes on alone’ and an orphan ‘gets left behind’, which could be used to settle a few arguments among typography buffs. The word ‘orphan’ mainly refers to the first line of a paragraph left at the bottom of a column (hence ‘left behind’), but has also been used to describe a word or several words ending a paragraph at the bottom of a column. It is better to break a column mid-paragraph or fill out a short ending line. Some purists regard any line ending a paragraph with just a single word as an orphan and strive to add superfluous words to fill it out. A widow is the final line of a paragraph appearing at the top of a column. [Back]

 

Type tips for the web

Indentation and eliminating paragraph line spaces

For book-like type, close up paragraphs by setting the margin on the p tag to zero and indent:

p {
font-size: 11px;
line-height: 21px;
margin: 0;
padding: 0;
text-indent: 1.3em;
}

A first paragraph and one following a sub-heading or blockquote shouldn’t be indented, so create a ‘noindent’ class:

p.noindent {
text-indent: 0;
}

I use ems, a relative unit, for indentation. An indentation of 1em is dependent on the type size, for 12px type the indent is 12px, 14px for 14px type. An indentation of 1.3em for 11px type is an indentation of 1.3×11=14.3px. But because you can only deal with whole pixels on the screen (you can’t have half a pixel), this means the indentation is actually 14px. By having the indentation in ems in the stylesheet this means you can change the type size without having to worry about the indentation, which is automatically changed relative to your new type size.

 

Print stylesheets

With a print stylesheet you have another chance to design your page. Type in sans on the web can be set to serif on paper and superfluous navigation eliminated. Type and leading should be set in points rather than pixels. Book Antiqua, the Microsoft copy of Palatino, is a widely distributed but little-used serif font that is much more attractive when printed than Times New Roman (try it at 11/20pt). Note that the serif font Georgia is not as widely distributed as many web designers seem to think. It is possible to set a printer page-break with page-break-before: always (best used sparingly, for things like getting a poetry collection to print one per page). Style a tag on the actual page where you want the break:

<h3 style="page-break-before: always;">Title of poem</h3>

I also use this technique on my Chinese Zhouyi to ensure that hexagrams are printed two per page and are not split.

 

text-transform: uppercase

Though it has some uses, this CSS instruction doesn’t appear to me to have been thoroughly thought through, since text required in capitals with the stylesheet present is lowercase with the stylesheet withheld. People should type caps if they want caps. Sometimes the first few words of an article are set in caps – a typographical idea borrowed from newspapers – this is about the only use I can see for text-transform: uppercase, since it doesn’t matter that these words are not in caps with the stylesheet removed. [UPDATE, DECEMBER 2011: I have since found a use for text-transform: capitalize in presenting a different stylesheet for iPhones, so now and again this can be a useful tool to have in the box after all.]

 

Dashes

Use an en dash with a space either side (character entity &#8211;). The em dash is too 1950s for the web and modern print. But if you do use an em dash, perhaps to mimic an old work, strictly it should have no spaces either side. An en dash without space should always be used in a date range, not a hyphen. For example: 1977–80. Comparison:

An en dash is, traditionally, the width of the letter N, while an em dash is the width of the letter M. Of course it depends on how the typographer has designed the particular font.

 

Ellipsis

If you want three dots … use the character entity &#8230 for the ellipsis.

 

Justified text

Avoid this on the web. The text may look neater having both edges squared off, but you’ll get bad spacing in the text. The narrower the column, the worse it will be. When typesetting books you can control the hyphenation to overcome spacing problems, on the web you can’t. Readability suffers.

 

Pixel setting or relative-size setting?

Because Internet Explorer cannot resize pixel-set type, relative sizing has become fashionable and a high moral ground taken on grounds of ‘accessibility’. However, Verdana, Georgia, and other fonts only look good at certain specific pixel sizes, which cannot be guaranteed with relative setting. I’d say if you want to use pixels, use them. Accessibility shouldn’t be tied to one limited browser, even if it is the most used at present. With the Opera browser, you can magnify the whole screen just by hitting the + button on the numeric keypad, whether the text is specified in pixels or not. This is the best solution for readability since it retains the relative proportions of the page, whereas Firefox, though it can resize pixel-set type, doesn't similarly widen a fixed-width column to take account of the enlargement, which can lead to a problems at large sizes (though if your eyesight is that poor you can of course view the page without the stylesheet). The bottom line on the accessibility issue is: why are those with poor eyesight using a browser that cannot resize pixel-set type? Time to stop blaming the designer and address instead the ignorance of the user. [UPDATE, DECEMBER 2011: Although this site is designed with type set in pixels, I now prefer to set in ems.]

Copyright © 2003–2023 Biroco