F.C. Variable

We set a new goal. Literally. We have started a competition in which we will question the interactive potential of our illustrations. See if we can score in another way.

[WHY] In our design process, we often use 3D-software and enjoy the process of manipulating sliders to deform objects and observing their movement. Unfortunately, this interactive element is lost after exporting. We wonder if we can bring this interactive experience to the viewer by adding a form of interaction.

[HOW] Exploring variable fonts might be a helpful way to achieve this goal because they let you have lots of different letter shapes within a single font. If you can create a letter that moves in dynamic ways, it’s likely you can apply the same concept to an illustration, unlocking a bunch of fun options [1][2][3].

[1] Following the same principle as drawing a letter, creating an illustration is easier since you don't need to play by all typographic rules.

[2] To make it variable, set some fixed values—thick or thin, low or high; two contrasts to play around with.

[3] By adding multiple axes, the illustration gains an even more playful character.

Variation Family

A good team is not made up of a loner. You need several options for a proper squad. More goals, more chances to score.

Variable Goal 1.0

[1] Condensed
[2] Rotalic straight
[3] Bold
[4] Foundation
[5] Italic
[6] Rotalic
[7] Billboard
[8] Glide
[9] Serif

Design
Rob & Robin
Released
2024
File format
.woff2
Download

By experimenting with variations, concepts arise naturally. While the initial aim was to create just one variation, we now find ourselves with an entire family.

Playground

Now that our team is a fully functional font, let’s play around and experiment with some interactive inputs.

Italic

  • [1] Cursor
  • [2] Controller
  • [3] Grabber
  • [4] Slider

In this setup, the goal is quite touchy-feely with your cursor. Your mouse's position directly affects how the goal moves. It's almost like it's following you around a bit... sorry about that!

A

Move your cursor

Width

  • [1] Cursor
  • [2] Controller
  • [3] Grabber
  • [4] Slider

The input can also be influenced by the position of a controller. While we have a digital variant, it would be cool to connect it to something in the physical world — imagine sensors, measuring systems, or even an old-fashioned joystick.

A

Change position

Foundation

  • [1] Cursor
  • [2] Controller
  • [3] Grabber
  • [4] Slider

When you grab and drag the object, like stretching chewing gum, you feel a different kind of interaction. Invisible things can suddenly pop up, just like that.

Lift the goal

Condensed

  • [1] Cursor
  • [2] Controller
  • [3] Grabber
  • [4] Slider

Beyond responding to interaction, the illustration can also autonomously undergo changes. You have the freedom to manipulate all variables, while also tweaking the speed. It gives the impression of dancing through these alterations.

A

Change speed and automation


Final Whistle

With all those goals, we think we’ve reached our goal, or at least, made progress. Curious to explore the possibilities that this interactive approach offers at our illustrations.

Thanks for watching,
hope to see you next game!

Credits

Thanks to the Variable Font Course and ABC Dinamo for sharing their knowledge. Explore our (prototype) font with Font Gauntlet. Feel free to reach out with ideas, questions, collaborations, or to discuss a project. Get in touch through info@robenrobin.nl