Permament

Work in Process

Experimental

Playground

Learn More

Project

GeneTypo

GeneTypo Project

GeneTypo (it stands for Generative Typographies) is a personal project I started in 2018. It basically consists of a collection of experimental generative typographies created through creative coding and computational creativity. 

The aim of the project was to explore different computational algorithms and apply them to a concrete concept or area. I’m familiar with design and animation, so I decided to exit from my comfort zone and move fearlessly to the world of typography.

Over these years I explored and implemented different algorithms to automatically (with no human intervention) design, mutate, animate and sometimes even destroy a typeface.

Toni Mitjanit

GENETYPO

WORKFLOW

Input

Process

Output

INPUT

The designer can provide different inputs to the generative algorithm:

  • A font file. TTF (True Type Format) or OTF (Open Type Format) file formats are accepted.
  • A text. A list of characters, word, symbols or dingbats to be generated.
  • Text style properties: size, rotation, alignment, style (bold, italics), kerning, ...
  • Additional data: to be used in the font extraction process or in the particular generative algorithm to be explored.
    • Animations parameters.
    • Color palettes to be used.
    • Behaviour rules.

PROCESS

The generative algorithm follows different steps:

  • Basic Skeleton Creation: First of all, it extracts the data text information from the input provided by the designer, and it sets the basic skeleton that will be the starting point of the generative process.
  • Arrangement: the basic skeleton is used to set the initial 2D or 3D arrangement (location, size and rotation) of any item to be generated through or used by the generative process.
  • Styling: All the visual items are styled according the data or rules provided by the designer.
  • Appereance: All the visual items can change their initial arrangement and styling depending on the data  provided by the designer, the inherent rules or behaviour of the generative process, or by using randomness or any kind of user interaction.

OUTPUT

The output format can be very varied:

  • A bitmap image file (JPG, PNG, TIFF): corresponding to the raster visual output of the generative algorithm acording to the input parameters.
  • A video file (MOV): corresponding to the recording of several consecutives frames of the generative process. Very usefull to perceive the emergent behaviour produced by some generative algorithm or when the designer provides some kind of animation parameters to the process.
  • A vectorial image file (SVG, PDF): corresponding to the vectorial visual output of the generative algorithm acording to the input parameters.
  • Other kind of output: variation of arrangement or styling properties can be exported to be used in STL files to print a 3D object.

Connect the Dots

The same way we learn to write alphabet symbols in our childhood by connecting dots and strokes, GENETYPO algorithmic system uses those dots as the basic skeleton to start the generative process.

Calligraphy book

Inspiration

The basic process is inspired by the way we learn calligraphy in the childhood, by connecting dots and strokes.

Data

Different data can be provided to the system as a parametric input, and consequently generating a different output.

Design

Color, shape, form, composition and many other design elements are involved in the generative process.

Process

Outputs are the result of an emergent and iterative process where the next state is depending in the previous ones.

”

From now on, I'll connect the dots my own way.

Bill WattersonAmerican - Cartoonist

Basic Skeleton

Settings

Font File Input

By selecting a different font file and extraction parameters we can get a different skeleton for the same typographic symbol. The next images illustrate how to get the basic skeleton of a capital S letter from different typefaces.

Font

FreeSans.ttf

Font

Subway-Bold.ttf

Font

Basica.ttf

Font

Cubic.ttf

Font

Supreme.ttf

Font

Qubix.ttf

Text Style

Obviously we get a different skeleton for the same typographic symbol when different scale, rotation or style is applied.

The first group of images illustrate how a capital G letter with different scale or size produce a different basic skeleton.

The second group of images illustrate how a capital X letter with different rotation angle produce a different basic skeleton.

The third group of images illustrate how a capital C letter with different style (normal, bold, italic, oblique) produce a different basic skeleton.

Size

12 px

Size

24 px

Size

48 px

Rotation

0 degrees

Rotation

15 degrees

Rotation

30 degrees

Style

Normal

Style

Italic

Style

Oblique

Extraction Settings

By selecting different extraction parameters we can get a different skeleton for the same typographic symbol. The method of extraction and the number of dots to be extracted from the original typographic symbol are the two main parameters in the extraction process. Basically, the more dots we request the more precise and defined is the basic skeleton.

The first group of images illustrate how a capital V letter with different extraction method (uniform length, adaptative, uniform step) produce a different basic skeleton.

The second group of images illustrate how a capital K letter with different distance between points (25, 50 & 100) produce a different basic skeleton.

Method

Uniform Length

Method

Adaptative

Method

Uniform Step

Distance

25

Distance

50

Distance

100

Appereance

Visual Items

Geometries

Once we have the basic skeleton, we can use those dots to initially arrange the visual elements: circles, lines, or any kind of polygon.

Geometry

Circle

Geometry

Line

Geometry

Triangle

Geometry

Quad

Geometry

Hexagon

Geometry

Cross