Embrace good typography on the WebPublished on January 9, 2016.
Typography on the web is often overlooked. Web sites usually seem to not care about the readability of their contents, and I think this has to do with the perceived difficulty in obtaining something different from the default, with results consistent across browsers. I am not an expert of web technology at all. However, when I first thought about the redesign of my personal blog, which resulted in the site you are currently reading, I chose to keep the layout simple, focusing instead on trying to exploit available web technologies to obtain the best possible typographical results. This post surveys what I wanted to do and what I’ve learnt trying to do it.
In the digital typography world, when one asks for quality, the answer is \(\LaTeX\). I love it. One of its major drawbacks, however, is that it is by design intrinsically tied to the paper medium. Some attempts to adapt \(\TeX\) and \(\LaTeX\) to other media such as web pages exist, but they are clumsy at best. What a web site can do, however, is to embedd the same typographical elements and guidelines that make \(\LaTeX\) output look so good.
The first element in this regard is the font used to render the text. Thanks to this website, I’ve managed to use Computer Modern, the same font used by default in \(\LaTeX\) documents. I use it in both serif and sans-serif variants, and it looks incredibly good. This has been possible thanks to the CSS3 standard that now supports custom web fonts. The supported font format, of course, varies between browsers, but fortunately the font comes nicely packaged in all the different formats needed to support the major browsers. As a rule of thumb, all the web site elements are rendered in sans-serif, while the content’s text paragraphs are serifed.
In addition to the main font, in a Computer Science blog it is important to also correctly and nicely typeset source code text. I’ve choosen Hack, an open source monospace font designed to render source code on the screen. You can see how it looks later in this post. It is, by the way, also the font that I regularly use in my text editors.
Another important aspect of a good looking document is the paragraph justification. Web sites tend to not justify text, leaving everything left-aligned, which looks very bad to me. Justification is, however, not easy at all to get right. Although the CSS3 standard natively supports text justification (it suffices to specify a
text-align: justify property), it is completely useless without proper support for hyphenation. Justified but non hyphenated paragraphs look very weird, because the browser has to put too much space between words.
Unfortunately, while the support for automatic hyphenation of text theoretically exists (with a
text-hyphenation: auto property), current browsers do not support it. What they do support is the
text-hyphenation: manual property, which is enabled by default. The manual hyphenation consists in putting a
­ character at the right point within words, in order to tell the browser where the word can be broken. This mechanism works well in any browser, but it means that all the text of the page has to be pre-hyphenated and filled with those characters. This is, I think, the reason why nobody does it, but thanks to Hakyll, the preprocessing software tool that I used to create this website, this is not so hard after all (more on this in a later post).
The difference from how the same paragraph would be rendered by \(\LaTeX\) is still visible, since the algorithms used by the browser to layout the paragraphs in real time do not produce optimal line breaks, but the result is definitely worth the effort.
Another minor details are worth mentioning regarding the paragraphs. As you can see, this post is typeset as usual in books and papers, with no space between paragraphs. To aid the eye recognizing paragraphs breaks, a little indentation is put at the beginning of each paragraph instead. The first paragraph, on the other hand, does not need to be visually separated from the title, so it is not indented. This is achieved quite easily in CSS by specifying the
text-indent property with an adjacency selector:
1 2 3
Spacing between lines is left to the default values set by Bootstrap. A really nice touch, suggested by The Elements of Typographic Style Applied to the Web, is that of synchronizing the rithm of the text paragraph with that of the menu items in the side bar. What does this mean? If you look at the beginning of the post you can notice that the spacing between the elements of the page are so that the paragraph lines on the left happen to be vertically aligned to the menu items on the right. This detail is important to reduce visual clutter, and it is ensured by carefully specifying every vertical distance as a function of the line height computed by Bootstrap from the font size.
Mathematical typesetting is what made LaTeX so heavily used in scientific environments. What can be done in a web page to get similar results? We can simulate LaTeX from scratch, of course! That is what the authors of MathJax must have been thought when they designed this awesome library. All the mathematical text and equations in this site are typeset by MathJax. Everything I had to do to enable it was to load the script from the CDN:
1 2 3 4
Following this tag, MathJax automatically intercepts any occurrence of a pair of dollar signs in the HTML source code and translates the contents into a typeset equation using a full-fledged implementation of the TeX math layout algorithm.
Things to improve
Considering the fact that I haven’t touched a line of HTML/CSS in almost a decade, I’m pretty satisfied of the results of my experiment. However, there are still some details to fix. The first item in the TODO list is to fix the horizontal scrolling of source code listings, which currently does not work well as you can see above.
Then, the next big thing is a CSS sheet for printing posts. It should be rather easy, but it gets time to craft the details. Another problem is that I am not fully satisfied by the spacing between paragraphs and section titles, and that of code blocks and images. Also, even if the automatic hyphenation mechanism works very well together with the text justification, the automatic hyphenation of words is not perfect. The algorithm, implemented by a Haskell library used by Hakyll, does not take into account some small details, such as that words should not be hyphenated on the first syllable, as it happens for the word be-tween some lines above. I’m afraid this can only be fixed by looking at the library’s source code, but I will never have enough spare time to do it. For everything else, any suggestion is welcome!