Tofino Typeface Origins: How To Go From Idea To Functional Font

I have often referred to Tofino as my “playground” typeface. It’s the first typeface I ever started working on and has become the space where I can try out new type design ideas and skills.

I began working on Tofino in 2014 and it's been a long process of improving and growing this type family into what it is today. You can visit the changelog for a more detailed list of how it's changed and grown.

Sifting Through Old Specimens

I spent a week in Tofino in the middle of November 2014. For most of my stay I was curled up in front of the cozy glow of my computer screen, earl grey tea in hand. One of the reasons for the trip was to take some time away from my interaction design day job to work on the typeface I’d been thinking about starting for months.

Tofino’s letters were inspired by a typeface called Grotesca Ideal. I found it in an old 1922 specimen from Richard Gans Fundicion Tipographica, a type foundry in Madrid that mostly imported typefaces for the Spanish market. The actual design seems to have originated in Germany from a foundry called Wagner & Schmidt who distributed the design around Europe under many different names.

The specimen itself was using Grotesca Ideal as the small descriptive labeling text. It caught my eye because it was already proving itself well at small sizes and I thought that the slightly squared, condensed shapes would make a great workhorse typeface that would translate well to a screen environment.

The shapes quickly started to diverge from their inspiration as I normalized all the weird details and created more consistency in the design, which taken too far, can suppress the features that makes the shapes unique. Finding a balance between cleaning it up and keeping it characterful was one of the toughest parts of making Tofino—I wanted Tofino to be a team player that didn’t show off too much, but still did everything with just enough flare.

When designing the shapes of the letters, it’s helpful to have some goals, or rules to follow. The main purpose of referencing a historical typeface was to help me define these rules for my own drawings. There were some aspects of the historical reference that I wanted to keep and other things I wanted to revise.

  1. Rounds shapes should be slightly squared but never have flat sides
  2. Proportions should be condensed and create an even texture across letters
  3. Where letter shapes join, they should collide rather than blend
  4. Large x-height for readability
  5. Terminals should end horizontally

Letters For Display Or Text

Some of the decisions I made about the rules for my letter shapes pushed the design closer toward a Neo-Grotesque like Helvetica, which typically performs better at display sizes. I made a conscious decision to create Tofino for display use, especially because many digital use cases of the time involved small amounts of text at larger sizes. This had a large influence on the spacing of Tofino resulting in it looking best at sizes between 16px-24px.

But what about those text paragraphs, what do we use there!? In 2017, I added a set of styles specifically designed for text. The main adjustments included more spacing, open counters, and redrawing a few letters to be more discernible from each other.

An Intentional Set Of Weights

I love that variable fonts can contain all possible weights within one file but even with that freedom, type designers need to define the weights to distribute as individual files or mark as defined instances in the variable font. In Tofino, I wanted to make sure these covered a wide range of weights, but would each remain useful. The process for picking looked a little like this:

  1. Figure out the lightest and heaviest possible weights for the letterforms.
  2. Think about how many weights are useful? How many do people actually need?
  3. Start with Pablo Impallari’s Family stem weights calculator as an initial set of values for the weights.

For the lighter weights I wanted to make a system that would allow for a page with a consistent texture even when the size of the text changed. For example, if we set paragraphs in the Light Text weight, anything in a larger size would appear heavier if also set in the Light Text weight. But if the heading is set to Thin and the subheading to Light, we can get a consistent texture down the page and create hierarchy with size alone. This is a nice option of minimal, subtle hierarchy that I was looking for in my own work but had trouble finding in another typeface.

The heavier weights follow a more traditional system of hierarchy created by both size and weight changes. They were largely based on Impallari’s stem calculator with minimal adjustment to get a good range in the heavier values.

Condensing and Expanding

The first release of Tofino in 2016 only contained the regular width, but expanding the family to include condensed and extended widths provides more options for creating interesting hierarchy in design work and was completed a year later in 2017.

Similar to when I chose the weights, I first found the extremes of how condensed or extended I could push the letterforms and chose the widths based on those. I wanted to create the experience that when switching between Tofino Regular and Tofino Regular Condensed the weight still felt the same. This created a problem in some of the heavier weights where it just wasn’t possible to create this consistency. As letters become more condensed, they have less space for counter-shapes and you can’t draw them to be as bold, so I had to leave out some of the heavier weights in the more condensed styles.

Always Updating

The majority of the typeface was completed in the months after my son was born in August 2015. Having a new baby around leaves you with a surprising amount of time that was previously filled by work—newborns spend an awful lot of time sleeping and eating. I often found myself lying on the couch with a tiny sleeping human lying on my chest. When I wasn’t also sleeping, there were two choices to fill my time, binge-watch Netflix, or key-bind the shift and command button to my mouse and work on my typeface with one hand.

I actually felt like designing type quite often (although much binge-watching happened as well 😝), I think it made me feel more like myself after going through the big personal changes that motherhood brings. I also made time for weekly meetings with other type designers in Vancouver, and Tofino really started to take shape.

Since 2016 Tofino has expanded from a simple 8 weight typeface to a typeface with 74 styles across four widths, optical styles, and italics. But the styles haven’t been the only thing changing—it was made into a set of two variable fonts to take advantage of technological changes and has steadily increased the language support to over 200 Latin-based languages. Tofino will likely continue to change and be my “playground” font where I try out new ideas and skills—make sure you check out the changelog to see how it continues to change and grow.


Updated on October 9, 2024 to blend it with a similar blog post and correct some minor details and broken links.

Copyright © Alanna Munro All Rights Reserved