Typography // Task 03 A

October 05, 2021

Typography // Task 03 A

06.10.2021 - 27.10.2021 / Week 08 - 10
Rebecca Thoo Hui Ying / 0350359
Bachelor of Designs (Hons) in Creative Media
Typography Task 3: Part A

LECTURES

✧ Task 03 relates back to: Task 01's PART Typography in Different Mediums.

All lecture sessions done in Task 01

Week 07: 06.10.2021

We were given a brief by Mr Vinod & Dr Charles on Task 03. We are to watch the youtube video tutorial before we start the task as it will give us a more understanding of the task on hand.

Things to review for next week's class:

1. 3 to 4 sketches of the given letters & punctuations

2. Research on typefaces

3. Try to find a font from the 10 given typefaces to see which one fits with your idea

4. Deconstruct references

(Youtube) Tutorial Lecture:Typo Task 3A Typeface Construction (Shapes):

Fig 1.1 Letter "r" deconstruct

✧ The process of deconstructing is for us to look at how letters are formed by using shapes, seek the details of how the letterform is constructed.

✧ Overshoot: rounded forms tend to look smaller (less surface area)

Fig 1.2 X height & the overshoot on the round on the "d"

Project setting:

✧ Artboard size: 1000pt (when constructing, press shift + o + option to create a rectangular shape for the artboard)

✧ X height size: 500pt (w&h)

Use ruler guide to: (all must be within the artboard)

Fig 1.3 Typography basics

This image was taken from the Typography FB Group. It serves as a good guide for us when venturing into creating our own fonts. Things to look for when creating:

✧ x-height

✧ ascender height

✧ capital line

✧ descender line

✧ baseline

✧ median line

Independent Learning Week 07: 13.10.2021

Today is a consultation day for Sir to review and give feedback on our type design.

Fig 1.4 Good Type Design Examples

Mr Vinod shared with us 3 designs from Instagram that did a great job in creating typefaces.

(from right to left)

1. @grafik.media: https://www.instagram.com/p/CHNLqQ0hHPo/?utm_medium=copy_link

2. @polytypefoundry: https://www.instagram.com/p/CUH-UNVsXKb/?utm_medium=copy_link

3. @_hardal: https://www.instagram.com/p/CLmT2r5h_Yi/?utm_medium=copy_link

Fig 1.5 Shape Builder Tool on Ai

Sir took my letter 'a' design from #4 to give a demonstration of how we could use the shape builder tool to create the digitalised version of our typeface designs.

INSTRUCTIONS

EXERCISE

Task 03 (A): Type Design & Communication

We are to design a new typeface for the following chosen words:

a i m e p y t g d o b ! , .

Inspiration & Type Research (06.10.2021)

Fig 1.1 Font References

I went onto Pinterest to search for inspiration for this project. I've always liked fonts that are unique with their strokes, width & also the use of curves & the use of elements like the diamond shape.

Initial sketches (06.10.2021)

Fig 1.2 Initial Pencil Sketches (06.10.2021)

Initially I sketched the characters on graph paper, but i did not like the end results. As i feel like the "g" & the "y" are not drawn properly and it does look like the uppercase. Hence I redo the characters digitally.

1st draft Sketches (11.10.2021)

Fig 1.3 1st Draft Sketches (11.10.2021)

I created this sketch using Adobe Illustrator. By using the guide from (Fig 1.3 in the lecture's section) I am able to create the ascender, descender, median lines to determine how my characters are going to sit on. I ended up with 4 sets of designs. Personally, I gravitate towards #1 & #2. After reviewing with Sir, I've decided to go with #4.

Choosen Sketch (13.10.2021)

Fig 1.4 Type Design #4 concept comparison with existing font

As the 10 fonts sir provided us did not match my idea, Mr Vinod mentioned for my case i can outsource a font that is similar to the design i had in mind. I found this font called Tangerine - Retro online that has a similar 'a', 'e', 'g' & 'o'. I will do the type deconstruction basing on this font I've found.

Type Deconstruction (13.10.2021)

Fig 2.1 Deconstructed "a", font reference: Tangerine - Retro (13.10.2021)

Fig 2.2 Deconstructed "m", font reference: Tangerine - Retro (13.10.2021)

Fig 2.3 Deconstructed "p", font reference: Tangerine - Retro (13.10.2021)

Through this, I've discovered the stem weight of "a", "m" & "p" are not the same, "a" 's stem weight is greater than the other two. I've also observed that this font type uses a lot of curves and circles to create the letter design.

Digitalisation (16.10.2021)

Fig 3.1 Determine the guidelines on artboard (16.10.2021)

I first determine the guidelines before my digitalisation to better understand the placement of my design.

Fig 3.2 Construction of the letter "m" (16.10.2021)

I struggled with creating the letter "m" and I've changed it three times before settling with the above.

Fig 3.3 Digitalisation Artboard process (16.10.2021)

Fig 3.4 Digitalisation process of each character (16.10.2021)

Fig 3.5 Digitalisation process in Outline version <command+Y> (16.10.2021)

First Digitalised Design (16.10.2021)

Fig 3.6 Finished First Design Digitalised (16.10.2021)

Amendments (20.10.2021)

Fig 4.1 Amendments on guidelines

Mr Vinod commented that I've missed out the Ascender line in my first guidelines, so I've amended it according to the lecture video sir had provided (except for the descender).

Measurements (from baseline)
Ascender: 733 pt
Capital line: 696 pt
Median: 500 pt

Baseline: 0pt
Descender: -225 pt

Fig 4.2 Construction process of "a" (20.10.2021)

Fig 4.3 Construction process of "m" (20.10.2021)

Fig 4.4 Construction process of "e" (20.10.2021)

Fig 4.5 Construction process of "y" (20.10.2021)

Fig 4.6 Font construction progress from the first version to the final revised version, kindly view it from top to bottom (20.10.2021)

Fig 4.7 Final Typeface in Outline version <command+Y> (20.10.2021)

Final Typeface Construction (24.10.2021)

Fig 4.8 Final Typeface with guidelines(24.10.2021)

Fig 4.9 Final Typeface (24.10.2021)

Fontlab7 Progressions (24.10.2021)

Fig 5.1 Importing design from Ai to Fontlab by copying & pasting it (24.10.2021)

Once the design was finalised, i referred back to Mr Vinod's tutorial on how to use Fontlab 7 in order to generate, adjust and create our own fonts.

Fig 5.2 Fontlab 7 Letter kernings in the Metrics Panel (24.10.2021)

Font Generation Process (24.10.2021)

Fig 5.3 Tiamo - Regular Display (24.10.2021)

Fig 5.4 Tiamo - Regular Display with the given 14 words (24.10.2021)

Fig 5.5 Tiamo - Regular Display Poster (24.10.2021)

I've made some posters to display my typeface design: Tiamo.

I know it's cheesy but the meaning behind the wording Tiamo means "i love you" in Italian, although the Italian spelling is spelt as "ti amo" I've decided to combine it for the name of this typeface design. I wanted to create a name using the letters given so i can showcase the font better.

Fig 5.6 Tiamo - Regular Black & White Poster Explorations (24.10.2021)

Tiamo - Regular, Font Tester:

Try typing the characters (a i m e p y t g d o b ! , .)

I followed Lim Jia Sheng's video tutorial on how to create this font tester as I think it will be a fun interaction for my page's visitors!

Final Typeface Design (25.10.2021)

Download Tiamo - Regular HERE.

Fig 6.1 Tiamo - Regular Final JPEG (25.10.2021)

Fig 6.2 Tiamo - Regular Final JPEG Black & White Poster (25.10.2021)

Fig 6.3 Tiamo - Regular Final PDF (25.10.2021)

Fig 6.4 Tiamo - Regular Final PDF Black & White Poster (25.10.2021)

FEEDBACK

Week 08: Independent Learning Week: Consultation for Typeface Construction (13.10.2021)

Lecturer's Feedback:

✧ All designs displayed have a consistent look & feel

✧ Analyse which part of it I will want to use, for example: the vertical strokes (is it going to be like the letters: m, t, p that I've created?) once decided on that, it becomes consistent. Hence i do not have to do different straights. The letter O will also affect the letter E.

✧ Consistency in its weight distribution

✧ #1 with its diamond shape, is overkill as there are lots of things going on with the type of decoration

✧ Sir suggested for design #4 make the vertical line on the letter 'a' thicker so that it gives a sense of consistency.

Fig 1.1 Sir's suggestion to make the vertical line thicker via Zoom

✧ Sir commented that it is looking like a nice font, suggestion to keep the circular shapes to keep them on the side so we can refer back to the shapes to create consistency

Week 09: Typeface Design Review (20.10.2021)

Lecturer's Feedback:

Fig 1.2 Sir's comments via Zoom

✧ The tails and beaks of letters needs more thickness added to it

✧ The crescent dot on the "i" can be removed, just insert a regular circle as it becomes too decorative

✧ Constructive issues with shapes: "y" & "d" (not as smooth as the letter "a")

✧ Consistency is missing in some other shapes

✧ Sir mentioned my typeface is relatively difficult, and i have managed pretty well

✧ Cut out the sharp beaks with a square box so that it will look more professional and to make sure to all are cut at the same angle n thickness

✧ Tricky to do the bottom part of lowercase "y" & "g" sir suggest to change it into a normal tail

Week 10: Typeface Design Submission & Portfolio (27.10.2021)

Lecturer's Feedback:

✧ Well written and documented.

✧ The "a" in fig. 2.1 is exquisite.

✧ The typeface is consistent in look and feel.

✧ The poster looks good although i would suggest the grey outline text to maintain the same point size as the black-filled text. Good work.

REFLECTIONS

Experience

This might be my favourite project to work on so far. In this project, I was challenged to step out of my comfort zone and create something entirely new - a new font. The project idea from the lectures itself was brilliant so it was up to me to execute the type i imagine in my head into a real thing. The process of creating a font lets us further dive into small details and things we normally will ignore if we were not taught, like the typographic basic terms, the arc, the loop, the tail and so on.

Observations

The observations were made during the breakdown, the deconstruction of the font. Because the font design i had chosen is more decorative, i used an outside font as a reference for me to deconstruct. I also learnt to pay closer attention to details when dealing with the digitalisation portion of the project, zooming into the finished design to check is vital. I've discovered the outline function on Adobe Illustrator after one of Sir's zoom classes (command + Y). It is very helpful in clearly showing me which needs fixing and which is perfectly done.

Findings

Creating something from scratch always needs time and patience. We will need to take into consideration the weight, width of each letter so it will be more consistency. Consistency is key in creating a new font.

Search This Blog

Thoo Hui Ying ✧ Rebecca (0350359)

Typography // Task 03 A

Comments

Post a Comment

Popular Posts

Professional Development Week

ADVANCED INTERACTIVE DESIGN // FINAL TASK