Typography / Task 3: Type Design & Communication

22.5.2023 - 30.6.2023 / Week 8 - Week 13

Michael Chan Henn Loong / 0363611

Typography / BA of Design (HONS) in Creative Media / Taylor's University

Task 3: Type Design & Communication

LECTURES

Refer to Task 1

INSTRUCTIONS

Task 3: Type Design & Communication

"You will endeavour to create a typeface that has the hallmarks of a good typeface; subtlety or character, presence, legibility and readability. Below are the letters you will design: a e t k g r i y m p n ! # , . Upon completion of the font, you will create a basic A4 size poster displaying your font."

Research-

Fig 1 Visual References

Before starting with my sketches was looking at various fonts for different inspirations as I don't really have an idea on my mind on what I'm going to create.

Practice Writing-

Fig 2.1 Tools with different nibs for writing task

Fig 2.2 Practice 1

Fig 2.3 Practice 2

We were asked to use 5 different tools with different nibs to write down what is shown above in Fig 2.2. While dealing with this practice there are few rules that we need to comply with

One line for one stroke.
Do not go over the same stroke again even though its not complete.
When writing letter like 'O', draw two semi circle to form the letter.

Fig 2.4 Class session practice

After the class session practice we were asked to write out 'a e t k g r i y m p n' OR ' A E T K G R I Y M P N ' with different tools .

Fig 2.5 Writing task

Tools used-

Sharpie
Artline 0.5
Water based round head
Water based brush
Screwdriver

Final Writing-

Fig 2.6 Final Writing Practice (1)

Fig 2.7 Final Writing Practice (2)

Fig 2.8 Final Writing Practice (3)

After posting my practiced writing style on the FB group Mr. Vinod gave me feedback and with the feedback I practice on the suggested writing styles and after comparing both I think I like Fig 2.6 more so I carried on to the next part of the project with it, but I also tried to do a digitisation version for Fig 2.8.

Deconstruction

Digitisation-

Fig 3.1 Mr. Vinod's Demonstration

After all the writing we are asked to move our work into AI and digitise it. Mr. Vinod demonstrated to us in the class on how to create outlines and strokes and also on how to create textures for the letters so that it looks more natural.

(Add in process of construction, evidence to proof what youve done throughout the whole task)

Make sure to change lines into outline strokes by going to 'Object' , 'Path' then 'Outline strokes'
Make sure there's not a lot of pointers nearby each other
Use brush to create texture for the word

Fig 3.2 Digitisation (1)

Fig 3.3 Digitisation (2)

For Fig 3.2 it is written out with sharpie pen so there is a certain of thickness in the writings, so I thought of using the rectangular tools to create the outline strokes and used the brush pen to create the texture that I have created in the writings. As for Fig 3.3 is written down with a thinner water based brush which caused the weight of the writings lower compared to Fig3.2 so I used brush tool to create the digitise version of it so that it looks thinner.

Fig 3.4 Guides

I've also added in Guides as instructed by Mr. Vinod in the lecture.

Ascender line: 736PT
Cap line: 700PT
Median line: 500PT
Base line: 0 PT
Descender line: -210 PT
Overshoot: This is a line I added in while I was creating my Comma and Period

Fig 3.5 Demonstration on refinement

In week 10 Mr. Vinod demonstrated to us on how to make a digitised font more refined unlike the works we've done earlier on.

(Can add in the Outline pics also)(CTRL Y)

Fig 3.6 Evolution of my refinement

Looking at the first row the letters are more or a rectangle then the second row I used the direct selection tool to make the curves in the letters, third row I added in more refinement with the letters but after showing Mr. Vinod and gotten the feedback I learned that some of my letters somehow look a little bit unnatural so I went to Google Font and Font share to have a comparison of my work with some developed works that are similar to mine and I proceeded and created the fourth row which is the final version of my digital writing.

Creating Punctuation

Fig 4.1 Construction of Comma

Comma is roughly height of two stacked periods. The comma's head should be slightly smaller than the period.

Fig 4.2 Different types of Comma

Fig 4.3 First attempt on punctuation

So this is my first attempt on constructing my own punctuations for the Comma I created two versions of it to show Mr. Vinod for feedback as for the Exclamation mark and hashtag I made them round because I noticed that mostly all my letters are rounded so that in this way there is consistency in them.

Final Amendments

Fig 4.4 Amendments

I decided to change the middle part of the hashtag to a more rounded shape as most of my alphabet designs are rounded, so that this hashtag wouldn't stand out on its own.

Fig 4.5 Final Amendments

So I decided to use the more crooked Corma, and also changed the hashtag to a more rounded design. I actually think the straighter version corma is better but from what I can remember corma should be a little bit curved that is why I made this choice.

Fig 4.6 Final Type design

Font Lab

Fig 5.1 Kerning In Font Lab

At the very beginning of the kerning phase I adjusted all the left alignment to zero so it is easier for me to do the kerning after that I started adjusting the right alignment accordingly. I started off with the basic combination that Mr. Vinod gave us as it is my first time so I'm still not satisfied with it so there will be further adjustments with other letter combinations.

Fig 5.2 Kerning In Font Lab

These are the letter combinations I tried to kern with in Font lab, I'm actually unsatisfied with the result as some of the combinations seems too far apart some seems too near to each other. I think especially letter K is pretty hard to deal with and I'm not sure how to deal with it.

Fig 5.3 Fonts in Font Lab

After putting in all the fonts I needed to name my font so that I can export the font and download it in Adobe Illustrator. So it took me awhile to get the names, but in the end I've decided to name it Round HL Regular because most of my designs are rounded and HL is my name and it looked regular so that is how the name is decided.

Designing Poster

Fig 6.1 First attempt on Poster designing

These are my first attempt on creating my poster, I didn't actually thought of any rules I didn't check the alignment and stuff so when I submitted this poster to Mr. Vinod I'm told that it doesn't work I need to work on it again to get a better result.

Fig 6.2 Poster Demonstrated by Mr. Vinod

During the session Mr. Vinod taught me on how to make my poster better by aligning the words and also make sure that the words are all in the same size. So from there I proceeded with creating my own poster design.

Fig 6.3 Advance Poster Design

So after getting guidance from Mr. Vinod I created these 4 variants of my poster and my personal favorite is both of the posters at the bottom. I chose the bottom right as my final poster design because I've actually asked some of my friends to take a look at them both and choose the one they like most of them chose the one at the bottom right and the reasons they didn't choose the bottom left is because of the complexity. They said it's confusing at first glance they cant find the words but the idea on the word KING & GAME is cool but there's no point of making it cool when your audience couldn't understand the stuff you're trying to send them so for the final I chose the bottom right poster.

Final Poster Design

Fig 7.1 Kerning for the sentence

Fig 7.2 Font Download Link

Font download-

https://drive.google.com/drive/folders/1ZCM4hsaqypmy9oXF3RXjVto2owzbqXs_

Fig 7.3 Final Poster Design

Fig 7.4 Final Poster Design

Fig 7.5 Round HL Regular

Fig 7.6 Round HL Regular

FEEDBACK

Week 8

General Feedback:

Letters should be written down not designed and make sure that all letters properly alligned on the base line, Once choice have been made start practice writing in that designated style.

Specific Feedback:

The 4th one has potential, maybe explore both 1st and 4th for further progress. Start practice writing in that style now and later on decide the letters that will be using for the digitisation.

Week 9

General Feedback:

Strokes can be repeatedly used so that there are consistency in the letters. Can have 1 to 2 different strokes so that the letters wont look that digitalised.

Specific Feedback:

Make sure that all strokes are consistent if one is bold then the others need to be bold too.

Week 10

General Feedback: Make sure angles are consistent like holding the pen in one direction, using the same strokes in the process provides consistency. Can use 2 strokes but initially will only be using one for an example using the strokes in P on R.

Week 11

Absent

Week 12

General Feedback:

Make sure that the point sizes are the same.

Specific Feedback:

Composition doesn't work try working it out again, alignments are important, with proper alignment the poster would be presented in a more fluent and compatible way.

REFLECTION

Experience:

This task is actually pretty fun, I thought that this task is going to be easy and fast but I'm wrong in every way. It's fun in every way but tedious as well, there are so many stuff to be measured and considered in creating your own fonts it requires a huge amount of work and experience to make a good font. I've learned a lot of things while using font lab, but not gonna lie the process of learning and getting used to font lab is pretty exhausting as it's my first time I struggled a lot when using Font Lab, but in the end I learned a lot in this task.

Observation:

I noticed that I tend to like drift off when I'm designing my work, I usually gets a lot of different ideas when I'm dealing with my design so sometimes I keep changing and I tend to like get lost in my own world and drifted off too far away from the original that I've wanted to create, so I think I really need to think properly next time on what I really want to create then only I proceed with the next step.

Findings:

I'm very glad that I have this chance to work with this task, because as the longer I work with it I noticed that even though we only have 11 letters and some punctuation we are suffering a lot, but what about the other typefaces that other creators designed ? With this task I've noticed that everything needs to be done precisely, everything is about detail. I admire the patience everyone have while creating these fonts.

A grid is a skeletal framework used by designers to organize information within a spatial field. It is a system characterized by the dualities of freedom and constraint, simplicity and complexity. It provides a strategy for composing text and other visual information in two and three dimensional space, including those of printed materials, film, computer screens, built environment, and typographic installation. Grid system helps designer to transfer information clearly and optimal accessibility - highly desirable traits in a world increasingly inundated by visual noise.

Fig 8.3 Typographic Design: Syntax and Communication

Like typographic anatomy, typographic syntax has a language that must be learned if one is to understand typographic design. Syntax is the connecting of typographic signs to form words and sentences on the page. The elements of design - letter, word, line, column and margin are made into a cohesive whole through the use of typographic space, visual hierarchy, ABA form, and grid systems.

Fig 8.4 Typographic Design: The Typographic Message

Typographic message is something like a language of potent visible signs, it's like a language that is capable of educating, persuading, informing or even entertaining. When typographic signs are created with an informed eye and mind, they can achieve clarity, expression, lucidity, aesthetic beauty and more. Typographic messages pervade our culture to the degree that they are often taken for granted or not noticed at all, but those that are etched into the mind and memory are characterized by a relationship between content and form.

Fig 8.5 Typographic Design: Typography on Screen

As mentioned in the book, more designers become involved in on-screen design, the use to preserve typography integrity in this environment becomes paramount. Doing so, however is complicated by rapidly changing technology: screen sizes, screen resolutions and new types of interactive.

So the legibility factors for on-screen typography consists of the capital and lowercase letters, interletter and interwood spacing, line length and interline spacing, weight and width, alignment, units of texts and white space. All these are to be considered carefully so that it's suitable for on-screen typography.

Fig 8.6 Typographic Design: Typographic Design Education

So as the rapid advance of technology and the expanding role of visual and media-based communication in contemporary society have created new challenges for typographic education. Faced with a complex communications environment, and the changes that are occurring and are anticipated, how can a designer nurture sensitivity to typographic form and communication? An appreciation of our typographic heritage, an ability to meet the standards of contemporary design practice, and an innovate spirit in facing the future are required.

Search This Blog

Michael Chan Henn Loong (0363611)