Applying antiphonal geometry to the digital page

9 March 2013

There was one talk from last week’s Responsive Day Out put on by Clearleft that struck a cord, Owen Gregory’s Antiphonal Geometry. Owen raised the challenges of laying out web content in the formless space that is a resizable browser window, yet my mind leapt to the restraints of a tangible frame that mobile devices create and how can be translated for books and magazines.

Owen brought up the work of Robert Bringhurst and his Elements of Typographic style, quoting the part of the book that addresses the shape of the page. Particularly with books and magazines, the challenge of layout begins with the dimensions and proportions of the page which frame the content.

The page is a tangible shape on which the text block sits in a relationship defined by antiphonal geometry. The page size is dictated by international standards, but the proportions of the page elegantly resonate a ratio echoed in mathematics and music. The text block must ‘answer to the page’ and sit on it bound by the correct proportion. This creates a ‘harmonious’ relationship between the page and the text block and is pleasing to the reader.

The frame for web design is the screen and those screens conform to a few standard aspect ratios (2:3, 3:4, 3:5, 5:8, 9:16). They are however different from those we commonly use for books based around the Golden Ratio. Owen found that music still plays a role in screen sizes, through the scale of musical intervals.

Now putting aside the web and resizable browsers, seeing those devices in Owen’s presentation made me wonder about creating the perfect page proportions for those digital ratios, the best grid to frame the text block based on the screen size ratio. This would after all still answer to the page.

Rather than force a book page design onto a screen, or approach the shape of the text block around fitting in the most amount of content, the text block should not only be in proportion to the screen aspect ratio but also responsive to the various aspects. Technically this makes a lot of sense, but more importantly it would create the best possible user experience much as the shape of a page is better for the reader.

I have always been struck at the oddity of many picture ebooks sold through the iBookstore that don’t fit the screen. We see this when opening a PDF in iBooks, but when a book is downloaded from the store, it’s jarring to see the textured background along the top and bottom edges of the book. The books was simply translated into ePub format without considering the audience.

There are of course caveats to address as well. The screen size can’t take into account the screen frame. Book pages don’t have frames, the margins handle this task. Those margins are also important for the usability of the book, particularly how it will be held and where the fingers will lie. The margins of a digital page won’t be used for holding the page, indeed this will conflict with the navigation of the page. For the most pair, device screens are framed with neutral colours though the frame might not echo the aspect of the screen.

Another concern is the single-page versus double-page spread flipping common in ebook readers when switching between portrait and landscape. Looking instead at how many digital magazines handle this adds an interesting dilemma thanks to multiple columns. The page examples used in the Elements of Typographic Style are facing pages with each page being asymmetrical on its own, but that is only half the story for the digital page. Indeed I will begin by focusing on the portrait single-page layout, which has no facing page and therefore is more likely to be symmetrical.

So I propose some further study around the perfect digital page proportions and how it might be created. I began my experiment with Indesign and Adobe’s Digital Publishing Suite. I found myself fixated with the 3:4 ratio of the iPad at hand.

As Owen also shared in his talk, CSS gives us the ability to not only target the viewport aspect ratio through media queries, and there shape the content differently, but also to use viewport-percentage lengths to define the values of many text sizes in proportion relative to the viewport, especially as the viewport size changes. One could therefore create an ePub with the CSS to match the content to the screen aspect ratio creating harmony.

All this will require an experiment outside Indesign and within the more open ePub standard, and taking into consideration the caveats and constraints, however certainly this is worth it for the best possible user experience.