Colophon

So in early 2020, I decided to start fresh and try some things I am interested in, like quirky minimalist typography and utilizing peripheral vision by reinterpreting marginal columns for the digital age. I decided to have some fun and take some risks: I made some controversial decisions on purpose. And if you are reading this, it means I don’t hate it yet! — As a matter of fact, a did a rewrite of the website in 2022 and decided to change the design only slightly and focus on improving the typography and introducing some new content formats.

Design §

It’s a very thin line between simple and clean and powerful; and simple and clean and boring.

David Carson in the Helvetica Movie [59:50]

I do hope the combination of an absolutely minimalist set of stylistic devices combined with extreme precision and love for details ends up being powerful, rather than boring.

Spacing Unit §

One of the fundamental properties of any design is its smallest unit of spacing, from which all other spacings are derived.

Reading the book “Measure and Construction of the Japanese House” I recently learned the astonishing fact that the Japanese language once had a specific word for a measurement unit that is not defined as an absolute value, but simply as a uniform length that defines the rhythm of a building:

In the latter half of Japan’s Middle Ages another length unit, the ken, appeared. Ken originally designated the interval between two columns of any wooden structure and varied in size.

Heino Engel in Measure and Construction of the Japanese House, page 22

While “ken” quickly became standardized to mean a specific measurement ​ it still amazes me that a culture could have a length unit for such an abstract property of design. As a hat tip to this I decided to name the CSS variable that is storing the spacing unit for this website “--ken” ​.

Typography §

The main typeface used is Untitled Sans designed by Kris Sowersby, a beautiful, functional neo-grotesque. It was published in 2017 by his New Zealand type foundry Klim. The Font Review Journal published an in-depth review of the typeface and its strengths and characteristics ​. To me it evokes some of the spirit of rationalism present in Adrian Frutiger’s Univers, but with an even more stripped-back character. To amplify this asceticism I decided to limit myself to using only one weight and no italics.

As a secondary typeface, I went with iA Writer Duo. It is a not-quite-mono interpretation by Information Architects of IBM Plex Mono, which was originally designed by Bold Monday. It follows the monospace paradigm, with the exception of extra-wide characters like “w” or “m”, which get some more room to breathe. This preserves the non-proportional character, while greatly improving the visual flow and readability of the typeface.

The first iteration of this website (from early 2020) relied heavily on the italic version, which I enjoyed for its weird mix of technocratic and humanoid aesthetics. After two years I’d had enough of that, so with the second iteration from mid-2022, I stripped it down to a single regular weight.

Adaptive Type Hierarchy §

An idea that I’ve been kicking around for a long time has been what I call “Adaptive Type Hierarchy”. The basic problem is this: As a designer, you start with laying out the basic text and then add the heading sizing for each level of heading that the text requires. The important thing to mention here is that you usually start from the bottom up: the smallest heading necessary is slightly larger (or more generally: visually present) than the text. This means if you have five levels of headlines your first-level heading (meaning the largest one) is going to be much larger than if you have only two levels of headings. This works fine if you work on a print project, say a book, where generally speaking the same level of detail is present throughout the entire text, even if there are different chapters. On websites, however, content is much more dynamic: I might publish a really in-depth long-read article and a short note on the same blog. This means every article is likely to have a different number of levels of headings. Because I want to be as flexible as possible, I obviously start designing with my long-read article — let’s say it has five levels of headings. A fifth-level heading is pretty small … a first-level heading is huge. Now I open up my short note article — it has only one level of headings. But because I had to create my design for the most complex case possible this first level of heading is huge! This throws off the entire balance of the page. To phrase the problem more pointedly: We design heading hierarchies from the bottom up, but we write them from the top down.

It doesn’t have to be this way. If we look at a website as a collection of single articles, rather than the way we look at chapters of a book, a much more flexible solution emerges. Instead of saying “this is what a first-level heading looks like across the entire website and this is what a fifth-level heading looks like” I decouple the semantic and the visual meaning by saying “this is what the smallest level of heading for the text looks and this is what the second-smallest heading looks like” and so on. This means a second-level heading in a text with two levels of headings might look the same as a fifth-level heading in a text with five levels. If you look at the website design as a whole this may sound unintuitive — but that’s not how we consume content online. A website, and especially a blog, is a collection of fragments. For the user, the part is more important than the whole.

You are looking at an example of “Adaptive Type Hierarchy” in action right now. This post uses two levels of headings (apart from the title). Therefore the smallest heading size (monospace, all-caps) is assigned to second-level headings. The second smallest heading size (slightly larger grotesque, all-caps) is assigned to first-level headings. If I’d scrap all the second-level headings (like “Adaptive Type Hierarchy”) and only leave the first-level headings (“Design” and “Technology”) those would be displayed in the “monospace, all-caps” style because they now are the lowest level of headings in the article.

I am pretty sure that if you have already browsed through some articles on this website you didn’t notice that something was off. That’s because every article in itself is now visually balanced — the design is operating by the principle of “lowest [visual] noise necessary to make the point” — which seems like a pretty good philosophy for life in general.

Microtypography §

There are two micro-typographic rules that I decided to break. First, as you may have already noticed I decided to use em-dashes — designers love them because they make you seem very sophisticated and designerly — but surround them by (very thin) spaces, which is technically not correct ​. I simply dislike the way they stick to the words when no spaces are used.

Second, even though I usually follow the advice given in “Detailtypografie”, in the headline for some of my top-level pages, like “Notes & Thoughts”, I keep the ampersand on the top line, rather than taking it to the next line, as Ralf de Jong and Friedrich Forssman suggest. I just think it looks better that way — I go by the book in all other ways, I promise!

Technology §

The CMS for this website is Kirby ​. The frontend is written in HTML, SCSS, and a tiny bit of vanilla JavaScript with templates in PHP. It might be a bit of an old-school stack, but it is blazingly fast ​ and super flexible. I went with SCSS, rather than vanilla CSS, because in order to have fine-grained control over the typography, up to seven indivdual values have to be set depending on the typeface, size, and casing of the text. It’s just easier to write some functions around this. I am particularly proud that I managed to build the annotations purely using CSS, and no JavaScript.

The website is hosted by Uberspace and runs exclusively on renewable energy. It does not use any tracking technology.