Creation of TT Interphases

We decided to try to tell you about the creation of a complex font family at independent font foundry. We hope you enjoy our story and discover something interesting and new.

Introduction

Based on the positive experience in creating typefaces such as TT Norms Pro and TT Commons, we once came up with the ambitious idea of trying to create the perfect typeface to work in modern interfaces on most known mobile and web platforms.

Stage 1 — Research

We have thoroughly approached the process. All the most popular typefaces that are commonly used in interfaces were considered, they were all classified, divided into groups and analyzed.

Table with analysis of existing interface fonts
The first internal presentation of the future project
Table with basic interface fonts metrics
The results of the quantitative marketing study

Stage 2 — Drawing the basic face

After confirming all the basic proportions of the font, as well as clarifying all the nuances related to the forms of the font’s characters, we proceeded to draw the main characters of the regular face to test our hypotheses. We have first approached the font in a 5x5 grid of font units. The first face included all the style — forming elements of the font.

Basic characters in the regular style
Test of different shapes of circles
Comparison of the font to its competitors
Basic Latin, basic Cyrillic, and figures

Stage 3 — Drawing all the faces of the basic family

So begins the most interesting and difficult stage of the font family — creating the first working font, further expansion to a font family, writing of OpenType features, creating kerning, as well as numerous tests.

Extended character set
Midline testing
Comments on adding changes to the design
Three anchor weights: thin, regular and black
Simplification of the design of letter Q
Compensation of letter e in black
Working on the thin style
Test of the font in a text array
Lifting up the diacritical marks with a script
The difference between blending and the edited font
The technical specification for the creation of oblique styles
Kerning compensation of Y when followed or preceded by a space
The frac (fractions) feature in use
The case (case sensitive) feature in use
The tnum (tabular lining) feature in use
The zero (slashed zero) feature in use
Table featuring the line spacing metrics in interface fonts
Comparison of the line spacing to competitors
From left to right TT Interphases, IBM Plex, Roboto, SF Display, Sourse Sans, Open Sans

Stage 4 — Creating Icons

In parallel with working on the main font, we think about how to draw a set of icons for it. The first approach is unsuccessful since the task was poorly formulated and insufficiently detailed.

The first attempt to draw icons
The second attempt to draw icons
The second attempt to draw icons (inversion)
Icons for the 3 anchor weights
Unicode value assignment for all icons
100 icons included in the basic styles of TT Interphases

Stage 5 — Creating a monospace family

From the very beginning, we wanted to create a monospace satellite font family for programmers that would complement the main one. We reviewed and analyzed the most popular monospaced fonts that are used to write code. We examined all the nuances and features of this type of fonts, and also consulted with different programmers.

The table with the analysis of existing monospaced fonts
Changes in the shape of some characters between subfamilies
The difference in visual compensators between subfamilies
Additional compensation for monospace characters
Work on compensation and black and white balance
Work on compensation and editing the forms of some letters
Embedding additional characters in the monospaced family
The frac (fractions) feature in use
Monospace font test
Sketches of the monospace oblique
Working on character design
Differences between the upright and italic

Stage 6 — Creating hinting

Hinting is a complex technical process of optimizing the font pattern for some types of rasterizers (screens, browsers, programs). In our company, hinting is a separate technological process that takes a lot of time.

A photo of the real TypeType font hinting code
Some character groups used in font hinting
Amacron character hinting
TT Interphases Mono Regular before hinting
TT Interphases Mono Regular after hinting
Figures and currencies in TT Interphases DemiBold before hinting
Figures and currencies in TT Interphases DemiBold after hinting
TT Interphases ExtraLight before hinting
TT Interphases ExtraLight after hinting
HBar after manual pixel shift in TT Interphases ExtraBold
Glyph “И” before edits and after delta shifts in TT Interphases Medium Italic
Symbol 0x2473 before and after component position correction in TT Interphases ExtraLight
Hinted logo of the TypeType foundry

Stage 7 — Creating variable fonts

First, we open all the styles that will form the basis of our variable font. The optimal number of masters to create a variable font ranges from three to five. To create the TT Interphases Variable, we select four main masters: thin, regular, bold, black.

Work on creating a variable font
Test of the variable font TT Interphases Variable Roman

Conclusion

Thank you for taking the time to read the story of the TT Interphases font family. We tried to tell you in as much detail as possible about the internal kitchen of the type design studio and show you all the stages of creating a complex typeface.

Useful links:

Specimen | Graphic presentation | Try&Buy TT Interphases

Team

A team of eight people worked on the creation of the TT Interphases font family, which included font designers, font engineers, and managers. The full list of project participants:

Read more:

Creation of TT Marxiana

Feedback

If you have any questions or comments, just write to us at commercial@typetype.org and we will be happy to answer them.

Type design studio. TypeType fonts are a killer combination of price, quality and useful features.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store