Typography - Exercises

Posted by Jasmine Teoh October 02, 2018

Typography - Exercises

29/8/18 - 3/10/18 (Week 1 to Week 6)

Jasmine Teoh Lee Suan

Typography

Exercises

LECTURE NOTES

Lecture 1: Briefing And Introduction To Typography
30/8/18 (Week 1)

Today's the first lecture of Typography! For starters, we introduced ourselves and got to know about the lecturers as well. Mr Vinod likes to remember us through our countries haha.

After introducing ourselves, we were briefed about introduced to Typography and what it's all about. Typography is really important as the sensibility of it is actually of use to all fields of design. We were also told about Paul Rand and to look him up, along with the history of typography as it's important to know about the history of things.

We also learned about the basic typography terminologies:

1. Font

design process of a typeface
derived from the word 'foundry' where metals were put into the mould to create letters last time

2. Typeface

refers to an individual face within a type family
Example: Arial bold

3. Type family

has different weights, like bold, narrow, black
Example of a typefamily: Arial

We were also told to buy artline calligraphy pens and A4 graph paper for our first exercise. Some tips on how to get used to our calligraphy pens and write properly:

take note of the angle, nib is never flat
hold the pen diagonally
do not rotate the pen until the end
length of a line is two graph cells (only circles use one square)
when you stop halfway, don't go right on the same paper, practice again first on another piece of paper
draw on a flat surface
don't wear watches
make sure to have good elbow space around you

Notes taken during lecture:

Lecture 2: Typography Basics

5/9/18 (Week 2)

We learned about different terms of typography for this lecture. Mr Vinod said that it'd be impressive if we could learn all the terms, but we didn't have to. There have been debates about certain typography terms, so some of them are still confusing to me. Also, the different parts of the serifs have names that are similar, so that was even more confusing HAHAHA. Even so, I found the detailed planning of typography really admirable and I like how passionate the creators and everyone who contributed to typography are.

We also learned the basics of describing letterforms and the space used to create fonts.

1. Baseline - imaginary line, visual base of letterform

2. Median - imaginary line defining x-height of letterforms

3. X-height
- height in any typeface of lowercase 'x'
- capital letters are smaller than small letters with ascender strokes
- determines whether the font you create is eligible

Here's an example of the terminologies used in typography:

Figure 0.1 Typography Terms http://heritance.me/anatomy-in-typography/anatomy-in-typography-top-10-tips-cambridge-marketing-pr-agency

Extra information:

When you design a font, take note of the space between words

Use control + alt + I to see symbols appearing around your text

There are three types of dashes: hifen - 'one-of-a-kind'

En-dash - 1999 – 2000

Em-dash - Mr Vinod — who is short — works in Taylor's University.

Identifying different typefaces:

Roman - capital letterswere derived from Roman monuments

Italics - from script writing

Boldface, condensed, light, thin, black

Notes taken during lecture:

Lecture 3: Self Study (?)

12/9/18 (Week 3)

Today, there was no lecture. Only Mr Shamsul was present. He asked us to present our work last week to him, and for him to give us feedback. Then, he asked us to complete our poetry writing on A4 sized paper. We were also told to start thinking of our lettering exercise that we had to start soon.

Lecture 4: History and Timeline of Typography

19/9/18 (Week 4)

We learned a little about the history and development of typography today.

Initially, the structure or shape of typeform was based on the tools that you used.

Phoenician - First to make 26 symbols for the alphabet, phonetics comes from Phoenician

Phoenician to Roman:
- Greeks used to write like how the ox ploughs
- The phoenician K turned into greek A (it's cool how they transformed)
- Hand script from 3rd to 10th century C.E (common era)
- Square capitals

have serifs at the end
use a reed pen
30 degrees off perpendicular

- Rustic

Faster and easier to write
Harder to read because less space / compressed nature

- Uncials

small letters = easier to read
A, Q - round letters
half uncials

Blackletter to Gutenberg:
- Gained more popularity in northern Europe
- Rotunda - rounder, more open hand in Southern Europe
- Variations happen because they have different words in different places
- Gutenberg thought of mimicking the work of the scribe's hand
- Modern printing press by Gutenberg, but idea was developed way earlier
- could use colour coding

Humanist script to Roman -> Venetian type from 1500 -> The Golden Age -> Dutch Printing -> English type -> Baskerville Innovations

Text Type Classification:
1450 Blackletter
1475 Oldstyle
1500 Itali, Script
1750 Transitional
1775 Modern
1825 Square Serif
1900 Sans Serif - referred to as grotesque
1990 Serif

Notes taken during lecture:

Lecture 5: Working on Animation

26/9/18 (Week 5)

There was no lecture today. We focused on our lettering exercise and tried to complete it in class. Mr Shamsul taught us how to animate our lettering on Photoshop today. After that, we worked on our animation until class was almost over. Then, Mr Vinod briefed us about the next task we were going to do, which was Expressing Letterforms.

Lecture 6: Working on Type Expression

3/10/18 (Week 6)

We worked on our type expression this week so there was no lecture given.

INSTRUCTIONS

Assignment Brief:

EXERCISES

Calligraphy

30/8/18 - 13/9/18 (Week 1 - Week 3)

Week 1 (30/8/19)

On the first week of class, we were instructed to write horizontal lines, vertical lines, and circles on graph paper. We were shown a few samples from the seniors, and they had a huge workload but presented really good quality work. As for us, we only needed to write all three types of lines on one piece of graph paper. Yay hahaha. I thought it would be a fairly easy exercise. Well, I thought wrong. 🙃

Also, our lecturers advised us on what kind of calligraphy pens and graph paper to buy. We were told thatthe graph paper should be thicker so that the ink won't bleed. I bought a slanted nib pen and a flat nib pen, but in the end I prefer using a flat nib pen because of the way I hold my pens.

Exercise 1 - Horizontal Lines, Vertical Lines, and Circles

Tools: Artline Calligraphy Pen 3.0 Flat Nib

Materials: Graph Paper 70gsm

Figure 1.1 Lines and Circles Exercise Practice

Figure 1.2 Horizontal Lines

Figure 1.2 Vertical Lines

Figure 1.4 Lines and Circles First Attempt

Figure 1.5 Lines and Circles Second Attempt

I went back home and practiced even more, until I finally felt satisfied with my work. After many tries and graph papers being used, I made two pieces that looked seemingly pleasing. I chose this as my final piece:

Figure 1.6 Exercise 1 - Final Outcome

Week 2 (6/9/18)

For this exercise, we were told to choose between the four different Calligraphy Hands given to us, Roundhand, Blackletter, Uncial and Chancery. After that, we had to follow the guide and write the whole alphabet of that hand on graph paper.

I was in a dilemma at first because I didn't know if I should choose Uncial or Roundhand so I tried writing both the alphabets first as a test try. In the end, I felt that Uncial appealed to me more than Roundhand, as it looked more unique and felt like ancient handwriting (for some reason).

Exercise 2 - Calligraphy Writing

Tools: Artline Calligraphy Pen 3.0 Flat Nib

Materials: Graph Paper 70gsm


Figure 2.1 Roundhand Guide

Figure 2.2 Attempt on Roundhand (1)

Figure 2.3 Attempt on Roundhand (2)

Figure 2.4 Uncial Guide

Figure 2.5 First Attempts on Uncial

Figure 2.6 Lettering Practice

Figure 2.7 Lettering Practice

Figure 2.8 Lettering Practice

Figure 2.9 Lettering Practice

Figure 2.10 Lettering Practice

Completed Sets of Alphabets:

Figure 2.11 Uncial Hand (A - L)

Figure 2.12 Uncial Hand (M - X)

Figure 2.13 Uncial Hand (Y & Z)

I went back and changed the letter E, F, G, J, P, Q and T after the feedback, and rewrote the whole alphabet again. :D Well, it was way easier this time compared to when I first started. Here's the updated final outcome for my uncial hand.

Figure 2.14 Exercise 2 - Final Outcome (A- K)

Figure 2.15 Exercise 2 - Final Outcome (L - W)

Figure 2.16 Exercise 2 - Final Outcome (X - Z)

Also, I used a lot of graph paper for this exercise.

Week 3 (13/9/18)

We moved from alphabets to writing a poem with the calligraphy hand that we chose and learned. We were told to look for a sentence from a quote or a poem and write around 3-4 lines of it on a piece of A4 paper. The composition and placement of the words were way more important than the meaning of the words, so I decided to write lyrics from a song that I liked (actually I had many lyrics suggestions so it was painful for me to choose just one).

Exercise 3: Calligraphy Poem

Tools: Artline Calligraphy Pen 3.0 Flat Nib

Materials: Standard A4 Printing Paper

Figure 3.1 Calligraphy Poem First Attempt

Figure 3.2 Trying out different ideas

Figure 3.3 Trying out different ideas

Figure 3.4 Deciding on composition and placement

Figure 3.5 Testing Spacing Between Words

I continued working on my calligraphy poem, and had a few sentences in mind. In the end, I chose the sentence "last night I had a dream at this spot".

Figure 3.6 Graph Paper Practice

Figure 3.7 Graph Paper Practice

Figure 3.8 Graph Paper Practice

Figure 3.9 Practice on A4 Paper

Figure 3.10 Exercise 3 - Final Outcome (Scanned)

Figure 3.11 Exercise 3 - Final Outcome

And of course, I wasted even more graph paper here. orz

Week 4 - Week 5 (19/9/18 - 26/9/18)

I had no idea what lettering meant so I decided to search it up on the internet. Here's the link to what I read to be able to understand more about lettering:

https://creativemarket.com/blog/hand-lettering-for-beginners

Basically, lettering is very much different from calligraphy. From my understanding, it's more like drawing, creating your own lettering for your own specific word that you want to decorate nicely with.

So for the time being, we're supposed to make drafts and sketches of our initial ideas for our lettering, on our sketch books or on graph paper. What we need to focus on for this task is that the lettering that we create should be able to portray our own personality, or tell others about ourselves through that one word. Oh and, we're supposed to be stylizing our very own names, yay!

Exercise 4 - Animated Lettering

Tools: Artline Calligraphy Pen 3.0 Flat Nib, Adobe Illustrator CC, Adobe Photoshop CC

Materials: Graph Paper 70gsm

I wrote down a few characters about myself that I wanted people to know about, and tried drawing out a few different lettering ideas based on the different personalities.

I decided to go with my bubbly personality [(of a person) full of cheerful high spirits] and based my final lettering idea on that. I refined my lettering and created a few variations before transferring it onto Adobe Illustrator.

Figure 4.1 Small mindmap on my personality

Figure 4.2 Lettering Sketches and Ideas

Figure 4.3 Lettering Sketches and Ideas (Scanned)

Figure 4.4 Refined Variations

Figure 4.5 Refined Variation Ideas

Figure 4.6 Exercise 4 - Final Lettering on Adobe Illustrator

After creating our lettering, we thought about how to animate our character so that it represents the personality that we wanted to portray. We were to make artboards on Illustrator to start our animation process. We then had to export and move it onto Adobe Photoshop to animate it. After learning how to animate from Mr Shamsul, I decided to give a go at my own animation. I didn't really have an idea on what to do, so I just tried moving the letters one by one to see how the animation turned out and get the idea on how it all works.

Figure 4.7 Process of Making Artboards on Adobe Illustrator (1)

Figure 4.8 Process of Making Artboards on Adobe Illustrator (2)

Figure 4.9 First Attempt on GIF of My Lettering

I personally felt like it didn't really express the bubbly personality, so I decided to make another one after receiving feedback. I was way happier with the outcome of the second GIF that I made. It makes me feel happy and cheerful looking at it.

Figure 4.10 Exercise 4 - Final Outcome Artboards

Figure 4.11 Exercise 4 - Final Outcome Animated GIF

[UPDATE]

After receiving feedback again, I decided to try another version of my lettering, without the bubbly jump in the middle. Instead I replaced it with a floating effect of a bubble. I think I was lucky that I tried another variation because this looks more like a bubble's characteristics. I modified it twice and the first one didn't turn out so well, but I like the second and final one.

Figure 4.12 Exercise 4 - Animated GIF Update 1

Here's my final version after updating it again.

Figure 4.13 Exercise 4 - Final Outcome Animated GIF Update 2

Week 5 - Week 6 (26/9/18 - 3/10/18)

We started on a new exercise, Type Expression, and had a discussion on what words we wanted to express with in class. We were also given 10 typefaces by our lecturers, and were limited to using those typefaces to create the expressions. We were also not supposed to distort the words and use too many graphic elements in our design.

The words that we agreed on working on were:
1. Sparkle
2. Float
3. Blur
4. Heavy
5. Tall
6. Rage

We compiled all 6 words into a page and printed it out after that.

Exercise 5 - Type Expression

Tools: Adobe Illustrator CC, Adobe Photoshop CC

Materials: Standard A4 Printing Paper

Figure 5.1 First Attempt on Type Expression

Figure 5.2 Sparkle Variation 1

Figure 5.3 Sparkle Variation 2

Figure 5.4 Exercise 5 - Final Outcome

After creating the 6 words on Adobe Illustrator, we had to choose one out of the six to animate it and turn it into a GIF. I chose 'Blur' at first but I had some complications with it so I decided to change and work on 'Heavy' instead.


Figure 5.2 Making 'Blur' Frames in Illustrator

Figure 5.3 Animating 'Blur' in Photoshop

Figure 5.4 'Blur' Animated GIF

Figure 5.5 Making 'Heavy' Frames in Illustrator

Figure 5.3 Animating 'Heavy' in Photoshop

Figure 5.7 Exercise 5 - Final Outcome Animated GIF

Note: I tried to make the words fall based on the weight of the words, so H and Y fell slower, and it got faster when E and V fell, and A fell the fastest.

[UPDATE]

After getting feedback, I decided to try out what the lecturers suggested, and made the words jump up instead of shake, but I still think that the previous one looked better and heavier as it represented the words shaking and jumping at the same time.

Figure 5.8 Exercise 5 - Final Outcome Animated GIF Updated Final

I searched online for how heavy objects fell and how they affected the surrounding objects but I could only find this and used it as reference for my animation: https://www.youtube.com/watch?v=cvuFQgnOCdU

I also got feedback that I needed to work on my execution and critical thinking, so I watched a video on how to improve my critical thinking: https://www.youtube.com/watch?v=dItUGF8GdTw

FEEDBACK:

Week 2:
Lines and Circles Feedback:
Mr Shamsul commented that I was rushing while writing, and told me to write my lines slowly. He also said that my gaps need to be the same width as my lines. He said that I've improved from the first try to my current piece, but I feel like I need to do way more to get it to look decent.

I also let Mr Vinod look at my exercise and he said that my strokes are relatively consistent but not very good, I definitely need to practice every day if I want to have stable writing. He also went more specific on my strokes and I asked him how to improve, telling him that my angle at the start and the end were kinda weird, so he told me that I need to make sure that my strokes had the same pressure or it had to stay in the middle instead of slanting it. I have to find a way to write it without my hand going inwards uncomfortably.

Week 3:
Lines and Circles Feedback:
I showed my lines again to Mr Shamsul and he said that it was really good, except for one or two lines that were wonky. He said I did awesome with the circles as I've achieved a diagonal line through it.

Uncial Feedback:
I showed Mr Shamsul my uncial handwriting from a to z during class. He scanned my letters for quite a long while, especially the front part of the alphabet, then said that my work was consistent and my strokes were stable, a lot of 'not bad's and 'okay, good's were given to me, which made me really happy but I still would want to better my hand.

The only thing about my alphabets was that some of my letters didn't look like the ones in the guide and didn't follow the descender heights. I showed him the sample and he taught me how to write it properly.

Poem Feedback:
Mr Shamsul said that the said that the spacing was too far (I knew it too) so I discussed with him about how the spacing should be like. He told me that generally every letter has a spacing as big as the size of a nib, but it depends as well. The most important thing to look out for was whether it looked nice in a design point of view, and balanced in the composition.

Week 4:
Poem Feedback:
Today we showed Mr Vinod our final work for the calligraphy poem. I was happy that he was pleased with my work. He said that the letters were well written, and that the spacing between letters were consistent, with consistent spacing for each line as well. He also commented on my placing for the poem, and liked that I didn't put my words exactly in the centre, leaving less space for the top and more space at the bottom. Overall, he said that it was "good /claps/ awesome!" and that I did well. I'm happy that my hard work is starting to pay off. I also showed it to Mr Shamsul and he said that the line spacing and letter spacing were consistent.

Lettering Feedback:
Mr Vinod asked me what I was trying to deliver through the lettering, I said that I wanted it to show that I'm a bubbly person. He told me to work on the first sketch I made and refine it, and not to think about the motion yet.

Week 5:
Lettering Feedback:
Mr Vinod told me I could make my letters smoother a little if I wanted to, and hell yeah did I want to (but I had no idea how to), so he taught me how to use the smooth tool on Illustrator, and my life become way easier after that. As for my animation, he suggested that my words could turn into bubbles and float up. Also, my original idea was to let them explode, but because a senior did that idea already, Mr Shamsul said that it's best not to do the same thing, and so I decided to think of something else.

Week 6:
Lettering Feedback:
I showed my final bubbly lettering to Mr Shamsul, and he said that I did a great job! He really liked how I changed the letters into bubbles and let them float up in the end, and said that the animation was really smooth. He questioned why I had a pause before the letters flowed up, and I explained that I wanted to show the eagerness of a bubbly person who jumps up and down when they're being cheerful before their mood flows up completely in high spirits.

Type Expression Feedback:
The lecturers said that I shouldn't distort the word 'Tall' and change the size of it instead. Mr Shamsul said that I could attempt on another way to express sparkle, so I made two versions, but I still liked the first version more. Mr Vinod also approved of my effects on 'Blur' and 'Rage' while Mr Shamsul advised me to change the font size a little bigger so that it looks angrier. Mr Vinod also showed me how to make a drop shadow with the text, and it made my 'Float' expression look way nicer. Overall, I didn't have to change much, just a few minor adjustments here and there.

Week 7:
Type Expression and Animation Feedback:
Mr Vinod and Mr Shamsul checked on my work again and said that the type expressions were all good to go!! I was really happy when I heard that. I showed them my animation on 'Heavy' as well, and they were impressed with it. They liked how the big A falls with the other letters shaking and jumping after that, which showed how heavy the A was. Mr Vinod then suggested me to maybe make the other letters jump more instead of shake and jump, but he said it wouldn't be easy. But overall, he said that I produced good and decent work, and told me that I did a good job, giving my shoulder a pat.

REFLECTION

Experience:

Week 1:
It's currently 2.53am in the morning and I just had my 1st go on all this calligraphy stuff (woohoo). My first attempt was a big fat failure, I didn't know how to hold the pen at all, how to apply pressure or how to angle the pen, my straight lines were so bent and overall it looked really messy.

Week 2:

I questioned my life decision on choosing uncial because some of the alphabets were not that easy to write (at first). I wasted a LOOOOT of graph paper because I kept getting it wrong but I tried to focus and really get into the mood to write.

Week 3:

I had a hard time choosing the quotes that I wanted to use for my poem. There were like 8 quotes/lyrics that I thought of and I wasted a lot of time at night thinking of which I should choose to practice. In the end, I practiced on quite a few and told myself to stick to one and refine it so that I don't waste more time.

Week 4:

The first thing I thought of doing for my lettering was to draw a mind map of what I am like, which I thought was useful. This time, I had not so much of a hard time trying to decided what direction to work on, thanks to the feedback too. I felt happy while creating my lettering because II felt that it describes (and looks like) me well!

Week 5:

I had my first experience of making a gif this week, and I'm really happy that I got to learn how to do it. I also had a hard time creating the animation steps (the artboards) because I was worrying how it would look like once it's compiled.

Week 6:
I experienced turning words into visual feelings, and it was actually super fun.

Observation:

Week 1:

I focused on the starting and ending points of the strokes, it was kinda flat at first but then it got sharper as I went on. I noticed that posture was really important while writing calligraphy and kept telling myself to sit straight. Oh and of course, I can definitely feel my arm muscles growing after this exercise, dang.

Week 2:

As I kept going, I found it getting easier and easier and my strokes became more natural, I had more confidence in writing and enjoyed it a lot, I also made less mistakes but yeah there still are mistakes that I made up till now.

Week 3:

I noticed that I am a really indecisive person sometimes. I also observed that it was way harder for me to write on a piece of A4 blank paper than graph paper. I also observed the different surfaces of A4 paper, some were rougher than the others, and the calligraphy writings would change depending on the paper quality as well.

Week 4:

I observed a lot of bubbles for a more detailed understanding of the lettering that I was going to create. The shiny reflection part depends on the shape of each bubble. I also noticed that I started looking at typography on different types of design more and think about it more often, like whenever I see a signboard or a poster wherever I go.

Week 5:

I observed my classmates' animations this week. I really like seeing the different types of animations that they created, and the happy and satisfied smiles on their face. Some of them had really cool animated gifs, in my opinion.

Week 6:
I looked at all the different types of type expressions in class, everyone had different perspectives and approaches to each word. I also observed the different types of fonts that were given, each font have different weights and different shapes.

Findings:

Week 1:

As I kept going on with the lines, I realized that it got easier or like my brain got more familiar with the strokes I did. I started to take the way I held my pen into account, and tried applying pressure on my thumb instead of index finger, which made the lines look slightly different.

Week 2:

I found out that as you write more you'll really improve more as well, it's a miracle because I honestly have really bad handwriting and I couldn't hold the pen well at the start but just from practicing and putting in a little more effort I could see a small change in my calligraphy handwriting, and I'm super proud of myself for that.

Week 3:
I found a brilliant way to solve my nervousness of writing on blank A4 papers! I took my tablet and turned its screen brightness to 100%, turned off all the lights in my room and put my graph paper on top of the tablet, with the A4 paper on to of my graph paper and voila, I have a guide to write my letters now.

I also found that the more you think about doing something, the more time you'll waste, so just do it straightaway to see the outcome of it, then only change it , if needed.

Week 4:

I realized that lettering is way different from calligraphy, where you write for calligraphy, and draw out the shape of the lettering.

Week 5:

I found out that creating an animated gif isn't as hard as I used to think it was, if you know the steps to make it, you can create many different kinds of gifs with Photoshop. I also realized that it's fun to try and express emotion, feelings and personalities through type.

Week 6:
I realized that you need to understand the physics of how the stuff you want to animate works. After understanding it, the animation becomes way smoother and more relatable to the eye. I also found out that you don't have to create too many frames for a frame animation to work smoothly, it's actually the opposite instead and you need to understand the timing of the frames well.

FURTHER READING

1. Typomofo (type morphing into forms) by Page One

30/08/18 - 05/09/18 (Week 1)

After being encouraged by our lecturer to read a book about typography every week, I decided to pay a visit to the university's library during my free time and borrowed the first book about typography that I found at the graphic design section of the library.

This book was a collection of fonts that took unique forms, created by many different artists throughout the years. This book shows the different types of fonts being made through various ways, such as by hand, digitally, with mixed media and through the use of perception. I took my time to flip through the whole book whilst admiring all the creative and artistic works of art that incorporated typography in it.

Figure 6.1 Book Cover

Figure 6.2

Figure 6.3

Figure 6.4

Figure 6.5

2. Typorama by Philippe Apeloig

05/09/18 - 12/09/18 (Week 2)

This book showcases the works of art of Philippe Apeloig. It contains posters, published book covers, prints and even his sketches from his artwork. Through these sketches, I was able to learn the importance of drafts and initial ideas being documented, it helps you to visualise your ideas and remember them. I like how he showcased the sketches as well as usually people don't really show the work and effort behind the artwork.

Figure 6.6 Book Cover

Figure 6.7

Figure 6.8

Figure 6.9

Figure 6.10

3. Drawing Letters Lettering by Carolina Amell

12/09/18 - 19/09/18 (Week 3)

As we started focusing on Lettering Exercise this week, I decided to search for books about lettering in the library, and found this one.

I tried getting inspiration from this book for my exercise in class, and I feel like I understand lettering a little more now. There are many different types of letterings that can be created, and it can be created through different styles and media as well.

Figure 6.11

Figure 6.12

Figure 6.13

Figure 6.14

Figure 6.15

4. Thinking with Type by Ellen Lupton

19/09/18 - 26/09/18 (Week 4)

I decided to borrow a book that would teach me more about typography and arrangement of type in a space this week as we would have to create a book of our own in the next project. What I have understood from this book is that space is really important in every type design. Each space has a meaning and the placement and layout really matters in a type design. Another thing that I have learnt is that different typeface weights have different effects in design. It's very important to choose suitable weights for each type.