Typography Task 3A // Type Design & Communication

17.05.2022 - 31.05.22  Week 8 - Week 10

Lim Yi Xvan 0354552
Bachelor of Design in Creative Media
Task 3A

---

LECTURES

Week 9

We were assigned to watch the lectures and guides for Task 3A which were pre-recorded by Mr.Vinods on his YouTube playlists. Then, we may start off the progress by sketching our idea fonts out then only we digitalised it.

We were taught to use shapes to construct our own letterforms in the video Typo task 3A #19. After we created the construction for our typeface using the shapes, we must unite them. Besides, Mr.Vinods also taught us on how to apply width tool on paths created for typefaces so that we are able to make different strokes for the letters. 

The #20 and #21 Typo task 3A video was about how to export our typefaces to FontLab after we done constructing in Adobe Illustrator then moving forward to adjust the kernings, sizes etc.

fig 1.1 - pre-recorded lectures video on YouTube 

---

INSTRUCTIONS

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

Task 3A  // Type Design & Communication

In task 3A, we were assigned to design a design a limited number of western alphabets. First of all, we start with rough sketches for our idea of font design. Then only we decided on which to work out with on our digitalisation progress. Following are the letters that we were tasked to design in our task 3A:

a e t k g r i y m p n ! # , .

1. Sketches

Before doing the sketches for my idea on my typefaces, I've did some research on Pinterest and Behance.net for inspiration. And here're my inspiration for my sketches.

fig 1.2 - inspirations from Pinterest

I got few ideas from Pinterest as above then I sketch out 5 of the designs for my typefaces which combines the ideas and characteristics of fonts inspired from above. Here're my 5 design sketches for my typefaces.

fig 1.3 - 5 design sketches of typefaces, 23/5

#1 design: My idea was to create something in the theme of aqua life, I made the strokes looks like fins on the fishes and black dots in it looks like their eyes.

#2 design: This one was some minimalist style created with just simple strokes and straight lines.

#3 design: This one was my reference from the font Bodoni, I wanted my typefaces to be crooked which kinda brings the Halloween vibes.

#4 design: This one was quite similar with design #2 concept which was inspired by the modern Typography fonts which bring the space feel.

#5 design: This one was a reference of Bodoni too, which I decided to make the strokes lighter and focus the tails of each letters with the circle on them.

fig 1.4 - reference for designing typefaces (Bodoni)

2. Digitalisation 

First of all I started my digitalisation progress with my idea on design sketches #1, #2, #3 and #4 to see if which one was easier for me to construct and I picked #4 design as my final for further exploration. And here're some rough digitalisation I did for design #1, #2 and #3.

fig 1.5 - digitalisation of my sketches (1st attempts), 25/5

For the above digitalisation was created using pen tool to create paths and also divide the shapes with using pathfinders. For the strokes were created with the width tool. 

Then I think it was too hard and kinda take too much time to create the words above, so I started working with design sketches #5 and see if it's much more easier to construct. Here're my complete construction for design #5.

fig 1.6 - digitalisation of my typeface (1st attempt), 29/5

After week 10 class, I got my feedback from Mr.Vinods and then I did some changes on my letters 'a', 'e', 'g' and the symbol for '#' and ',' And here's my final outcome for the letters.

fig 1.7 - digitalisation of my typeface (final), 31/5

For the letter 'a', I removed the curves on the edge above and just replace it with a circle. Then for 'e' I also did remove the curves and dot on the left and added the strokes on the middle. The letter 'g' was the same as 'a'. For '#' and ',' I did make some changes on them by making the strokes wider and for tail of ',' as well. 

Here's an outline view for the letters and also the credit line.

fig 1.8 - credit line of my typeface (final), 31/5

fig 1.9 - outline view of my typeface (final), 31/5

Measurements:

Median line/495pt

Cap line/738pt

Ascender line/861pt

Descender line/-366pt

Next, I import all my letters into FontLab 7. Here're some pics I took while progressing the typefaces to

fonts from Illustrator.

fig 2.1 - exporting the letter 'a' into FontLab 7, 1/6

fig 2.2 - all the letters done exported into FontLab 7, 1/6

After this, I started to adjust the kernings between the letters to create a better visual view when building a sentence with the letters. And here're the progress.

fig 2.3 - kerning letters in FontLab 7, 1/6

After done with all the steps, I export my font from FontLab7 and named my typefaces as 'Dazed'. Well the reason it's called 'Dazed' because I was extremely dazed and confused when creating this typeface :D

And afterwards, I tried downloading my typefaces and started playing the typefaces around in Illustrator. And here're some posters I created using my typefaces.

fig 2.4 - Poster 1 created by Dazed, 1/6

fig 2.5 - Poster 2 created by Dazed, 1/6

We were give the sentence 'Make type great again' to create a poster for our typefaces. And I've did two layouts for the poster with the sentence given using my typefaces.

fig 2.6 - Poster layout #1 created with the sentence provided, 1/6

fig 2.7 - Poster layout #2 created with the sentence provided, 1/6

Then after few considerations, I picked layout #2 and scale the sentence bigger but still maintaining the credit line in 8pt in the font Univers.

The reason I picked the #2 layout is because I like how I place the letter 'I' into the frame of the letter 'a' which makes my typefaces look unique in style~

3. Final Submission Task 3A

fig 3.1 - Final Submission of typefaces in jpeg, 2/6

fig 3.2 - Final Submission of typefaces in pdf, 2/6

Click here to download typefaces 'Dazed'~ 

Click Me!

fig 3.3 - Final Submission for 'Dazed' Poster, 22/06

 

  fig 3.4 - Final Submission of 'Dazed' poster in pdf, 22/06

---

FEEDBACKS

Week 10

General Feedback: The typefaces are interesting.

Specific Feedback: The letter 'a' isn't correct need to be amended. Letter 'e' and 'g' the curves with dots on the edge will be better if removed. The symbol ',' should have thicker strokes on the tail and for '#' isn't correct as well, one of the side vertical either horizontal should be thicker than another.

---

REFLECTIONS

Experience: Throughout the whole progress for task 3A, to be honest I was stressing out on constructing the fonts in Adobe Illustrator with just using shapes, strokes and paths. It was so hard to construct a perfect typeface with just the following above especially when making curves as most of the time they don't come out evenly which made me pissed off!! Nearly cried when constructing the typefaces:,) So far, I could say this is the most challenging task compared to those previous haha. Once done constructing the typeface in Illustrator, we were then import them to FontLab which let me have another chance of editing the shapes of my typeface which I personally thinks that it's more easier to manipulate hehe. The kerning process and poster progress don't deserve a talk compared to the progress of constructing typefaces as they're not too hard. But still I enjoy playing both the process but not constructing. However, am extremely satisfied with the outcome~ Hardwork paid off people!

Observations: With the task given, I found that the X-height for each letter to be the same is the key to create a good typeface as it's super vital to make them have the equal size so that it'll look neat. Besides, the kerning of each letter must be adjust well so that when building a sentence with the typeface, they won't look too tide or too loose but just right on the spot. This is important for us to present our typeface infront to the reader. When constructing the letters using width tool, I find that the lesser point used the more even the strokes will be as well for the pen tool. I also get to study on different characteristics on each letters.

Findings: In task 3A, I've learn on how to construct typeface on Illustrator with just using shapes, paths and strokes etc. I'd also explore a lot of tools which I didn't tried using previously for example width tool, add anchor point etc. I've also get to learn on how to use FontLab to create typefaces and learn on the X-height of each typefaces. Besides, adjusting the kerning of each letters so they don't look too tide.

---

FURTHER READINGS

Based on the list of recommended readings in the MIB, I did some further reading on this one.

1. Saltz, I (2019). Typography Essentials Revised and Updated : 100 Design Principles for Working with Type. Edition: Revised and updated. Beverly, MA : Rockport Publishers.

fig 4.1 - Typography Essentials Revised and Updated by Ina Saltz (2019) 

Chapter 2: The Word

26. A “bad” typeface?

That said, it is surprising that almost all of the 90,000 or so typefaces that are digitally available today are useful for some purpose, even if it is an obscure one.But if a typeface has qualities that make it fit for even one situation, can it be considered a “bad” typeface? Type is a matter of taste; in the ninth century, uncials were descried as ugly; in the eighteenth century, Bodoni was ridiculed.

fig 6.1.2 - Weirdo Deluxe (cover, artist spread)

Playful novelty faces are often deliberately ugly (but beauty is in the eye of the beholder).Serpentine letterforms with uneven weights and vaguely sinister flourishes are oddly squashed together. They form a medallion, the appearance of which mirrors the artwork on the facing page.

35. To kern or not to kern

In our digital world, type designers embed kerning pairs in their typefaces, which usually work well at the text type level (subject to adjustments to the hyphenation and justification settings, which can be customized by the designer). When type is used at a size larger than text size (above 14 point), small disparities and deviations in the spaces between the letters become more evident, and it is the designer’s duty to rectify these by adjusting the kerning manually. Certain combinations of letters require more adjustment than others. In every case, the object is to create optically consistent kerning.

fig 6.1.3 - Nectar Wine Bar

Very open kerning of this logo suggests the spaciousness of open flowers, supporting the hummingbird illustration.