User blog:Kjnoren/Some thoughts on typography

Typography is the art and craft of presenting the written word to best convey the message of the text. It combines concerns about usability and readability with stylistic and aesthetic choices.

Introduction
This text came out of the re-design that I did recently for a literary-oriented wiki. Since it was about an author and their books, I wanted to have a wiki that reflected that better than fandom.com’s default style. To some degree I had already done so by using typographical dashes, quote marks, and apostrophes, but what I really wanted was a nicely-designed serif font with a good typographical tool set. This is a somewhat embellished and edited version of how I went about that—in reality things were a lot more roundabout and chaotic.

The rules of typography
The most important tool for assessing or developing any typography is your own eye.

There are plenty of rules in and of typography, but in truth most are more guidelines than laws. Some are conventions to help clarity. Others are based on long experience. Most of them are based in a specific context and may not apply outside that context. That said, it is a good idea to be aware of the experiences behind, and the reasons for, these rules if one decides to break them.

Some words I use here might be used in unfamiliar ways. In those cases they are terms with specific meaning in typography and font design. I have tried to explain those meanings, but I apologise if I have missed to explain a term or made an inadequate explanation. I can recommend going to Google Fonts or other font web site while reading this and follow along with the various fonts and sample texts.

Design or typography
When evaluating or developing a design for a wiki there are two common ways of approach, which I myself think of as the designer route and the typographer route. The designer route works with large elements and blocks and works inward. The typographer route starts with the smallest elements and works outwards.

Both are perfectly viable and valid ways of working. Depending on your own preferences, skills, and taste one might be better for you than the other. Some forms of media might also lean towards one approach. I think the more graphically heavy the source material is, the more viable is the designer route, and the more text-heavy it is, the more it leans to the typographer route.

I should say that I think a good professional designer or typographer should know how to best combine large and small elements. But this article is focused on the typographer route. It fit the particular wiki better, and it fit my temperament better.

Technical skills
Working with any advanced typography on fandom.com will require some technical skills. The largest element is familiarity with the web inspector (or equivalent) in the web browser, so one can look up the CSS selectors, rules, and results on the page. Being comfortable with looking up, writing, and understanding CSS—both selectors and properties—is also good. Some understanding of HTML, especially inheritance, elements, and attributes is also helpful.

None of this is especially hard, but it can require some determined effort and ability to grasp abstract subjects in text or in code form. If you are on fandom.com’s Discord server, the #style-and-design channel is a good place to ask.

The style on fandom.com
Is the default style provided by fandom.com bad? Not by any means. It is eminently readable, does some basic adjustments on very large screens, and makes good use of whitespace. Whitespace is the distances between characters, words, lines, paragraphs, and other elements on the page. It is a key typographical consideration—as it is in all graphical design—both for readability and for allowing the eye to find different sections of the page. From a usability perspective it is quite good.

The default font is Rubik. It is a sans-serif font with an almost aggressively high x-height. The x-height is the relation of the height of the lowercase x to the overall height of the font. Its characters are also relatively wide in comparison to their height, and give an almost square appearance though with rounded corners. Its lines are of uniform thickness. The font has very few embellishments and generally simplified and largely geometric shapes. Its characters are closed, as can be seen on characters like c or e.

That makes it legible in small sizes and on screens—especially combined with its minimalistic design—but also means that the font doesn’t create its own organic air or whitespace around itself. To be readable in longer sections, it needs a rather large leading—the distance between one line and the next, line-height in CSS parlance. Fandom.com’s default value for that is 1.75 times the font size, which is really on the high side compared to what is usually advised but fits the font. Note what I said about rules earlier? The standard typographical rule of thumb on line heights turned out to give a poor result when applied to a font with very high x-height.

Rubik shares several of its characteristics with fonts that are widely seen today, like Roboto or Calibri. These fonts are generally developed to work well as user interface texts, in small sizes, and on screens of varying quality. Rubik is a bit of an exception here, in that it was developed for an art project focused on Rubik’s cube rather than for use in software, but it still works well as a user interface font.

What it does not have much of is personality or identity of its own. This goes both for the font itself and the entire default style on fandom.com. This is of course understandable, since it has to apply to wikis of romance, drama, action, or horror; based on stories told in live action, cartoons, comics, or literature; for kids or for adults. It is up to each wiki to provide that personality.

So on to accomplish that.

Evaluating alternatives
I evaluated the various fonts that were already offered by fandom.com in the Theme Designer. While they are intended to be used as headline fonts, once imported they can easily be used throughout the wiki. It can be a great start to begin experimenting with fonts on a wiki. Here are my thoughts on them.

Work Sans
Work Sans is very similar to Rubik, though they both have their own character. Work Sans has a little more details, is a little lighter in its lines, and has sharper terminals. I think it can work well as a wholesale replacement to Rubik, but not as a complement to it—they do not have enough contrast or identity to make such a combination interesting. As a wholesale replacement it also really doesn’t say anything different than Rubik. Since I wanted a serif font, it was not an alternative for me.

Lora
Lora is a well-regarded font, a modern serif inspired by the transitional antiquas of the late 18th century. Compared to the earlier humanist antiquas these tend to be more regular in their shapes, straighter in their lines, a little more geometric, and a little narrower in their shapes. Lora is a well-designed font, though you need to self-host to get the most out of it. It can work well on a wiki, though I think it is more suited as a body text replacement than a headline replacement. I do think it provides a nice contrast with Rubik. However, it didn’t have small caps or lowercase numerals.

Roboto Slab
As its name implies, Roboto Slab is a slab serif and a companion font to Roboto, the Android system font. Slab serifs are characterised by large serifs that are as thick as the widest primary lines of the font. Early slab fonts were almost exclusively display fonts, but nowadays slab fonts are less extreme. It is less closed than Rubik, without being fully open. I find slab serifs poor for body text and smaller sizes, but it could provide a nice contrast in headlines and other short texts.

BioRhyme
Biorhyme is probably the most uncompromising display font among the choices in the Theme Designer. It is open, but its wide, thick and somewhat wavy nature make it hard to read in longer texts. If used in smaller sizes, I think switching to the light 300 weight rather than regular 400 can make a lot of sense, though that also removes a bit of the character of the font, and it still won’t be as easily read as Rubik or Lora.

Inknut Antiqua
Inknut Antiqua definitely has the quirkiest look of these fonts, but it is possibly also the most historically grounded, going back to the handwritten and printed humanist scripts in the era between the inventions of the printing press and the movable type. As a Scandinavian I’m delighted but also a bit disturbed by the inclusion of ligatures in words like “förfärlig”—much needed but so seldom seen. It is relatively wide but has a perceptively low x-height. It can work well even in smaller sizes. It appears a bit heavy, so I’d probably use the light 300 weight rather than the regular 400 in smaller sizes or in body text. But it lacked italics and small caps.

It also had a technical strike against it. The default distance between lines is extremely large. While it can be adjusted down, it makes it hard to select or copy text. It is a fascinating font, but the combination of limited styles, its very quirky personality, and the technical line-height consideration made me decide against it. With regret, I must say.

Amongst the fonts “pre-approved” by fandom.com, the closest technically to what I wanted was Lora, while Inknut came the closest aesthetically—even if it was almost too much. But neither provided all the tools I wanted. I wanted to be able to use small caps, italics, perhaps a wider variety of weights, lower case numerals, and other typographical features.

Source Serif Pro
The next font I looked at was Source Serif, a freely licensed font from Adobe, made as an exemplar of digital font making. Like Lora it is a transitional antiqua, and the two are rather similar in their broad appearance, though they have plenty of detail differences. But Source Serif was available in many more weights and had small caps and lowercase numerals. I had all but decided to go for Source Serif when I went for another look for a humanist font.

Alegreya
Alegreya is a professionally designed and produced humanist font. Compared to Source Serif Pro and Lora it had a lot more character to it and felt a little closer to having been written by hand, while it was still not as strange to the eye as Inknut. It didn’t have as many weights as Source Serif, but it had more then enough, and all the other features I wanted.

It was also licensed under a free font license and available via Google Fonts.

Implementation
My decision made I started to experiment, and found that what Google delivered was not the full font. No small caps, no choice between lowercase and uppercase numbers. Together with privacy considerations that led me to decide to self-host the font on the wiki itself, which required asking staff to enable upload and use of WOFF2 files. Do not depend on Google Fonts for proper use of typography on the web.

Alegreya and Rubik are highly dissimilar. One is an open humanist serif with lots of personal touches and callbacks to writing with pen and ink, meant for long-form text. The other is a very modern sans-serif that is almost aggressively minimalistic and quadratic shape with rounded corners, meant for display purposes. But both have proved very versatile and well-received.

These differences meant that the Alegreya appears much smaller than Rubik at the same font sizes. Focusing on the relative x-height of the two, I found that Alegreya at 16px appeared to have the same optical size as Rubik at 14px (fandom.com’s default). But that also increased the width between lines, which together with the greater amount of whitespace in the Alegreya font meant that the lines were too far apart. Reducing the line height to 1.5 meant that optically the fonts behaved almost the same. The line lengths were similar since the individual character now had similar widths, and the resulting line height was 24.5px for Rubik to 24px for Alegreya.

What this demonstrates is that fonts, font sizes, and line heights do not exist in a vacuum. They all interplay with each other, and making a choice of fonts will necessitate also looking at font sizes and line heights.

The change of font required a lot of other follow-up adjustments to the CSS file, as I had to open the inspector to find the element where something didn’t look right, and try to find the corresponding CSS rule. Doing a re-redesign like this is not a small undertaking—it requires getting a lot of details right, and there are some pages that I still need to work on. I also found a use for Inknut Antiqua in the end.

You can see the finished result on the Elliott Kay Wiki.

Sources and further reading
My primary introduction to typography were the two Swedish books Vandring bland bokstavsformer by Karl-Erik Forsberg and Typografisk handbok by Christer Hellmark. This is one area where it is worth going to the library. There will always be differences between typography for print and for the screen, but the basics remain.

Amongst web resources, I have found Practical Typography by Matthew Butterick to be valuable and easily digestable.

The font presentation by most font services is rather spartan. Beautiful Web Type is a great collection of samples of high-quality freely licensed fonts that shows much more of the parts of each font.