25
h of Oct '17 - 15th of Nov '17 (Week 8-Week11)
Jaslyn Tjhai (0333039)
Typography and Hypertextuality
Project 2
LECTURES
Lecture/Tutorial 8: Starting on Font Design
On the eighth week, Mr. Vinod and Mr. Shamsul started the class by calling out our names one by one to check and give each of us a feedback on our animation of Mr. Babadook. While checking others' works, Mr. Vinod told us to start using one of the selected fonts as reference and design our own fonts. After giving each of us a feedback, he explained about our second project briefly. An hour before class ends, he asked us to show him our sketches where he gave each of us a feedback. We were also told that when we design our fonts digitally we have to make sure that everything follows the requirements of letterforms.
Lecture/Tutorial 9: Digitizing Font
On the ninth week, Mr. Vinod and Mr. Shamsul started the class by checking on our digitized fonts. Mr. Vinod saw my digitized font and asked what happened to my previous one which I said I changed it because I liked the new one better. Then Mr. Vinod asked me to continue doing my work. After checking everyone's work, Mr. Vinod and Mr. Shamsul check our blogs, calling each of us one by one for feedback. We then continue digitizing our font for the rest of the class. Before dismissing us, Mr. Vinod reminded us on what we need to do for next week.
Lecture/Tutorial 10: Letter Spacing
On the tenth week, Mr. Vinod and Mr. Shamsul, as usual, started the class by checking on each of our work and giving each of us a feedback. Mr. Vinod then gave us a lecture about letter spacing. Mr. Vinod explained about kerning, tracking, and letter spacing.
Kerning is the distance between two letters.
Tracking involves adjusting the spacing throughout the entire word. Tracking can be used to change the spacing equally between every letter at once.
Leading is the space between the lines or sometimes called line spacing. If your line length is short, you will need shorter leading and vice versa. A good rule is to keep line length from 35-65 characters. An ideal would be 45-55.
Mr. Vinod told us that whenever you type an uppercase letter, you must add space for it to be readable and for it to look good.
Counterform is the form between the letter. It must look good.
Alignment is the arrangement of a word, sentence, or paragraph.
Center Alignment is when a text is arranged neither on the left nor right, meaning in the middle. Center alignment should be used sparingly. In books, they don't use center alignment because your eyes start reading from the same point where you began to read.
Left Alignment is when a text is arranged on the left.
Right Alignment is when a text is arranged on the right.
Justified Alignment is when a text is aligned on the left margin, and letter and word spacing should be adjusted so that the text falls flush in both margins.
 |
| Fig. 1.e Alignments example |
Mr. Vinod told us that the number or letters that should be in one line is either 50-55 or 55-60; that is roughly the number or characters you should have in one line of text. If you have anything lesser than that, when you use justification, there's going to be huge gaps.
Mr. Vinod then explained that we need to know when to change type and when not to change the type you're using when designing or creating something. You need to know when to use the right type. Some typefaces tends to look darker. For example, Caslon looks lighter compared to Baskerville, and you can see it if you half closed your eyes. When you choose a typeface that you want to do, you need to half close your eyes and picture them to see if they are suitable. A book is well designed when you find that you are compelled to read. If a book is designed properly, the digestion of the information will be better.
Mr. Vinod then showed us a few books where the first book shows how people used to write with different leading to see how it would look like. Then Mr. Vinod started talking about how back in the days, they have to learn how to write certain typefaces in order to see how they look like on paper. Compared to now, everything can be done in seconds and digitally. Mr. Vinod also mention about Zuzana Licko. In one of the books Mr. Vinod showed us, titled 'Poppi' by Martin Friedl, it's also about pictograms that are designed by Martin Friedl in 2003 for his final project at Stuttgart Academy of Arts.
 |
| Fig. 1.f Lo-res by Zuzana Licko |
 |
| Fig. 1.g A few pictograms from the book Poppi |
INSTRUCTIONS
PROJECT 2
Font Design
Requirements:
Adobe Illustrator CC 2017
Fontlab Studio
Instructions:
Choose one of the given fonts as reference.
Sketch out the fonts in a graph paper and try different kinds of way to see which one looks better (thin and thickness, round or sharp edges, etc.)
Draw out your font on illustrator by setting the artboard size to 1000 x 1000 points.
 |
| Fig. 1.h Minimalist fonts as further references and inspiration |
The type of font that I chose to do based on my references is minimalist font. These type of fonts are simple and clean. So because I chose to do these type of fonts where I delete some lines of the letters to make it look minimal, Mr. Vinod asked me to search and look at Phil Baines's work as he did something similar.
 |
| Fig. 1.i Font design by Phil Baines |
 |
| Fig. 1.j Sketches |
 |
| Fig. 1.k Final look of the font in Illustrator |
 |
| Fig. 1.l Font in Illustrator |
FEEDBACK
Week 8
When Mr. Vinod take a look at the rough sketch of my font design. He told me that I need to explore more and find out what’s the identity of my font. So I should first start with the basic alphabet such as letter ‘o’ as a lot of other letters will be based on that. I was also told that only after deciding on the identity (such as whether or not the edge will be round or pointed, the strokes will be thick or thin, etc.) I was also asked to research about Phil Baines as he design a font similar to what I’m planning to do.
Week 9
Mr. Vinod saw my digitize version of my font and said that the c look kind of weird but he said, it’s ok afterwards. He then told me that my s will be tricky but then he said it might also not be tricky. When he walked around again while we’re doing our work, he said that my font look like a very painful font. Mr. Shamsul checked my blog and told me to change the date as I wrote the wrong one. I was also asked to fix the spacing on my blog, change the font of the text in Mr. Babadook to the same font as my blog because I used a sans serif for that one while the other parts of the font uses a serif. I was also told to separate the post for each project. When I finished digitizing my lowercase font, Mr. Shamsul came to check. I told Mr. Shamsul that I’m still choosing between rounded ones or pointed ones but he said rounded ones will be better. Mr. Shamsul also said that my design is kind of unique but he’s not sure how it’ll look once it’s put together to form a word. But he also asked me to just continue with it and experiment.
Week 10
Mr. Shamsul came to check on my work in the beginning of the class and said that my circular uppercase was kind of different from my lowercase as I didn’t have the characteristics that I have on my lowercase on my uppercase. When Mr. Vinod came to see my work, Mr. Vinod told me to just fix a little bit, like the width of the letters and that I should make sure the curve on some letters should have the same curve as the basic letter which is letter ‘o’. Mr. Vinod then told me that the end of some letters such as ‘k’, ‘v’, ‘w’, should end halfway, the ends should be either vertical or horizontal so Mr. Vinod showed me how to change the strokes to outline stroke to change the ends of a letter to either vertical or horizontal. We can also make additional changes then. Mr. Vinod also told me he prefer my circular font because the hexagon font that I did as my first one looked kind of rough.
Mr. Shamsul and Mr. Vinod checked on my work and said that my capital letter ‘B’ is kind of weird, then the curve of my capital letter ‘S’ is also not right, as well as the thickness of my capital letter ‘Z’ where it’s slightly too thick because it is diagonal. I was also told to change my number ‘3’ and the curves on my number ‘6’ and ‘9’. After I amended it, when Mr. Vinod and Mr. Shamsul checked my work again, they asked me to make the ‘&’ symbol and ‘%’ which I added on immediately after. I was asked to always pay attention to the curves. Mr. Vinod also said that the end of every letters and numbers should also be either horizontal or vertical. When I showed my work again, Mr. Vinod told me to make the tail of comma, quotation, and apostrophe longer as well as my ‘+’, ‘-‘, and ‘=’ which should be the same as the x-height otherwise for mine it will be too small. The space between ‘=’ should also be bigger, around the size of the thickness.
REFLECTION
Experience
On week 8, I tried to design my own font which is kind of challenging because I have no idea what kind of font I wanted at first, but after looking at a few fonts as reference, a few ideas came to mind. Trying to design your own font is kind of exciting and interesting because you get to design something that's in your mind. On week 9, I digitized the fonts that I designed for the first time and it was also kind of challenging and difficult but it was fun. We had to be very precise and detailed when digitizing our font especially since once it's digitized, if you zoom it too much, you can practically see the mistakes if there are any. On week 10, I've come to know that there are a lot of things that we have to pay attention to when designing a font such as the curves, the thickness, etc. On week 11, I generated my font which is very interesting and definitely very exciting. After generating one font, I have the urge to generate another one because it's fun to see the fact that the font that we designed can be used in the computer.
Observation
On week 8, I observed drawing out a font that is on your mind can be easy at times but can also be difficult because it might not came out like the way you want them to. I also observed that you can actually get kind of confused on what to do with other characters even when you have a specific characteristic for your font. On week 9, I observed how accurate we should be when we're digitizing the fonts using guidelines. What we see when it's zoom out may be different from what we see when it's zoomed in. On week 10, I observed that the way I'm doing or designing my work is not consistent enough which is something I should improve on. On week 11, I observes that you have to be very observant and detailed before generating your font otherwise when you use it, you might notice even the smallest mistake.
Finding
On week 8, I found that I have a lot of ideas on what kind of font I wanted to design but I can't possibly do them all at once. Most of my ideas are probably suitable as display font compared to fonts that you use everyday. On week 9, I found that digitizing fonts really takes a lot of time and patience and accuracy to do it. By being very patient and detailed in doing your work, the end result will definitely gives you a sense of satisfaction. On week 10, I found that I should improve on my consistency in doing my work because I tend to change even just a tiny bit of style while working halfway. On week 11, I found that designing fonts are actually quite fun and interesting especially when you can finally use it. It gives you the feeling of wanting to do it again.
BOOK OF THE WEEK
Week 9
Draw Your Own Fonts by Tony Seddon
 |
| Fig. 2.a Front and back cover of the book |
I decided to read this book titles Draw Your Own Fonts by Tony Seddon as we are designing our own font for this project. This book however, focus more on hand lettering where the fonts that are designed are more of a display font. The books shows a variety of hand lettered fonts that are quite interesting. In my opinion, these kinds of fonts are only suitable for posters and any other digital work. It's less suitable for long paragraphs of text. What's also interesting is that hand lettering doesn't mean that you can just draw without any reference. Reference are still needed where we actually deconstruct the font instead of just completely creating your own font where the conventions are lost.
 |
| Fig 2.b page 10-11 of the book |
There are a few fonts that caught my interest. The first one is Science Lesson by Wayne Blades. The design is inspired by molecular modelling kit found in science labs. This font is rather interested as I thought of this type of font for my font design where I did a sketch of it. Mine however was not inspired by molecular kits rather by simply connecting dots. The anatomy, key font details, as well as the natural partners of the font are explained on the page.
 |
| Fig 2.c page 24-25 of the book |
The next font that caught my attention is a font called Origami by Sarah Lu where it is based on the font Alako Bold. I think this font is really interesting because it followed the way origami is folded. The thickness of the strokes are also paid attention to. Sarah also did fold origami to see how the font will look like.
 |
| Fig. 2.d Page 32-33 of the book |
The third font that caught my attention is a font called Seven o'Clock Shadow by Dave Pentland where he's inspired to design the font when he was working in a sea-front studio in Brighton. He notice shadows creeping up the walls of some Victorian buildings where the simple script font that he was working on morphed into Seven o'Clock Shadow. This font caught my attention because I feel like it's kind of difficult to maintain the consistency of the font. But Dave Pentland did it in a way that we can clearly see the consistency of the design.
 |
| Fig. 2.e Page 104-105 of the book |
At the end of the book, it also teaches us how to scan, trace, and generate the hand lettered fonts so that it can be used digitally. The anatomy of a font is also explained briefly. Information about the designers can also be found at the end of the book.
 |
| Fig. 2.f Page 142-143 of the book |
 |
| Fig. 2.g Page 150 of the book |
 |
| Fig. 2.h Page 152 of the book |
 |
Fig. 2.i Page 156 of the book where it shows the anatomy
of letterforms |
 |
| Fig. 2.j Page 158-159 of the book about the designers |
Week 10
Thinking with Type by Ellen Lupton
 |
| Fig. 3.a Front and back cover of the book |
On week 10, I decided to read Thinking with Type by Ellen Lupton. This book talks about Letter, Text, Grid, and Appendix. It's content is more about how to use our fonts. In the book, there's a page where it tells a little bit about lettering which attracted my attention so I decided to read that page. Lettering always seem very interesting because you can see various designs. On page 64-65 of the text shows a few lettering by Deanne Cheuk. On the next few pages (66-67) shows more lettering examples by Nolen Strals.
 |
| Fig 3.b Page 64-65 of the book |
 |
| Fig. 3.c Page 66-67 of the book |
This part of the book also caught my interest, which is about Logotypes and Branding. One of the logotype shown on page 69 is very cool in my opinion. It's the logotype of Utrecht City Theatre by Edenspiekermann.
 |
| Fig. 3.d Page 69 of the book |
On page 81, the book also explained the difference between typeface and font, character and glyph, as well as Roman or roman.
Save yourself some embarrassment and learn to use these commonly abused terms correctly.
This is very helpful (as I'm still a little confused about the right terms).
 |
| Fig. 3.e Page 81 of the book |
Here's are some really cool graphic from the book.
 |
| Fig. 3.f Some graphic from the book |
 |
| Fig. 3.g Some graphic from the book (2) |
Week 11
Type Matters by Jim Williams
 |
| Fig. 4.a Front and back cover of the book |
Typography is the voice of the written word.
 |
| Fig. 4.b Page 7 of the book |
Type Matters by Jim Williams is the book I read for week 11. The book started with the first chapter about the background of typography where it explain a brief history of type design, the origins of the terminology, as well as type measurements, anatomy, and so forth. The second chapter talks more about setting headlines and display type. I decided to read a little about selecting a typeface as I know that I'm very confused on which typeface to use every time I'm working on a poster.
Typefaces are like clothes for language: they come in thousands of different styles, and all say something different about the wearer. It is therefore important to select the most appropriate typeface for the message.
 |
| Fig. 4.c Page 34-35 of the book |
Unfortunately, the book actually focuses more on printed text, for paragraphs than for posters. But one thing I can learn from the book as well as from my modules is that I should learn to avoid choosing a typeface, or anything in that matter, simply because for effect, or because I like it, if it will compromise the reader's ability to decipher a text and digest the content.
So basically this book talks also about kernings, letter spacing, alignments, and everything else that Mr. Vinod's lecture provide except, of course, since it's a book, it provides more details and examples.
 |
| Fig. 4.d Page 62 of the book |
 |
| Fig. 4.e Page 84-85 of the book |
Comments
Post a Comment