un.formal: Let Type Talk by yuchenx

un.formal: tell the unfold story from typography

2 / 3

un.formal: tell the unfold story from typography

4 / 5

un.formal: tell the unfold story from typography

6 / 7

un.formal: tell the unfold story from typography

un.formal: Let Type Talk by Yuchen Xie This is a process book to accompany a graduate Thesis Completed in ArtCenter College of Design’s Graduate Graphic Design Program. The research and design process of this thesis was conducted in the Fall of 2020 and Spring of 2021. Any materials not written by myself or of my own making are not mine and the copyright of others. This book is not intended for sale, all materials that are not mine are used as reference and supporting materials, and are attributed as such. All original writings and design are mine. 8 / 9

by Yuchen Xie

un.formal: tell the unfold story from typography

16 22 106 154

220 10 / 11

Introduction un.formal The Brand Typefaces The Website The Installation

Process Explore the Boundaries of Creative Code Installation Development

Research Colophon

un.formal: tell the unfold story from typography

Introduction 12 / 13

un.formal: tell the unfold story from typography

Thesis Synopsis un.formal is a case study of expressing emotion through voice to typography. “Typography is what language looks like.” Typography and letterforms are not only vessels for meaning but also for emotions. A typographic aesthetics shaped by a single race and gender would keep the minorities from being themselves directly. Background As a graphic designer, I suppose that typography cannot be simply summarized as font design. The narrow scope is font development, to complete a typography family that could be used for body or display. Broadly speaking, it is like Wim Crouwel’s font design style, which is based on the grid system, and grid system for layout, custom font, and logotype. During the three years of study at ArtCenter, I pursued a supreme understanding of details. As a result, I decided to start my thesis from the most detailed place in graphic design - typography. I used to think that “it is beautiful as long as its function is served”, but now I believe in using design to capture emotion within the scope of trying while the function is well served. On the other hand, as a multicultural individual, I developed a particular interest in studying the differences and similarities between typefaces. Ultimately, this allowed me to realize that typography is more emotion than meaning. The urge for expression never decays. To further explore the function of typography, we must understand how emotions are expressed first.

14 / 15

Inspiration for this thesis, article from AIGA Eyes on Design

As gender-neutral pronouns become more commonplace in spoken language, they haven’t yet found a secure perch in written text. With the growing embrace of fluid and nonbinary gender identities in Western culture, is it time to introduce a new character on our keyboards? Plenty has been written and debated on the perceived visual gendering of typefaces (big/heavy = masculine, curly/decorative/light = feminine), so let’s focus on the basic building block of written communication: the letterform or glyph. As writer, curator, educator, and designer Ellen Lupton famously said, “Typography is what language looks like.” Language carries culture and typography’s role is vital in shaping culture’s growth. Removing gendered language and characters from written work could be groundbreaking in the way that introducing the personal title Ms. was in the 1970s. (Fun fact: the first issue of Ms. magazine published in 1972 had an article about “de-sexing” the English language.) The new word didn’t get a glyph, but Miss or Mrs. don’t have their own glyphs, either. There was predictable backlash from traditionalists against Ms., but it immediately called attention to gender equality in that it did not disclose a woman’s marital status, as the older titles did. A symbol for a gender-neutral pronoun that means the same thing in any language (in much the same way that standard currency symbols do) would highlight seemingly small things like pronouns that are part of larger social constructs. An unfamiliar character in a block of text has the power to make a reader stop and say, what is that? Why is it there? What does it mean? It’s a visual naming, a claiming of non-binary space. Type designers have already begun exploring how this could function at the level of the individual character. London-based type designer and speaker Marie Boulanger wrote a book titled XX, XY: Sex, Letters and Stereotypes as her 2019 Masters thesis, investigating the link between typeset characters and gender stereotypes. “The way that language is written is now a hotly debated topic in France, with a movement towards inclusive writing,” she says. “In French—a heavily gendered language—there’s a grammatical rule that says ‘Masculine always wins.’ That means that in a group of 1,000 objects where 999 of them are feminine but one is masculine, that entire group is grammatically considered masculine. There’s a real need for gender-neutral glyphs if we collectively decide we’re not OK with having the masculine be the default for everything.” Art director/web designer Beatrice Caciotti designed the typeface Bumpy in response to research focused on the relationship between gender stereotypes and typefaces. She drew Bumpy as a variable font to keep as much distance as possible from the gender binary perspective. Its letterforms are designed to symbolize how human beings react differently to the social pressures and expectations that characterize the space where we live, regardless of gender. “The role of designers is not simply in collaboration with marketing departments, which are mostly and primarily interested in profit,” Caciotti says. “One way to start to change things is to continue to read and study other more theoretical disciplines like sociology and psychology, and to question the interpretations and effects our designs will have. We also must denounce every time something appears to be problematic or stereotypical.” Graphic designer Sarah Gephart, partner at Brooklyn’s mgmt. design, designed a gender-neutral glyph in 2018 as an independent project. Her “hypothetical hack” was a unisex glyph that iOS could suggest every time a user began typing a gendered pronoun. Instead of the binary-enforcing “he” or “she,” the machine could suggest a new symbol representing neither or both.

She used Google Source Sans Pro, an open source font, as a base and programmed it to automatically replace “he” and “she” (and his, her, hers) with her gender-neutral glyph. Pleased with the results, Gephart wrote to Adobe type designer Paul Hunt to make sure he was okay with her use of his font. He liked the idea enough to add the glyph to his latest release of Source Sans as a discretionary ligature. “I got help from Cyrus Highsmith at Occupant Fonts as well as from Paul,” she says. “We emailed back and forth to change and refine the original glyph. Right now you have to choose it, but I like the idea of it being automatic, as in it just inserts itself while someone is typing.” A few years ago, New York-based graphic designer Zach Bokhour developed a theoretical alphabet named Inform to make a point about visual assumptions regarding gender in letterforms; most viewers would say that Inform starts out super-manly and ends up all Barbie. He applauds the concept of introducing a gender-neutral character to our glyph palettes but notes, “Practically speaking, it’s easier to type they/them than to introduce a new glyph because they/them are existing words we’re repurposing.” In other words, it’s easier to recycle something familiar than to ask people to adopt something completely new. Both the # symbol and the @ became associated with new meanings apart from their centuries-old ones as technological advancement created a need; perhaps another existing symbol could step in as a gender-neutral pronoun. Viktor Freeling, a Philadelphia-based freelance graphic designer who uses they/them pronouns, remains unconvinced that a new symbol is necessary. They point out that if the design effort doesn’t come from the gender-neutral community, it will simply be something imposed from the outside. “They/them now stand in for pronouns when you don’t know what someone uses. It’s hard to see the value in making a single glyph that represents all pronouns, like looking for an easy way out,” Freeling says. “I identify with what I have chosen, and I prefer not to have something chosen for me. If my pronouns were reduced down to just a single symbol I wouldn’t be OK with that. I stopped using masculine pronouns because I don’t want to identify as a male, and to suddenly be grouped back in with men would not be great.” While the type world is small, the world of marketing is huge. For designers to shift the gendered language conversation within this gigantic arena, they’ll need the active participation of the agencies behind the brands, as well as the acceptance of consumers and the community. To date, advertising is doing this mostly through imagery, specifically photography. Ads now show gender-neutral and gender-ambiguous people far more often, even in super-conservative product categories like automotive. Why hasn’t type kept pace? “The consumer hasn’t embraced it yet, but it’s not their fault. The way that expectations for type have been fed to them over the past five decades or so has been completely segmented and arbitrary,” Boulanger says. “It’s on designers, considering the relationships we have with agencies and studios, to anticipate that the question will come up. We need to consider that our work says we are aware of how it was done before and that we’re trying to do it differently now.” To an audience already beginning to adopt nonbinary language and ways of being, gender-neutral pronoun glyphs represent a step towards shaking up the status quo. Then again, through common usage, they/them is the most organic and natural progression of language away from gender and towards a more neutral way of writing and speaking. Wherever we land, with repetition comes familiarity and then acceptance, and though progress may be slow, it’s worth re-examining old assumptions as designers, readers, and citizens.

un.formal: tell the unfold story from typography

How Our Aesthetics was Shaped Facial expression, posture, gesture, and voice are commonly used ways of directly expressing emotions. Why is it different when typography is involved? A quote in Tre Seal says, “ When a singular perspective dominates an industry, regardless of any advancements in technology, there can (and has been) only one way of thinking, teaching, and creating. This lack of diversity in terms of race, ethnicity, and gender, has led to a lack of diversity in thought, systems (like education), ideas, and, most importantly, creations”. I believe that when our aesthetic is shaped by one gender, we lack connection to type. Regardless of the purpose for which the font and glyphs are created, they must reflect people’s feelings. The story of the white man in it does not represent the story of all of us. Letterforms are loaded cultural objects—they often reflect the people who made them and the story they want to tell. In order to break through this situation, we need more typography coming from different races and genders. Hence, un.formal is created. Un.formal connects emotion to type directly from the user, and the base type, and it was inspired by the movement and female artists. As a female designer, I designed those 4 typefaces based on modern and historical feminism movements, posters, and fellow female artists. However, my goal is to diversify typographic voices not only gender topics. Keeping creating new typefaces inspired by the topics is one way to diversify typography, but giving the creative tool back to the user will be the ultimate way to solve the problem.

16 / 17

Opportunities for a new typography system Therefore, I came up with an idea connecting voice and typography. In order to articulate this concept, I chose sound as an input variable of typography because I want them to be heard. Sound is an equal and unique way for anyone to convey their emotions directly, whose volume, pitch, and accent are all heartfelt. thought about whether to make “everyone can upload their own handwritten fonts”, but such legibility and aesthetic would be accordingly unpredictable. Therefore, it is necessary to control variables to a certain extent. As a result, the users can adjust the sliding bars via real-time voice input to achieve the visual effect they want given certain fonts. The controlling variables are path simplification, ribbon width, path density, and font size.

More un.formal un.formal will also be applied to an installation of projection mapping on campus, which is the main educational touchpoint of the brand. It is where everyone can learn something new about typefaces, and type history. The installation consists of different sizes of frames of selected classic fonts and their creator’s portraits across various eras, of which the frames are covered by the transparent fabric. The light projects onto the surface, not only creating images on the frame but also leaving the shadows and lights on the floor and wall. The whole installation shows the inheritance and progress of typography so far. The very last frame is about my font and a photo. Nevertheless, the portrait photo of myself is processed by generative design to blur my face, to perform as a symbol for women in my time. Besides, there is also a website for people to play around with Un.formal. There are 5 fonts on the website inspired by hand-written signs in the movements, and for each font, there are four sliding bars for users to adjust, including font size, density, ribbon width, and simplification ratio. For the latter two variables, they can be adjusted via real-time voice input as mentioned previously. The website emphasizes more about participation, experience, and interaction with users. Moreover, the users can output the result of generated fonts to social media if they want.

un.formal: tell the unfold story from typography

Thesis Statement

18 / 19

“Typography is what language looks like.” Typography and letterforms are not only vessels for meaning but also for emotions. A typographic aesthetics shaped by a single race and gender would keep the minorities from being themselves directly.

un.formal: tell the unfold story from typography

un.formal 20 / 21

un.formal: tell the unfold story from typography

Let Type Talk

22 / 23

un.formal: tell the unfold story from typography

Value Attributes

24 / 25

Connecting emotion with typography, and tell the untold story through voice.

un.formal: tell the unfold story from typography

Brand Purpose

26 / 27

The purpose of this brand is to diversify graphic design from the basic of it— typography. The industry, and our aesthetics are dominated by a single race and a single gender. By using the online tool, people could “talk” through their emotion to typography; the installation is another touch point as educational tool with the short history of typography.

un.formal: tell the unfold story from typography

Visual Language

28 / 29

The Visual Language for the un.formal’s brand ranging from Typefaces, color and more.

un.formal: tell the unfold story from typography

Color Primary

Rich Black C 100 M 100 Y 100 K 100 R0G0B0 HEX# 000000

30 / 31

Pale White C0M0Y0K0 R 255 G 255 B 255 HEX# FFFFFF

Secondary

Green Yello C 20 M 1 Y 100 K 0 R 216 G 213 B 74 HEX# D7DC19

Power Red C 5 M 83 Y 67 K 0 R 193 G 39 B 45 HEX# E45251

Voice Purple C 61 M 73 Y 0 K 0 R 138 G 83 B 221 HEX# 8A53DD

Positive Orange C 0 M 26 Y 73 K 0 R 254 G 194 B 95 HEX# FEC25F

un.formal: tell the unfold story from typography

Logo Mark The logo mark will be ever changing like it is influenced by the tone and pitch of the voice

32 / 33

un.formal: tell the unfold story from typography

Logo Type

34 / 35

un.formal: tell the unfold story from typography

Typography Primary

Dia

Diatype is a warm yet sharp grotesque Dia is a sans-serif typeface designed by Florian Schick and Lauri Toikka of German type foundry Schick Toikka. The design was inspired by the “irregular” grotesques of the late nineteenth and early twentieth centuries.

36 / 37

ABCDEFGHI JKLMNOPQR STUVWXYZ abcdefghi jklmnopqr stuvwxyz 1234567890 ! @ # $ %^&* ( )

un.formal: tell the unfold story from typography

Typography Secondary

Juana The extreme contrast between thick and thin A typeface with a contemporary aesthetic, a mix of geometric and organic shapes that give each letter a special and unexpected design. The font, based on Jazmín typeface, features a more developed design while still maintaining the essence of the original version.

38 / 39

ABCDEFGHI JKLMNOPQR STUV WXYZ abcdefghi jklmnopqr stuv wxyz 1234567890 ! @ # $ %^ & * ( )

un.formal: tell the unfold story from typography

Typography Tertiary

Suisse Int’l Mono Monospaced typeface used for information Suisse Int’l Mono is a monospaced typeface designed by Ian Party of Swiss Typefaces. It’s a member of the Suisse superfamily which also includes proportional, serif and humanist versions. The mono cut is available in three weights—thin, regular and bold.

40 / 41

A B CDEF G HI JKLMNOPQR STUVWXYZ a b cd efghi jk l m n o p q r stuv w xyz 1234567890 !@ # $ % ^ &*()

un.formal: tell the unfold story from typography

Typography Fonts specially designed for online creative code type tool

42 / 43

Following are serious of New Fonts Designed for Voice Control Type Tool. Those typefaces were inspired or influenced by different movement, art series, and female artists, that are either underrated or underrepresented. I thought about whether to make “everyone can upload their own handwritten fonts”, but such legibility and aesthetic would be accordingly unpredictable. Therefore, it is necessary to control variables to a certain extent. That’s the reason we need the fonts for type tool.

un.formal: tell the unfold story from typography

New Fonts Designed for Voice Control Type Tool

Evelynus

44 / 45

evelynus abcdefg hijklmn opqrst uvwxyz 01234 56789

The first typeface, Evelynus, was inspired by the signages in Women’s March Movement recently. People are using handwritten sign in the movement to show their emotions. And I want to use typography to capture their emotions.

un.formal: tell the unfold story from typography

46 / 47

Girls have power women’s march event Women’s March is able to organize and mobilize millions of everyday women because Women’s March is built, funded, and led by everyday women.

un.formal: tell the unfold story from typography

New Fonts Designed for Voice Control Type Tool

Sarah

48 / 49

Sarah ABCDEFGHI JKLMNOPQ RSTUVWXYZ abcdefghijk lmnopqrst uvwxyz 0123456789

Sarah is the typeface inspired by the See Red Workshop, follow the name of one of the founder.

un.formal: tell the unfold story from typography

Their story never fade out. See Red Women’s Workshop was set up in 1973 by three former art students who wanted to fight sexism in advertising and the media, domestic violence and sexual inequality in the UK and across the world. 50 / 51

un.formal: tell the unfold story from typography

New Fonts Designed for Voice Control Type Tool

Sheila

52 / 53

sheila abcdefghijk lmnopqrstu vwxyz 0123456789

Sheila Hicks once mused, “I often make a statement about my feelings regarding the world using textiles as my language.” Sheila Hicks: Material Voices honors her unique vision, examining how her visual language has been shaped by memory, place, and space. Drawing on global weaving traditions, the history of painting and sculpture, graphic design, and architecture, among her many sources, Hicks has redefined the role of fiber and thread in art. From monumental architectural interventions to her miniature weavings known as minimes, Hicks’s compositions combine an aptitude for color, line, and texture with her inimitable understanding of architectural space. To better understand Hick’s work, I try to use modular type system to mimec her textile style in font design.

un.formal: tell the unfold story from typography

54 / 55

sheila hicks

weaving as metaphor I often make a statement about my feelings regarding the world using textiles as my language.

un.formal: tell the unfold story from typography

New Fonts Designed for Voice Control Type Tool

MoWA

mowa

abcde

fghijk lmnop qrstu

vwxyz 01234

56789 56 / 57

This flexible unicase font was inspired by the National Museum of Women in the Arts. Female artists are underrated and underrepresented in many ways. The museum is a very important way to promote the exhibition installation as well.

un.formal: tell the unfold story from typography

national

museum of women in the arts champion

women through arts

The first museum in the world

solely dedicated to championing

women through the arts.

58 / 59

un.formal: tell the unfold story from typography

un.formal un.formal

un.formal

un.formal 60 / 61

Let fonts

tell you a

story

behind.

un.formal: tell the unfold story from typography

Website

62 / 63

The website is the platform allow people to interact, talk, and play with the creative coding, express themselves through the typography. Users can download the images, and post them on their own social media.

un.formal: tell the unfold story from typography

64 / 65

un.formal: tell the unfold story from typography

66 / 67

un.formal: tell the unfold story from typography

68 / 69

un.formal: tell the unfold story from typography

70 / 71

un.formal: tell the unfold story from typography

Why Posters? Althogh un.formal brand is completely reliant on interactive creative coding via online platform, posters are typically a rote means of communication, these posters are meant to be plastered around outside spaces, as a promotional piece of the website and exhibition.

72 / 73

un.formal: tell the unfold story from typography

74 / 75

un.formal: tell the unfold story from typography

Installation

76 / 77

The installation of projection mapping is the main educational touch point of the brand. It is where everyone can learn something new about the typefaces, and type history.

un.formal: tell the unfold story from typography

78 / 79

un.formal: tell the unfold story from typography

80 / 81

un.formal: tell the unfold story from typography

82 / 83

There is 4 transparent panels, indicates 4 different time period in the typography design history: • 15-17th century, metal type, black type, Centaur, Garamond • 18-19th century, Sketches, Baskerville, Bodoni, Rockwell • 20th century, Digitizing, Franklin Gothic, Helvetica, Futura • 21th century, showing coding, demostration of generative design The frames are covered by the transparent fabric. The light project onto the surface, not only create images on the frame, but also leave the shadows and lights on the floor and wall. While people interact with the installation, the images and type will change to another time period.

un.formal: tell the unfold story from typography

84 / 85

un.formal: tell the unfold story from typography

86 / 87

un.formal: tell the unfold story from typography

For the early time period, the panel of portrait is showing lithograph in black and white portrait of type designer.

88 / 89

New way of showing posters in project mapping. This is the same design for one of the poster series.

un.formal: tell the unfold story from typography

90 / 91

un.formal: tell the unfold story from typography

92 / 93

un.formal: tell the unfold story from typography

94 / 95

The second scene is showing font design process in different time perioud. The tranditional way of font design is from ideation, research, sketch, to the production of metal or wood type, using anchor points to digital typefaces, and the most recent interactive type design way — creative coding applied to font design.

un.formal: tell the unfold story from typography

96 / 97

un.formal: tell the unfold story from typography

98 / 99

un.formal: tell the unfold story from typography

100 / 101

un.formal: tell the unfold story from typography

102 / 103

un.formal: tell the unfold story from typography

Process 104 / 105

un.formal: tell the unfold story from typography

Explore the Boundaries of Creative Code

106 / 107

Process of visual experiment by using creative code in typography.

un.formal: tell the unfold story from typography

Block Type Zine

108 / 109

The first study of generative typography focused on how human brains recognize letters as forms and shapes. I have been immensely passionate about typography and letter form, and this project grants me a great chance of fulfilling my type-related dreams. My very first experience with a letterpress kit from Blox published by P22 is still enchanting me to pursue further in this area, which inspired me to comply with Processing to complete a shifting project among different flexible modules. During this project, I made a zine of displaying type as processing generated parts. I separated each uppercase letter into 6 parts (2x3) with drawing elements as modules, and then Process would randomly choose from different modules to assemble a letter. The final execution of display type is rather intriguing because every sentence becomes a pattern of shapes, of which a transition pushes me to attempt more about readable patterns.

un.formal: tell the unfold story from typography

I separated each uppercase letter into 6 parts (2x3) with drawing elements as modules, and then Process would randomly choose from different modules to assemble a letter.

110 / 111

import java.util.HashMap; import java.util.List; import java.util.Scanner; HashMap<String, int[][]> rule = new HashMap<String, int[][]>(); // Size of each image int partWidth = 80; int partHeight = 80; // Maximum number of letter per row int maxLetter = 20; // Initial Coordinate int X = 0; int Y = 0; int prevKeyCode = 0; void setup(){ // Canvas Size, this needs to be greater than <maxLetter * 2 * partWidth> size(3200,7200); background(255,255,255,0); int[] a = {19,19,19,19,19,19}; rule.put(“a”, prepareArray(a)); int[][] a_orient = {{1}, {2}, {3}, {4}, {5},{6}}; rule.put(“a_orient”, a_orient); int[] b = {19,19,19,19,19,19}; rule.put(“b”, prepareArray(b)); int[][] b_orient = {{1}, {2}, {3}, {4}, {5},{6}}; rule.put(“b_orient”, b_orient); int[] c = {19,19,19,19,19,19};

}

int[] period = {19,19,19}; rule.put(“period”, prepareArray(period)); int[] space = {1,1,1}; rule.put(“space”, prepareArray(space));

int[][] prepareArray(int[] setup) { int[][] result = new int[setup.length][]; for (int i = 0; i < setup.length; i++) { result[i] = new int[setup[i]]; for (int j = 0; j < setup[i]; j++) { result[i][j] = j + 1; } } return result; } void draw(){ } void generateImage(String alphabet) { int[][] imageFiles = rule.get(alphabet); int[][] imagesOrient = rule.get(alphabet + “_orient”); HashMap<Integer, String> result = new HashMap<Integer, String>(); for (int i = 0; i < imageFiles.length; i++) { if (!result.containsKey(i)) { int[] choices = imageFiles[i]; int index = (int) random(0, choices.length); for (int j = 0; j < imagesOrient.length; j++) { for (int k = 0; k < imagesOrient[j].length; k++) { //println(imagesOrient[j][k] - 1 + “ “ + (i)); if (imagesOrient[j][k] - 1 == i) { for (int h = 0; h < imagesOrient[j].length; h++) { int imagePartIndex = imagesOrient[j][h]; //imagesOrient[j][h] = -1; //println(imagePartIndex + “ “ + index); String filename = alphabet + imagePartIndex + imageFiles[imagePartIndex - 1][index]; result.put(imagePartIndex - 1, filename); } break; } } }

un.formal: tell the unfold story from typography

112 / 113

un.formal: tell the unfold story from typography

114 / 115

un.formal: tell the unfold story from typography

Study of Basic Forms and Shapes in Generative Design

Lines and Circles

116 / 117

Following are serious of study of basic forms and shapes in generative design. The first study using is lines and circles. Use the basic form and shape to create type.

un.formal: tell the unfold story from typography

118 / 119

import controlP5.*; ControlP5 cp5; PImage punchCard; int unitSize = 16; int rectW = unitSize; int rectH = unitSize; int circleW = unitSize; void setup() { size(2400, 800); pixelDensity(displayDensity()); // Load PNG punchCard = loadImage(“for code-02.png”); // Print out punchCard’s width and height println(“Loaded punchCard”); println(“width:”, punchCard.width); println(“height:”, punchCard.height); cp5 = new ControlP5(this); // Linked to variable “rectW” cp5.addSlider(“rectW”) .setPosition(30,30) .setRange(0,100) .setColorCaptionLabel(0) .setCaptionLabel(“Rect W”) .setSize(100, 15); ; // Linked to variable “rectH” cp5.addSlider(“rectH”) .setPosition(230,30) .setRange(0,100) .setColorCaptionLabel(0) .setCaptionLabel(“Rect H”) .setSize(100, 15); ;

}

// Linked to variable “circleW” cp5.addSlider(“circleW”) .setPosition(430,30) .setRange(0,100) .setColorCaptionLabel(0) .setCaptionLabel(“Circle W”) .setSize(100, 15); ;

void draw() { background(0); noStroke(); fill(255); for (int x = 0; x < punchCard.width; x++) { for (int y = 0; y < punchCard.height; y++) { color c = punchCard.get(x, y); push(); translate(140, 150); if (c == color(0, 0, 0)) { rectMode(CENTER); rect(x*unitSize, y*unitSize, rectW, rectH); } else if (c == color(0, 0, 255)) { circle(x*unitSize, y*unitSize, circleW); } pop(); } } }

un.formal: tell the unfold story from typography

120 / 121

un.formal: tell the unfold story from typography

Study of Basic Forms and Shapes in Generative Design

Dots, Triangles, and Squares

122 / 123

Second study of Basic forms and shapes will be in donts, triangles, and squares. Shapes will have some overlapping and it works well with differenct elements.

un.formal: tell the unfold story from typography

124 / 125

PImage img; void setup() { size(2200, 500); pixelDensity(displayDensity());

}

// Higher res source image, still not full res of the sketch img = loadImage(“text-02.png”);

void draw() { noCursor(); float redVal = map(mouseY, 0, width, 200, 200);

}

background(0); noStroke(); fill(100+redVal, 220, 220); blendMode(SCREEN); int gridSize = 10; push(); translate(5, 0); for (int x = 0; x < img.width; x++) { for (int y = 0; y < img.height; y++) { color c = img.get(x, y); float grayScaleValue = blue(c); float circleSize = map(grayScaleValue, 0, 255, 20, 0); circleSize *= map(mouseX, 0, width, 0.1, 1); circle(x*gridSize, y*gridSize, circleSize); } } pop();

un.formal: tell the unfold story from typography

126 / 127

un.formal: tell the unfold story from typography

Study of Basic Forms and Shapes in Generative Design

Generative Abstract Line Tool

128 / 129

This is the main tool used in my thesis. After lots of visual experiements, I finally found the right tool to show people’s emotion. Consider the way we show our emotions— by posture, gesture, facial expression, and voice. Voice is an important part when we speak out. Different pitch and tone will also influence on the emotion expressed, sometimes even different from what we said. Similar to how different type influced the emotion, without the actual words. Based on this type tool, I developed several different application for final thesis deliverables.

un.formal: tell the unfold story from typography

This type tool contain 4 different sliding bar to control the type, and two of them could change to voice control. By using voice control. the type is rather dynamic and pouring out the emotion directly from the speaker. This is the first type tool I created by using p5js instead of Processing. The learning of a new code language is also a chanllenge for me.

130 / 131

}

for (var i = 0; i < letters.length; i++) { letters[i].draw(); } createLetters();

function createLetters() { letters = []; var chars = textTyped.split(“”); var x = 0; var lineBreak = 0; var y = 0; for (var i = 0; i < chars.length; i++) { if (i > 0) { var charsBefore = textTyped.substring(0, i); //x = font.textBounds(charsBefore, 0, 0, fontSize).w; y = lineBreak * fontSize; } if (chars[i] == “@”) { lineBreak++; x = 0; continue; }

}

var newLetter = new Letter(chars[i], x, y); letters.push(newLetter); x += fontSize *0.6;

un.formal: tell the unfold story from typography

132 / 133

un.formal: tell the unfold story from typography

Installation Development

134 / 135

The installation development was start with different actual form-making, to the end of the idea of transparent frames.

un.formal: tell the unfold story from typography

136 / 137

The first step of installation is to explore the limitation of different materials, like fabrics, card board, and test out the readability of generative typography.

un.formal: tell the unfold story from typography

138 / 139

The first form made by card board and form core, with the initial letters, “un”. In this phase, I found that this form could work as an exhibition wall, but the “un” form is not flexible enough to archieve what I am aiming for in this thesis.

un.formal: tell the unfold story from typography

140 / 141

un.formal: tell the unfold story from typography

142 / 143

un.formal: tell the unfold story from typography

144 / 145

Changing ideas from the form. I was thinking about using the frames, and transparent material to compare the materials, and also try to add interactive parts, such as TouchOSC, and Arduino.

un.formal: tell the unfold story from typography

Creating actual size frames in poplar wood sticks, and transparent fabrics.

146 / 147

un.formal: tell the unfold story from typography

148 / 149

Me, setting up the frames in the room.

un.formal: tell the unfold story from typography

150 / 151

un.formal: tell the unfold story from typography

Research 152 / 153

un.formal: tell the unfold story from typography

Feminism Movement

154 / 155

Research Part I

un.formal: tell the unfold story from typography

Learn

from History

the feminist posters of See Red Women’s Workshop Words By Bryony Stone

156 / 157

un.formal: tell the unfold story from typography

See Red Women’s Workshop was set up in 1973 by three former art students who wanted to fight sexism in advertising and the media, domestic violence and sexual inequality in the UK and across the world. The underground collective worked together from a string of squats in Camden Road, South Lambert Road and finally Camberwell to produce bold, powerful silk-screened posters which questioned the role of women in an oppressive world which sought to cage them in domesticity.

158 / 159

East London publisher Four Corners Books has released a paperback of posters by radical feminist art collective See Red Women’s Workshop. See Red Women’s Workshop Feminist Posters 1974-1990 is written by former See Red members, with a foreword by socialist feminist theorist Sheila Rowbotham. See Red Women’s Workshop was set up in 1973 by three former art students who wanted to fight sexism in advertising and the media, domestic violence and sexual inequality in the UK and across the world.

from Southwark Council and the GLC. Over the years, See Red also attracted negative attention from the National Front, who smashed windows and doors, made threatening phone calls, stole, poured ink on machinery and severed phone lines. The workshop closed in 1990: the printing industry had changed, and screen printing has become expensive. The posters were no longer generating enough of an income to maintain the project. As the posters are seen by many for the first time in this new publication,

By 1976 they were producing posters and calendars, and importantly keeping them cheap so that all women could afford them. Their posters were printed by silk screen methods which enabled them to set up almost anywhere— from women’s centres to playgrounds—producing art that spoke to women and their concerns in their environment.

The underground collective the messages shouted by the members of worked together from a string of squats See Red continue to be relevant. in Camden Road, South Lambert Road Printed in 1978, the silkscreen and finally Camberwell to produce bold, poster “Don’t Let Racism Divide Us” is powerful silk-screened posters which reproduced from See Red Women’s questioned the role of women in an Workshop, Four Corners Books’ new oppressive world which sought to cage compendium of the London feminist colthem in domesticity. lective’s posters, 1974–1990. “Ambitiously, Around 45 women joined See Red See Red were not about selling a product during the 27 years it ran, with the color even getting over a party political meslective numbering six women on average. sage,” British socialist feminist theorist Together, they made posters, illustrations, Sheila Rowbotham writes in her foreword, postcards and calendars. Funding and “they were up to something far more comequipment came from poster sales and plex and far more difficult. community donations until support came

un.formal: tell the unfold story from typography

They aimed to convey ideas about a transformed society in which relations of gender, race and class would no longer be marked by inequality and subordination. Those messages, on the posters, ‘So long as women are not free, the people are not free’ and ‘Lesbians are everywhere’ contested the prevailing ‘common sense.’ See Red aimed to be clear and wanted to reorient perspectives. Making those posters appear so simple and self-evident must have been agonizingly hard to accomplish. It is not actually that difficult to perplex with layer upon layer of words; to clarify abstraction with just a few constitutes a rare skill.” Printed in 1978, the silkscreen poster “Don’t Let Racism Divide Us” is reproduced from See Red Women’s Workshop, Four Corners Books’ new compendium of the London feminist collective’s posters, 1974–1990. “Ambitiously, See Red were not about selling a product or even getting over a party political message,” British socialist feminist theorist Sheila Rowbotham writes in her foreword, “they were up to something far more complex and far more difficult. They aimed to convey ideas about a transformed society in which relations of gender, race and class would no longer be marked by inequality and subordination. Those messages, on the posters, ‘So long as women are not free, the people are not free’ and ‘Lesbians are everywhere’ contested the prevailing ‘common sense.’ See Red aimed to be clear and wanted to reorient perspectives. Making those posters

160 / 161

appear so simple and self-evident must have been agonizingly hard to accomplish. It is not actually that difficult to perplex with layer upon layer of words; to clarify abstraction with just a few constitutes a rare skill.” “These were forceful enough to encourage many young women and men to bite the hand that fed them. Our subversive refusal was a profound recoil from a system based on inequality and a culture that confined self-expression and development to an elite. Much was to be crushed amidst a multitude of defeats. However, as a radical historian I have spent a lifetime chasing memories that appear to vanish below the surface, only to resurface in the most surprising ways. I sincerely hope that new hands will pick up these posters, bear them aloft and act upon them. For there is indeed a great deal that needs to be done.” The posters still seem able to speak to different generations, although it indicates, as if we were in any doubt, that the struggle for women’s freedom and equality is far from won.Confronting negative stereotypes, questioning the role of women in society, and promoting women’s self-determination, the power and energy of these images reflect an important and dynamic era of women’s liberation — and have continued relevance for today. The legacy these posters leave behind is arresting, urgent, and inspiring for all who march in their wake.

un.formal: tell the unfold story from typography

Looking through the posters they seem just as relevant today: promoting powerful images of women, calling for protest and opposition to INEQUALITY and INJUSTICE.

162 / 163

un.formal: tell the unfold story from typography

feminism

164 / 165

signage from past to now

un.formal: tell the unfold story from typography

166 / 167

un.formal: tell the unfold story from typography

Nationwide Parade of Abortion-rights Showdowns

Words By Ryan Carter

168 / 169

Squarely focused on the future of “I would rather be home in bed abortion rights in America, thousands frankly, but once again a bunch of people of women marched in demonstrations have decided they think they know what around Southern California on Saturthey’re going to do with my body,” said day, Oct. 2, some of the myriad “sister” Sarah Bradshaw, who was helping to protests staged nationwide in solidarity lead the march that began in Los Angeles’ with the fifth-annual Women’s March in Pershing Square on Saturday morning. Washington D.C. “It’s the same stuff, decade after decade Local protesters joined activists after decade. But now the Supreme Court in at least 600 marches across the nation, has swung and we’re not going to put up aiming to decry a restrictive Texas aborwith it. Our bodies are on the line.” tion law and draw attention to an upcomChants echoed in civic centers ing U.S. Supreme Court decision on across the region, with groups of varying Mississippi’s abortion laws — a case that sizes winding through city streets carrypro choice advocates fear could overturn ing large signs and banners. Roe v. Wade.

un.formal: tell the unfold story from typography

170 / 171

un.formal: tell the unfold story from typography

In Downtown Los Angeles, speakers ranged from elected officials to activists to celebrities. They included county Supervisors Holly Mitchell and Hilda Solis, who joined activist/attorney Gloria Allred, actress Alyssa Milano and journalist/author Maria Shriver who exhorted the huge crowd. Paxton Smith, the Texas student whose valedictorian speech went viral for speaking in opposition to Texas’ abortion law, also appeared. Demonstrations were staged throughout the region, from Orange County to Riverside and the Inland Empire, from the SOuth Bay and Long Beach to Pasadena and the San Gabriel Valley. A march drew about 200 people to the Governor George Deukmejian Courthouse in Long Beach. “It’s 2021 and for men to still be making these choices that effect women negatively is absurd,” said Leticia Gonzales, a Long Beach resident. “This doesn’t just harm the women in those states, it sets a precedent that our bodies are not our own.” After congregating outside the courthouse, the group marched to the city’s Harvey Milk Promenade Park. There, the group exchanged poetry readings and listened to speakers. “I’m a mother and that was my choice to make,” said Corey Rogers, Long Beach. “A young girl shouldn’t be forced to carry a pregnancy she didn’t ask for.”

172 / 173

un.formal: tell the unfold story from typography

174 / 175

un.formal: tell the unfold story from typography

Typography, History, and Font Design Process

176 / 177

Research Part II

un.formal: tell the unfold story from typography

178 / 179

A Short History of Typeface Styles & Type Classifications Typography is a complicated subject to learn, but starting with the history of type styles is a great way to gain an understanding of why there’s so many fonts, and why they look so different! Typefaces are divided up into classifications based on the era or characteristics of their design, which helps narrow down your options when choosing a font for your projects. Being able to identify a typeface style can help you make educated design decisions and choose the best font for your work depending on its use.

The First Font In the middles ages books were hand lettered in the Gothic style that had been developed by scribes, until the invention of the movable type press by Johannes Gutenberg. The first typeface carved by Gutenberg was based on the hand writing style of the time and was used to print the first books in Europe, including the Bible. There’s a whole series of subcategories of Blackletter typefaces each with its own characteristics, but they’re all based on the original calligraphic style with tall, narrow letters and sharp angular lines. Fonts such as Gutenberg and Fraktur are popular modern interpretations of the first print typefaces.

Blackletter (aka Gothic) 1400s

un.formal: tell the unfold story from typography

Serif Fonts As movable type printing became the standard across Europe different typeface styles were developed, but these early typefaces were still based on early hand written scripts so they retained the characteristics of brush/ pen lines and serifs on the entry and exit of each stroke.

Humanist (aka Venetian) 1400s

Old Style (aka Garalde) 1500s–1700s

Transitional (ak 1700s

In Italy the German blackletter style was soon replaced with typefaces inspired by Roman inscriptions. Still based on hand lettering, these fonts have the characteristics of angled crossbars on the letter ‘e’ and a high stress which relates to how a scribe would hold a pen. Centaur and Jenson are modern fonts in the Humanist style.

With typefaces now being carved to form printable fonts, typographers began to experiment and design their own type, rather than mimic existing scripts. Fonts such as Garamond and Goudy Old Style are from this era and are characterised with a move towards more upright letters and straighter crossbars compared to previous Humanist typefaces, as well as more variation between thick and thin strokes.

The trend of more uprig contrast in strokes cont tional era, which is the Style and Modern font fonts such as Baskerv with broad strokes bec within the character a perfectly vertical.

180 / 181

ka Realist)

Didone (aka Modern) 1800s

Slab (aka Egyptian) 1900s

ght letters and greater tinued into the Transie period between Old t designs. Transitional ville are more elegant coming much thinner and the stress is now

Fonts from the 18th century that took the type design trends to the max were known as Didone or Modern. These typefaces have extreme contrast with broad strokes reducing to thin hairlines, along with unbracketed serifs that abruptly change from thick to thin without a transitional curve. Didot and Bodoni are the two most recognisable Didone typefaces.

Newspaper headlines and product advertising resulted in more attention grabbing type styles in the 19th century, which lead to typefaces being made more robust to withstand the industrialised printing process. Slab serifs have thick block lines at the end of their stokes. They are sometimes curved as with Clarendon, but most often unbracketed like Rockwell.

un.formal: tell the unfold story from typography

Sans-Serif Fonts It’s clear to see the development of serif typeface styles over hundreds of years, but the 19th-20th century saw an explosion of type design where many of the fonts we use today were made. New sans-serif designs stripped away the handwritten characteristics completely to create modern typefaces that were easier to read at longer distances.

Grotesque (aka Gothic) early 1900s The first sans-serif typefaces were known as grotesque (as in “ugly”), due to their rejection of the elegance of historic serif styles. Some Grotesque fonts have a double-story layout for the letters ‘g’ and ‘a’, as seen in Franklin Gothic. There’s also a little flair left over from the serif era with early grotesques having a little contrast in their strokes.

182 / 183

Neo-Grotesque late 1900s

Humanist 1900

Neo-Grotesque is a sub classification of Grotesque typefaces which refers to the later designs from the 1900s. These fonts completely abandon the traditional characteristics to make them simpler and minimalistic. There’s little or no contrast in the strokes and the terminals are usually perfectly straight, giving them a more geometric appearance. Helvetica and Univers are some of the most popular Neo-Grotesque typefaces.

While some typogra ing Neo-Grotesque ty wanted to retain some writing, so Humanist also emerged in the 190 ist serifs, this style in modulation to give th appearance. Gill Sans a Humanist sans-serif fon

Geometric – 1900s

aphers were craftypefaces, others still elements of “human” sans-serif typefaces 00s. Similar to Humanncludes some stroke he letters a friendlier and Optima are popular nts.

Just like the Modern serifs, Geometric typefaces are the result of taking the design trend to the edge. Geometric fonts go a step further than Neo-Grotesques with their simplicity by basing the letterforms on geometric shapes. These fonts are ultra modern, but their structure makes them awkward to read, especially in lowercase. Futura and Avant Garde are great examples of this style.

un.formal: tell the unfold story from typography

From Idea to Typeface: How are Fonts Designed? 184 / 185

un.formal: tell the unfold story from typography

“A chosen brief must also at this early stage define the purpose of the typeface and the structure needed: is it going to be a font for texts or headlines? Is it going to be intended for printed media, screens, or mobile devices? How many weights would be needed? Is there a need to design characters for other languages on top of the Latin? All of these questions need to be answered before we start creating anything.”

Nothing starts from nothing and type design, too, springs from ideas. How to generate ideas is an entire science in itself, but my personal approach lives from sketching on paper. The fidelity of sketches can vary from drawing the skeleton shapes of individual letters all the way to carefully mocking up entire words on paper, over and over. Before working on something you could even call a font, sketches are the basis from which those ideas grow. Clearly, a commissioned typeface and one created for retail purposes vary in some respects, especially how defined the brief for this new typeface is. But even with the more or less clear starting point that often comes with bespoke or custom projects, much of this remains the same. When drawing new letters, there is a whole array of things that 186 / 187

can inspire how the shapes will be formed. Many designs start with historical references and the visual sensations they offer, be it truthful revivals or simply reviving an interesting approach. Others spring from use cases for where and at what size a font could be applied to. Often these simple constraints can be enough of a friction point to innovate and experiment. And somewhere between the aforementioned approaches lies general experimentation with forms and shapes. A specific mood or overall expression can be a viable starting points, just as the more concrete challenge of how a certain interesting shape might be made to work in the context of other letters. Simple experimentation by sketching small sample letters that have one particular feature can be used to try and gauge their viability when the same shapes are applied to other glyphs. Often by accident these explorations lead to interesting discoveries, from which an idea then develops, bit by bit. When a fair amount of letters have been shaped in their essential forms, fitting them together to words is where the actual work of designing a typeface takes place. How the various shapes of different glyphs affect each other and the space around and in-between them is where a well designed font is more than simply the sum of its letters. Often what looked good by itself does not work well when used in the context of other words. Some glyphs might look too busy, others too bland. Finding the right harmony of shapes is something that also draws on a lot of passive background knowledge of visual culture. Drawing a letter s its terminals

This feature includes advice from type designers at Monotype and Fontsmith for designers wanting to create a typeface for the first time.

might take any number of shapes. However, it is not just a matter of how those pure shapes look like by themselves, but what we as readers have come to associate as visually belong together and forming a harmonious and uniform font. A type designer has a lot of referential knowledge to draw on in this regard. Such subliminal judgment of how well shapes harmonize is the outcome of looking at letters—a lot. And the focus is on looking, not reading, because this is a crucial difference. Browsing through old foundry specimens, insatiably studying every detail of letters from books old and new alike, and drawing such letters is what makes type designers see letters in a different, more analytical way. It is the details which regular readers do not even realize are there that get shaped at this stage. Yet keep in mind, that a font is really just one particular style of a typeface. And in the days of physical type, this used to even refer to only just one particular size. Be that as it may, fonts, now and then, rarely come by themselves. There is more beyond the stylistic coherency among the glyphs of one font. Next come considerations of how a typeface works as a family of fonts. Related in shape or style, the concept of a font family is relatively loose and permissive of experimentation. What matters from a design standpoint, however, is how members of this family of shapes interact. While it is equally fine to simply design a single font, or even one style after another, often a more natural process is

un.formal: tell the unfold story from typography

188 / 189

un.formal: tell the unfold story from typography

Clearly, not every type designer’s process is the same, and I have come to notice that I prefer to work “analog” for quite some time before turning to the computer.

190 / 191

to consider and shape the relation of different styles. Is an italic or oblique a matching partner for this font? How should different weights of one family relate to each other when used together? Creation of different font styles often happens via interpolation. This means a designer might shape the most extreme styles, like thin and heavy, and the computer generates weights in-between by averaging those shapes. This simplification makes this sound fairly easy, but designing in a way that the progression of interpolations remains an even for the entirety of the charset of a font can be a challenge. Especially since quality (Latin script) fonts often well over 500 glyphs each. Fairly often, though, designing a family also is conceptual work. Simply adding styles for the sake of it is rather ignorant. In contrast, deciding what kinds of styles to design and offer to typographers and designers actually expresses what a typeface was designed for. Take a display typeface for headlines, as example. When the fonts are designed to be used for a few words at a time, does it make sense to design an italic—a style used for highlighting?

“When I’m demonstrating a typeface to clients, I usually use a mix of headlines, paragraphs, and detailed diagrams explaining the features and performance of the typeface. Beta fonts are a great way for people to try out fonts in print layouts or apps, and get a very real view of how the typeface and font will perform,” says Terrance.

un.formal: tell the unfold story from typography

The Future of Typography

Words by Aileen Kwun & Ariela Kozin

192 / 193

From experimental fonts and applications, to advocating for wider representation within the industry, here is how designers are pushing the field and range of typography forward.

There are typeface designs for any product, mood, or scenario imaginable — and then some. But even with a seemingly endless number of fonts available today, the world of typography is continually ripe for innovation. From the earliest days of the Gutenberg printing press in the 15th century, through to the introduction of desktop computers, and today’s proliferation of mediums and devices, the way we create, design, and interact with type is constantly evolving. Typography is tied to the pulse of technology and culture, as shown by these five designers who continue to push the envelope.

un.formal: tell the unfold story from typography

194 / 195

Variable typefaces give designers the power of choice. For many years, a digital typeface family consisted of separate font files for each weight and style—that is, until an additional option called variable fonts was introduced in 2016. Variable fonts contain the entire font family within a single file, allowing for countless variations in style. “Before that, you could change fonts, but you would actually have to use an alternate font file and swap one letter for another. Here, you’re actually morphing the letters,” says type designer David Jonathan Ross, who runs his own foundry, DJR, and a subscription-based Font of the Month Club. The beauty of variable fonts, according to Ross, lies in its practical applications. They allow designers the flexibility to control stylistic variables, such as a typeface’s weight and width, and create richer compositions as a result. As an example, Ross points to “Fit,” a variable font he designed as an early experiment in 2016. “Once you know what you want to say and once you set this font, you can just stretch and squeeze to fit that word in that space because it can go from super narrow to super wide, and that way, regardless of the word or phrase you have, it will always find a version that fits,” he explains. Essentially, variable fonts are a reaction to today’s complex world. Ross mentions that while once upon a time, a novel only required one text from front to back, digital documents of today require headlines, subheadlines, body copy — and these documents must look good on a wide variety of screens, from chapters to phones to watches. “With a variable font, designers have full access to a wide range of font variations to help address this typographic complexity, and can create typography that can truly be responsive to the environment around it,” Ross says. “It’s an opportunity to redefine the relationship between the type makers and the type user.” —Ariela Kozin

un.formal: tell the unfold story from typography

The future of type design is female

When it comes to gender parity and equity in the design industry, there is much work to be done. Women comprise over half of working design professionals, according to the 2019 AIGA Design Census, yet only 11 percent of leadership positions are held by women. Hone in on the subset of designers focused on typography and type design, and the disparities are likely to widen. As a fresh graduate of the University of the Arts London, Amber Weaver recognized that there was no lack of female talent within the industry — though there was a sore lack of visibility and recognition. “I was going to the library for research, looking through books about typography and graphic design, and I noticed there were not many women being mentioned,” Weaver says. “And when it came to type design, it was always a male designer that was being talked about. I thought, ‘There must be more women out there.’” Weaver continued to research, and began compiling a list of female design talents, following in the footsteps of efforts such as Alphabettes, an all-female network of typographers. In 2018, with the backing of a successful Kickstarter campaign that nearly tripled its goal, Weaver published her findings in Femme Type, a book that spotlights more than 40 contemporary womxn designers around the world working across type design,

196 / 197

3D, kinetic type, type sculpture, lettering, and more. What began as a one-off project to “diversify people’s bookshelves,” as Weaver says, has since quickly grown into a multi-pronged platform: In 2019, she established TYPE01, a type-focused media company and font shop, and relaunched Femme Type with an online magazine, an inspirational Instagram account (@femmetype), a series of online tutorials, and a variety of collaborative projects under its umbrella. “People have responded so well to it, because Femme Type really hones in on a piece of the industry that was lacking.” With the book now in its second printing, the enterprising talent has her sights set on larger goals — and the future looks bright for Weaver, as she finds herself contending with a new, positive challenge: “I’ve found so many women now, I can’t possibly compile them all into one book.” —Aileen Kwun

un.formal: tell the unfold story from typography

198 / 199

Playing with un.formal: tell the unfold story from typography

PATTERN

fonts, 200 / 201

beyond letterforms.

un.formal: tell the unfold story from typography

At a time when anyone with a computer can access thousands of fonts at their fingertips, it can be difficult to remember that digital typefaces are a relatively new innovation in typography’s long history. Slovak-born American type designer Zuzana Licko, cofounder of the influential foundry Emigre Fonts (along with her husband, Rudy VanderLans), has been creating digital typefaces for nearly 40 years — and breaking ground nearly every step of the way. Emigre’s start segued with the launch of the first Macintosh in 1984, which opened up a world with new possibilities and tools for graphic designers. “When we started Emigre, the technology was challenging; we had to figure out a lot of stuff with very primitive tools,” like coarse resolution bitmaps, Licko recalls. “Paradoxically, working within constraints inspired more free exploration than working with today’s limitless possibilities. There was something to react against, a puzzle to solve, a problem to overcome. We had to reconsider basic assumptions, and this led to unusual forms that we might not have explored otherwise.” “I have always been fascinated by the shapes of letters and their duality of meaning. At their core, the letters form words to communicate a literal message. But the nuance of their shapes and styles, whether starkly simple or exuberantly bordering on illegibility, can communicate as much meaning as the words themselves.” To this day, Licko’s work continues to toy with possibilities and push the boundaries of conventional type design. One of her recent experimental fonts, Crackly, designed in 2019, takes advantage of repetition and keyboard access as a way to make a purely visual, pattern-based set of faceted forms. Each of Crackly’s geometric “letters” combine to create depth and incongruous perspectives that recall Cubism, or the work of M.C. Escher. “In this way, the user can easily try out different combinations and repetitions of elements, more quickly and with more precision than with vector graphics,” says Licko, who has applied Crackly to a range of personal projects, including a set of woven textiles. —A. Kwun

202 / 203

un.formal: tell the unfold story from typography

204 / 205

Vincenzo Marchese Ragona on the beauty of kinetic type.

In a world where we’re constantly on the move or distracted by our smart devices, brands are in need of new ways to stand out — which may be why kinetic typography is in higher demand than ever before. The animation technique that makes text move through coding and clever design is perfect not only for modern billboards, but also for social media and digital advertising. Actually, it was Instagram where London-based designer Vincenzo Marchese Ragona, whose clients include Nike, Lululemon, Etam, and Moncler, first discovered kinetic type. “We’re now used to Instagram’s endless scrolling,” says Marchese Ragona, who currently works at the world-renowned Monotype Studio, “and studies say you have no more than five seconds to capture someone’s attention. If the content doesn’t capture your attention then it’s gone forever.” After seeing kinetic type used so much on his Instagram feed, he collected a group of friends to figure out how to do it themselves. “It’s okay to emulate people, to see how they’ve done it. Then with time, you build your own practice based on what you learn.” When we ask Marchese Ragona about his process for creating kinetic type, he is quick to note that part of the attraction comes from the requirement to “try something new everyday.” Generally speaking, however, the art of kinetic type begins with creating the type he wants and then bringing his motion ideas to a coder or mixing presets in Adobe After Effects. “When you think about it, kinetic type isn’t that new. It’s been used since films had opening titles. To present it in new ways for the most impact, it’s about looking to the past, lots of research, and lots of playing.”

un.formal: tell the unfold story from typography

206 / 207

un.formal: tell the unfold story from typography

Colophon 208 / 209

un.formal: tell the unfold story from typography

References

See red women’s workshop: Feminist posters, 1974–1990. Generative Design: Visualize, Program, and Create with JavaScript in p5.js By Benedikt Gross, Hartmut Bohnacker, Julia Laub, Claudius Lazzeroni Form+Code in Design, Art, and Architecture (Design Briefs) By Casey Reas, Chandler McWilliams IDEA DOCUMENT: Letter and typography, “Comparison Chart of Hiragana Characters for body” By Shin Sobue From idea to typeface: How are fonts designed? From Underscore Text by Johannes Neumeler How to design a font From DigitalArts Text by Mariam Harris The future of typography From Adobe Creative Cloud Text by Aileen Kwun & Ariela Kozin Graphic design in the pre-digital era Text by Pete Goddard

210 / 211

Colophon

Typefaces used: Dia Juana Typefaces used and designed by Yuchen: Evelynus Sarah Sheila MoWA Designer: Yuchen Xie The designer wish to thank the following people from ArtCenter College of Design for their kind contributions to this book: Constantin Chopin, Brad Bartlett, Bei Liu, Angela Zhang, Xinyi Zhang, and Momo Jiang offered great feedback within the Pod, and Ellis Yu offered external feedback. During the time in ArtCenter College of Design MGx program, Annie Huang Luck, Roy Tatum, Stephen Serrato, Gerardo Herrera, Greg Lindy, River Jukes-Hudson, Tyrone Drake, Samantha Flemming, and Micheal Neals kindly offered pedagogy, support, and encouragement in the past three years.

un.formal: tell the unfold story from typography

212 / 213

un.formal: tell the unfold story from typography

214 / PB