How It’s Made
This site is built with React and Next.js. It uses Emotion and plain CSS for styling. Styled System helps facilitate the UI and responsive design, and the content is written and managed with MDX. I use Moment to format dates, Prism for code syntax highlighting (via prism-react-renderer), and Typed.js for the typing animation on the Design Token Transformation project page.
Layout & Design
For wider viewports the layout adheres to an eight column grid made up of four major columns of two columns each. As the viewport narrows the grid goes with it until the 1378px breakpoint at which the first column drops its inner gutter and comprises half the width of the other three columns. Below 1012px the grid is dropped and the design converts to a single column layout.
I wrote a little about the grid behind the design in the 2020 Redesign topic post Grid. It has changed a bit since that post but by and large its the same. You can click the button below to toggle a “live view” of the grid. Though keep in mind there’s no grid for the mobile and tablet views.
This entire site is set in a single font¹ at a single size²: LL Unica77 Regular. I have wanted to take on this challenge for a while, I nearly did with a previous design but that used a single font at three different sizes. I have been tempted to abandon this constraint a few times during this redesign process but so far have stuck to it.
I think I would most like to have a bold weight rather than another size, but for now, I have tried to work out different ways of styling text to achieve the same sort of hierarchy one would get with varying sizes and font weights.
I first became familiar with the Unica typeface when I licensed Neue Haas Unica (a revival version) through a promotional bundle that Fonts.com was doing. I used it for our 2018 Christmas card and then in 2019 for a website design (with a different license). I found it to be a nearly perfect neutral typeface. An embodiment of the Super Normal concept³ put forth by Naoto Fukasawa and Jasper Morrison.
Lineto has a succint story of the compact but rich history of Unica on their specimen page for LL Unica77:
The achievement [of the design] was significant. Unica is often regarded as the pinnacle of modernist type design, arguably the most modern and the most Swiss typeface: one that embodies the idea of a ‘pure medium’, a ‘neutral carrier’. Upon its release … Unica seemed to deliver on what Helvetica promised.
You can also view scans of the original promotional publication for Unica on Flickr (called Haas Unica). The larger headline examples on this one do a good job of showing the differences between Helvetica and Unica.
- Except for the larger code blocks seen in the tutorials and a few of the portfolio pieces. I consider these more in the class of illustrations and therefore treat them completely differently.
- Technically this isn’t true because of one exception. The way the inline code snippets are styled makes them appear larger than the text around them. To accommodate for this optical illusion, I set the font-size to be 17.5px rather than the normal 18px (the font size of everything else). However, the spirit of having everything at the same font size remains. You can see the size differences for yourself:
This is a
code snippetset at the normal size of 18px.
This is a
code snippetoptically adjusted to “18px”.
- I discovered the Super Normal project through the release of a couple different typefaces, Klim Type’s Untitled Sans & Untitled Serif