Making Tofino

The word typeface with small hand written notes labeling different parts of it

A typeface is a tool. If you have a high quality tool, your work is going to be a lot easier than if you have a tool with missing or dull parts. I made Tofino with the goal of it being a well-made tool to help designers, developers, and project managers do their job better and easier.

If you are someone who chooses and uses typefaces, I’d love to share some of what I learned about what makes a typeface a useful tool.

And, if you are new to designing typefaces and don’t know where to start, the following will give you an idea of what type designers are thinking about when they are deciding what features to include.

[Edit, October 2020: I no longer use the terminology of a typeface being a “tool” and I now cringe at this entire first section. I agree with Kris Sowersby at Klim that a typeface is more like material than a tool (this article came out a few months after I wrote this). But I believed it back then and I did want Tofino to be very functional. The whole process was more about how to make a typeface than the typeface itself, but perhaps that is always true with your first type design experience.]

Where To Start? Research Of Course!

All letters take reference from letters that have come before them. Most type design projects begin either by sifting through old specimen books in search of inspiration, or by exploring a specific aspect of letterforms to create something unique. 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.

An image from the 1922 specimen showing the typeface grotesca ideal

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. Some rules that I followed:

  1. Rounds shapes should be squared but never have flat sides
  2. Proportions should be condensed and create an even texture across letters
  3. Shapes should be as symmetrical as possible
  4. Nice large x-height

In the below example you can see how some of the letters, like the “o”, ended up very similar while other letters like the “a” or the “S” turned out very different when the rules were applied.

side by side comparison of the original grotesca ideal and the adjustments made in Tofino

The above set of rules were in addition to the common drawing practices of type designers and lettering artists. Many of these involve some kind of optical compensation so that letters look the same weight and height as their neighbouring letters. These rules can be found in books about drawing letters. Karen Cheng’s Designing Type and Tim Ahrens & Shoko Mugikura’s Size-Specific Adjustments To Type Designs were valuable resources for this information.

While working on the letterforms I began to define the concept for Tofino as “West Coast Swiss.” I came up with the term to try to describe a combination of “Swiss style” typography with a little West Coast chill. The Swiss style was very uptight and emphasized cleanness, readability, and objectivity, which was great for a foundation but I wanted to take it a little further and add some personality.

Design For Display

One of the challenges when designing letters is that type should be designed with either display use or smaller text use in mind. Type can be drawn for either quite well, but can’t usually achieve both with one set of drawings and spacing.

Current information style trends drove the decision to design Tofino for display use. Since my primary focus was to make Tofino look good digitally, I looked at how text was being used on websites. Most blocks of text on modern websites are short and displayed at larger sizes (16px and up). Most of the rules in the above section were created with this in mind.

An example of Tofino being used in a mock up for a feature section of a website

The spacing for Tofino was very much influenced by this decision because text in larger sizes usually has tighter spacing. As a type designer, you want people to be using your carefully crafted defaults as much as possible because you have made lots of small optical adjustments to things like spacing and kerning to make them look balanced and “correct”. Getting the computer to increase or decrease the spacing between letters doesn’t usually work as well.

The spacing for Tofino is based on ideal spacing for type around 24px, which keeps it looking pretty balanced for sizes between 16px and 36px. Sizes larger or smaller than that range are uncommon in digital projects, but a little space can be added for text sizes or removed for super large sizes if necessary.

In the latest release of Tofino Pro, I also included some optically adjusted text styles to try an encourage designers to use the styles designed specifically for text use. The main adjustments include more spacing, open counters, and redrawing of a few letters to be more discernible from each other. Below you can see a comparison of Tofino Regular (with no extra space added) and Tofino Text Regular.

Side by side comparison of Tofino and Tofino Text

An Intentional Set of Weights

I love that variable fonts can contain all possible weights within one file but when I began work on Tofino, the format was not viable yet so I had to choose which weights to distribute. I wanted to make sure these covered a wide range of weight, 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? Especially on the web where the amount of styles needs to be kept to a minimum for performance.
  3. Start with Pablo Impallari’s Family stem weights calculator as an initial set of values for the weights.

Once I had these base values to work with I refined them to try and create a set of weights that would create good hierarchy in typesetting. I found the best place to start is with the body text sizes. I worked on adjusting the Regular weight to have a nice texture in a text setting and the Bold weight to work well within that. Then I decided to give an option of a lighter text texture with the Book weight and Medium weight to serve as the bold in this setting.

Book and medium weights next to Regular and bold option

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 a whole page in the Book weight, anything in a larger size would optically appear heavier. But, as in the example below, if the heading is set to Thin, the subheading to Light, and body to Book, we can get a consistent texture down the page and differentiate 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.

Demonstrating the light weights as a set of styles

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

Demonstrating the heavy weights as a set of styles

Condensing And Expanding

The first release of Tofino only contained the Regular width, but expanding the family to include condensed and extended widths gives so many more options for creating interesting hierarchy (which makes it a better tool!).

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 make it so when you switched between Tofino Regular and Tofino Regular Condensed the weight still felt the same. This created a problem in some of the heavier weights that just weren’t possible to make in the more condensed styles. 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.

All of the weights and widths laid out in a chart format

Interpolation

Creating all these styles was made easier by using interpolation. The simplest form of interpolation is drawing two master drawings and then allowing math to calculate all the styles in between (so you get many versions of each letter, but only have to draw each letter twice). There’s a great basic overview over on A List Apart. When I expanded the family I needed four master drawings which complicated the drawing process significantly and required much of the original drawings to be re-drawn in order to work properly. I found that the more master drawings you are working with, the more accurate your drawings need to be.

Language Support

I decided to support as many latin languages as possible. I found Underware’s Latin Plus tools to be especially useful for this. You can dig into each glyph and see in which languages it appears as well as approximately how many people use that language globally. You can also just stick your font file into their validator and see how many languages you are currently supporting and which glyphs you may be missing.

Then, I had to figure out how to draw all of these extra letters and accents! I found this part to be challenging because I’m not familiar with any of the languages I was drawing letters for, so I might not be aware of nuances in each language. More research uncovered that sometimes there are even variations in the same letter from language to language. The good news was that Tofino is pretty tame as a design so there wasn’t a huge risk that I was pushing boundaries of the letters that could make them unreadable in other languages.

I used these references and looked around at lots of other similar, high quality typefaces by people who I thought might know what they are doing more than me.

http://diacritics.typo.cz/index.php?id=20
http://www.urtd.net/x/cod/

David Jonathan Ross also did a fantastic talk on this topic at AtypI this year. He also put up a resource list on his blog.

Open Type Features

It’s nice when things just happen automatically. Open Type features are great for this kind of thing and can be enabled in most design software and in most browsers. In Tofino, there are fractions and case-sensitive punctuation that swap in forms that are nicer-looking and more correct from a typesetting perspective.

a demonstration of opentype features for fractions and all caps punctuation

While computers can generate things in fonts automatically like small caps, superscripts, and subscripts, the result is going to be missing optical adjustments that make them look like they were made to go with the letters around them. Open Type allows you to swap in pre-made versions.

Opentype features superscripts and subscripts as well as small caps

There are also different common figure sets (numbers) that designers use in different situations. Proportional Lining figures are usually default, and you can switch to Proportional Oldstyle if you need them to blend into a block of text. If you need to work with data, Tabular Lining figures are probably a great choice.

numeral sets: Proportional lining, Proportional Oldstyle, tabular lining

Type Design Tools!

The technical workflows and software of type design could be an entire article of its own. So to keep things simple, all my drawing of letters, spacing, and kerning happened in Glyphs. I found the app super easy to use, and the extensive tutorial section on their site definitely got me unstuck many times.

When I talked about interpolation of styles above, that was all happening in Superpolator, so there was a lot of switching between the 2 programs during the design process.

In Conclusion

I did all of these things because as a designer myself, these were the features that I was looking for in a typeface. Many of the digital projects that I had worked on required a lot of the above features and I usually had trouble finding a typeface that had all these features but didn’t cost an arm and a leg. A large part of this project was making a typeface of this quality accessible to designers with smaller projects and smaller budgets. Collaborating with the Lost Type Co-op for this release has helped a lot in achieving this goal. Make sure to check it out at tofino.losttype.com. Tofino was a fabulous adventure, one that I would gladly do all over again. I guess that makes me a type designer.