Your Logo... as a Variable Font?!

by Spencer Charles

C&T_Slider.gif

My first brush with optical sizing of logos occurred very early on in my work as a graphic designer at Louise Fili Ltd. Many of the logos we were working with had been designed for specific applications (with quite a bit of detail), and often we would need to create a simplified or reduced version of the logo that the client could use in very challenging circumstances. One logo in particular for Pearl Oyster Bar contained quite a bit of detail that looked fantastic as a hand-painted sign, but became problematic when it needed to be embroidered on a shirt. Our solution was to create an optically reduced version to be used only in circumstances where the fine line work could not be reproduced.

Pearl Oyster Bar logo design by Louise Fili Ltd.

Pearl Oyster Bar logo design by Louise Fili Ltd.

Our biggest fear was that the client would mistakenly use the optically smaller version in place of the more beautiful, optically larger version we had designed to be used boldly and prominently. Because the restaurant had a fairly narrow range of applications, this concern never became an issue.

 
 

“What if my client’s logo is fairly detailed & they’ll be using it in a lot of applications?”

 
 

If your logo is a simple sans serif, optical sizing may not be a concern for you. But what if your logo has quite a bit of contrast, and maybe just needs a hair of weight added to those thins? Or a lot of details in the letterforms or embellishments, that needs to be reduced as the logo scales? Designing your logo as a Variable Font could allow for some pretty cool opportunities to address these problems. This route is going to take a little more consideration, which means hopefully consulting a typeface designer or letterform specialist… such as myself! :P

For example, let’s look at the Charles&Thorn logo as a case study for why a Variable Font could be a great way to address problems with optical sizing.

Evolution of the Charles&Thorn logo. Top to bottom: 2015, 2017, 2019

Evolution of the Charles&Thorn logo. Top to bottom: 2015, 2017, 2019

Above is a timeline of how our logo has evolved over the last few years. Distinctive characteristics became more defined as we revisited our logo. The contrast increased slightly, making for more clearly defined features. Certain features became exaggerated (such as ball terminal size), and others were reigned in: the diagonals of the a h and n don’t lean quite as much as they used to; construction of letters C a e and s took on a more traditional approach.

Comparisons of some of the changes from the old logo to new logo

Comparisons of some of the changes from the old logo to new logo

Additionally, with this latest iteration of the logo, and its increase in contrast, I became interested in seeing how it would perform at different sizes, which led to creating an optical minimum and optical maximum for the logo.

From Top to Bottom: Optical Max reduced to Min, Optical Min enlarged to Max

From Top to Bottom: Optical Max reduced to Min, Optical Min enlarged to Max

In the above example, you can see that when the optical maximum is reduced to a small size, the thin parts of the letters fall apart. Creating an optical minimum version of the logo—with a decrease in contrast and wider spacing and proportions—allows for something that is sturdy and readable at smaller sizes. When you compare these logos at the same size, the differences become much more clear.

I’ve been working on some projects exploring the use of the new Variable Font specification, and I wondered: what are some of the cool things we could do with this new specification? For one, I could use a slider in Adobe Illustrator and see all the possible instances between the two optical sizes that I had drawn!

C&T_Slider.gif

With the new Variable Font format, certain design programs like Adobe Illustrator are able to visualize control of this format with sliders. The sliders represent axes (plural for axis, not a wood-cutting ax lol) that type designers create to define the design space of the type. Previously, designers were stuck with specific instances of type. With Variable Fonts, the letterforms are fluid and changeable, preserving the integrity of the type designers vision of the type.

Below are two examples of the logo, graded using different areas of the optical axis slider to create different expressions of the logo.

High contrast version of the logo, graded with the higher end of the optical axis.

High contrast version of the logo, graded with the higher end of the optical axis.

Lower contrast version of the logo, graded with lower end of the optical axis.

Lower contrast version of the logo, graded with lower end of the optical axis.

 
 

“That’s neat and everything, but does my brand really need this?”

 
 

You might be asking yourself what the practical application of this would be for your company. Honestly, it might not apply! Depending on the scale of your company, and the specifics of your logo, an optical max and optical min might be completely sufficient—and maybe they’re not even necessary!

However, if your client’s company is larger, has a wider range of uses and applications, and they are willing to go the extra mile for your brand, this Variable Font approach could allow for some really sophisticated typographic solutions.

Let’s say you are a company that has a web and print presence. If your print presence used a typographic palette of higher contrast serif faces, a higher contrast (optically larger) graded version of the logo could fit very nicely with that. Conversely, if your web presence used lower contrast serif typefaces, maybe a lower contrast (optically smaller) graded version of the logo would fit better.

Last but not least, you can make really cool (and super practical/useful) animated GIF’s like this with Variable Fonts:

var_fonts_interpol.gif

If you are inclined to take a stab at building a Variable Font version of your logo on your own, here are some resources that you’ll need to help you along the way:

If this is outside the realm of your expertise or interest to figure out, Charles&Thorn would be happy to help you!

Thanks to Kelly Thorn, Flavia Zimbardi, Frances MacLeod for their feedback/editing, and to my superstar twin brother Stewart Charles for writing this great python script to help with the animated GIF, based on some code found on this Drawbot forum.