Wonky, goofy, playful, elegant and a workhorse: Meet a new breed of “Old Style” typeface

In 2018, Google Fonts commissioned Flavia Zimbardi and Phaedra Charles of Undercase Type to make a new display typeface that would demonstrate the power and promise of variable fonts with a sense of humor.

Their solution to this challenge is inspired by the early 20th century typefaces such as Windsor, Souvenir, and the Cooper Series.

“Fraunces probably leans a little more (pun intended) towards the mannerism in Windsor than any of the others, but they all have some qualities common with each other. Those typefaces were meant to evoke a hand-drawn quality more appropriate for display advertising. The leaning ‘n’ in Windsor is a very distinctive characteristic of this style and is probably the most direct comparison. Fraunces does something unique by creating a design space that incorporates both heavy inky qualities, as well as thinner, more refined and delicate qualities seen in the lighter weights of Windsor. The italic pairing for Fraunces is also very distinct and draws influences from Cooper Nouveau, which blends Art Nouveau influences,” said Phaedra Charles.

Using variable font technology gives more flexibility; “Fraunces embraces the new variable font technology with four axes–softness, weight, wonk, and optical size–making its use much more versatile and customizable than what any typeface released in the 1970’s.”

A typeface with personality comes with challenges

Embracing the new technology offered by variable fonts is both exciting and full of new learning opportunities. The three benefits of variable fonts are to compress font families into one or two small files, allow users to express themselves by customizing the typeface within ranges defined by the font designer, and to enable a new level of finesse with automatic adjustments like optical size. Fraunces is especially valuable for graphic designers because it offers all three benefits. However, it was not easy to create such an extensive and capable variable font.

Designing a font with a multi-axis approach is extremely challenging. Most fonts I had designed up to this point had a maximum of maybe 2-3 master drawings. For Fraunces, each style (Regular or Italic) required 8 masters. Synchronizing characteristics across this many was very difficult, and a new challenge. Because this is such a new technology, it was difficult to troubleshoot certain problems. Additionally, certain problems were just inherent to the format, and may not have resolution for years down the road. Accepting this transitional, unfinished quality was difficult to work with.

“Damien Correll, then a senior visual design lead for the Google Design team, was a key contributor to Google’s feedback on this typeface design throughout 2019,” said Dave Crossland, the type director for the Google Fonts team. “He aimed to publish a variable font that had warmth and a sense of humor. I think that was a great call as a lot of variable fonts embed the cold rationality of the underlying linear interpolation technology into their visual forms. There are a lot of flat sided shapes out there. But Undercase Type didn’t shy away from the challenge and have pushed the boundaries of what is possible to interpolate smoothly.”

Global reach

Fraunces is available in extended Latin and supports a wide range of languages from Albanian to Zulu.

One country’s use of Fraunces is of particular interest to Zimbardi, a native of Rio de Janeiro in Brazil.

“In Brazil, people are excited to see other Brazilian designers releasing their work. Fraunces has been used like crazy in Brazil. I saw it on a television campaign on a major TV channel in Brazil. Due to the economy and the high cost of buying expensive fonts from abroad, Brazilians are happy to use an open source font made by a Brazilian. Google Fonts are very popular in Brazil,” explained Zimbardi.

Just like the Fraunces font is creative and expressive, and came to life despite the challenges of variable font technology, the type designers had their own learning curves with the field.

Both Charles and Zimbardi are left-handed. Even though they studied type design, most classes are taught by right handed people for other right-handed people—and without explanations of how left-handed people can best draw or write. They had to come up with how to copy what their right-handed instructors were doing with their other hand. Both of these type designers had to learn to be creative. “Being a lefty will only make you figure out new ways of doing stuff, not [be] an impediment,” explained Zimbardi.

Fraunces is available on Google Fonts.

Go to the Fraunces site to see how text changes along the four axes (softness, weight, wonk, and optical size).

Phaedra Charles is a graphic designer, lettering artist, and type designer. From 2011-2014, she was Senior Designer at Louise Fili Ltd, and from 2015–2019 was a partner at Charles&Thorn, a boutique typography and illustration studio. In 2014, she was part of the class of Young Guns 12. She has taught at the School of Visual Arts in New York City, is a graduate of the Type@Cooper Extended Program at the Cooper Union, and has served as Communication Judge for the Type Director’s Club 2017 Annual. Currently, she runs Undercase Type, and is a Brand Designer for Gander.

Flavia Zimbardi is an independent typeface designer and visual artist born in Rio de Janeiro, Brazil. She is a graduate of the Type@Cooper Extended Program at Cooper Union (New York) and often collaborates with renowned foundries such as Commercial Type, Frere-Jones, Adobe Fonts, and Google Fonts. Zimbardi was the first Brazilian woman to have a typeface awarded by the Type Directors Club in 2018. From 2005 to 2013, she worked for some leading Brazilian magazines. Her work was recognized by the 9th, 10th & 12th Brazilian Graphic Design Biennials. She served as the editorial design judge for the Biennials in 2017 & 2019. Flavia also served as Graphic Design judge for the Brazil Design Award in 2020. Learn more: flaviazim.com.

Resources to learn about variable fonts Google Fonts Knowledge Getting the Most out of Variable Fonts on Google Fonts

Videos Variable Fonts - Supercharged Typography and variable fonts - Designing in the Browser What are Variable Fonts?