At the end of his talk on “Dynamic Web Typography” at Smashing Conference in San Francisco a couple of months ago, Jason Pamental added something unexpected: a demonstration of a paginated digital book as website. This is what Jason and I have been working on for the past year or so (with Jason doing all the heavy lifting and me doing the airy theorizing); and which Jason has now got into demonstrable form. One attendee came up to him after his talk and described what Jason had done as a Steve Jobs moment: the “one more thing” that upends everybody’s assumptions and redefines the terms of an entire endeavor.

The relevant bit begins at around 38:00 in this video of Jason’s talk. SmashingConf is aimed at web developers, so it’s heavy on live code; but it’s easy for non-coders to see the result. Combine this responsive, page-based approach with variable fonts, and you’ve got the future of digital books.

June 26, 2019

As I’ve noted on my personal blog, the newest entry to the excellent book series A Book Apart is Tim Brown’s Flexible typesetting, which is about exactly what it says it is. It’s a clear indication of how much progress has been made that such a book could be published now, and that it could include so much up-to-date and useful information about doing truly responsive typographic design. Brown also notes all the areas where we haven’t gotten there yet. It is still very much a work in progress, but the playing field seems to change on an almost weekly basis. We can do a lot more now that we could when I reviewed one of the first of the Book Apart volumes, Ethan Marcotte’s Flexible, adaptive, responsive; can that really be seven years ago?

What Tim Brown is writing about is exactly what I’ve been talking about all along. We’re getting near the point where the design of ebooks and the design of websites overlap, and we can incorporate the best parts of both to work together and make reading better.

July 24, 2018

[First of a series of short snapshots of Where We Are, and where we might be going, by people intimately involved in the development of better typography onscreen.]

by Jason Pamental

Since their announcement in Warsaw at ATypI in 2016, I’ve been a huge believer that variable fonts will be a bigger deal for designing on the web (and digital platforms in general) than anything since responsive web design itself. One year on, and I stand firmly by that belief.

For centuries, typography has shaped the way we ‘hear’ what we read. On the web that desire to ‘tune the message’ has been at the crux of a conflict between design, user experience, and performance. As designer, we want a broad vocal range, but have to balance that with the words actually showing up – and how much data transfer is required for them to do so. Since our current ‘normal’ requires a different file download for every width, weight, and variant – that tension is increasingly high.

No more.

Variable fonts are a format that can include every width, weight, slant, and myriad other permutations of a typeface, in a single font file. Dynamic range, performance, better experience: solved. But that’s just a start. We can tailor the experience to screen size, language, even ambient light—by modulating width of characters based on viewport, or increasing the grade or contrast of the letters based on the environment in which they are viewed. It challenges our notion of what typography is, and lets us push beyond anything before possible. Pretty heady stuff.

October 10, 2017

This site has been dormant for quite a while, but the development of new tools for onscreen reading has not. I’ve talked to a lot of people who are working on aspects of this problem (such as Jason Pamental’s presentation at TypeCon in Boston a couple of weeks ago about “Variable Fonts & The Future of Web Design,” or his follow-up talk on “Intentional Typography in Dynamic Systems” at ATypI in Montréal), and in the next few weeks I’ll be asking some of them to give me a brief snapshot of where they think we are today. It’s about time to turn this site back into the center for ideas and information about publishing onscreen that it was meant to be.

September 25, 2017

There’s been a lot of activity in responsive typography and adaptive web design since I launched Scripta four years ago. Yet the fundamental questions remain: how to create sophisticated, capable tools for designing text to be read onscreen, and how to use the new techniques that are being developed daily.

What does “mise-en-page” (layout) mean in a responsive publishing environment? In print – whether a book, a newspaper, a magazine, a brochure, or a poster – the layout is based on the size and dimensions of the page. Onscreen, there is no fixed page. The dimensions and proportions of your screen are fixed at the moment you look at it, but as soon as you turn your phone on its side, or choose a larger font size, or switch to a different device to do your reading, that digital “page” changes.

Web designers like to quibble over “responsive” vs. “adaptive” design. One of the best simple explanations of the difference seems to be from Geoff Graham, who describes it as “the difference between smooth and snap design.” Responsive layouts shift fluidly as the viewing conditions change, while adaptive layouts have several alternate versions and snap from one to another when the changing conditions reach a predefined breaking point. (By “conditions” I mean usually the size, orientation, and resolution of the screen, but it can also mean changes in the font size.)

It’s probably easier to adapt your text typography in an adaptive design, where you can simply create several different layouts with appropriate choices in the text typography for each version. But what’s really needed is a way to create fully fluid layouts that incorporate flexible microtypography, with full control by the designer over how line length, line spacing, spacing between letters, hyphenation, number of columns, and choice of typeface should change as the conditions change. What we’re after is not iron control by the designer over the form of the page, but fine control over variables so that a typographer who thinks responsively can program their design to give the best possible result in every situation.

And yes: the design of ebooks is really just a subset of web design. Only now, however, is web design getting sophisticated enough to be considered as a way of delivering books online.

The biggest difference between tools for website design and tools for ebook design, as far as I can see, is the ability to break the content into pages. A web page may extend well beyond the “viewport,” the area displayed on the screen at any particular moment. By contrast, an ebook page is what’s shown in the viewport. And that’s where the interesting design problems come, the ones that we still need to solve.

September 9, 2017

LITTERA SCRIPTA MANET
(the written word remains)

Right now we are at a pivotal moment in the develop­ment of digital publishing. Now is the time to set high standards for the future — and to develop the tools to imple­ment them. If we don’t set standards of typographic excel­lence today, our reading will be compromised for many years to come.

Scripta is an advocate for the development of effective new tools and new standards for typographic design onscreen. It’s all about reading — and designing text for reading. When people today complain that “young people aren’t reading books,” or assert that “I hate reading onscreen,” often what they’re reacting against is simply bad design for the screen. Most of the attention, even by purveyors of e-books, is on the dazzle, the obvious visual elements: photos, colors, animation, embedded video, links to social media. But the focus should be on the text itself; this is what we read: words in a row; sentences, one after the other; paragraphs; columns and pages of pure text.

As someone who has spent more than thirty years learning how to compose pages that invite people to read, that convey the author’s words and thoughts clearly, I have been fascinated by the possibilities for doing the same thing for long text in the flexible, malleable, infinitely adaptable format of onscreen reading. Right now, though, with e-books and online publications, we’re at a point very much like the state of desktop publishing in 1985: lots of potential, very few tools, no real standards, and in practice an enormous amount of sloppy crap. It’s time we did better.

Are we there yet?

What would be the “victory condition” for Scripta?* When will we be able to say that we have achieved our goals?

That’s easy. It would be when every digital book-reading platform fully supports the full range of OpenType layout features in OpenType fonts, when we can either embed or download the fonts we want in an e-book on any platform, when we’ve got a full suite of typographic tools for fine typography in e-books, when e-book designers have a way to control the flow and arrangement of every glyph or other element on the page in relation to all the others (and a usable interface for doing this), when we can create and change a set of rules for defining how the typography of a virtual page adapts to changes in the page itself, when e-book readers have hyphenation-and-justification routines at least as capable and flexible as those in today’s InDesign, and — most important — when we can set the default behavior of any e-book to include high-quality typography. In short, when we’ve got tools as robust for e-book design and production as the ones we’ve had for years for producing printed books. And when e-book readers — all of them — support everything that these tools can do.

Well, that ought to be easy, right? It will be but the work of a moment!

I look forward to the day when we can declare, “Our work here is done.” Let’s try to make it happen soon.

(*I learned the term “victory condition” from Bruce Sterling when he was starting the Viridian Design movement. They achieved theirs, and shut down.)

John D. Berry
March 2014