VF Interface
User Interface
Interaction
VF Interface is an alternative way to interact with variable fonts, making the typographic interaction more intuitive.
*Amstelvar by David Berlow (https://v-fonts.com/fonts/amstelvar)
The default interface for the variable fonts has been sliders: drag left to the minimum value and drag right to the maximum value. VF Interface is the study of a new typographic interaction for variable fonts. For this prototype, I have tested it with the typeface: Amstelvar, which is one of the variable fonts known for having the most number of design attributes.
*Left - Minimum width. Right - Maximum width.
Comparing Amstelvar's weight variants, it is not the width of the letter that only changes. If looked closely, we could see that the grid system behind the letter is also influenced by the change, which I wasn't mindful about since every typeface doesn't show the grid structure when we are typing.
 
After discovering that the grid system had a potential to be used as an alternative interface to sliders, I started to set the grid structure for the Amstelvar typeface.
 
Allowing the grid to be flexible and draggable, a user can adjust variable fonts by interacting with the grid system to find the proper typeset. The benefits of this interface are that it gives users a better sense of how the letter is structured as well as how one design attribute can affect one another.
 
To avoid the confusion over different grid attributes, VF Interface highlights the dedicated grids of the selected letter.
 
The user can view the changes in the values of design attributes to record as one finds the proper typeset.
 
Just like the way we zoom in to see any text bigger, users can easily increase or decrease the value of the weight with pinching action.
*Typeface - Soul Crafts by Jean Wojciechowski
Users can adjust the degree of italics by directly rotating the letter.
*Concept applied demo
 
I shared the prototype of VF Interface. If you're viewing this with a desktop, click here to try the prototype.