SuttaCentral: designing the Dhamma

When the time came to look again at SuttaCentral (this was late last year), one of my interests was to bring a refined and careful aesthetic sensibility to the Dhamma. In the past couple of years I’ve developed an interest in typography, due to publishing my own books. I knew that it is now possible to create quality typography on the web: and if anything should be typeset beautifully, it’s the suttas. As I’ve written previously, there is a long tradition of design and typography in writing the suttas, which springs from the very earliest Indian manuscripts. How, then, do we present the Suttas in the best possible way?

There are many issues to consider here, and I’ll try to cover a few of them.

Websites are dead

It sounds like a paradox, but it’s not really. No-one uses “websites” any more. They google, or they tweet or they Facebook. Maybe they read blogs, or check out some articles in a newspaper, or watch videos on YouTube. In none of these cases is someone actually using a “website”, in the basic sense of a structured group of HTML pages. The website is irrelevant. What matters is the content, what is on your screen at this moment, not what the theoretical “website” consists of.

This is the downfall of almost all sites that present the suttas. They are about the site; and often enough, they commit the cardinal, deadliest of deadly sins: using the website as a glorified ad for the organization. As soon as you think like that, you’ve failed. The content is no longer there for its own sake, but as a trick to drive the reader to something else: a product, or raising funds, or just plain old PR.

How do you escape from this? My favorite un-website is gov.uk. Seriously, it’s awesome. It won a major design award last year, and there’s nothing to it. There’s no smiling faces of happy people, no sloganeering, no clever flash, or any of the other meaningless crap that bogs down most websites. It is based on the basic premise that no-one wants to be in a government office, so let them do their business and get out as quickly as possible. It’s the same principle as Google: not, “How do we keep people?”, but “How do we get people where they want to be?”.

I wanted to bring this attitude to the suttas. No-one wants to trawl around a site trying to find a sutta hidden away in a list of links for other, lesser, things. No-one wants to download huge images or be told about the great work our organization is doing or see an ad for a meditation technique, and so on. Our task should be to bring the suttas to the surface in the fastest, best possible way, so that readers can get where they are going, and not have to deal with a website.

So we developed a navigation structure that is extremely shallow: 2 or 3 clicks and you’re at any sutta. The menu is available from any page, and the search is instant (and is getting more awesome every week: just wait until our new search is launched). It is the fastest and most powerful way of navigating the suttas that we can think of. If you’ve got a better way, let us know!

Buddhist Typography

I approached this from two angles. First, what are the fundamental Buddhist design principles? And second, how do we express them using the best practices of web typography?

Consider Buddhist design, the classic shapes of Buddhist art: the Buddha image, the mandala, the stupa. They all share an aesthetic sensibility. They are strongly and simply symmetrical. They are oriented towards the center and the top. This is no accident: the centering is an expression of psychological and spiritual oneness, and the upwards orientation is an expression of the aspirational nature of the path. They use the basic shapes: circle, square, triangle, to create a sense of order amid the complex and chaotic details of samsara.

I also looked at traditional manuscript design. Buddhist manuscripts are always symmetrical, using the universal principles of good typography: evenness, spacing, clarity. Due to the nature of the materials, they are usually horizontally oriented, unlike the vertical structure of a webpage or a book. But many of the design elements are close to those of Western typography. As just one example, the number of characters per line varies from manuscript to manuscript, but on average it approaches the Western ideal of around 80 characters/line.

What is equally important, especially from a Buddhist point of view, is not just what is on the manuscript, but what is not on it. With the exception of highly ceremonial designs, most Buddhist manuscripts are plain and workmanlike. The important thing is the words, and there’s pretty much nothing else on the page. This is contrary to most web presentations of the texts, which love to clutter the page with multiple reference numbers that interrupt the flow of reading.

These ideas are all reflected in the design for Suttacentral. The page is clear and uncluttered. All the reference material and other stuff is hidden away: you can call it out when you want it. But our default presentation is for people who want to read the text. The design is centered and symmetrical. The headings appear in small-caps in the center of the text, drawing the eye inwards and upwards. The small-caps also evoke a sense of seriousness and formality. Notice, also, that these textual elements are grayed out: this is because they are not part of the text itself, but have been added by redactors. So we create a visual reminder of the editorial layers of the text.

Western Typography

In the basic layout I was guided by the application of Bringhurst’s classic principles to web design. The page is a grid design, with a regular vertical movement and constant proportions. The basic set of proportions is selected from the Dhammacakkappavattanasutta. Notice how the Buddha structures his teachings in terms of interlocking numerical sets: 2 extremes, 3 turns, 4 noble truths, 8-fold path, 12 aspects. This is no accident: it provides a sense of order and interrelationship, a sense of the wholeness of the Dhamma. This same sense of proportion is what guides visual artists in creating harmony and beauty.

The most basic element in a page of text is the line height. This is the first and major impression that a page presents: a series of lines. So I took this as the basic unit in the text grid. Since the most basic number in the Dhammacakka is 2, the line height is assigned to two. And as this is a vertical height, the horizontal movement should express the second most basic number, three. So all the elements on the page are organized according to this 2:3 vertical:horizontal ratio, which is then expanded according to the proportions of the Dhammacakka: 4, 8, 12. Of course, a web page is dynamic, and is interpreted by browsers, so we can’t get the precision that we can on a printed page; but anyway, that’s where the basic proportions come from.

You don’t see these things. They are invisible guidelines. But so many people have commented, “Wow, SuttaCentral looks so great!”, it shows how strongly we respond to proportion and order.

One of the ideals of typography is that it recedes. When you read a text, the important thing is the words you are looking at. Anything that distracts the eye is an impediment to readings. And that means pretty much anything at all. A study of reading, for example, showed that use of bold text actually slows down readers: the eye is distracted. This is why the traditional ideal is to aim for a uniform “greyness” of text. Any excessive gaps or unevenness is avoided. The sense of beauty that emerges from a well-designed page is no accident; it is the cumulative effect of countless tiny decisions in the use of space, proportion, and color.

Typography is not just the overall proportions, but the meticulous attention to tiny details. We have managed to implement most of the elements of quality typography, some of which are commonly ignored in even expensive print editions: hanging quotes, proper (and letterspaced) small-caps, correct use of punctuation (including dashes and quotes), verses centered on the longest line, and so on.

One element we have not achieved is proper justification. Our text really should be justified, as this reinforces the symmetry and balance, and for this reason Buddhist manuscripts always use justified text. It is a complex topic, but the essence is that well-justified text is currently impossible to achieve on the web. I have been looking into possible solutions, but so far nothing that is workable.

Fonts

It is now possible to display pretty much any language well on the web, due to the widespread adoption of Unicode, together with the acceptance of @font-face for delivering fonts. The problem is no longer just getting the glyphs you need, but getting a font that actually works well.

There are plenty of free fonts available, but few of them have the glyphs we need. Moreover, rendering fonts on the screen is still a complex and dicey matter. I’m lucky, I use Ubuntu on a good screen, so pretty much any font looks okay. But on low-res screens, and a variety of inferior operating systems, it’s almost impossible to find a font that actually works well across all devices. In addition, I wanted the flexibility of the full range of typographic possibilities, including true small-caps, which are very rare in a free font. To add to the complexity, as the design evolved it became clear that we needed both a serif and sans-serif, in order to clearly structure the information on the page. These both need to both have proper typographical features, be available in small-caps, render well on all screens, and include the various exotic language glyphs.

Ultimately, I simply couldn’t find a free font that met all these criteria. The closest is my beloved Gentium; but this is designed for compact print, and is cramped on a screen. Eventually I came across the wonderful Skolar, which you are reading this blog in right now. The basic version is available online on WordPress, but the full font, which includes masses of specialized and advanced features, is only available commercially. Despite my love of open source, in this case this was the best option.

Skolar is an astonishingly good font, which has been widely adopted in the design community, but which has so far largely passed by its intended market, scholarly publications. It is designed from the ground up to be used with a wide variety of international glyphs, rather than most fonts, where the diacritical marks are bolted on after the fact. It has the classic attributes of a great screen font, with strong lines, low contrast, and moderately large x-height. In addition, it benefits from detailed hand-hinting by the creator, which is the single most important factor in ensuring good appearance on inferior screens.

I have been able to work directly with the font designer, David Březina, to adapt and extend Skolar for SuttaCentral. The initial version includes support for the Pali and Sanskrit diacriticals. David kindly created the Dhamma-wheel you see in the SuttaCentral masthead. This is the Unicode character for the Dhamma wheel, not an image. I chose this as a homage to the Unicode project in enabling communication and learning across all peoples. The next version of Skolar, which will be live on our site soon, has support for Vietnamese characters, which were developed by David specially for SuttaCentral. I’m delighted that we can make this little contribution towards quality typography for everyone.

The companion sans is Source Sans Pro. This was created by Adobe and released as their first open-source font. Originally designed as a UI font, it has outstanding readability at small sizes, which makes it ideal for its use on SuttaCentral. It covers all the glyphs we need and comes in a wide range of weights and styles. In addition, it harmonizes well with Skolar. (I peeked at the innards of a pdf that David Březina sent me, and he uses it as companion for Skolar, too!). I’ve adapted it slightly for use on SC.

Conclusion

I could go on for quite some time, but will have to call it quits for now. Hopefully I have conveyed some sense of the care and consideration that has gone into crafting SuttaCentral. As always, design is in service of a higher purpose: to convey the Dhamma.

The Suttas speak of how the Buddha would speak in a voice that is clear, pleasant to listen to, articulate, and distinct. These principles are fundamental to communication. The design of a Sutta should be attended to with the same care that the Buddha used when speaking.

Unfortunately, most sutta websites so far seem to have used the design principle of throwing a bunch of text at the screen and, I don’t know, praying that it will work out okay. This is neither good scholarship nor good communication.

The presentation of a text conveys, unconsciously but unmistakably, what the designer thinks of the text. If a speaker mumbles, grunts, and slurs, it is a sign that they don’t care about what they are saying, or about the person listening. And if a web designer doesn’t bother to pay attention to the manner in which a text is presented, they throw out millenia of experience with the written word, which universally attests that the manner of presentation deeply influences how the matter is received.

Advertisement