Understand Variable Fonts with Font Playground
An Interview with Wenting Zhang of Adobe Typekit
Variable fonts can be difficult to understand but Font Playground is here to help. Font Playground creates a dialogue between font makers and users by an intuitive UI. Find out Wenting Zhang’s insights and process about variable fonts and UI in this interview.
Our global type superfamily converges monthly to help one another improve our letterforms over drinks.
Barcelona
Chicago
London
Los Angeles
New York City
Philadelphia
San Francisco
Seattle
Thomas Jockin: Hi Wenting, welcome back to TypeThursday. We spoke with you previously about Type Detail. You have a new project called Font Playground. For those who don’t know, what is Font Playground?
[Font Playground] helps me tremendously as I am working on the next generation of type features in design tools at Adobe.
What is Font Playground?
Wenting Zhang:
Font Playground is a web-based design tool built upon variable fonts technology. It enables users to create design layouts using variable fonts.
Personally, Font playground for me is a testing ground to explore and test variables font features; this helps me tremendously as I am working on the next generation of type features in design tools at Adobe.
For my targeted audience, it is a playground to try out the most cutting edge font technology of the moment and discover new variable fonts and see its potential in their own creative workflow.
Font Playground is a tool made to help popularize variable fonts technology in design industry. Variable Font is a true innovation in typography and design at large. But so far not many design tools support variable fonts. We see a lot of interesting variable font concepts popping up in type design industry, but there are very few tools that allow typographers and designers to test and play with the variable fonts. This created a gap for designers and typographers in this new development. Font Playground is an attempt to fill this gap.
I built a 2-dimensional sliders on Font Playground to enable exploring 2 axis simultaneously.
Designing the UI for Font Playground
TJ: You shared there aren’t many tools to explore variable fonts. When making this tool, what issues did you run into? More specifically, how did you end up at the UI you selected for Font Playground?
WZ: There have been a lot of great exploration on variable fonts UI before Font Playground, such as Andrew Johnson’s article User Interfaces for Variable Fonts. Based upon the past exploration, I started working on Font playground features bits by bits. Initially, I was really focusing on what UI element is best suited for variable fonts’ axes. I built 2-dimensional sliders on Font Playground to enable exploring two axes simultaneously. I think it is the right UI to popularize variable fonts, really put the feature of variable fonts front and center in Font Playground. However, I don’t think it is the right UI for the final design tool.
In order to make variable fonts a new part in designer’s workflow, design toolmakers need to focus more on the user’s workflow, less about the actual UI element we choose. What I mean by that is if the variable font doesn’t fit into designer’s workflow, it really doesn’t matter if we use a slider, or a 2d slider, or a dial, when people aren’t gonna use it. Variable fonts, while being very powerful, inherently it is more complex than regular fonts. Users now have to make more design decisions! They are not choosing from Regular and Bold anymore; They are now choosing a weight generated by a number from 1 to 999, and it is harder. If something is harder to do and the result is not necessarily better then why are they doing it? So the biggest issue I have run into and trying to address now is how to let users enjoy the great benefit of using variable fonts without being scared away initially by its complexity. How do I design a workflow that the extra complexity of variable fonts is either hidden or presented at the right moment at the right place where it is not a bad thing but a great feature?
Only when more variable fonts with different axes are designed, used, tested and refined, we will know what axes make more sense to be the standard ones.
Understanding the Variable in Variable Fonts
TJ: That is an excellent summary of the problem with using variable fonts. You shared tool markers need to focus more on the user workflow. To design the workflow with the needed complexity at the right moment and place. But it would seem like Font Playground is a good testing ground to help designers get a grasp how variable fonts work. Especially for variable fonts with unique variables like Cheee from OHno Type Co compared to the more standardized variables with width or weight. How did you approach dealing with variable fonts with unique variables?
WZ: Great question! When variable fonts launched at Atypl in 2016, five standard axes were defined at the time but it was always made clear that standard axes are something we define together continuously as an industry, see John Hudson’s comments on that here. The standard makers intended this to be an open dialogue, and this is so much better than a top-down approach. Only when more variable fonts with different axes are designed, used, tested and refined, we can know what other axes make more sense to be included in the standard ones.
By making Font Playground, I learned a lot more in-depth about these standard axes. For example, the confusion of ital and slnt: a lot of variable fonts use ital axis for something that should have been slnt, and because of this confusion Font Playground need to have some hard-coded logic to deal with it. So this is exactly what should happen, we experiment, we learn and now we should make adjustments. Some custom axes should be considered to become standard axes, such as x-height, ascender, descender, serif. Making these standard axes have a great benefit: help design tools to be smarter dealing with these axes. Font Playground has an example of directly manipulating x-height of the font “Dunbar”, very intuitive to use, but so far it is a hard-coded feature because x-height is not a standard axis. If there comes a new font with x-height axis, Font Playground won’t be able to handle it the same way automatically.
With Font playground, we are learning more and more about each unique axis that type designers created. It helps facilitate conversations about the standards of variable fonts. I have a lot of ideas!
TJ: Dialogue between the set variables and how they interact with UI is a great point. Dunbar’s x-height variation is a great example. I notice on Font Playground, there is a segment called “Code.” Could you share what that function is and why you added it to Font Playground?
Modern design tools should bridge the gap between the design and design’s final output.
Understanding Code with Visuals
WZ: Absolutely happy to talk about the Code feature! In Font Playground, there are Design mode and Code mode, users can switch between them at any time by clicking the tabs on the middle top of the UI. Design mode is similar to Photoshop or Illustrator, where you move text layers around, change their font size and variable options. When you are happy about your design, you can switch to Code mode and export the design to HTML/CSS code. You can either export the entire design and open it as a website in CodePen, which is a code playground where you can make further adjustments to its code, or click to select each code blocks and copy them. Support of variable fonts on the web recently reached all the major browsers: Edge, Chrome, Safari, and Firefox now all support variable fonts, see here. Right now it is the perfect time to try out variable fonts on your website, and Font Playground is a great helper for that.
In the future, I plan to build more features to export design work in Font Playground to other surfaces such as Illustrator. An animation feature is also in the making to help users create animation using variable fonts easily and export it to HTML/CSS as well.
TJ: In addition to having font makers connect with users, it seems like Font Playground also exists to help bridge the gap between the visual and code. Likewise for the planned inclusion of animation! I know personally I have a hard time grasping the code side and need visual cues to understand what is happening. Is that a fair summary?
WZ: Exactly! Modern design tools should bridge the gap between the design and design’s final output. Our design work doesn’t have any value or impact to the real world until it reaches one of the outputs. Print design is a physical output, and our design tools have been great on minimalizing the difference between print design and its final product. We have built features like color profile, point system, etc to best integrate with printers. Similarly, web is a digital output that is even more popular right now. Our design tool should be thinking about how to deal with this rising output more efficiently. The less gap there is, the more fidelity of our design can be presented in the final output, and also, less pain and communication problems.
In the old days, there are typesetters, printers and many other specialties standing between the graphic designer and the final output; that process is so painful and designer can’t fully control how their work will look in the end. Currently, I think we are experiencing the same pain with digital design. New developments on design tooling should and will make this pain go away.
Where You Can Learn More about Variable Fonts
TJ: These are all excellent points. Where can people learn more about variable fonts and making tools to visualize variable fonts? You shared a few already, but you may have more.
WZ: Typekit Blog has covered variable fonts in various topics. Nick Sherman’s v-fonts.com and Laurence Penney’s axis-praxis.org are great resource websites for learning about variable fonts. Roel Nieskens’s Wakamaifondue.com is a very helpful tool.
Follow pioneer type designerss’ work like David Jonathan Ross, CJ Dunn, James T. Edmondson, The Black Foundry, Underware Foundry and many others who are making a lot of creative variable fonts. Jason Pamental has great talks, articles, and workshops about using variable fonts. Andrew Johnson has done experiments of variable fonts in VR/AR which is very unique.
Last but not the least, your local Type Thursday events are great place to learn about the new font technology and development.
TJ: Awwww thank you for the plug for TypeThursday! Wenting, it’s a pleasure to have you join us at TypeThursday. Thank you so much for your time.
WZ: My pleasure!
We’ll help you dot your i’s and cross your t’s
TypeThursday attendees love letterforms. Big-time. This means you’ll get detailed advice, delivered with care by fellow creators who know how much time goes into crafting crisp characters. Your work will emerge refined … no dots left behind. Submit your work to a TypeThursday near you.
Love this series? Sign up for TypeThursday’s mailing list to be the first to know when the next installment goes live.
Was this article interesting to you? Give us a clap below.
