Thoughts on presenting textual content

In a recent outburst of something you might call creativity combined with a convenient lack of things to do, this blog got a complete reboot. As I tangentially covered in a previous article, I moved from the conventional blogging tools (in this case an exceptionally slow copy of Movable Type) to the realm of static publishing. Inspired by the clean and interesting designs of Steve Losh and Christopher Boone in particular, I also sought to create a typographically sound design focused on the presentation of text in a highly readable yet uncrisp manner. What follows are some thoughts on this process and the end result.

The foundation

Typesetting a text to be both readable and visually appealing, especially one that is published in HTML format, is not easy. While there are excellent tools aimed at other markets (LaTeX for generating decently typeset academic reports with little effort, and InDesign aimed at professional and flexible typesetting for print), the web is still struggling to provide adequate tools. While CSS has long provided (albeit often ignored or misused) ways of controlling at least spacing and to a very restricted extent typeface usage, designers — and indeed typesetters — have only recently been given proper tools to finely typeset their text. Concepts such as vertical rythm, hypenation and kerning can now be applied even on the web!

But how?

A baseline grid

The baseline grid is, as Wilson Miner explains in an excellent ALA article on the subject, an important tool to ensure that text flows properly on the page, lining up across columns and creating a vertical rythm. Richard Rutter elaborates and provides a short introduction in “Compose to a Vertical Rythm”, further establishing the need for vertical rythm with an excellent quote:

Space in typography is like time in music. It is infinitely divisible, but a few proportional intervals can be much more useful than a limitless choice of arbitrary quantities.

Robert Bringhurst, Typographer

In essence, establishing vertical rythm is all about constraining the heights of elements to a multiple of some nominal value, most practically the open leading (line height) of the body text. From a readability point of view, a good open leading is around 1.5 (i.e. one-and-a-half times the text height), which is practical as it makes for easy number crunching. From an accessibility point of view, the body text font size should be kept at whatever value the user (or his/her browser) has set it at — this means your body element should have a font-size of 1 em.

Each block element in use — the most pressing being headings, paragraphs, blockquotes and possibly pre blocks — must thus be constrained to a multiple of 1.5 em. For most of them, this is simple; if their text size is equal to that of the body text, one simply has to set margins, padding and open leading to a multiple of 1.5 em, and you’re done.

For some, most notably headings, this gets tricky. This is where the number crunching comes in. Since em is a relative unit in CSS (relative to the text size of the current element, that is), we have to account for the change in text size. Therefore, we must adjust open leading and margins to account for the change in size. The line height is simple; we simply take the next multiple of 1.5 em (i.e. 3 em if the new text size is 2.8 em), divide by the text size and hey presto, a new open leading! Margins are handled in a similar manner, but keep in mind that it is the combined height of your margins that should add up to a multiple of 1.5 em — you are free to split these unevenly (e.g. 2.25 em top margin and 0.75 em bottom margin) as you see fit, although for elements containing more that one line of text, this will slightly break the vertical rythm.

Using the excellent #grid tool, one can continually check that the vertical rythm is maintained. Try it yourself — press ‘g’ to momentarily activate the grid!

On a side note, I also find that indentation of paragraphs makes for an ecsquisite style if done correctly, although it requires paragraphs of considerable (perhaps only average) length to really work. An indentation of roughly 4 ex seems appropriate, but this is of course a matter of taste. Be aware, however, that indentation under no circumstances may be combined with paragraph spacing.

Dealing with images

Images (and other media, such as video) pose a problem when maintaining vertical rythm. We cannot constrain them using merely CSS; we have to resort to more advanced methods. This could be easily implemented using some kind of short jQuery snippet, as all we have to do is to find out by how much the height of the image exceeds the last multiple of 1.5 em, and reducing its height accordingly. Simple enough, if it weren’t for one problem: we do not know how many pixels an em is.

Enter the pxToEm (yes, it has a reverse mode) jQuery plugin. With this, we can obtain the pixel length of an em given a reference element, something we can then use to resize our image:

$(document).ready(function(){
  var multiple = parseInt('1.5'.pxToEm({scope: 'body', reverse: true}));
  $('article img, article video, article audio').each(function(){
    $(this).load(function(){
      if($(this).innerHeight()%multiple != 0){
        $(this).height($(this).innerHeight() -
              $(this).innerHeight()%multiple);
      }
    });
  });
});

As Montgomery Burns would say; excellent.

Progression of size

Let us swiftly move on to a related matter: choosing the relative font size of various element. There are infinitely many approaches here — Steve Losh, being a musician, decided to base his set of sizes on the dominant seventh, while I, as an amateur photographer, decided to base mine around the square root of two (much like ƒ-stops).

Firstly, taking inspiration from the standard classes of LaTeX, I made the fifth- and sixth-level headings run-in (thus making use of that CSS display mode for the first time in my life), with a font size equal to that of the body text. I then progressed up though the headings, first in intervals of ⅓ stop, then in intervals of ⅔, giving me the following values:

As you can see, I have extended this idea to some of the other elements commonly used. Additionally, some typographic properties of the text was changed on some of the elements (removing the boldface attribute on h1-h4 and h6, making h4, h6 and blockquotes italic, etc.) to further differentiate them.

The right typeface

Choosing the right typeface is almost as important as establishing vertical rythm. The typeface, especially in text-centric designs, sets the mood of the entire page — and there are lots of choices to make.

Generally, it is said that sans-serif typefaces are more legible on-screen than serif ones (although that claim is uncertain, at best), but I decided fairly early on that I wanted the feel of a book. Since most, if not all books are typeset using a serif typeface, the choice was simple.

I started out with Palatino, like Steve Losh, but felt that it had too much of a digitized, clean look. I wanted the feel of real movable type, the (illusion of) small imperfections and the feeling of an old newspaper. I looked to Hyposometry, which in turn led me to the Crud Factory, where I eventually found what I was looking for: IM Fell Great Primer, an excellent, slightly dirty serif typeface.

To accompany this, I searched Kernest for a suitable monospaced typeface, eventually settling on Latin Modern Mono, which I know from my LaTeX ventures. Currently, I stick to Monaco for lengthy code listings (I find that it’s necessary to do so), but inline code samples are typeset with Latin Modern.

Hyphenation

Hyphenation is in my opinion mandatory when typesetting justified text. Doing so has not previously been possible in browsers, and is in fact quite a difficult problem (TeX has quite clever algorithms to solve this problem), but with the appearance of the hypenator, a simple JavaScript, we’ve got an acceptable solution. While it is not clever — it simply inserts soft hyphens, characters that are normally invisible but form a good breaking point and display a real hyphen if they occur on one — and thus produces clearly suboptimal hyphenation, it is better than the old no-hyphenation variant, where spaces were simply expanded until the line was wide enough.

With the hyphenator, we can achieve good-enough hyphenation at a low cost. Real hyphenation will, unless browser vendors decide to implement it, be a distant dream for web typograhpers. Our print-industry counterparts can keep on laughing. For now.

Removing distractions

Since a text-centric design should be reader-friendly, it must distract the reader as little as possible when he or she is gazing upon the literary (master)piece in question. Common distractions on a web page are headers, footers, links and advertisements. Luckily, I only had to care for the first three of these.

As you may have noticed, both the menu and footer is extremely simple. Some text and a ruler, that’s basically it. This keeps focus on the text, and only provides navigation for convenience. No distractions, and only the bare necessities are provided.

Links are tougher. They are an integral part of the web, and a convenient way of referencing other content (as opposed to e.g. the Harvard system, which works very well in print). But they are also distracting. They must be visible, but if they are too visible they steal focus from other parts of the text.

A common solution is to make them a different colour than the rest of the text. I find that this is very distracting, especially when bright colours are used. Another method is to keep the links the same colour as the text, underlining them and providing a reasonable hover effect. This makes links hard to spot, nullifying their value.

I decided to take the middle ground: when simply reading, and keeping the pointer out of the way, links are underlined with a subtle, grey line. As the pointer gets closer (in this case, hovers over the article element), a faint yellow background is added to all the links of the article. When hovering over a paragraph, all links in that paragraph gain a slightly stronger yellow background. Finally, when hovering over a link, the text colour of said link turns a dark red.

I find that this works very well.

Conclusion

Much thought can be given when designing a page for textual content, as there are many variables to consider. Although this may not be the most advanced design possible, i feel that it succeeds at its purpose: to promote the text of every article in a visually pleasing way, while keeping distractions to a minimum. Hopefully some of my methods or thoughts may be of use to you as well.

Godspeed.