Typography Task 3-Type Design and Communication


2.6.2023 - 30.6.2023(Week9 - Week 14)

Low Li Vern/ 0362678

Typography/ Bachelor of Design (Honours) in Creative Media

Task 3




LECTURES

Lectures can be referred at Task 1



INSTRUCTIONS




Task 3: Type Design & Communication

1. Experimental & exploration stage
- write AOTMX for all tools in 5 different ways to choose which look more interesting.
- select 1 option from the 5 different tools and write "a e t k g r i y m p n" in the selected style, choose either uppercase or lowercase to write in.
- write the letters in diagonal, horizontal, vertical, and circular lines for all 5 tools in different ways for each tool.

Make sure the 5 different selected options are written on one graph paper. Next, choose each favorite writing style from each tool and practice the writing for a few times.


A good font should have:
1.Presence
2.Readability
3.Legibility
4.Subtlety

For this task, Mr. Vinod introduced to us of  the information about baseline, descender, cap height, and x-height in typography. The x-height refers to the height of lowercase letters, specifically the distance between the baseline and the top of lowercase letters like "x." 

The tools that I have selected are:
- Calligraphy Pen 2.0
- Pigment Ink 1.2
- Artline 210 medium 0.6
-Artline 70 marker
- Artline 590A

Fig. 1.1 Tools

2. Research

What should we do before our progression is to have some research. Study different font styles and classifications to understand their characteristics. I have look for inspiration from various sources such as books, websites, and existing fonts such as google font.

Fig 1.2 Google Font Research

After study different font design I realize that a lot of fonts look similar but when you study it more you will find the different details in it.

Fig 1.3  Website of different styles marker font

Through research I know that different writings, different size and different marker style makes different feeling. It may be a design that express personal styles.

The importance of font design is font design holds significant importance in various aspects of communication and design. 

Fig 1.4 Research on letters height

There is some difference for the height within uppercase letters and lowercase letters. The ascender height, along with other typographic elements such as x-height, descender height, and cap height, contributes to the overall legibility, readability, and visual harmony of the typeface. It is an essential consideration in font design, ensuring that the ascenders of lowercase letters are proportionate and consistent within a typeface.

Cap Height is important when using uppercase letters as designCap height refers to the height of uppercase letters in a font.
It is the distance from the baseline to the top of the uppercase letters, such as "A," "B," or "C." Cap height determines the maximum vertical space occupied by capital letters within a font.

Through chat gpt, I have a research on how to make a better font and key reasons highlighting its significance is :
1. Readability and Legibility
2. Visual Appeal and Aesthetics
3. Recognition
4. User Experience
5. Communication Hierarchy
6. Expressing Personality and Tone

3. Deconstruction Letters
I choose Univers LT Std 67 Bold Condensed, Font size 500 pt, to conduct the deconstruction of the lowercase letters b, g, m.

Fig 1.5 Deconstruction of "b"


Fig 1.6 Deconstruction of "g"

Fig 1.7 Deconstruction of "m"

Fig 1.8 Deconstruction Letters

💗Design Process💗

1. Writing in different tools

We complete the initial task of writing "///\\ _ _ _ OOO AOTMX" with the five different tools. We can see difference through trying the different tools and make some interesting develop for task 3.This task allowed for further exploration of the tools' capabilities and encouraged creative expression in representing the specified letters.
Fig. 2.1 First try on different tools

I use 5 different tools to write letter "A E T K G R I Y M P N" , I prefer more on uppercase letters as my writings is not good in small letters. I prefer writing the letters in a longer way. I find that the letters looks more interesting in thicker tools. It is hard to find difference in thin tools, so I decided to develop more in marker pen.

Fig. 2.2 Writings of 5different tools

Fig. 2.3 Feedback form Mr Vinod

Fig. 2.4 Marker 70

Fig. 2.5 Marker 509A

Fig. 2.6 Pigment ink


Fig. 2.7 Calligraphy Pen

Fig. 2.8 Artline 210

After feedback, I practice writing the style using marker pen. It helps on finding details and know how the style is. I practice using each tools by drawing strokes at different directions. Each tool exhibit their own unique type of strokes depending on the way it is held and the pressure exerted on the paper. It was fun to see how a difference in pen nib could significantly influence one's style of writing Through writing many times, I found that the letter P and letter R is different from other letters. It is a need to practice many times while developing our design, the details is more easily found through practice.

Fig. 2.9 Practice writing using marker

2. Digitalize writing

For this week we were taught on how to digitalize the final option of writing into Adobe Illustrator. First, we upload the photo of the most satisfied writing as jpg into Adobe Illustrator. After the steps, I use the calligraphy brush to write out my letters as the letters of my option is marker and the brush is more similar to my writing.

Fig 3.1 Calligraphy Brush first attempt

Fig 3.2 First try on sketch

Fig 3.3 First try on Digitalize

For the first try on digitalize, I have use the calligraphy brush with angle 58 degrees, roundness 30 percent, size 102pt. As it is a rough sketch on it, I decided to have another try by changing the angle and roundness.

Fig 3.4 Calligraphic Brush second attempt

For this settings of the calligraphic brush I use 90 degree angle, roundness 20 percent and size decrease to 100pt. And the difference compare to the first attempt is that the horizontal stroke is thinner.


Fig 3.5 Second try on sketch

Fig 3.6 Second try on Digitalize

I found that it is not similar to my writings for the  second attempt, so I decided to develop more in the the first attempt. I go to object > path > outline stroke , and make the details to look more like the original writing.

3. Details

Fig 4.1 Details of I

Mr Vinod assign us to choose three letters to make details of the stroke and try to apply the strokes with the same stroke. It makes the letters to be look like they are in the family and not different from others. I reflect the stroke on the bottom of the letter "I" , I refer to the original writing of the letter and find that the horizontal stroke of the letter is plump up and not flatten down.

Fig 4.2 Details of P

For the letter "P" I modify the stroke to make it smoother and the vertical stroke of the letter to be more similar to the original one.

Fig 4.3 Details of T

I change the vertical stroke same as the letter "T" too. It makes it look better in the group of letters, and after changing the details a I use the horizontal and vertical strokes as sample to change the details of other letters.


Fig 4.4 Changing details


Fig 4.5 Exported letters


Fig 4.6 Letters with symbols

4. Details After Feedback

After Mr Vinod give us feedback, I find out a terrible mistake that is the direction of the stroke is wrong. It is funny when the strokes have two different directions and I quickly redo the direction of the strokes and the details.

Fig 5.1 Letters Outline

Fig 5.2 Strokes

These are the strokes I have use to maintain the angle and the similar of the letters.


Fig 5.3 Final Attempt on letters



5.Font Lab

After the last attempt on my sketch and digitalize of the letters, finally I am going to let it be a font in Font Lab. I watch the videos that are provide from Mr Vinod, and I have a try on it.

Fig 6.1 Font Lab attempt

I put in the letters I design from Adobe Illustrator to Font Lab. The important thing to remember is that I need to merge the letters outline stroke first before importing the letters to Font Lab. 

Fig 6.2 Writing sentence using the font design

I try to write out a sentence using my own designed font. It is a wonderful feeling as the font is designed by myself. But the space between the letters is awkward and it needs to be kern before it be a final submission.

Fig 6.3 Space between the letters

I use this to control the spacing between the letters, but I find it sometimes difficult because when you kern the letter it will affect the others. Such as, when I kern the letter A the other letter A will also change the spacing and it makes worse. But at last I try to make it more equal and it turn out to be better.

Fig 6.4 Sentence after kerning

6. Poster
For the last task we were assigned to make a poster. We need to write a sentence and apply it on the poster by using our own font that we design. I try a few layouts that I think it is interesting.

Fig 7.1 #1 layout design

Fig 7.2 #2 layout design

Fig 7.3 #3 layout design

For the colour of the poster I decide to use black background and white colour words.  It makes a cooler and interesting look and I thought it attracts more than normal colouring. 

I have chosen layout design 3 after week 12 feedback. Mr Vinod says that the third poster is interesting and because of the big size of letters the readability won't be destroyed. I like the third design too because it looks like a book cover and it attract others more to have a look on my font design.

Final Task 3 Outcome


Fig 8.1 Final Letters Artboard

Font Preview!!!

Fig 8.2 New Metrics Window

At last to introduce texture to the poster, I incorporated a paper texture by inserting a png image. I adjusted the blending mode of the layer to Screens and reduced the opacity. This ensures that the texture doesn't overshadow the words and maintains the clarity of the poster's message.


Fig 8.3 Texture

Fig 8.4 Final Poster



FEEDBACK

Week 8 General Feedback:
We need to write out the letters not to design the letters. Use different types of pens can make different interesting writing.
Week 8 Specific Feedback: 
Mr Vinod prefer the writing using marker, it’s weightier and will make a cooler display font. 

Week 9 General Feedback:
 Take a picture and put it in Adobe Illustrator and place them on a baseline to see more clearly. Remember to leave some space at the top of the letters. Check the stroke are they assistant. Do not let the letters be over the descender point.
Week 9 Specific Feedback: 
Research is important for typography design. Make sure the letters looks like they are in the same family. Let the letters all be on the baseline, only make the letters be a little floating not too much.

Week10 General Feedback: 
The letters need to be accurate. Let the letters be in the same angle, it makes more look like they are in the family. Use two different strokes can make it not so consistent. 
 Week10 Specific Feedback: 
Make the strokes be the same, and make it better not changing the design. Let the spirit still be there and not redo it. Can refer to google font to search for similar design.

Week 11 General Feedback: 
Make sure the logic of the brush is correct. Look more at the angle of the stroke to make it more detail. Make the angle to be more refined. 
Week 11 Specific Feedback:
 The letters look funny because the stroke is not same angle, make it the same angle. The horizontal stroke of the letter T is too long. Don’t let the apostrophe to have too much design. The letter A, E is nice and good constructed. The letter G can try on the using the circle stroke as sample to refer to the letters in the front.

Week 12 General Feedback: 
Make sure to follow the instruction that is made. Remember to note down things said in class to make sure not to forget. The font size should not change.
Week 12 Specific Feedback:
Nice design, only need to change the credits to left align and same height with the text. I have learnt on how to add a texture design by taking pictures and use photoshop and add it on my poster.



REFLECTIONS


Experience

At First I feel that this task is difficult for me because my writing is not good and I feel sad for it. But after research and some practice I found that this task is not as hard as I think. I find it interesting and a sense of accomplishment when I done some of the work. I feel excited when I tried out the Font Lab and type out the font I design by myself. It is a new journey for me and I have learn a lot of techniques from this task.

Observation

It is really important for us to always revise the lecture to not make mistakes that are already told. I have be more familiar with the ascender, descender and cap height after this task. I have a lot of research on the font design and find that it is a lot of interesting font designed and to use.

Findings

When design the font Mr Vinod always emphasize that the angle and the strokes of the font must be equal and not to distort it. Some fonts exhibit high stroke contrast between thick and thin lines, while others may have more consistent stroke widths. Observe how this stroke contrast influences the overall character and readability of the font.


Further Readings

Fig 9.1 The Complete Manual of Typography by James Felici
 
Fig 9.2 Page 29 of the book

From this further reading I learn that have specific parts and features, and studying font anatomy involves understanding the terminology used to describe these elements. You can learn about terms such as ascenders, descenders, serifs, counters, stems, and terminals, which help in identifying and discussing different aspects of letterforms.

Other than that, fonts are used in various contexts and mediums, including print, digital, and multimedia. Learning about font usage involves understanding typographic considerations for different applications, such as editorial design, web design, user interfaces, branding, packaging, and signage.


THE END




Comments

Popular Posts