Typography / Task 3A : Type Design and Communication

15.10.2021 - 22.10.2021 ( Week 11 - Week 12 )

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Typography
Task 3A : Type Design and Communication

---

CONTENTS

• Lectures
• Instructions
• Type Design Research
• Sketches and Progress
• Final Outcome
• Revised Final Outcome
• Feedbacks
• Reflections
• Further Reading
  
  

---

LECTURES

Previous lectures are provided in this link : 
https://miichelleangelinee.blogspot.com/search/label/Typography

Week 7 :

 For the task 3A we can start by doing a research about type design.

Figure 1.1 Type Design Research

After that we can our sketches. And then we can compare our sketch to the 10 typefaces, choose the closest look to our sketch.

Figure 1.2 Comparing Sketch with 10 Typefaces

Then we deconstruct 3 letters to gain some information and details.

Figure 1.3 Deconstructed Letter 'r'

After that we can start to digitize our sketch in Adobe Illustrator and the layout format is 1000 x 1000 points.

Figure 1.4 Layout Format for Sketch

For the size of the x-height it has to be 500 by 500 points. Overshoot happens when the letter exceeds the x-height.

Figure 1.5 Overshoot

And these are the typography basics that we need to pay attention on.

Figure 1.6 Typography Basics

---

INSTRUCTIONS

Type Design Research

It important to pay attention on typography basics. And I found this while researching.

Figure 2.1 Typography Basics

While I was researching, I suddenly thought of fun facts about typography and on this website I found many new facts about typography that I did not know before. And these are the ones that I found the most interesting :

Source : https://facts.net/fonts-facts/

• Calibri replaced Times New Roman as Microsoft’s default font. 
• Even the creator of the Comic Sans font hates it.
• Helvetica is named after a place.
  Helvetica and Univers are two of the most universal fonts of all time. Both fonts were created in Switzerland in 1957. In One of the little-known facts about fonts is that Helvetica is the Latin word for ‘Switzerland.’
• Futura was the first font in space.
  When Paul Renner created Futura in 1927, he probably didn’t know how literal its namesake would be. The font didn’t really catch on until the 1950s, but its use culminated when NASA used Futura to engrave the aluminium plaque left on the moon as a memento of the Apollo 11 mission. 

Sketches & Progress

I did 4 sketches in total. I made it in Adobe Photoshop and I used the guideline to help me sketch. 

Figure 2.2 Sketch 1

Figure 2.3 Sketch 2


Figure 2.4 Sketch 3 & 4

For sketch 1 and 2, I made the frame of the letters first and then I tidy it up and fill the frame. For sketch 3 and 4, I just sketch with what's in my head and I did not frame it. And then I started to digitalize my sketch on Adobe Illustrator just like what Mr. Vinod has explained in the demo video. I started by making the artboards.

Figure 2.5 Artboards

And then I deconstruct letter 'e', 'b', and 'o' of Gill Sans MT Bold because it has the most similar shape with my first sketch.. The first letter I deconstruct is letter 'o' and I notice that it is not a symmetrical circle shape and then it is actually the same with the letter 'e' and 'b'.

Figure 2.6 Deconstructed Letter 'e', 'o', 'b'

For the digitalization, I started by adding guidelines following the demo video by Mr. Vinod. I made the x-height 500 pt x 500 pt.

Figure 2.7 Digitalization Progress 1

My first letter that I made is letter 'a'. I started by using the eclipse tool to create an eclipse. I made 2 of them, one is the black one and the smaller one to create a hole in it. 

Figure 2.8 Digitalization Letter 'a', part 1

Then I created a rectangle and use the curvature tool to make it bend in the middle.

Figure 2.9 Digitalization Letter 'a', part 2

Then I duplicate and flip it horizontally. And then I gather them together. 

Figure 2.10 Digitalization Letter 'a', part 3

The next letter that I made are b and d. I copied the rectangle and make it taller.

Figure 2.11 Digitalization Letter 'b'

For letter 'd', I duplicate b and flip it horizontally.

Figure 2.12 Digitalization Letter 'd'

And the next letter is 'i'. I copied the rectangle and copied the small circle and make it even smaller for the dot of the i.

Figure 2.13 Digitalization Letter 'i'

For letter 'o', basically it is just the 'a' without the rectangle.

Figure 2.14 Digitalization Letter 'o'

Next is letter 'p', I just flip the letter 'b' vertically.

Figure 2.15 Digitalization Letter 'p'

The next letter is 'e', I copied letter 'o' and add a rectangle in the middle and then I cut the bottom part.

Figure 2.16 Digitalization Letter 'e'

Next is letter 't'. For part 1, I copied the rectangle and rotate it 90°. Part 2, I used the pen tool and made the stroke 110 pt following the other letter. And for part 3 I cut the rectangle and put it at the top.

Figure 2.17 Digitalization Letter 't'

The next letter is 'g'. For part 1, I copied letter o. Part 2 is like the letter 't' where I cut the rectangle and put it at the top. And for part 3, I used the pen tool and the stroke size is the same as the letter 't' which is 110 pt.

Figure 2.18 Digitalization Letter 'g'

The next letter is 'y'. Part 1 is like the other one which is the cut part of the rectangle. Part 2, I used the pen tool to create it, to adjust it symmetrically, I add the circle from o as a guide so I can curve them. For part 3, I copied the part 3 from the letter 'g'.

Figure 2.19 Digitalization Letter 'y', part 1 

Figure 2.20 Digitalization Letter 'y', part 2

The last letter is letter 'm' which is the hardest for me to make. Firstly, I copied the rectangle and copied the eclipse. I adjust the eclipse so that it can touch the rectangle.

Figure 2.21 Digitalization Letter 'm', part 1

Then I cut the yellow part.

Figure 2.22 Digitalization Letter 'm', part 2

Then I copied the eclipse to make a hole in in and I cut it into half.

Figure 2.23 Digitalization Letter 'm', part 3

Figure 2.24 Digitalization Letter 'm', part 4

Then I duplicate it and flip it horizontally.

Figure 2.25 Digitalization Letter 'm', part 5

And the last is the punctuations. For '!' I just flip letter 'i' vertically. For '.' I just add the dot from letter 'i'. For ',', I copied the full stop and add the end by using the pen tool and curve it.

Figure 2.26 Digitalization Punctuations

That was my second trial of digitalization for some letters. As you can see I remake my letter g, m, t, y, and ','. 

Figure 2.27 Digitalized Sketch 'before'

Figure 2.28 Digitalized Sketch 'after'

And this is my digitalized sketch 2.

Figure 2.29 Digitalized Sketch 2

Measurement

• Ascender : 735 pt
   
  
  
  Figure 2.30 Ascender Height
  
  
• Capital Height : 698 pt
  
  
  
  Figure 2.31 Capital Height
  
  
• X-height : 500 pt
  
  
  
  Figure 2.32 X-Height
  
  
• Descender : -230 pt
  
  
  
  Figure 2.34 Descender
  

  
  

And then I start to put them into Fontlab. I used the Fontlab 7 Demo. I named my font as "Vlinder", which translates from Dutch as butterfly. I do not know why but when I look at my letter 'm' it reminds me to a butterfly so I named it as a butterfly but in Dutch.

Figure 2.35 Vlinder Meaning

Figure 2.36 Font and Family Names, Font Style Attributes

Figure 2.37 Family Dimensions

Figure 2.38 Fonts Dimensions

Figure 2.39 Letter Display on Fontlab

Figure 2.40 Metrics Tab

Final Outcome

The link to download my font :
https://drive.google.com/drive/folders/1Y9g3tp0c6V-fR71j9MnkJWWUdkBpPG5N?usp=sharing

These are the final outcome for my task 3A.

Figure 2.41 Type Design Final Outcome

For the poster I add butterflies behind the texts as it resembles the font name. And I rotate the text to make it looks like it flies with the butterflies.

Figure 2.42 Poster Final Outcome


Type Design Final Outcome


Poster Final Outcome

Revised Final Outcome

Mr. Vinod said I cannot use graphic on my poster so I remove the butterflies.

Figure 2.43 Revised Final Outcome Poster


Revised Final Outcome Poster

---

FEEDBACKS

Week 9 :

General Feedback : Make sure to keep the font that we designed looks consistent. 

Week 10 :
Specific Feedback :

• Mr. Vinod said that my font is interesting and certainly has potential but needs more time to work on the refinement. The poster must not have any graphics, you must compose the sentence with the A4.
• Mr. Charles said that my e-portfolio has a good progress.

---

REFLECTIONS

Experience : 
I think this is more fun than the other 2 task before, but I find it challenging as well. There are many details and research we need to see and do. I had a lot of fun doing the sketches, I tried some styles of font. Mr. Vinod is very detailed when he gave us the feedbacks, he also gave us some demo to improve our font and it was very helpful.

Observations :
I observed that there are so many fonts in the world. Some of them are symmetrical, some of them are not symmetrical, some have interesting history. I just realized how detailed when font are created.

Findings :
I find that it is easier for me to sketch the font with guidelines. I also find that when I do more research, it helps me to do this task and helps me to gain more information about fonts and letters. There are many fun facts about fonts that I did not know before.

---

FURTHER READING

https://practicaltypography.com/

I read about "Why Typography Matters?" on this website. And this is what I can summarize from it.

• What is typography?
  Typography is the visual component of the written word. A text is a a sequence of words. A text stays the same no matter how it's rendered.
• What is good typography?
  
• Good typography reinforces the meaning of the text.
• Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit.
• Typography is not an algebra problem with one correct answer.
• Your ability to produce good typography depends on how well you understand the goals of your text, not on taste or visual training.
• Typography that is aesthetically pleasant, but that doesn’t reinforce the meaning of the text, is a failure. Typography that reinforces the meaning of the text, even if aesthetically unpleasant, is a success.
• Who is typography for?
• Typography is for the benefit of the reader, not the writer.
• Always be asking yourself: what does my reader want? Because your reader is quite different from you:
  
  
  
  Figure 4.1 Attention Span 1
  
  
• Unfortunately, professional writers sometimes imagine that the comparison looks like this:
  
  
  
  Figure 4.2 Attention Span 2
  
  
• Typography has to be oriented to actual readers, not idealized ones. Writers can get attached to idealized readers because they’re easier to please. That’s no surprise—they don’t exist.
• Where do the rules come from?
• For a long time—the typewriter era and then the early computer era—professional publishers could afford typesetting and printing devices that were financially impractical for individuals. So for most writers, the typographic standards of professional publishers were far out of reach.
• Why does typography matter?
• Typography matters because it helps conserve the most valuable resource you have as a writer—reader attention.
• Attention is the reader’s gift to you. That gift is precious. And finite.
  
• Once a reader revokes the gift of attention, you don’t have a reader anymore. Then you become a writer only in the narrowest sense of the word.
• Unfortunately, many professional writers adopt a high-risk model of reader attention. Instead of treating reader attention as a precious commodity, they treat it as an unlimited resource. “I’ll take as much attention as I need, and if I want more, I’ll take that too.”
  
• Good typography can help your reader devote less attention to the mechanics of reading and more attention to your message. Conversely, bad typography can distract your reader and undermine your message.
  
• Not suggesting that the quality of your typography is more important than the quality of your writing. It’s not. But typography can make good writing even better.
• It’s easy to learn the skills to produce good typography. Beyond that, you need only the ability to form opinions about typography. And everyone who reads—even kids—can do this.

And next, I read about this book. It is called the "Lettering & Type: Creating Letters Designing Typefaces".

Figure 4.3 Lettering & Type: Creating Letters Designing Typefaces

This is some of the things that I learned from this book especially on the part called "Legibility, Context, and Creativity". 

• Like buildings, letterforms reflect the climate and the cultural environment for which they are designed while adopting the personality of their content and designers. 
• Letters appearance can evoke a surprisingly wide range of emoticons and associations even though they are inherently functional.
• Letters or words whose visual form confuses or overwhelms the viewer disrupt communication and diminish their own functionality.
• Two thousand years of reading and writing the roman alphabet have shaped the standards of legibility and continue to sculpt it today.
• 19th Century, typographers considered sans serif typefaces crude and hard-to-read but these faces are ubiquitous and widely accepted in the 21th century.
• As early as the 9th century, scholars, artists, and politicians associated with these qualities with Imperial Rome and sought to invoke them by adopting Roman lettering styles.

Reference:

Willen, B. (2009). Lettering & type: creating letters designing typefaces. 

       Princeton Architectural Press, New York.