function jdb_page_navigation()
sPageSlug = blog
sPageTitle = easily amused
header:139:aPageArgs:page_title = easily amused
header:140:aPageArgs:section_title =
functions-johndberry:262:aPageArgs:page_title = easily amused
functions-johndberry:298:sPageTitle = easily amused
functions-johndberry:359:sPageTitle = easilyamused

easilyamused |

Archive for the category ‘design’

Structured writing for the web

Published

At the end of June, at the Ampersand conference in Brighton, Gerry Leonidas gave a shout-out to an early version of the prospectus for Scripta (“Typographic Think Tank”) in his talk. I had somehow missed this until Tim Brown mentioned it in an e-mail recently inquiring about Scripta. I can highly recommend Gerry’s talk, and not only because he quotes me (7:07–7:49 in the video). Although he starts out with a disclaimer that “this is a new talk” and he’s not sure how well it will hang together, in fact it’s extremely coherent; Gerry is both articulate and thoughtful about the wide range of questions (and, rarely, answers) involved in typography on the web.

Gerry used my “wish list” from “Unbound Pages” (in The Magazine last March) as a jumping-off point for his own ideas about the structure of documents and the tools that he wants to see available. He wants tools for writers, not just for designers, that will make it easy to create a well-structured digital document, one that will maintain its integrity when it gets moved from one format to another (as always happens today in electronic publishing). Gerry’s own wish list begins at 20:47 in the video, though you won’t want to skip the entertaining steps by which he gets there.

What he proposes is a way to separate the sequence of information from its relative importance and interrelatedness. “This is what I really want: I want someone to go out there and take Markdown, which I use constantly, and take it from something that clearly has been written to deal with streams of stuff with some bits thrown on the side … and allow me to have this extra intelligence in the content – while I’m writing it – that will tell me how important something is, what sequence it has with other things, and will then allow me to ditch quite a lot of this stuff that is happening there.” The “stuff” he wants to ditch is all the hand-crafted formatting and positioning that makes a digital document cumbersome and difficult to translate from one form to another.

The problem is, as Gerry admits, training people to write with structure in mind. (Every editorial designer who has tried to get writers to use paragraph and character styles will break out into a hollow laugh at this point.) What he’s advocating is tools that will make this easy to do, instead of something that only makes sense to experts. I think he was a little disappointed that nobody leapt up at the end of his talk to say, “We’ve already done that!” But perhaps he has planted the seed.

Hanging by a serif

Published

Recently I published a little booklet called Hanging by a serif: a few words about designing with words. This is the culmination of a project I’ve been working on, off and on, for more than a year: pulling a selection of statements about typography and design from my own writing and presenting them, one to a page, along with a simple decorative element. The hook – quite literally, in some cases – is that those visual elements are all enlarged details of serifs, taken from a wide variety of typefaces. (You’d be surprised how much alike the serifs look on a lot of otherwise distinctive typefaces, when you blow them up in size and cut off the rest of the letter.) I had fun with this, as you might imagine. The hardest part was forcing myself to edit or rewrite my own words, to make them more appropriate to this format and purpose. It was also difficult choosing the quotes, and picking the serifs, but that was the kind of task that you can only revel in: a richness of choice.

One early recipient of a digital version, Scott-Martin Kosofsky, unexpectedly suggested that I “may have invented a new genre, design maxims, making you a kind of typographic Rochefoucauld.” I certainly doubt that my little booklet will go through as many editions and revisions as La Rochefoucauld’s Maximes, but I’ll be happy if it finds a use in the hands of its readers.

For an early draft, which I wanted to take with me on a visit to San Francisco to show to Jack Stauffacher and others at one of his weekly Friday lunches, I had trouble getting the booklet to print properly as page spreads, so I just printed the pages individually and bundled them into a wrap-around folded cover, just to suggest how it might all work as a booklet. What that inadvertant format showed me, however, was that these pages could also work singly, as individual cards. The actual content of those pages has undergone a good bit of revision since that San Francisco trip, but this is the reason why I’m offering Hanging by a serif both as a saddle-stitched booklet and as a set of cards.

When I showed a version of the cards to Juliet Shen at one of our local typographers’ pub gatherings, her immediate thought was, “I could give each of my students one of these and have them do a project based on it.” I hadn’t thought of that; perhaps they have a future use as a teaching tool. (You be the judge.)

This is the “first iteration” of Hanging by a serif; I’m sure it will evolve and appear draped in other clothes. Right now, you can buy the booklet or the cards from the newly created Shop page on this website, and they will undoubtedly be available through other sellers eventually. I sold a few at TypeCon in the SOTA store, and I expect I’ll have at least a few with me at next month’s ATypI conference in Amsterdam. Or you can use PayPal to buy a copy right here, and have me send it to you directly. (If you’re interested in a larger quantity, just send me e-mail at john <at> johndberry <dot> com and let me know.)

iOS7 typography: too thin, too tight

Published

Everything about the new design of iOS that was previewed this week looked nifty, except for the typography. Okay, I’m not wild about the candy colors, but that’s just taste. Typography isn’t just about taste; it’s about functionality. On the screen, and for information design, Helvetica – whether Neue or not – is not functional; it just gives the flavor of functionality. The letterforms are too closed, too uniform; they’re not easy enough to distinguish at a glance. And a glance is exactly what we give to the screen of our phone.

At huge size, the Helvetica Neue Thin numbers look all right; but at any other size, they lack clarity. It’s too easy to mix up a 3 and a 6 and an 8 and a 0, at small sizes – not a problem you really want to have when you’re dealing with dates and coordinates and addresses and phone numbers.

Please, can we have a moratorium on very thin sans-serif type that’s pushed tightly together? Trying to squeeze more information into a small space is useless if the information isn’t clearly readable. The lighter the weight of a typeface, the more space it needs between letters, to be easy to read. And it needs even more space when the text is displayed against a dark or mottled background, or seen at an angle rather than straight on. All of which is inherent in the iOS7 design.

For that matter, I wonder whether, in the age of Apple’s Retina display, there’s any need to stick with sans-serif faces on the screen. For years, I’ve felt that an open humanist sans was the most functional style of typeface for reading onscreen; but perhaps that’s no longer true. Or at least not necessarily.

Everything that Jony Ive says about design in his iOS7 video is true. Unfortunately, in the typography of the visual interface, he hasn’t followed through. What we’ve seen is only a preview; the UI is still in development, and it could change for the better before it’s released. But I know how the process of software development goes, and I’m sure there’d be a huge resistance to any change at this point that affected how much text fits on the screen. It’s disappointing, because a fundamental rethinking of the typography is what’s needed.

Some examples:

Can you read this exchange easily? Not “can you make it out when you squint and peer closely,” but can you read it easily?

Messaging in iOS7

What’s on your calendar for June 10? (And what’s with that busy superior “th,” anyway? That’s 18th-century design, not 21st.) Can you read it when you see it at this angle?

iOS7 interface at an angle

Ironically, Apple’s marketing typeface is much more readable than its iOS text face. The callouts in this example are clearer than the information in the Calendar panel.

iOS7 Calendar with callouts

[Images at left: top, part of a screenshot of a message from Siri in iOS7; below, the same words in a few different of typefaces, with looser spacing.]

Addendum (July 8):

Apparently the latest beta of iOS7 allows switching to Neue Helvetica Regular instead of Light for non-Retina displays. Gizmodo has a nice demo of the effect. (Thanks for pointing this out, Aaron Meek.) Alas, it’s clear when you see the font switching back and forth that somebody at Apple doesn’t understand how to track lighter typefaces so they’re readable. The lines of lighter type should be at least as long as the lines of heavier type, not shorter. Squeezed again!

The Magazine & I

Published

There’s something curiously recursive about linking to a website to read an article I wrote for an app-based magazine. But happily, The Magazine has just expanded its subscription base from its iOS6 app to include web subscriptions; and even non-subscribers can access and read one full article each month. (Other links that month will just show previews: the first couple of paragraphs.) So you can go right now and take a look at “Unbound pages,” my article about the typography of reading onscreen, in the Mar 28 issue.

I questioned the initial limitation of The Magazine as an iOS-only app (indeed, one that requires iOS6, which lets out older iOS devices like my first-generation iPad). But what that limitation did was focus squarely on a specific audience: tech-savvy readers who are likely to be early adopters and who work or play in one of the creative fields (which tilt strongly toward Apple’s digital ecosystem). It also meant that the app itself could be clearly and simply designed.

While there’s a difference between how the app displays an issue on an iPhone and on an iPad, the basic typographic treatment is fixed; the only real change appears if you shift the orientation, which affects how long the lines of text are. (This is all directly related to what I was writing about.) The display of the articles on the website is similarly simple and limited, but by the nature of current web-design tools (again, directly related!) it’s less typographically sophisticated, less well adapted to the screen “page.” But you can subscribe to the web version even if you don’t own an iOS6 device; that expands the potential readership.

With the current update to The Magazine’s software, you can also link, as I’ve just done, to a single article that a non-subscriber can read in its entirety, along with previews of other articles in the issue. That “porous paywall” is a smart marketing move: it encourages dissemination of material from The Magazine without giving it all away. (And the terms of The Magazine’s contracts are that they’re only buying one month of exclusivity anyway; authors can do anything they want after that first month, including posting the article for free on their own website or broadcasting it to the entire world. This seems like a model that’s well adapted to the realities of current online publishing.)

Go ahead and subscribe. There’s a bunch of other good material in the new issue, and I expect that I’ll write for The Magazine again.

[Image: detail of one of the illustrations done for my article by Sara Pocock.]

Ernest Callenbach

Published

Ernest Callenbach died the other day, at the ripe old age of 83. (Doesn’t actually seem that ripe when I’ve got friends in their 90s, but it’s at least a respectable total.) Callenbach was the author of the seminal 1975 book Ecotopia, which certainly had an effect on my thinking and my experience of the ’70s.

Ecotopia wasn’t very good as a novel; I remember thinking at the time that it felt like an account by a college freshman of his discovery of a life wider and more exciting than the one he’d grown up in. (It reminded me of “encounter groups” that I experienced when I was a college freshman myself in the late ’60s.) But it carries you along, keeping you interested enough in the characters to enjoy the story, while mostly presenting the society of Ecotopia that he had envisioned and invented. That vision of a radically environmentally sustainable society was what got people excited in the later 1970s.

Not long after I moved to Seattle, I signed up for a class at the Experimental College, a sort of officially unofficial adjunct to the University of Washington, on the concepts of Ecotopia. In that class I met a lot of people who were involved in trying to create a sustainable counterculture and asking themselves serious questions about how to really live in a place in modern North America. It tied in with ideas that I’d been reading and thinking about through writers such as Wendell Berry and Gary Snyder, and with currents of thought that were rife in the Pacific Northwest at that time. The concept of “Ecotopia” was very satisfying: it was a country comprising Washington, Oregon, and Northern California that had supposedly seceded from the United States and set up an ecologically based society with very little communication with the rest of the US. The precept of the novel is that an American reporter is finally able to penetrate Ecotopia and make a journey of discovery there. The story is told as entries in his diary.

Ecotopia is a utopian novel; so is Ursula K. Le Guin’s The Dispossessed, which came out shortly before Ecotopia. Although they are miles apart in literary quality, I remember intending to write a comparative review of the two books, because they took different, perhaps complementary, approaches to creating a fictional utopia. Le Guin’s Annares was a world of scarcity; Ecotopia, by contrast, was a world of abundance (the rich economy and ecology of northern California and the Pacific Northwest). Comparing the utopias, if not the novels, would have been enlightening.

After taking that Experimental College class in Ecotopia, I was so moved by the energy and the excitement among such a bunch of creative people that I and two other students from the class decided to continue it by teaching it ourselves the next quarter; and when we had done that, a couple of our own students did the same, taking the class and its community to a third quarter. (I don’t think it went farther than that.) There was a ferment at that time in environmental and “alternative” lifestyles and ideas on the West Coast, and the connections made through that class fueled a lot of creative activity in Seattle and environs for several years to come. We certainly didn’t create any utopias, but the study formed some of our perspectives and assumptions about the land we lived in and how we intended to go forward in our lives. Much of it later fell by the wayside, but some of it has persisted.

I only met Ernest Callenbach once, when he came through Seattle and visited our class to see what he had wrought. He seemed an unassuming man, who had simply had some good ideas at the right time and succeeded in expressing them in a way that people responded to. Before he wrote Ecotopia, he was better known as a film critic and the editor of Film Quarterly magazine. I remember his telling us that what had led him to writing Ecotopia was living in Berkeley and simply asking himself questions about where the waste went to. When he followed its route (intellectually, I assume, not literally), he realized that he was discovering a whole way of looking at the world.

You might think that Ernest Callenbach and Ecotopia don’t have much to do with design, which is the ostensible subject of this blog. But in the larger sense that we live in a designed world and ought to get better at it, this is very much at the heart of design.

Unfortunate signage

Published

The street signs in the town of Alcoa, Tenn., which I found myself driving through a couple of weeks ago, have this unusual choice of typeface. It looks like Impact, though a bit straighter and narrower than even that impactful typeface. You can see what whoever chose this was thinking: keep it narrow but bold, something that will really stand out when seen from a car driving up to an intersection. The unfortunate part is that it’s too bold; it certainly draws your eye, but that doesn’t make it legible. The excessively fat strokes combined with the compressed shapes, and the very tight spacing and tiny counters, make it turn into a blob of black (or, in this case, white) against the background, so that it’s not in fact easy to read at all.

Oh well. Nice try.

Showing backbone

Published

The Print Regional Design Annual hove into sight the other day, joining the stack of recent graphic-design and typography magazines: Metropolis, Eye, Typo, and the new one, Codex. The Print annual was a particularly fat example, but then you’d expect it to be. What distinguishes all of these disparate magazines, however, besides interesting content, is their binding: every one of them has a flat spine.

What’s the point of this? To look at a set of issues on the shelf, after the fact? If a magazine contains enough pages, of course, you have no choice; it must be perfect-bound (the pages trimmed and glued into a spine), since saddle-stitching (folding the sheets and stapling in the middle) is only practical for a relatively thin publication. But it seems as though most magazines these days (not just graphic-design magazines) are bound so they have a flat spine, no matter how thin the issue itself may be. I even got an unsolicited men’s-clothing catalog last week, all of 68 pages, that was bound into a spine, for no apparent reason.

The problem with perfect-binding a magazine is that it won’t lie flat. Nor can you fold it open to read one page at a time, for convenience in a crowded space (or simply to keep the pages less floppy). The spine creates a gutter, which neither editorial designers nor designers of ads for those pages ever seem to take into consideration; on the inner edge, both images and text curve into the gutter and get lost. It’s possible to design with that in mind, but how often have you seen it done?

Print is a perfect example of the real advantage of a glued spine to the publisher of a graphic-design magazine: it makes it very easy to bind in inserts from paper companies who want to show off their wares to potential customers. This isn’t new; the very first issue of Print, in June 1940, included paper samples to accompany an article on the design of wallpaper, and subsequent issues had bound-in samples from printers and paper manufacturers. Today, Print and other popular design magazines like How are thick with this kind of insert. These stiff or thick or off-size pages may serve a function, as illustration or advertising, but they make it impossible for a reader to flip through the pages – one of the most common ways of reading or browsing any printed publication.

The roadblocks along the path through a magazine rarely come at logical stopping or starting points in the magazine’s content. Very few magazines these days maintain an “editorial well” that’s separate from the advertising, and converging trends in editorial and commercial design make it hard to tell the content from the ads. That’s hardly a new trend, but it’s reinforced by the random-seeming intrusions of stiff-papered inserts.

The current popularity of spines on magazines seems part of a dismissive approach that looks at the magazine (or a book, for that matter) as a physical object to be sold, without giving any thought to how that object will be used. There are exceptions – Eye, for instance, uses multiple paper stocks in each issue, but they have similar weight and flexibility; and the page design almost always takes the gutter into account, so despite being perfect-bound, Eye is pretty comfortable to open and read. So is Typo, although its binding is stiffer than Eye’s. But Typo is usually thin enough that it could dispense with the spine entirely, which would make it easier to hold and read.

Some magazines have content that demands immersive reading; others are almost entirely meant for casual browsing. Neither of these functions is well served by pages that are tightly bound into a hard spine.

[Images: two spreads from the Print Regional Design Annual 2011.]

Talking about fonts

Published

Now download my other Dot-font book

Four years ago, Mark Batty published a pair of books by me, Dot-font: talking about design and Dot-font: talking about fonts, which were intended to be the first of a series of small, handy books on typography and design. Last year, I made the first one (on design) available as a free download. Now, I’m posting the second book (on fonts) as well, also as a free download.

Please download the text of both books and enjoy them.

You can download the complete text of Dot-font: talking about fonts as a PDF, designed and formatted for onscreen reading; as a Word document; or as a text file. The illustrations that appear in the printed book are not part of these downloads; I don’t have rights to reproduce and distribute all of the images in digital form, so for the full visual effect you’ll have to buy a copy of the physical book (which of course I encourage you to do). Some of those images appeared online at Creativepro when the original columns were published, but there are quite a few original images that were created for the book: for example, the series of photos that Dave Farey made from scratch, to illustrate the process of cutting a letter by hand out of Rubylith in order to create a Letraset font in the 1960s.

This book, like the last, is published under a Creative Commons license. Please do not distribute it without that license information.

The Creativepro columns that seemed worth collecting into a book broke down naturally into three categories: design in general, typefaces or fonts, and typography or how type is used. So I’ve still got the material for a third book, Dot-font: talking about typography. Is there a demand? You tell me.

Download dot-font

Designing digital books

Published

At TypeCon in New Orleans last month, I spoke about “New problems in book design” – basically the question of how to apply good typography to the design of books that are meant to be read on a screen. Here’s a little of what I said:

“What does it mean to design a book, at a time when books take multiple forms?

“I have no answers; this is all about questions. As Nick [Sherman] said, we’re in a period that people will look back on and see as a seminal time. It is; we’re inventing this as we go along. And the reason I find it interesting is that I read books, and I’ve been designing books for twenty-five years. I’ve spent most of that time — starting out demonstrating that you could use digital typesetting and design tools to do typography every bit as good as what could be done in old metal systems. And now it’s about time to translate that onto the screen.

“One of the reasons it’s interesting now is that I think the tools are beginning to be there for us. And publishers are desperate for it.

[…]

“Basically, what we need is control over all the typographic aspects – but give up the idea of control to make a static page. We want that level of control – I want that level of control – over a dynamic page. So I can say, if somebody decides to change the type size: okay, the line length should stay the same. The number of columns would change – not just making the font larger and making the leading change, which is what happens today in a website when you do that (depending on whether the browser allows you to do that or just blows the whole page up). All those factors need to be controlled together. What we need is dynamic design, we need flexible design, we need intelligent design – intelligently flexible, intelligently dynamic – in order to create good design. And the reason for that, the purpose of that, is the readers: for us, the readers. You can’t design books well if you don’t read them, and that’s true for the screen as well as for paper.

“Every publisher I’ve talked to, every editor, even most of the writers I’ve talked to, is desperate for some kind of solution here. I know writers with backlists that they have the rights to but they don’t know what to do with; they just want to say, ‘Can I put it on a Kindle somehow?’ So the marketing and the sales of books are going to change too – dramatically. But I think that what we need to do is think globally about that, think about how to design, and sell, and market books, both in printed form – for those where that’s appropriate – and in digital form. And as much as possible, for practical reasons, design it so that you actually…so the book can grow out of one file, one set of files. It’s hard! But that’s what we need. Because otherwise, again, you’re back to doing several different versions of everything.

“So in the spirit of it all being questions, I’m concluding inconclusively, and I will throw it open to questions.”

Some of the best stuff, as you can imagine, came out in the questions.

Roger Black: “John, are you saying that we need to set, basically, an extension of HTML rules for typographical things like the relationship between line breaks and leading?”

Me: “Absolutely. How you go about it is a good question, and it’s something that I’m working on right now; but it’s important to have the capability, just as it’s important to have, in browsers and the systems that support them, support for OpenType features.

“But it’s the layout and spacing controls that are the most important part. It’s hard – but not impossible. CSS3 and HTML5 are beginning to add these capabilities. Obviously, in terms of browser constraints, not everybody is going to support that, but… It may be that you use HTML-based systems to still make applications; essentially the book could be an app, if you need control that you can’t have otherwise. I suspect that we’ll do it in both formats. It’s an open question.”

[Thanks for Jill Bell for sending me a copy of the video she shot from her phone, so I could find out what we actually said. The photos above are snapshots grabbed from that video.]

Regional powers

Published

I’ve been looking with interest at “CSS Regions,” Adobe’s entry into the arena of flexible page design on the web. This is clearly the sanguinary bleeding edge of onscreen design today – designing intelligent layouts that will behave differently (but coherently) under different circumstances, most notably on screens or in windows of different sizes and shapes.

Adobe Labs has released an experimental WebKit-based web browser, as a platform for showing off what CSS Regions can do. The demonstrations are mostly about shapes: they include multiple columns, arbitrarily shaped text blocks, text that flows from one text block to any other text block on the page, and a couple of other, more specific tricks. In the demos, text wraps neatly around images or around other text, in a highly flexible manner.

It’s good to see these problems being tackled. But there’s something missing. As an earlier Wedmonkey article about this technology put it, “when it comes to the flow of text around images, pull quotes and other block level elements, well, web typography falls apart.” CSS Regions is clearly aimed at enabling design with these “block level elements.” But that’s only macro-level typography; what about the typography of the text that’s doing all that wrapping? We need the same level of control over text typography on the web that we’ve got today on the printed page. And not just in an inflexible page created in InDesign and turned into a static PDF.

More tools, please.