I spent an afternoon on last weekend updating the default font on starkshaw.me. I’d like to write down why I wanted the change and how did I go about the candidate fonts.
When I envisioned the user interface of this website in the beginning of the redesign, around early 2020, I didn’t think it would look like this. At the time, I pictured it would feature a minimalist design, with large humanist serif font for titles and smaller print for the body text. The boundary between navigation bar to body text should be ideally invisible, or separated by thin lines. After reading Butterick’s Practical Typography, I actually contacted the author, Matthew Butterick, about using his fonts in my website. I was interested in using Equity for body text and Advocate for titles. Then, the COVID-19 hit, the whole plan of renovating the website was put aside.
January 2021, after organizing the Secret Santa, I had the need of documenting everything about it — why would we do it, how did we plan it, etc. This was the time that I revived the renovation project. However, for the article, I needed a user interface that resonate the theme of modern technology. The minimalist design concept stayed, but the choices of font had to feature some mechanical, geeky, boxy vibe. With these requirements, serif fonts may not be a good choice to begin with. After some quick thinking, I adapted IBM Plex Sans and IBM Plex Mono site-wide. At first, it is an easy choice — it’s open source, no complication in the license; Secondly, it’s used for IBM’s own branding, which makes it “safer” than some other open source fonts. Many fonts I found on Google Fonts contain questionable designs that are just not good enough for reading. For IBM Plex Sans, they even have a website showcasing its design language. It also has an accompanying monospaced font for code blocks, perfect for the use of tech blogs where formatted code is everywhere. Although there are some design choices I have some doubts about, but overall it was a good enough choice.
About one and a half months ago, I completed Singanushiga. I’ve read it many times on here and wasn’t too satisfied about the reading experience, particularly about the font. IBM Plex Sans is a grotesque font with some classical twist, meaning it has some features from the early sans-serif fonts which at the time are less refined, hence the crude appearance. This is fine with technical articles, but I was afraid that it doesn’t work too well with things that are more artistic. Here is a quick comparison between IBM Plex Sans to the new font, Inter:
Note: Images in this article are stored in Scalable Vector Graphics (SVG) format, one can zoom in indefinitely without losing details.
The first obvious difference between both the normal and italic styles are the length. The letter spacing is default, yet the white space in Inter is larger than IBM Plex Sans. Except this, some letters in Inter, such as “w”, “n”, are wider than IBM Plex Sans.
Then, we can discuss the design of the ascender part of letter “f”, the descender part of “j”, the stem of “t”, the tail of lower case “l” and “a” in IBM Plex Sans. All of which have a common design where the outward-facing outline is a smooth geometric curve, whereas the inward outline is a right angle. On the top section of the cross in the letter “t”, the left-hand side features a curve, but the right-hand side features a right angle again. Except this design pattern, I am also unconvinced about the tail of lower case “l” and “a”. For “l”, maybe it improves the legibility comparing to the capital “I”, but I’m not sure its use in letter “a”. These intentional designs, as captioned in the showcasing as man vs. machine, timeless vs. distinct, natural vs. engineered, are unique to IBM Plex Sans and does look good on many applications, such as the website of RTÉ and Deliveroo. However, I am not sure these features are the best for my application.
Other than these, my feeling towards the letter “g” and capital “I” are complicated too. The “double-storey g” is the default glyph for “g” instead of the more commonly used “single-storey g” in modernistic sans-serif typeface (although the user can use the alternative feature to swap to the “single-storey g”). This immediately reminds me of Franklin Gothic, an early sans-serif typeface dated back to the early 20th century. The “double-story g” is a feature borrowed from serif typefaces, which can also be seen in some early sans-serif fonts, such as Gill Sans or Optima. Other than this design choice, the slab on capital “I” is also a feature coming from serif typeface — a special type called slab serif.
Another design choice I found contradicting is the use of “single-storey a” in italic forms. Similar to letter “g”, I am aware of the font alternative feature which would allow the user to use the “double-storey a” instead, the fact that the default one uses the “single-story a” is, in my opinion, a skeptical choice. It almost gives me a feeling that a rather cold, machined typeface all of a sudden gained some humanity when it changes to italic.
Besides, the font alternative feature of this font is implemented in such a dubious way, that it only made things worse — in order to swap the alternative glyph for “a” or “g”, one needs to include a piece of code like this:
1 | font-feature-settings: 'ss01'; /* Swap letter "a" */ |
However, the default letter for normal font and italic font are different for letter “a”, so one has to “swap back” the CSS attribute for italic text if they want to use same type at the same time. Otherwise, the “a” in normal text will be single-storey, and in italic will be double-storey.
So how did I find Inter? It for sure wasn’t the first one I looked for. First few came to my mind were based on DIN 1451, such as FF DIN or DIN Next. Both of them are legible, modernistic, and timeless design suitable for a number of use cases. However, they are both very expensive for niche websites. Although the original DIN 1451 typeface is in the public domain, yet finding any alternatives that come close to either FF DIN or DIN Next is still a dream. In the end, I only used D-DIN to the all-caps bold form of my name on the home page.
Failing to find any font based on DIN 1451 that I like, I took another angle to look for open-source fonts founded by big organizations. Inter showed up on Mozilla’s Protocol Design System, and I took a liking to it in an instant. I was aware of the Fira family commissioned by Mozilla for the now discontinued Firefox OS, but I didn’t know they have adapted some new fonts in their typography guideline.
I have a number of fonts listed here showing the legibility of and some similarities they share. For many sans-serif fonts, the difference between capital “I” and lower case “l” are very minimum: mostly the capital “I” is thicker than the lower case “l”, and sometimes the lower case “l” reaches the ascender line, which is usually higher than the cap line sharing among all upper case letters. Those fonts, for aesthetic reason, are not as legible as serif or monospaced fonts. Rather, they expect the reader to equip the knowledge in the given language to distinguish them. From fig. 4, we can see it is the case for most sans-serif I picked, except IBM Plex Sans and Fira Sans, which intended to prioritize legibility.
Next, let’s talk about some other aspects of those fonts in fig. 4. The first one, Franklin Gothic Book, derived from Franklin Gothic I’ve mentioned earlier on, is a classic representation of grotesque font. The most recent use I can recall is in the branding of Microsoft Office in the late 90s until been replaced by Segoe in 2007. Next, we have Helvetica Neue, a representation of later evolved neo-grotesque font. In this generation, thickness of strokes are more uniform comparing to grotesque fonts. For both examples, the dot on letter “i” is a square instead of a circle. Then, we have Avenir Next, a modernistic geometric sans-serif font with some humanist feature. Unlike early geometric sans-serif fonts such as Futura or DIN 1451, the weight is lighter, the bowl and counter are larger with bigger letter spacing. It also has a circle dot in letter “i” (same goes to dots in punctuation marks) instead of a square slab, making it less serious and intense. Fira Sans, however, appears to be mostly humanist than geometric. The font weight is heavier in general, corners are more rounded, with more pronounced thickness changes. Fira Sans is also based on an iconic font from FF, FF Meta.
SF UI Text is a part of the larger font family of San Francisco. Apple replaced Helvetica Neue with it in UI font for all their operating systems. In many ways, they are quite similar: The end of a stroke is either horizontal or perpendicular (see “s” and “a”) and the thickness is more uniform; Both are neo-grotesque, and San Francisco is heavily influenced by Helvetica Neue and DIN. However, the letter spacing is larger, the weight is also lighter, and the x-height (the height of lower case “x”) is higher, which all have contributed to better legibility and less intensity on a screen.
Comparing San Francisco to Inter, they look quite similar. However, San Francisco has some geometric features that Inter doesn’t. The top end of letter “a” in Inter is nowhere near perpendicular, same goes to “s” and the tail of “t”, and this feature is rather consistent among many other letters. See fig. 5 below.
Interestingly, the consistency doesn’t reach “c”, “C”, “G”, and “S” in Inter. The end strokes of them are horizontal. Personally, I would love to see them to share the same design language instead.
Except Inter, I have also looked into open-source fonts such as Red Hat font family and Overpass. Both of them carry some great designs but the mockups I’ve done didn’t show great resonance to the theme I wanted to achieve.
Other than this, another fact I had to consider is matching the style with the code block. Unfortunately, Inter doesn’t have a monospaced font in the family yet, but it does seem to go well with IBM Plex Mono — the author even mentioned in a tweet that he also uses them together in his personal website. I have decreased the size of IBM Plex Mono slightly to match the size of Inter for inline code, like this. For now, I’m settled with this combination.
I guess this is the end of this short journey. However, this is not the end of the discovery into typography design. I may change it again in the future, be it other great open-source fonts caught my eyes or the licensing of some great proprietary fonts getting simplified.
Matthew Butterick’s Practical Typography is a book I would recommend to anyone who is interested in graphic design — whether that’s for a physical medium or something displayed on a screen. Details in typography, such as font, letter spacing, all caps, small caps, line spacing, kerning, and font features, express something very subtle to the audience. It is up to the designer to make sure what they want to illustrate to the audience is conveyed accurately.
Updated on February 11, 2022:
After some more searching, I have replaced D-DIN with a free (but not open-source) font called Supreme. They are, in my opinion, similar in many ways, but Supreme has fewer design choices that I really concerned about. One matter drove me crazy was how the lower case “u” is a symmetrical bend in D-DIN. I felt okay about it because it was used only for all caps. But now, I don’t feel just okay, I feel wonderful.
Last updated on March 5, 2022:
I have updated the monospaced font with a newly released font called Berkeley Mono. While I like how it looks like, but it does not have some glyphs I often use, such as Cyrillic alphabets and accented characters for Chinese Pinyin. In this case, I have kept a copy of IBM Plex Mono in the web font for fallback.
Last updated on October 5, 2023:
IBM Plex Mono has been removed completely. Title fonts have been changed to Work Sans. Navigation bars are transformed to all caps.