Typographic Code Collection

#Code #html/css #Motion

This project was developed within the course »Digitale Typografie Werkstatt« and explored the creative potential of typography through code-based design in html and css. Starting from an investigation of typographic forms in urban space, the course focused on developing a collective compendium of animated and static text layouts.

As a group research project, we experimented with the visual possibilities of variable fonts and animated type, examining how movement and modularity can shape typographic systems. Each contribution was realized both digitally and physically — selected works were featured on the university platform »we.type« and in a printed edition produced in the campus workshop.

The course began with a typographic field study in the urban environment, followed by a hands-on experiments with html and css. The project was divided into two parts:

»Basics« focused on fundamental layout techniques with type (e.g. letter spacing, text decoration), while »Playground« encouraged experimental typographic compositions using animations and transitions. Each student contributed static and dynamic code examples, which were collaboratively refined and documented for publication.

As part of a two-person team, I also developed a prototype for extending the we.type code section (implementation in existing website). Our concept included new filter options, code previews and a live-editing function to enhance interactivity and usability.

html / css, Figma

University of Applied Sciences Potsdam (2023/24)
Team: Leonidas Bothmer (Figma Webdesign),
whole class (Code Compendium)
Mentor: Felix Walser

FLICKER
ZOOM
FOCUS
ELEVATE
ROTATE
SWIPE

FLICKER

FOCUS

ROTATE

ZOOM

ELEVATE

SWIPE

Scroll to Top