easilyamused | John D. Berry’s blog

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.]

Categorized as book design, design, editorial design, events, onscreen design, publishing, tech, typography |

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.

Categorized as design, editorial design, onscreen design, publishing, tech, typography, web fonts |

In a completely self-referential bit of digital navel-gazing, I’ve used the little online toy Wordle to generate a “word cloud” from the text of this very page. Wordle takes whatever text you feed it – or the text from a webpage whose URL you give it – and turns it into a visual representation of how frequently the text repeats certain words. The more often the word is used, the larger it appears. Wordle has several controls for changing what the visual representation looks like (color, orientation, language, even whether to exclude or include certain kinds of words), but the end result is generated at random. If you run the same text through again, with the same set of parameters, the sizes of the words will stay the same but the word cloud they form will be different.

As you can imagine, Wordle is a wonderful time-suck. (It’s also hard to type; my fingers keep wanting to type “World” instead.) The word cloud at the left has no significance whatsoever; it just represents what I’ve written in recent blog posts right here (at least, before this post itself is added). But it’s recursive fun.

Categorized as information design, tech, writing & editing |

This has turned out to be the year of web fonts. I don’t just mean typefaces designed for use on the web; that’s been going on for at least a decade and a half, most notably with the spread of Verdana and Georgia throughout the online world. I mean that at last we’re getting a workable system for using a variety of typefaces on web pages – and being reasonably certain that everyone viewing those pages will see the same typefaces, not some substitute based on what happens to be available on their computer.

A year ago, this seemed impossible. There was a whole track of programming at the ATypI conference in Mexico City about web fonts, and lots of interest in the topic, but there seemed to be no common ground for agreement about the right way to move forward.

WOFF

In the past year, however, the key players came together to form a Web Fonts Working Group under the auspices of the W3C (World Wide Web Consortium), and after months of hard work and persuasion, they agreed on a new format for web fonts. It’s called WOFF (Web Open Font Format), and it’s well on its way to becoming a generally accepted standard. According to Erik van Blokland, one of the creators of the format, WOFF will be “the only (!) specification that W3C will recommend for use on the web.”

All of the newest versions of major browsers, either out now or out soon, support WOFF, including the recently-released beta version of Internet Explorer 9. (Mozilla Firefox was the first to implement WOFF support; Mozilla was one of the developers of the format.) Browsers may implement other formats as well, but WOFF is likely to be the only format that’s guaranteed to work across all “modern” browsers.

Properly speaking, WOFF isn’t a new font format; it’s a software wrapper around an existing TrueType or OpenType font. The WOFF wrapper includes “metadata” – information about the font – that font vendors can use to tell you who designed the typeface, who licensed it to you, and what the terms are for that license. This is just information; there’s no enforcement involved, no DRM, nothing to prevent someone who’s willing to go to a little trouble from unpacking the font inside the wrapper. The purpose of the metadata is to make it obvious to anyone who downloads the font that it’s a web font, intended for use while viewing a web page, not a “desktop” font that you can use in any file or application you want. This whole approach is promulgated on the assumption that most people, if it’s clear and easy for them to do the right thing, will, in fact…do the right thing.

Web-font services

The newest versions of all the major web browsers support WOFF, which makes it a universal format going forward. Looking backward, of course, is another story. What about older browsers that don’t have WOFF support built in? Lots of websites will be viewed in older versions of all of the major browsers. That’s where web-font services come in.

At the same time that vendors and manufacturers are coming out with sets of fonts intended for the web, an increasing number of web-font services have sprung up, each offering its own system for supplying those web fonts to designers and end users.

There are two parts to a web-font service: 1) making the fonts available to web designers so they can specify them in the designs of their web pages; and 2) enabling those fonts to be downloaded to users’ systems when they view those web pages.

The web-font service takes care of delivering the right fonts in the right formats to each version of each browser; the website host or designer makes an arrangement with the service, usually for a fairly nominal fee, and then uses the fonts available for that service in designing their web pages.

The list of web-font services is growing almost daily; so is the list of font foundries who are offering their fonts in web versions. There are many different ideas about the best way to do this, both technically and from a business standpoint. A web designer just has to pick one and give it a try. They’re all available right now.

There is variation in quality, of course. Typekit, for instance, which is perhaps the best known, offers fonts from a lot of different foundries; some of them are better engineered for onscreen use than others. Webtype.com, launched by Font Bureau, offers not only a web-font service but several families of carefully designed new fonts, with their roots in metal but their forms dictated by what works onscreen. Adobe recently launched their web-font library, a wide selection of font families from their larger font library, and already Adobe has upgraded and improved the rendering of some of those fonts. On the web, it’s very easy to update things, to iterate; there’s no final form. Now that the floodgates have opened, you can expect things to keep changing fast, and the quality to keep getting better at a rapid rate.

For users, the WOFF revolution is a very good argument for upgrading your browser, since only the newer versions of each browser will support this format. (You may get good results from some of the backward-compatible formats offered by some web-font services, but you will get better results – the type will be more readable – with an up-to-date browser.) If you’re a web designer, it’s time to start looking into WOFF.

[Image: an apt slogan taken from the homepage of webtype.com]

Categorized as editorial design, fonts, publishing, tech, web fonts |

I was interviewed last week, along with Simon Daniels, by “unsolicited pundit” Glenn Fleishman, who writes regularly for the “Babbage” blog on The Economist‘s website. The subject was type on the web – a huge subject that I’ve been trying to write my own blog post about without success. I guess it’s easier to have someone else asking the questions (and writing up the answers) than to put it all together yourself. I think Glenn plans to write more about the subject; this one article doesn’t come close to exhausting it, but it’s a good start.

Categorized as fonts, publishing, tech, typography, web fonts |

In a daring daylight raid, elements of the Microsoft Typography team carried out an action targeted to advancing the cause of macro-typography and raising the visibility of fonts in the most literal way, says our anonymous informant.

Since the Microsoft Typography team, along with the rest of Windows International, was moving to a new building on the Microsoft corporate campus over the weekend of December 12, it seemed only appropriate to make a visible statement about the importance and ubiquity of type in the visual environment. Through the use of six-inch-square pixels cut out of sticky-backed black vinyl (a technique used previously for an installation at the Design Commission during TypeCon Seattle), these large-scale representations of bitmap characters from the Verdana and Georgia type families appeared without warning on the walls of the new building. This was reportedly achieved without a single X-acto-based industrial accident.

Verdana and Georgia were originally commissioned by Microsoft for onscreen reading of text. The way they were designed was the opposite of the usual process of designing type for the screen. Instead of creating outlines and then hinting the outlines (giving them rules to follow when turning into bitmaps at small sizes), type designer Matthew Carter started by designing the bitmaps – the end result that he wanted to see at each size – and then worked with hinting wizard Tom Rickner to create outlines and hinting that would achieve those shapes. The letters of the wordlet “typo” on the wall of Building 9 are taken from the bitmaps of 10pt Verdana and Georgia (in a mix of styles) at 96dpi. (Can you identify which letters are from which font, and in which style?)

The first versions of Verdana and Georgia were released in 1996; they now represent an early stage in the development of digital type at Microsoft. What will it look like when the MST commandos attempt to represent grayscale hinting and ClearType subpixel rendering at wall-size scale?

Categorized as fonts, letters, tech, type designers |

Last weekend Eileen and I were in Toronto for the wedding of Cory Doctorow and Alice Taylor. It was my first time in Toronto since 1973, except for changing planes once or twice in the airport, and Eileen’s first visit ever. The hotel of choice for incoming guests was the Gladstone, once a notorious flophouse at the far edge of Queen Street West, now meticulously restored as a boutique hotel with each room decorated by a different artist. The neighborhood, known as West Queen West, seemed to be the funky artistic center of the city (or at least one of them) – the sort of place we would naturally gravitate to. It was a good setting for this confluence of digitally and geographically dispersed people, ideas, and creative energy.

This was a gala affair, though not exactly…um, traditional. The ceremony itself – admirably brief and amusing – was conducted by a magician, and there was a sort of steampunk Halloween theme to the whole celebration. Jack-o-lanterns were carved on the day before, and the event took place in a haunted house – well, actually in a great Victorian pile known as Casa Loma, the extravagant folly of a wealthy Toronto capitalist who went broke getting his mansion built. Costumes were the order of the day; Cory appeared at the Mad Hatter, and Alice as, well, Alice. The star of the show, of course, was their eight-month-old daughter, Poesy Emmeline Fibonacci Nautilus Taylor Doctorow (“Poe”).

Toronto had its share of type and design; in fact, the Queen West neighborhood is officially designated the “Art + Design District,” something I’ve never seen in any other city. And who could resist a bookstore named “Type”? (The sign “pre-loved” is actually the name of the shop nextdoor.) That’s where I bought Robert Bringhurst’s new book about Canadian book design, The Surface of Meaning.

[Photos: left, Alice Taylor (top), Cory Doctorow holding Poesy (middle), brain pumpkin as table centerpiece (bottom); above, signage on the street (top) and in the subway (bottom).]

Categorized as ambient letters, design, events, signage, tech |

What was once a recondite literary movement in the science-fiction field has blossomed into a popular-culture phenomenon, and as far as I can see it’s done so overnight. When the New York Times starts writing about “steampunk,” you know it’s attracting wider attention, and has probably already passed its peak. Written steampunk took a cyberpunk sensibility and injected it into a substrate of Victorian technology and sartorial style; it married our fascination with the brass-gears science epitomized by the Time Traveler’s machine in the 1960 movie The Time Machine with a noir-ish outsider take on 19th-century society. The extension of this into popular culture has been fun, though often silly. Some of the “steampunk” clothing appearing now just looks like retreads from The Wild, Wild West; and the application of clockwork skins to digital electronics is basically a matter of decoration.

This seems to have gotten up the nose of someone at Design Observer (that design website that I always intend to keep up with, but never do). Randy Nakamura wrote a screed about the humbug of steampunk; I noticed it when Bruce Sterling, who has some implication in the development of steampunk, quoted from it (“Design Observer Hates Steampunk”) and exclaimed, “Man, this is priceless. The backlash has begun!”

But my favorite bit, which makes this worth writing about, is a momentary fantasy that Bruce spun between quotes and comments: “Maybe Randy Nakamura would like ‘steampunk’ better if it was called ‘Eamespunk’ and involved making computers out of bent plywood.”

Categorized as books, culture, society, tech |

We’ve all been reading for quite a while about the future of advertising, where ads would be targeted directly at each individual consumer, based on information collected about our buying habits, our viewing habits, our listening habits, maybe even our philosophical habits. But I hadn’t realized that it was already happening.

Yesterday I dropped by a local website that I check periodically, Crosscut, a Seattle-based news and comment site with some smart thinking and good writing. As I browsed down the home page, I came across an ad from Amazon – and stopped cold. The four books being advertised were all design and printing books. All of them. How likely is that? Would the average reader have a yen for books about graphic design? No, but I would; in fact, my recent browsing habits on Amazon would probably show a lot of books about typography and related subjects. Was this ad tailored specifically to me?

The answer is yes. If you click on the ad’s link to “Privacy Information,” you find that, indeed, Amazon is using their records of what you’ve looked at on their site, and choosing which books to push in their ad based on that. Which means that each Amazon ad on Crosscut (or any other website that hosts such an ad) varies its content depending on who’s looking at it, or more precisely whose computer you’re using to look at it. The future is here.

If you refresh the web page, the Amazon ad changes its contents – but they’re still based on your own recent patterns at Amazon’s own site. The contents even seem to vary by web browser; I was using Safari when I discovered this, but logging on to Crosscut from Firefox brought up an Amazon ad with no obvious relationship to me. (Something to do with how my preferences are set in the two browsers? Probably.)

I’m never surprised by invasions of info-privacy; I’ve read enough science fiction to have been expecting this for a long time. But the potential for embarrassment, at the very least, is large. You log on from somebody else’s computer, and when you get to the Amazon ad, you see a suspicious number of books about…typography! “You, uh, look at a lot of, uh, ‘type,’ don’t you?” you ask your friend. His guilty secret is out, for all the world to see.

Update March 10:

Today’s New York Times has an article on this very subject – how web ads are being targeted directly to individuals – but it conspicuously fails to mention Amazon. A surprising omission.

Categorized as advertising, culture, information design, tech |