Typography I – Archetypes (Process + Final)

Before diving into the processes of my final, there were a few ideas I had in mind. It didn’t work out because of the little time we had to do this final project, and it was difficult to do what I wanted to initially in a short span of time. I stick to basing my archetypes on The Hunger Games: Catching Fire though.


I thought of doing it like a 3d modular structure (an organic-looking building):

I thought of doing it like the Capitol building using thick poster blocks:

I also thought of doing something like cubes (the ones that could turn some part of itself):

There were simply too many ideas I had that I wish I could do with more time given, but I knew I had to figure something new out soon – a simple but different work that ticks the boxes of the objectives of the Archetype project.

Hence coming up with the website idea, but having my typography done through mostly After Effects and Illustrator. The layout of my paragraphs is simply through repeated double column sizes and heights, and space. And of course, the font and type size for them is standardised as well. I put this whole idea onto paper to roughly sketch out how I want my website to look like. (seen below)


The 6 archetypes I planned on doing:

  1. Lover (Peeta Mellark)
  2. Hero (Katniss Everdeen)
  3. Ruler (President Snow)
  4. Caregiver (Mrs Everdeen)
  5. Innocent (Primrose Everdeen)
  6. Creator (Cinna)


Now I see Peeta Mellark as Lover because of his soft nature, his loving nature for people for Katniss especially, and for nature itself (He can camouflage himself in nature because he’s good in the art as well). Hence I decided to create vines surrounding him.

It’s my first time using after effects so I was worried I couldn’t get it almost good enough. I tried anyway.


We all know the ‘girl on fire’ is the hero – Katniss Everdeen. A rebel and all but for the good cause of everyone. Because she’s the famous ‘girl on fire’, I literally made the letterings of H E R O on fire (looks more badass that way too).

This one below is a photoshop version of what I did, what I had in mine. The flames will be moving once I create this on After Effects.


This is the ruthless, high-class looking President Snow. Hence white to represent what we think he is – sophisticated, high-status with a white rose tucked in the pocket of his suits. But he’s the poison that kills people, the blood that’s indirectly on his hands. Hence the bloody red colour gradient in the letters (seen below) that I simply did on illustrator first.


Mrs Everdeen – considered one of the weakest and emotional character but strongest in what she does – healing. She’s a healer for a lot of people, a mother of two, a caregiver really. I used the ripple effect for this one.


Little Prim, lovely one that got called out for Hunger Games but instead her sister volunteered for her. Little Prim that cries over animals being killed, sweet one she is. But brave as well to help do anything to make sure Katniss is safe, and the people she helps to heal as well.

Here are some fonts I thought would look good for her archetype:

In the end, I stuck with this:

Ok so sadly I DIDN’T SAVE THIS ONE PROCESS ON AFTER EFFECTS, why why why. But here’s the final one for innocent:



And I chose this as Cinna – a very important character I feel…where what he creates with Katniss’s outfits really emphasizes the kind of person she is. A strong brave girl ready to fight.

Here below I manually did the white glow on Photoshop by simply making dots over the letters each.

And then to make each different sides of each letter to glow in different colours, I manually did it on Photoshop’s video timeline.

I further added on a touch of dark bluish glow, slowly increasing in brightness to make it look more magical – like what Cinna does with Katniss’s wedding dress that turned out to be a majestic looking Mockingjay dress. That’s magical.

And as for the layout, I chose a double column grid and it’s all standardized throughout every page for every archetype. This was all done in WIX.







Typography I – The Walls Have Ears Project: Process & Final

“The walls….they can hear you.”

Here are the sentences I’ve chosen from convos I’ve eavesdropped:

  1. Screw this I really want some cheese right now please (10 words)

  2. You are just a speck of dust in the universe (10 words)

  3. He gives me life but why does everything feel so cold? (10 words)

Behind these sentences:

For  1

“Screw this I really want some cheese right now please”

You know how when you hear people’s conversations, you’d expect it to be so scandalicious BUT NAHHH. I thought it was funny that this lady beside me was super hungry and it’s true that a hungry woman is an angry woman, because hell, she looked super cranky alright. JUST BECAUSE HER FRIEND TOLD HER CHEESE IS BAD FOR HER DIET. It’s hilarious I had to look at my phone and laugh silently so that they’d think I’m laughing at something on my phone.

For  2

“You are just a speck of dust in the universe”

Ok, I’ll be honest, this was actually taken from a deep conversation I had with a guy. And it just ticked me off when he said those words and I could sorta remember that it went like this: “we are just a speck of dust looking like we have big problems now but…in a bigger perspective, in the universe, we are just that tiny.” So I summarised what he said in that line and yeah, deep sch-tuff.

For  3

“He gives me life but why does everything feel so cold?”

We were at this waterfall in Selangor at that time and was just playing in the water when I overheard my friend (a girl) saying this but instead of saying “cold” she said “empty”. My guess is, she feels empty even being with this ‘guy’. I decided why not change it to the word ‘cold’ because (haha) WE WERE ALL FEELING COLD THERE IN THE WATERFALL yet we play in the water anyway. Also, the water was super cold. Yeahhhh there’s no link or context to her words but haha it makes sense right? Now that you read the whole sentence -“He gives me life but why does everything feel so cold?” – it sounds deeper too.

Here are my draft sketches before I move onto Illustrator to create the poster designs.

“You are just a speck of dust in the universe”

“He gives me life but why does everything feel so cold?”

“Screw this I really want some cheese right now please”




“He gives me life but why does everything feel so cold?”
“You are just a speck of dust in the universe”
“Screw this I really want some cheese right now please”



Links used for inspo:







Typography I – In-Class Activity Wk 9

WeeeewOOOO this was fun but took too much of my time trying to get the grids and layout right. Not sure whether I like this ‘baseline grid’ guy at all.

(look Mummm, I finally made my own menu page, and I even made it HALAL!)

Typography I – Typographer of Week 9: Tobias Frere-Jones

Related image


In his seven years in Font Bureau Inc, Boston as a senior designer, Frere-Jones created many of Font Bureau’s best-known typefaces, including Interstate, and Poynter Oldstyle and Gotham. He began work with Jonathan Hoefler and formed a company operated under the name Hoefler & Frere-Jones,  collaborated on projects for Martha Stewart Living, GQEsquire, Nike, Pentagram, Hewlett-Packard, the New York Times Magazine and the Wall Street Journal.


Frere-Jones wanted to give something to the community, and to users, that would set a precedent. Like his past work, Mallory looks and is timeless, utilitarian and reliable. It’s able to do the heavy lifting for a range of uses, and is intended to be, according to the designer, “an asset to users” and “durable.”

Mallory typeface

Mallory began as an experiment in mixing typographic traditions, building a new design with British and American traits. The family offers a broad range of voices, from the prim and austere Thin to the loud and gregarious Ultra.

Mallory was built to be a reliable tool, readily pairing with other typefaces to organize complex data and fine-tune visual identities. This release also marks the debut of the MicroPlus series.

Till this day, Frere-Jones is still drawing new designs on typefaces and looks forward to designing condensed versions of Mallory.

Image result for tobias frere-jones
Gotham typeface

Gotham typeface is a distillation of the “letters of paint, plaster, neon, glass and steel that figure so prominently in the urban landscape,” create under his collaboration with Jonathan Hoefler.


“Typeface design can be artistic expressions and cultural artefacts if they are…properly executed, they can be a solution to every problem” – from the video in ‘Tobias Frere-Jones: Break Things Deliberately’

I reaaally like this presentation of his in the video. It’s interesting to see this point of view of Frere-Jones where he sees problems as an opportunity because then he can use typefaces as a form of a solution. He taught us to learn to see the beauty in taking risks. Frere-Jones explains that in order to do our best creative work, we must not just permit moments of confusion, but actually, go chase them. Hence how I see this as: see if you can make your typeface worse, then if there is a problem, you sorta know how to fix it. Break it down to know how to make it better. I guess it’s like reverse-manipulation. It shows how a structure can really describe itself as it falls apart and I think this really is something thought-provoking, something I would start thinking about immediately when trying to improve my works/designs.

“In all of that mess, in all of that wreckage, you can find something pretty amazing.”


Typography I – Typographer of Week 8: Herb Lubalin


When I read about the 10 things we didn’t know about Herb Lubalin, it’s interesting to know more about him through those little facts. Like how he supports liberal causes. I wish he was still alive – I would wanna know what are his views on the politics in this day and age.

Like Herb, I would like to devote my life to painting too after I retire! But it’s sad that he did not get to do both the retiring and painting as he died early.

Herb Lubalin was the famous typographer and designer behind the creation of the typeface Avant Garde. Aside from creating works meant for positive political changes, Lubalin was a constant boundary breaker on both a visual and social level. Part of the founding team of the International Typeface Corporation (ITC)  and the principal of Herb Lubalin, Inc it was hard to escape the reach of Herb during the 1960s and 70s.

Coming to terms with Herb Lubalin’s work takes us quickly to the heart of a very big subject: the theory of meaning and how meaning is communicated—how an idea is moved, full and resonant, from one mind to another. Not many have been able to do that better than Lubalin.


The Avant Garde Gothic typeface was originally designed for the Avant Garde magazine. It can also be noted that Lubalin Graph is a typeface family on its own but was derived from Avant Garde Gothic.

The Avant Garde Gothic typeface was based on Lubalin’s late 1960’s logo. Despite the overuse and misuse of Avant Garde Gothic in the 1970s, it’s still extremely influential and remains as one of Lubalin’s most iconic fonts. This font could be described as a reproduction of art-deco and is seen in logos created in the 1990s and 2000s.

Image result for Avant Garde Gothic in 1970s

Herb Lubalin devised the logo concept and its companion headline typeface, and then he and Tom Carnase, a partner in Lubalin’s design firm, worked together to transform the idea into a full-fledged typeface.

Announcement for Avant Garde magazine’s antiwar poster contest, designed by Herb Lubalin, 1968.

As mentioned by Adrian Shaughnessy, a graphic designer: “Lubalin was…a political designer. He was never a radical‚ but a progressive liberal at a time when such sympathies were undoubtedly ‘bad for business.’ When this is compounded with his work with Ginzburg‚ which put him at the forefront of the 1960s free speech and anti-censorship movements‚ we see he was unafraid to declare his political allegiances and sympathies.”

We see this in the above poster he created for. Herb Lubalin’s work punches straight at the gut simply using letterforms. Look at that bold red using every letter in caps-lock. The typeface he uses as well. How smart it is of him to use every negative space (The black but bold exclamation mark at the side catches my attention too somehow).  As a viewer, this whole poster evokes some strong attitude and emotion in you. Don’t you feel it? I do.


Herb Lubalin
U&lc magazine

Lubalin spent the last ten years of his life working on a variety of projects, notably his typographic journal U&lc and the newly founded International Typographic Corporation. U&lc (short for Upper and lower case) served as both an advertisement for Lubalin’s designs and a further plane of typographic experimentation.

Here, he tested just how far smashed and expressive lettering might be taken. Unlike other most designers, he had the freedom of being his own client where nobody tells him what to do, and he enjoys it.


Hence relating that to my learning point: I admire how he had his own personal convictions and stood by them. You could tell his character by the kind of work he produces, and hence has helped him shape his works as a designer. He stands firmly on what he believed in so that he would design works that are true to himself, instead of simply following with the trend. Lubalin is definitely in a class from his own.

Typography I – Typographer of Week 7: Erik Spiekermann


Erik Spiekermann: “You have to think of everything a little more…”

Spiekermann is a German typographer, designer and writer. He and his wife, Joan, started FontShop, the first mail-order distributor for digital fonts. His family of typefaces for Deutsche Bahn (German Railways), designed with Christian Schwartz, received a Gold Medal at the German Federal Design Prize in 2006, the highest such award in Germany. Hence more than anyone else, the Berlin communication and type designer Erik Spiekermann has shaped Germany’s visual culture.

United Designers Network was renamed after him, SpiekermannPartners merged with Dutch design agency Eden Design & Communication and continued its operations under the name Edenspiekermann. Edenspiekermann currently runs offices in Amsterdam, Berlin, Singapore, San Francisco and Los Angeles.


Specimens of typefaces by Erik Spiekermann. 1) Berliner Grotesk (original is from 1913, digitization is from c. 1978) 2) FF Meta (1991–1998) 3) ITC Officina Serif (1990) 4) ITC Officina Sans (1990)

Image result for erik spiekermann works

Related imageRelated image

Spiekermann’s work in communication design has involved so many different projects: books, advertisements, posters, editorial, corporate design—“typography is the element that connects them.”

What I find interesting about Spiekermann is his devotion to clarity and grid-based design. He says that the result of the natural chaos of his mind actually causes this, “I need order. I need systems. I don’t really do anything without a design grid.” And I also think that’s the reason why the kind of fonts he designed could convey information accurately and convey it well.

I can see that Spiekermann strives to always represent content appropriately with the strong discipline and self-awareness he has. He mentioned that “a font must fit into the culture”. And as a designer, he’s done well in doing his job to bring a text to the public. It also shows Spiekermann’s sensitivity to his intended audience, the public, and viewers – the thought that he puts whilst designing something. And I, as a beginner, definitely need to start learning to do that. Also, especially the part of using a ‘design grid’ and not throwing it off like it’s unnecessary because it really is the opposite of that.

Typography I – In-Class Activity Wk 6

‘PLAY NICE’ – seems a bit more dangerous than the idea of ‘play’ to me, so I just did ‘nice’ within a knife-outlined image. Every letter in caps lock and bold to signify something screaming “beware”. The main challenge I had with this was the spacing in between each letter, especially in ‘Play’. Like the spacing between the Y at the end, AGH. I tried I really did.

*lets out a long sighhhhhhhhh*

Typography I – Typographer of Week 6: Jonathan Barnbrook


Raised in the UK, Jonathan Barnbrook is a famous contemporary British graphic designer, typographer and filmmaker. He is best known for designing David Bowie’s album Heathen in 2002. He has also collaborated with Damien Hirst and Adbusters. He is also seen as one of the early innovators in the world of motion graphics, and his contribution to graphic design was recognised by a major exhibition at the Design Museum, London in 2007. Currently, he runs his own studio Barnbrook Design which he founded in 1990. We can often find him exchanging the measured world of type design for the more spontaneous activity of VJing (broad designation for real-time visual performance).



The infamous and ubiquitous Mason and Exocet fonts were designed by him and were first released through Californian innovators Emigre. In 1997 he established his own font company VirusFonts and that is where he releases other typefaces. The typeface Mason later became one of the first digital acquisitions of the Museum of Modern Art, New York.

Mason typeface. Images (including the one below this) obtained from https://www.myfonts.com/person/Jonathan_Barnbrook/

Exocet typeface. Image (including the one below this) obtained from https://www.myfonts.com/fonts/emigre/exocet-ot/


He’s known mainly for designing the packaging for David Bowie’s albums from Heathen (2002) to Blackstar (2016).

Heathen (2002)

Back in 2002, he produced an album cover for David Bowie’s Heathen. Here he incorporated his “Priori” typeface. That was his first time using the font for commercial purposes. Bowie then requested Barnbrook to design cover art for other albums such as Blackstar (2016) and Reality.

Blackstar (2016)

Image (including the one below) obtained by https://www.itsnicethat.com/features/review-of-the-year-2016-graphic-design-jonathan-barnbrook-151216

Look at those lines above. Oh my goodness. Symmetrical and carefully put together. And then down to the middle, he slowly created curvy ends, making it look like there’s a hole beneath.


Barnbrook Bible, 2007

17th Biennale of Sydney Catalogue, 2010

The design above was inspired in part by the work of Harry Everett-Smith and his Anthology of American Folk Music. It also takes heavy influence from antique educational books and encyclopaedias. It is a catalogue design for the 17th Biennale of Sydney: Beauty of Distance, Songs of survival in a Precarious Age. The publication features 17 individually designed essays, an extensive plates section and a series of typographic interludes.

Daydreaming with Stanley Kubrick, 2016

The usage of bold and bright complementary colours, orange and blue, really makes the cool weird eyes stand out in the book. I think it matches up with the ‘daydreaming’ part and overall a lively design. I noticed the typefaces used here are all different yet SO suitable. They look just right together.


Friendly Fire at Ginza Graphic Gallery

Image (including the one below) obtained by http://www.barnbrook.net/work/ggg-friendly-fire/

I personally like the one above. This poster was designed to announce the Barnbrook retrospective exhibition at Ginza Graphic Gallery, Tokyo, Japan in 2005. The poster features a detail of Barnbrook’s self-generated works, which is a Tibetan mandala made up of corporate logos.



I really don’t know where to begin. After learning about Barnbrook, now I’m wishing I work for him, or at least be a student of his because I admire so much of his works. I want to compare his works to another of my favourite typographer, Paula Scher, as I feel that they are quite similar in terms of the colours they choose to use, which are most of the time so very colourful. Both are also similar as they differ – you can tell both of their works apart very easily as they are both unique with the way they put their words out to create the visual aesthetic of a document.

I find it interesting how Barnbrooks managed to create unique typefaces that embody personalities and moods, but at the same time, refrain from making it look too tacky. Like for the Mason typeface, you could tell it’s representing the medieval period. This can be seen in the sharp ascender on the uppercase of ‘M’ that reminds me of the boldness in a knight’s armour back then. Also, the curved-in bowl (?) in ‘A’ makes it look like a knight’s shield (in the medieval period) turned upside down.

Here’s how I pictured it for the letter ‘A’:

– original medieval knight shield– turned upside down. LOOKS LIKE THE ‘A’ RIGHT? Looks like it to me.

OR it could even be the knight’s helmet:

Alright alright, I’m done with the examples but you get what I mean.

The typeface is unique and different from today’s modern-looking ones but the readability is still there and remains visually-pleasing to the eye.

As for the designs, oh I’m completely in love with them. Minimal but yet it gives me the fun vibes – like I might actually enjoy reading the books because of how the design is like at the front. And even inside (like the ones in 17th Biennale of Sydney Catalogue, 2010).

Kudos to Barnbrook. I’ve found yet another favourite typographer of mine.