Flutter
Variable Font
Type + Code
Flutter is a variation of the existing open-source typeface, Hind. It is inspired by one of my childhood poems called “Butterfly, Butterfly”. With this variable font, I wanted to express a butterfly's fleeting, ephemeral quality—much like my poem. It reflects the illegibility of a child’s writing, the feeling of trying to grasp something before it slips away, and the sense that by the time you reach for it, the word or letter has already moved on. To learn more about my concept and research go here.
Font Development |
Adobe Illustrator, Glyphs
I developed the first stage of Flutter by applying the "pucker and bloat" effect in Illustrator to the open-source typeface Hind, resulting in a more organic and delicate variation. The effect reshaped the letters, giving them a dynamic, transformed form, which I then imported into Glyphs for typesetting and animation.
Coding Process |
HTML, CSS, JavascriptTo bring the visuals to life, I focused on the speed, movement, and lighting of the letters. I keyframe-animated each letter so that as the butterfly takes off from the ground, it flaps faster, and as it lands, the flaps gradually slow down. I also added a subtle text-shadow to each letter to emphasize the height and distance of the flight. Each letter is typeset individually in my code, allowing them to move independently as the user hovers over them.