Type+Media

A Typography Course Based On Computer Programming

Dae In Chung, Maryland Institute College of Art

Jiwon Lee, Kookmin University, South Korea

http://exp.paperdove.com/aiga-frontier-2016

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

Maluma and Takete experiment by Wolfgang Köhler

iOS 10 Messages App

Adobe Max Project Faces

LAIKA Font

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

Metaflop

...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.
— metaflop.com

Hangul

Korean written language

Hangul was invented by King Sejong in 1443.

Five basic consonants are designed after speech organs

g, k

n

m

s

-ng

Other consonants

Add strokes based on the strength of the sound

Syllable

Modular Design

10,000+

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.

  TO SQUARE
    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90
    FORWARD 100
    RIGHT 90
  END

from Mindstorm by Seymour Papert

  TO SQUARE
    REPEAT 4
    FORWARD 100
    RIGHT 90
  END

from Mindstorm by Seymour Papert

  TO SQUARE:SIZE
    REPEAT 4
    FORWARD :SIZE
    RIGHT 90
  END

from Mindstorm by Seymour Papert

Parameterize
Function
Modularize
Iteration

Course 1: Type+Media, 2015

Instuctors: Dae In Chung & Jiwon Lee

Objectives

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

Tools

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...
— conditionaldesign.org

conditionaldesign.org

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

Objectives

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

Tools

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

By teaching two courses, here are a few things we learned along the way.

1. First, we learned that it was important to teach and approach from a designer's perspective. Making the difficult process of learning code a little more friendly and using the relevant examples for the designers.

2. Team teaching was also quite effective. For T+M, Jiwon was more traditionally trained designer and I was more interested in animation and technology. So, we could balance our opinions and provide different perspectives to students. And for DesignTech workshop, Daegwon is a software engineer, so he was able to provide a better technical assistance.

3. It also gave us a chance to think about our design process. Moving the focus from making individual outcomes to designing a system. There are also many design concepts that programmers use such as modularization and iteration that also help the design process.

4. We also had a chance to think about communication between machine and designer as well as communication between this type of work and the audience.

Challenges

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

We also had many challenges that we do not have all the answers yet.

1. Programming is really hard. Just the thought of the numbers and mathematics was enough to make students overwhelmed and be afraid even before they try it themlselves.

2. One semester was not long enough to cover both typography and coding, especially because we had to start from scratch in teaching coding. Students were left under a lot of pressure and it was hard to plan ahead when they were not sure if they could make it or not.

3. After finishing the semester, I (unofficially) tracked the students from the class to see if they continued to work in the area, and found only a very few were still working with the code. When there is no connection to other courses in the curriculum, it is difficult to keep the interests. Students usually have very tight deadlines, and this way of working, which requires a lot of planning, abstraction and debugging, is not very attractive.

4. I always say to students that Google is your best friend. But, when they are first starting, even knowing how to ask the right questions can be difficult. And when I look around, not a lot of graphic design program has a full-time faculty member who is knowledgible in this intersection, so students do not have a resource they can use in school.

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

Basil.js

What machines can do and what designers can do

Netflix thumbnail generating algorithm

Erik Bernhardsson

In this example, Erik Bernhardsson, a software engineer, collected 50,000 fonts online using a script. Then, he trained the machine with those 50k fonts.

On the left image, he showed the machine all the characters of a font except one, and made it guess by looking at all the other characters. The actual character from a font is on the left, and the one the machine guessed is on the right. whether the machine correctly guessed or not may not be very important, but looking at these shapes may give us new ideas.

On the right image, He gave four As on each corner, and have the machine interpolate the inbetweens.

We could imagine that the machine can be useful in designing a typeface, or at least we can ask it to visualize some possibilities.

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.
— Wired.com

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

Thank you.

http://exp.paperdove.com/aiga-frontier-2016

Type+Media

A Typography Course Based On Computer Programming

Two Courses

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.

Mapping data to letterform

Categorize sounds into groups based on their strength.

Hangul

Korean written language

g, k

n

m

s

-ng

Other consonants

Syllable

Modular Design

10,000+

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.

Course 1: Type+Media, 2015

Instuctors: Dae In Chung & Jiwon Lee

Objectives

Tools

Course Topics Overview

Conditional Design

Drawing with Code

Must have intentions

Course 2: DesignTech Workshop

Instructors: Jiwon Lee & Daegwon Kim

Objectives

Tools

Course Topics Overview

Programming fundamentals

Things We Learned

Challenges

Do designers have to code?

What machines can do and what designers can do

Intelligence Amplification

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

Thank you.

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