A Typography Course Based On Computer Programming

Dae In Chung, Maryland Institute College of Art

Jiwon Lee, Kookmin University, South Korea


Two Courses

Type+Media, 2015

DesignTech Workshop, 2016

Explore what Korean typography could be in the digital age, where screen, online communication, animation and interaction are considered common-sense.

Typography & Coding

Working with systems and rules that create letterforms.

Working with variables and their range.

Ekstasy Type Club by Dae In Chung

Mapping data to letterform

  • distance
  • temperature
  • time of the day
  • nuance
  • emotion
  • and more...

Categorize sounds into groups based on their strength.

  • Stops: p, b, t, d, k, g, c, q, x - 5 points
  • Fricatives: f, v, s, z, h, c, x - 4 points
  • Affricates / Nasals / Lateral: j, m, n, l - 3 points
  • Approximant: w, r, y - 2 points
  • Vowels: a, e, i, o, u - 1 point
  • word score = total score / number of letters

User Aspect Design by Jiwon Lee

User Aspect Design by Jiwon Lee

Maluma and Takete experiment by Wolfgang Köhler

iOS 10 Messages App

Adobe Max Project Faces


Metafont by Donald Knuth (image from Printing Code)

Meta-design is much more difficult than design;
it’s easier to draw something than to explain how to draw it.
— Donald Knuth, The Metafont Book


...we are aware that it is difficult to produce subtle and refined typographical fonts in the classical meaning. nevertheless we believe that there is a undeniable quality in parametric font design and we try to bring it closer to the world of the designers.


Korean written language

Hangul was invented by King Sejong in 1443.

Five basic consonants are designed after speech organs

g, k





Other consonants

Add strokes based on the strength of the sound

Add strokes based on the strength of the sound


Modular Design


Jae Joon Han / 한재준

Time for an exercise!

Think of a turtle at the center of paper.

You will create instructions for it to follow and move.

When the turtle moves, it leaves a trace.

I will give you a shape to draw.

Discuss as a group to decide what instructions/commands to use. Keep the instructions simple - a word and a number for each.

Describe how, not what to draw.

"Draw a big rectangle."

"Draw a lowercase b"

Half the group will give instructions.
The other half will execute them.

    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90

from Mindstorm by Seymour Papert

    REPEAT 4
    FORWARD 100
    RIGHT 90

from Mindstorm by Seymour Papert

    REPEAT 4
    RIGHT 90

from Mindstorm by Seymour Papert

  • Parameterize
  • Function
  • Modularize
  • Iteration

Course 1: Type+Media, 2015

Instuctors: Dae In Chung & Jiwon Lee


  • Fundamentals of programming
  • Systematic way of thinking and working
  • Type that responds to conditions


  • Processing has a large user base and learning resources
  • Course website to help self-learning out of class.
  • Course Topics Overview

    • Conditional Design
    • Drawing with Code
    • Variables & Functions
    • Individual Projects

    Conditional Design

    ...Our work focuses on processes rather than products: things that adapt to their environment, emphasize change and show difference...



    Drawing with Code

    Must have intentions

    Yu Jin Kim / 김유진

    Cheol Jun Lim / 임철준

    Se Yeon Park / 박세연

    Hyolim Sohn / 손효림

    SunAh Hwang / 황선아

    Saebom Lee / 이새봄

    Shinjae Jung / 정신재

    Course 2: DesignTech Workshop

    Instructors: Jiwon Lee & Daegwon Kim


    • Fundamentals of programming
    • Systematic way of thinking and working
    • Type that responds to conditions
    • Practical applications


    Moved from Processing to p5.js. It is similar to Processing. It works on the browser and mobile devices.

    Course Topics Overview

    • Conditional Design
    • Selective topics on programming
    • Individual projects

    Programming fundamentals

    • function — type design
    • coordinates — type setting
    • variable, loop, conditional — animation, interaction
    • automata — Hangul character input

    Taegyoung Kim & Yumi Jung / 김태경 & 정유미

    Jung Min Lee / 이정민

    Things We Learned

    • Designer's perspective
    • Team teaching
    • Design process
    • Communication


    • Programming is hard...
    • One semester is not long enough.
    • Loss of interest; no further opportunity
    • Nobody to ask questions.

    Do designers have to code?

    All artists and designers in the 21st century should have experience programming their own software… If the person is unable to shape the tool they are shaped and moulded by another person’s idea of what the software is and what software can be.”
    — Casey Reas

    Paper.js by Jürg Lehni


    What machines can do and what designers can do

    Netflix thumbnail generating algorithm

    Erik Bernhardsson

    I can build something bigger than what I can imagine...
    The machine is your extension.
    Manfred Mohr

    The Future of Making Things: Generative Design from Autodesk

    Intelligence Amplification

    The distinction between AI and IA is as simple as it is significant. AI makes machines autonomous and detached from humans; IA, in on the other hand, puts humans in control and leverages computing power to amplify our capabilities.

    What is the role of technology in design? What is the role of a designer in technology?

    Thank you.