Typography / Task 3A: Type Design & Communication

on

10.15.2021 - 10.22.2021 (Week 8 - Week 10)
Audrey Gracia Djohari / 0348120
Typography 
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Task 3: Type Design & Communication


POSTS LINKS


LECTURES

* Click here to see the previous Lectures

WEEK 7: 

- Typo Task 3A Typeface Construction (Shapes) -

On this lecture video, Mr. Vinod teaches us how to make typeface construction in Adobe Illustrator.

  1. Do some research.
  2. Choose a good typeface and deconstruct it (in Illustrator) to see the nuance and details of how letterforms are constructed.
  3. Make idea sketches, 5 sketches or more are good.
  4. Go to Adobe Illustrator and create the Artboards. (1000 pt x 1000 pt)
  5. Create a square (500 pt x 500 pt) to form the x height.
  6. Type some letters and drag the guide to identify the x height, ascender line, cap line, descender line, and base line. After doing this, you'll have your letterform basic structure.
  7. Delete everything except for the guide lines.
  8. Start constructing the letterforms using shapes in Illustrator. Follow the guide lines to have a proportional letterforms.
Fig, 1.0: Deconstructed Letter 'R'


WEEK 8: (Independent Learning Week)

Mr. Vinod mentioned some instagram accounts that show great examples of type designs:

  
Fig. 1.1: Examples of good typefaces
Personal Notes:
  • Mr. Vinod reminded us to use the guide lines when sketching: ascender line, capital line, x-height, median line, baseline, descender line.
  • Overshoots (a, o, etc.) types need to breach the baseline a bit, not the top.
  • X-height must be 500 pt, canvas is 1000 pt
Our font design has to be made based on the typography guidelines such as baseline, median, ascender and descender. I also find this glossary of typographic terms very helpful to determine the anatomy of my type. I retrieved this image from Typography Class Facebook Page.

Fig. 1.2 : Typographic Terms

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/12VYi4ScPBFSzSMpoNWi98zt0tGEshts3/preview" width="640" height="480" allow="autoplay"></iframe>

Different approaches in presentation is acceptable, as long as the process consist of the major elements:
  1. Research (other typefaces. deconstruction 3 letters from 10)
  2. Exploration (sketches minimum 5, good variety)
  3. Digitization (document your progression)
  4. Fontlab progression
  5. Font generation and basic BW poster

PRACTICAL
 
- Task 3A: Type Design & Communication -

For this task, we are to create a typeface for these following characters:
a i m e p i t g d o b . , !

WEEK 7:

- Research

I did some research and found these fonts from Pinterest. I was fascinated by these simple yet elegant typefaces from the pictures below. Most of them are constructed by a line with the same size, however, they manage to look balanced and compelling.

 

Fig. 2.0, 2.1, 2.2 : Minimalist Fonts, References

I like this font the most. It has a this condensed style which makes it unique. It also has an appealing  proportion, the uniqueness can be seen on every upper bowl and other upper elements that are placed higher (can be found on the 'B' and 'R') while  the lower elements are placed lower than normal (can be found in 'E' and 'W'), resulting a dynamic look.
 
Fig. 2.3: Gogoia Font as Primary Reference


WEEK 8:
- Idea Exploration & Sketches

After doing some research, I started drawing the typeface in ProCreate. I created 5 initial sketches. I found it quite difficult to come up with original ideas. I honestly wasn't satisfied with the typefaces I created, especially the one that has different size on each stroke, I just felt like I didn't put the accents in the right place. So I decided to go with Option #2. I made the Option #2 font's style simple and thin on purpose, because I do not like fonts that are thick and have too much accent. I always use fonts like Gill Sans, Galviji, Futura, etc. So I think it's better for me to stick with that style so I could make a neat design.
Fig. 3.0: Ideation Sketches, 10.14.2021



- Identify and deconstruct references

To gain deeper knowledge of font style and shapes I have to do deconstruction on another typeface. Unfortunately, the 10 typefaces that mr. Vinod provided don't match my design. So I choose Gagoia Font since it kind of matches my typeface design idea. I decided to dissect the letter 'M', 'P' and 'A'.
Fig. 4.0: Deconstructed "M", Gagoia, 10.10.2021

Fig. 4.1: Deconstructed "P", Gagoia, 10.10.2021

Fig. 4.2: Deconstructed "A", Gagoia, 10.10.2021
Findings:
  • Gagoia Font only use 1 size for its construction lines. No accents and no 
  • There are variations of character width. 'M' is slightly wider than the other characters. However, they are all still in condensed zone.
  • Their heights are consistent.
  • The curves can be measured by perfect circles with consistent ratio.
  • They have dull ends.
  • They have 3 borders that divide and determine where to put the upper elements (usually the upper bowls),  the center elements (crossbar of 'A', etc.), and the lower elements (crossbar of 'E').
- Digitization (1st Attempt)

Fig. 5.0: Making Guide Lines, 10.14.2021

First, I created the artboards on Adobe Illustrator (height: 1000 pt). Then, I created a square (500 pt x 500 pt) as the x-height height. Then I pasted a text with original typeface and fit it to the x-height. Next I created the guide lines by following the size of the characters by dragging the measurement lines from the side.

WEEK 9:

The figure below are the elements I used for my type (Option #2):

Fig. 5.1: Option #2 Elements, 10.21.2021

The figures below are my first and second outcomes. However, Mr. Vinod said they are too thin so it's hard to read them in a smaller point size. I could see what he means, I didn't realize it before because I always saw the typeface in a big point size. I also realized that my comma wasn't big and long enough, it looks too much like a period.

Fig. 5.2: Option #2 in Adobe Illustrator, Attempt #1, 10.21.2021


Fig. 5.3: Variation of Option #2 in Adobe Illustrator, Attempt #2, 10.21.2021

- Digitization (2nd Attempt)

On the second digitization, I reconstruct the letters by using thicker lines, and I eliminated the decorative lines as well because it makes the font look unfinished. And these are the process I did from the first digitization to the final outcome. I've written the details at the bottom of each character.
Fig. 6.0: Construction Progress of 'a', 10.22.2021

Fig. 6.1: Construction Progress of 'b', 10.22.2021

Fig. 6.2: Construction Progress of 'm', 10.22.2021

I pressed 'Command + Y' to change the view of the artboards into a black and white screen showing only the outline. This really helps me a lot to see the problems and inconsistency.

Changes I made from the first design to the final design:
  • I made the line size much bigger until it's readable.
  • I made the 'd' stems higher until it reaches ascender.
  • I smoothened the curves for 'a', 'b', 'd', 'p', 'o'.
  • I made the comma, period dot and the dots on '!' and 'i' bigger.
  • I made the comma tail longer.
  • I eliminated the head serifs and spurs.
  • I eliminated all decorative and unnecessary lines to keep the simplicity.

Fig. 6.3: Typeface Construction, 10.22.2021

After feeling satisfied with the design, I trimmed and united them as one shape for each character.

Fig. 6.4: Trimmed Typeface, 10.22.2021


- Final Typeface Construction

Fig. 7.0: Final Typeface with Guide Lines, 10.22.2021

Fig. 7.0: Final Typeface, 10.22.2021


- Measurement (from baseline)

  • Ascender: 732 pt
  • Capital height: 695 pt
  • Median: 500 pt
  • Baseline: 0 pt
  • Descender: -230 pt

Fig. 8.0: Digitized Design Measurement, 10.22.2021

WEEK 10:

- FontLab 7 Progression

Next I copied the shapes in Adobe Illustrator and paste it as a vector file in FontLab7. I readjusted the guide lines in FontLab 7 to fit my design by clicking File > Font Info. And for the spaces at the sides of the character, I input 60 pt.

Fig 9.0: Copying and pasting the letters into FontLab 7, 10.28.2021


Fig 9.1: Adding Letters in FontLab 7, 10.28.2021
After I finish adding all the characters, I click Window > New Metric Tab. There, I did some more adjustments to the kerning. I did most of the kerning for the letter 't' because it often looks too far from other letters adjacent to it. 

Fig. 9.2: Letter kerning in FontLab 7, 10.28.2021

Fig. 9.3: Metric Tab, 10.28.2021

I named the typeface Goola which has the same sound as 'Gula', meaning "sugar" in both Bahasa Indonesia and Malay. I like 'gula' because it's sweet and it suits the font.

After finishing Goola Regular, I decided to make another version: Goola Black. It has a wider character length and a thicker strokes. You can download it from the link below (at the Final Outcome section).
Fig. 9.4: Goola Variants: Regular & Black, 10.28.2021

- Posters



Fig. 10.0: Font Black & White Poster #1, 10.28.2021


Fig. 10.1: Font Black & White Poster #2, 10.28.2021

Fig. 10.2: Font Poster, 3rd Attempt, 10.28.2021

I tried to apply Goola typeface in coloured designs:
Fig. 10.3: Font Application #1, 10.28.2021

Fig. 10.4: Font Application #2, 10.28.2021



- Goola Font Tester

Hello visitors, feel free to try typing my font ! 
Available characters ---> (  a y d b o e i t g p m . , ! )



- Final Outcome


Fig. 11.0: Goola Font Link, 10.28.2021

Fig. 11.1: Goola Font in JPG, 10.28.2021


Fig. 11.2: Final Outcome, Goola Black & White Poster in JPG, 10.28.2021

Fig. 11.3:  Goola Font in PDF, 10.28.2021

Fig. 11.4: Final Outcome, Goola Black and White Poster in PDF, 10.28.2021



FEEDBACK

WEEK 8: 

General Feedback
Use the help lines to make the sketch (ascender line, capital line, x height, base line, descender line). Pay attention to the overshoots -a, o, etc typesneed to breach the baseline a bit, not the top. X-height is 500 pts, canvas is 1000 pt.
Specific Feedback
Do more research to have a better understanding of type characters.
WEEK 9: 

General Feedback
Better to make the type line 100 pt wide, it would come up better as a font. Make the comma thicker. Refer to the serif typefaces.

Specific Feedback
Mr. Vinod said my type looks good from afar, but it needs to be thicker. Also, there are some parts (the 'a's curves) that need to be smoother. the 'd' needs to reach the ascender. Mr. Vinod suggested editing the end of lines's thickness to make the design more complex. The second design looks unfinished, there are still things need to be done there.


REFLECTION

Experience
I feel like this is one of the hardest design field for me. I had trouble understanding typefaces though I've done my research. However, I'm relieved now that I've managed to create my own typeface, the design might be simpler compared to my other work, but I really put my heart and soul into it. Through this project, I learned the details of typeface that are usually too small to be noticed. I hope I could make a better typeface next time.

Observations
I observed that the size of the lines and strokes matters. And fonts that look simple could also be as challenging. Consistency in size, shapes, curves is needed in creating a typeface, details are also crucial. A slight different in stroke size and overshoots could make a huge impact when we see the typeface from afar.

Findings
I found that to make a compelling typographic form I need to have a thorough understanding of the structure and style details. Serious research and analysis are very crucial. I found that the sense of balance and discipline is what it takes to create typefaces.
FURTHER READING

- Form and communication (2015)

Fig. 12.0: Form and communication (2015)

Reference:
Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.
(2015). Typographic design: Form and communication.
Hoboken, New Jersey: John Wiley & Sons, Inc.

Chapter 3: The Anatomy of Typography

  1. The parts of letterform
Designers and typographers can develop greater understanding and of and sensitivity to the visual harmony and complexity of the alphabet by understanding the vocabulary. An imaginary lines are needed to achieve precise alignments.

Fig. 12.1: Pg. 32, Form and communication (2015)



Fig. 12.2: Pg. 33, Form and communication (2015)

2. The proportions of letterform

These 4 major variables control and give huge impact to letterforms.
  • stroke to height ratio
  • contrast in stroke weight
  • expended and condensed style
  • x-height and proportions
Important Note:
  • the weight of the thick and thin lines in the letterforms must be consistent.
  • the optical alignments of the letterforms must appear even.
  • pay attention to the distribution of light and dark within each character to reach the eveness of tone within the font. 
Fig. 12.2: Pg. 34, Form and communication (2015)


- Vignelli Canon on Design


Fig. 12.3: The Vignelli Canon (2010)

Reference:
Massimo, V.
(2010). The Vignelli Canon
Baden, Switzerland: Lars Müller.

Page 24: Visual Power

A good design must have be strong in concept, form, color, texture or any or all of them. Good Design is always an expression of creative strength bringing forward clear concepts expressed in beautiful form and color, where every element expresses the content in the most forceful way.


In graphic design, difference of scale within the same page can give a very strong impact. Bold type contrasting with light type creates visually dynamic impressions. 


In three dimensional design, manipulating light through different textures and materials gives infinite and effective results. Changing scale and contrasting sizes provide an impressive array of possibilities.


It is essential that a design is imbued with visual strength and unique presence to achieve its purpose. Visual power is a subject which deserves great attention to achieve effective design.




Comments

Post a Comment