As a designer who also knows how to code I have the superpower of being able to create my own website, exactly the way I imagine it. Because of this I can also take risks — if I change my mind I can update the website immediately.
I felt like I hadn’t done that for way too long. I’d experimented here and there, but in the end I had the same portfolio-update-anxiety that every designer has. I think that’s sad: I want my website to be a place where I try things, a playground for my ideas — not just my professional CV. So 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!
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 I love their description that Untitled Sans does not feel too modernist or minimalist — like Helvetica or Akzidenz Grotesk would — but simply utilitarian.. 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 use only one weight and no italics.
As a secondary typeface iA Writer Duospace is used. It is a not-quite-mono interpretation by Information Architects of IBM Plex Mono, 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 breath. This preserves the non-proportional character, while greatly improving the visual flow and readability of the typeface. I currently love the italic version for its weird mix of technocratic and humanoid aesthetics — I am not sure yet how long that will stick.
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 longread 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 longread article — let’s say it has five levels of headings. A fifth-level heading is 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 (italic, monospace, gray) 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 “italic, monospace, gray” 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.
There are two microtypographic 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 narrow) spaces, which is technically not correct Bringhurst insists on en-dashes surrounded by spaces – the German way – while most American publications suggest an em-dash without spaces.. I simply dislike the way they stick to the words when no spaces are used.
Second, 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 prescribed by “Detailtypografie”. I just think it looks better that way — I go by the book in all other ways, I promise!
Spacing Unit & Grid
One of the fundamental properties of any design is its smallest unit of spacing, that all other spacings are derived from.
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 which 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 6 shaku or about 1.82 meter 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” --ken = 12px.
The grid of this website is different from the kind of grid that is usually used on websites, where there is a fixed number of equally spaced columns. Instead the grid is inspired by some of the more adventures grids that were used in modern print design in the late twentieth century. The grid for this website is purpose-driven: It is made up nine columns, each of a different size and bound to a specific kind of content, making it less flexible but more appropriate. The grid is also truly digital: the width of each column is defined both as a dynamic fraction, in relation to all other columns, and a specific number of spacing units — set as max- and min-width respectively. This means the grid is not absolutely defined, but fluently: the exact measurements are calculated based on the screen size. Even though the rules are simple this quickly becomes complex — I, as the designer, can not anticipate how large each column will be, only through trial and error and soft adjustment of the rules can I find the right balance.
To expose this complexity I decided to build a little visualization into the site, that when turned on displays some light gray lines representing the borders of the columns. (it’s pretty subtle) — Your setting will be stored (in your browser) while you keep browsing different pages of this website.
The website is hosted by Uberspace and runs exclusively on renewable energy. It does not use any tracking technology.