Transfont

Interactive Design

transfont.com

Transfont project is a web-based font design project that uses motion tracking technology to create a personalized font. Users can transform the typeface in real-time using their body movements, resulting in a font design that reflects their unique creativity and individuality. Users can then download and use the font in their own projects. The goal of the project is to connect font design directly to the person creating it and make it more personalized.

Project Overview

Role

Graphic Designer, Developer

Duration

Apr.2020 – Dec.2020

Goal

Connect font design directly to the person

Target audience

Everyone who wants to have their own font

How it designed?

Transfont strengthens the connection between the user and the font by directly reflecting their unique body movements as the input source. This creates a personalized and dynamic font design in which each element is directly connected to the user's movements.

Input sources from the human

Voice

Body motion

Facial expression

Hand motion

Elements of the font

– Font width
– Stroke weight
– Arc
– Middle height
– Overshoot
– Horiaontal weight
– Serif height
– Serif weight
– Descender length

User flow

User Interface

How it works?

Transfont uses a webcam to recognize the user's body movements and reflects them on each element of the font in real-time. For remote control, simple voice recognition is supported. Alternative options are available for users who do not have access to a webcam or microphone.

How to use

1

  • Prepare a web camera and microphone.
  • Allow browsers to use web camera and microphone.

2

  • Step back until see your whole body.

3

  • Speak on microphone to see an example text.

4

  • Move your body and design the font.
  • Use keywords for additional controls.

Interaction

Width

The distance between the elbows.

Weight

The distance between the feet.

Arc

Angle of the arm.

Middle Height

The height of the shoulder.

Horizontal Weight

The height of the hand.