110 An exercise in restraint

Every time I sit down to reconsider the design of my website—and I do that a lot—I eventually end up asking myself the same question: am I a serif or a sans-serif type person at heart? And almost always I end up reacting in the same fashion: I think of my affinity for simplicity, ‘minimalism’ and whatever else, and draw up an entire design in a fantastically capable sans-serif typeface (which happens to be GT America or LL Akkurat these days), then somehow along the way I get a whiff of some serif typeface or other and I discard everything because I simply cannot resist a good serif.

It used to be that the serif v sans-serif debate was a serious one in the early days of the web. Back then there was a definitive but anecdotal answer: serif in print, sans-serif on screens. But also back then screens were famously pixellated, which was rarely a complaint because any shortcoming was overshadowed by the novelty of dial-up internet. Today this question is largely pointless¹ and the most pertinent questions in typesetting differ little between books and screens insofar as the typefaces themselves are concerned. Content and tone are perhaps of greater importance when making this decision and I think my writing naturally gravitates towards serifs in my mind.

The primary rules

I always like to start any new design by defining my constraints. In the case of this re-design my constraints were few but well-defined. For starters, it had to adhere to all existing qualifiers, defined in the process of my previous design because this coud not be a step backwards:

1. Reduce Keep the carbon footprint to less than below 0.15g of CO₂²
2. Focus on functionality and usage, stripping everything else
3. Choose typefaces that can carry the weight of this redesign
4. Reduce code or implement cleverly to aid maintenance

As if these were not already tall orders I added more to my list:

1. Refine spacing and standardise scales
2. Ensure functionality without JavaScript (progressive enhancement)
3. One typeface only³
4. Reduce CSS variables
5. Simplify colour schemes
6. Avoid multi-level dropdown menus
7. Prefer clicks to hover: interactions cannot exclude touchscreen
8. Establish consistent heading styles site-wide

There were more rules but I ended up scratching a few off my list as I started to make more sense of the direction in which I wanted to head with the re-design. A few others combined to form some of the ones listed above.

Focus on typography

Typography is simultaneously both the costliest and the cheapest way to elevate a design. It is costly because it does in fact cost a lot, and because it can be a risky decision given that it is always going to be subjective. But then so is all design. It is cheap because if you can get it right you can afford to place much emphasis on it at the cost of several other design elements, all of which can be stripped to let the typeface(s) take a bulk of the responsibility for carrying a design.

My favourite serif typefaces have long been Minion and Plantin followed closely by Garamond and Caslon⁴. But I have often found Minion too flimsy, except when set larger than I would like, on screens; Plantin too wide (Monotype Plantin) or too narrow (Martina Plantijn) to my taste; garamond too wide and Caslon too decorative. If I had to pick with a gun to my head I would go with Minion Pro. Among modern typefaces made for screens I like Ivar and Lyon, of which only Ivar sets text with the colour I prefer (and I have used both at different points in the past on this website).

For this design I wanted to keep Minion in print as my benchmark and the only typeface that stood up to Minion in nearly every way was LL Bradford. It had better text-colour on my screen, and was legible across different screens at the same font size, allowing me to simplify my CSS variables (see self-imposed rule #4). It also came with this beautiful ampersand (&), an angled ‘M’ reminiscent of Plantin, and an old-style numeral one (1) that did not look like a Roman numeral⁵. This was an important consideration given that numbers would play a key role in my redesign thanks to this next bit.

Looking at book designs

My fascination with typography originated from reading well-designed books. But doing things differently on screens was often seen as a necessity, and with good reason too. What I wanted to do was see if I could retain what I viewed as the elegant components of common book designs and translate them to the web as closely as possible.

My two primary references were a Römische Antiqua type specimen by Genzsch and Heyse (available on the internet archive) and a 1928 collection of leaves out of books as samples of Monotype typefaces used by British publishers. The former is because LL Bradford is derived from G&H’s Römische Antiqua which was among the assets passed on to Bauer, Berthold, and Stempel when the foundry ceased operations in 1963⁶.

Perhaps the most obvious element of this, in the end, was the table of contents on the front page. But there is also the menu that is like a simplified table of contents.

Another aspect of this was the page numbers. Towards the end of last year I experimented with numbering my essays on this website. My only non-negotiable requirement was that this had to be programmatic because it would be an enormous hassle to manage numbering things manually or extend them later (the same reasons why one might want to make anything programmatic). I decided to display this like page numbers on the front-end, hitting two birds with one stone to use an unfortunate idiom.

Reduction, DRY and standardisation

Last year I had introduced some level of standardisation across the website. As someone who enjoys organising things properly this was an appealing move overall. While I differed a bit this time round in some aspects⁷ in others I introduced standardisation that worked like the DRY principle, allowing me to reduce spacing measures, colours etc. while also enabling some expansions like customisable paint schemes, which are also labelled in bookish terms.

Most design jumps are in scales of the line height, which is itself standardised across devices because LL Bradford works at the same font sizing regardless of breakpoint. The only other measures used are when their use relies directly on screen sizes or orientations, such as global margins relative to screen edges.

The other major switch is to rgb values for colours which helped me reduce my palette from six colours to three, only two of which change to produce new paint schemes.

Additionally, my focus on typography meant I was left needing just three font sizes site-wide: a ‘standard’ size such as this text, a ‘small’ size such as the text in the footer, and a ‘large’ size such as this quote, all of which are relative to the :root font-size and therefore independent of breakpoints, allowing for greater simplification.

This also meant I could enforce something I had long wanted: standardised headings across the site. My earlier approach was the have different h1 to h4 styles for the UI elements and different ones within essays. Now, everywhere on this site an h1 looks the same as do all h2 occurrences and likewise other levels further down. At first glance this might seem like it fights the idea of separating content and design⁸ but because the hierarchy of the design is itself simple, I was able to ensure that the heading levels translate one-to-one between the content and its presentation.

Accessibility and functionality

While this is probably the weakest aspect of this website, that is by no means due to a lack of consideration. I wrote previously about how I grappled with accessibility. This continues to be the case and I intend to continue pushing minor improvements over time. As of now this website scores 100 for accessibility on Lighthouse but I have learnt that there is always more to do.

On a broader scheme I wanted to ensure proper progressive enhancement so the entirety of this website was build with JavaScript disabled on my browsers. Subsequently I added some JavaScript to enhance parts of the site without too much overhead, culled several scripts I had been using previously, and re-wrote most scripts from scratch to make my code leaner.

All of this resulted in key changes around the site. For example the menu is pure CSS now whereas it was entirely JavaScript before with a fallback that would scroll the user down to an anchor linked to a menu in the footer. It was technically working but it was JavaScript-first with the fallback as an afterthought. Now there is no JavaScript for the menu, bringing parity between those who leave JavaScript turned off and those who do not. Where JavaScript does come into play is in the preferences—accessible from the footer, menu and home page table of contents, but only if you have JavaScript enabled. It is also used to retain the old shortcuts so that, for example, ⌘ and E or U or G or K all take you to various parts of this website quickly, and / of course sitll opens the menu. All this to me is simply good functionality hidden away until you need it, not a step above and beyond what is necessary. Functionality is, after all, an integral component of good design.

The Preferences section allows you to switch between dark, light and OS-based schemes, change text sizing, and pick from among three paint schemes (besides the default). With JavaScript disabled no access to the Preferences section is shown, respecting users choices rather than silently inducing FOMO and prompting that they turn JavaScript back on. Regardless, the basic site is designed with care so you never have to bother about setting your Preferences unless you really want to.

Indexing a new approach

A completely new section also accompanies this redesign, and is also inspired by books. Earlier I used to tag every essay, note and book review, display tags beneath them and allow link follow throughs, tag-based browsing etc. I felt this was redundant: you could just search for what you wanted (and you still can). The real benefit of tags was in how it aided discovery, so what I wanted to do was to add a new spin to that.

When we read books that, for whatever reason, are not or ought not to be read cover-to-cover the pages we most frequent are the indices. So this website now has an Index page. The point of this page is not to help you find anything—you can always search for that—rather it exists to help you discover things narrowed by specific topics.

This also means a key change from the last several years on the back-end. Essays will now have to have many more tags than before to help create an interesting index. So far I used to restrict myself to no more than two, and those were almost always picked from amongst a small pre-determined pool of keywords that covered all the content on this website. This means revisiting older articles, which I hope to use as reason to review and fix any bugs on those pages too. This would be a long-term activity and not one I plan to rush through within the next week.

If you spot bugs, please let me know. I have enjoyed the feedback I have received so far. Given that this design is a bit out of the ordinary I was afraid it would receive a mixed response, but the responses have been entirely positive and I think that comes down to the fact that I have made sure to let the reading experience take centre stage, as it should. Thank you for reading so far. As acknowledgement of your time allow me to point you to Roger Black’s wonderful guidance, from 2013, for designing good websites. In it you may find a couple of things to nod your head to, several to make you shake your head with horror, but above all it will give you a sense of how our outlook on designing on the web has changed over the last decade.