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.

About these ads

10 thoughts on “SuttaCentral: designing the Dhamma

  1. Truly, friends, these two persons are rare in the world. Which two? The one who is contented and the one who satisfies the needs of others.

    Truly, friends, these two persons are difficult to be satisfied. Which two? He that collects whatever he gains and he that spends whatever he gains.

    Truly, friends, these two persons are easy to satisfy. Which two? He that does not collect whatever he gains and he that does not spend whatever he gains.

    Some used to take focus on make taking easier rather to let people know that nothing is for free, there are gifts and scarifies.

    Truly fiends, these two people are rare in the world. Which two? The one who can value a gift and the one who makes a scarifies.

    Truly fiends, these two people are not rare in this world. Which two? The one who can not value a gift and the one who makes no scarifies.

    Truly friends, these two people are rare in this world. Which two? The one who gives a right and the one who does not claim a right.

    Truly friends, these two people are not rare in this world. Which two? The one who does not give a right and the one who claims a right.

    Truly fiends, these two people are rare in this world. Which two? The one who takes just what is gives and the one who gives consciously.

    Truly fiends, these two people are not rare in this world. Which two? The one who takes what ever is desired and the one who gives careless.

    Truly fiends, these two people are rare in this world. Which two? The one who shares what is not his own and the one who takes without asking who gave.

    Truly fiends, these two people are rare in this world. Which two? The one who just shares what is his own and the one who is aware of the giver.

    Attached to form and sensuality the network of the Devadata followers and Brahma slaves are working on making the Dhamma to common article of daily use.

    Peace trough wealth! Is there motto, lets worship sensuality and pleasure. Free drugs for everyone! is the solution they seek.

    • Rarely do we see someone frequenting a site like this one who is so tangled in a thicket of views, a wilderness of views, who is so caught up in a contortion of views, a writhing of views, and who is so overwhelmed by a fetter of views.

      I suppose displaying it so openly can be a benefit to others as a warning of what can happen when one knows a lot, but understands only a little.

      Thanks.

  2. No-one wants to trawl around a site trying to find a sutta hidden away in a list of links for other, lesser, things.

    accesstoinsight isn’t perfect, but I think this criticism might go a little too far :)

    My biggest criticism of accesstoinsight is that they tend to favor one translator even when other translations are available and should also be included (sometimes they are, sometimes they aren’t).

    • Claim your right, there will be slaves who serve your desire, they might owe you a deed. I am sure you would not understand what’s the point. And its really not meant that you don’t get what you desire but maybe the object is not worthy to grasp as well as the underlying motivation.

      Maybe the slaves and Brahmas will include a consumer reclamation center and don’t worry the “back quarantine” you will have anyway, even they might promise you no return.

      Gratitude is something not often found in the world and consumer and slaves will never know what is meant with it, they live in bound dependency and have there ways they can not come out, as there is no will to it. Underlying tendencies might even believe that they already have something called free will. Step by step, with a little faith, you will work your way out and don’t worry you would be able to buy anything, direct or indirect. Paying before or after your consume.

      Btw, I like the menu and layout very much on Sutta Central, many many things are really good and many many people doing really good and hard work, have much faith and trust. If the runner would even gain some basic insight and some faith, I am sure it will be more then great. There is enough dung, maybe it will also find a real Dhamma seed finding the way out of it.

      And if the underling tendency will not change, well they will have their “back guarantee”. Every action nourishes this or that. Its a wheel, sometimes corrupt, sometimes smooth.

      Free, free… :-) will makes it turn.

    • Thanks for providing another display of wrong speech.

      Your attachment to views regarding your self and the world that you’re creating for self is astounding. Perhaps once you come to terms with your attachment to a thicket of views, a wilderness of views, a contortion of views, a writhing of views, a fetter of views, you will begin to see the flood of cravings and desires that surge beneath the surface of views and continue to overwhelm you.

      In the meantime, may you be well.

    • Hi Brc,

      Well, perhaps. I don’t mean to single them out, or any other site really. Most of these sites are run by one or two people in their spare time, and they have put lots of effort for many years into creating something for the sake of the Dhamma, without any financial reward. So, great! And we can’t expect them to get everything right.

      I was mainly trying to present a user case for why SC is different, and what our design is aimed at.

      As far as the content on AtI, it’s not something I’ve given much thought to. Apparently you’re referring to the translations of Ven Thanissaro, which many people dislike (although I don’t mind them personally). But he has consistently provided the site with good quality translations for many years, and it’s perfectly understandable to me why they would want to continue to develop a working relationship with him. You just can’t keep up with everything! At least his translations are available, and I think he has shown a lot of foresight in releasing all of his work under a relatively open licence.

    • Bhante,

      I was at a weekend retreat with Ven Thanissaro last March when he made a few jokes about what some critics have said about his translations of Pali terms. The jokes were funny!

      I appreciate his thoughtfulness, his consistency, and his ability to make people think carefully about or entirely rethink what they thought they knew about some of the most fundamental ideas about Buddhist philosophy and practices. It would be a mistake not to consult his translations! Also, he’s written so much that is freely available to anyone who attends retreats or writes to ask for them.

      Before the new SuttaCentral, AtI was the only place I went for suttas online. I’ve also gone to http://www.palicanon.org.

      Thank you!

      And thank them for their efforts to make the suttas available, too.

    • They weren’t jokes as much as they were comments that I found funny because the person saying them was the person who was supposedly being disparaged and because he said them in a way that I thought was funny. I won’t be able to reproduce it here! Mostly, it was a play on Thanissaro’s translations of the Pali terms versus what they really mean. You had to be there!

  3. “The Vietnamese was developed by David Březina and Ben Mitchell with consultancy from Vietnamese type specialist Pham Đam Ca and it was kindly supported by the monks from the Sutta Central project.”
    Copyright © 2010–2013
    Rosetta Type Foundry.

    Rosetta functions as a collaborative hub promoting research and education in the area of multi-script typography. We also offer custom type design services and consultancy for corporate customers as well as for other type foundries. Please contact us if you wish to discuss your particular project.

    Maybe they will put it under a smart license, actually I doubt that there are many who really give without a wish to consume in return.

    Maybe some people should try to make some dana work for the project and maybe that would release the burden of both, the bound “monks” and the bound “supporter”.

    The world is a little crazy today, monks have taken on the role as servants and laypeople as the lords. :-)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s