Task 3: Type Design and Communication

June 21, 2023

Task 3: Type Design and Communication

5.5.2023 / Week 9 - Week 13
Marcus Leong Ka Shing / 0363643
Typography / BA of Design (HONS) in Creative Media / Taylor's University
Task 3: Type Design and Communication

LECTURES

All lectures completed in Task 1: exercise1&2

INSTRUCTIONS

The task is to strive in creating a font that embodies the qualities of an excellent typeface: delicacy, distinctiveness, impact, clarity, and easy reading. The letters you will be designing include: "a e t k g r i y m p n ! # , .". Once you finish designing the font, your next step will be to craft a simple poster on an A4 size sheet that showcases your font.

Task 3: Text Formatting and Expression

Research

Before I started to draft out my references, I made some research regarding font types to find a direction.

Fig 1.1 Research

Sketches

After researching, I started exploring with my sketches using uppercase letter fonts and lowercase letter fonts.

Fig 1.2 Uppercase letterforms sketch

I started writing a few different variations using a rounded tip marker pen for the uppercase letterforms. I did not really like how it turned out so I tried with lowercase letterforms.

Fig 1.3 Lowercase letterforms sketch

After sketching it, I liked how the letterforms were fat and short. I decided to create more variations from rounded ends to more squared ends.

Digitisation

To begin, I established my criteria for the baseline, x-height, ascenders, descenders, and cap height. Next, I initiated the process by utilizing the shapes tool to construct the letter 'a'. This foundational letter served as the template for crafting the remaining letters.

Fig 1.4 First digitisation

This was my first attempt at the digitsation. I did not really liked how it turned out so I continued to make more tweaks.

Fig 1.6 Second digitisation

I realized that some of my letterforms are not accurate with the guidelines after checking with Mr Vinod. I then tweaked the remaining problems.

Fig 1.7 Third digitisation

Lastly, this was my final outcome including punctuations.

1.8 Complete digitisation

FontLab

Once I completed the design of my typeface in Illustrator, I proceeded to embark on the task of creating and exporting the font using FontLab. I came to the realization that certain letter combinations appeared quite awkward when placed adjacent to each other due to my design choices. This issue had escaped my attention during the initial typeface design phase.

Fig 1.8 Converting typefaces into FontLab

I noticed that my letterforms were too big so I had to scale it down again in illustrator.

Fig 1.9 Complete selection of typefaces in FontLab

Fig 1.10 Letterforms before kerning

As I wrote the letterforms in the new metrics window, the kerning was a big issue. I adjusted it at first with equal spacing but realized it still looked a little bit abnormal especially with the letters "i" and "r". I reduced the counterspace and it ended up looking much better.

Fig 1.11 Letterforms after kerning

Finally this is my final outcome after kerning.

Fig 1.12 Sentence with kerning

Poster

After naming my font and downloading it, I created the poster following the requirements.

Fig 1.13 Poster design

FINAL Task 3: Type Design & Communication

Download Link: https://drive.google.com/drive/folders/1Iw-qGu4ynfjcz6Zl-9N2JdkR9I0okJuL?usp=sharing

1.14 FontLab screengrab

Fig 1.15 Final Task 3A: Type Design and Communication "Legion" (jpg)

Fig 1.16 Final Poster (jpg)

Feedback:

Week 8

Specific Feedback: The 5th writing style has most potential.

Week 9

General Feedback: When writing the letter "y," keep it on the baseline. Understanding typography anatomy will be helpful when digitizing your letters.

Week 10
General Feedback: To create a visually cohesive font, it is important to maintain consistency in the strokes. You can achieve this by reusing the same strokes across different letters. For example, the straight vertical line in the letter "I" can be replicated in the letter "T". Ensuring that the letters end at the same point also contributes to overall consistency. Accuracy in angles is crucial, so try to hold your pen at a consistent angle while designing. To gather inspiration and reference, you can explore various fonts available in Google Fonts or other resources.

Specific Feedback: Try not to make it so mechanical, it should be derived from natural writing and do not design the letterface.

Week 11

General Feedback: When designing a font, avoid mimicking the imperfections of your own handwriting. Instead, focus on identifying the underlying principles of your handwriting style. Incorporating a defined point in your letterforms adds a sense of solidity. It is helpful to research sans serif fonts that feature variations in stroke thickness. Pay attention to details such as ensuring that the exclamation mark reaches the cap-height for proper alignment. Consistency in maintaining the angle of your brush throughout the design process is also important.

Week 12:

General Feedback: Smaller font size will look like its together and bigger font size will look lie they are together.

Reflection

Experience: This task was by far the most tedious and difficult of all. I faced many challenges regarding the use of FontLab as well as designing my typeface. I can say that I felt like I could do a much better job. Overall I felt satisfied and proud that I managed to complete my task and created my very first font.

Observations: In the process of this task, I realized my final decision on my sketches looked similar to typefaces I could find online and they were part of a family called MicroGamma. I also realized through the anatomy of typefaces how certain letters are slightly taller than others but to the normal eyes, you wouldn't be able to tell.

Findings: Creating and refining a typeface proved to be a challenging endeavor, but it was during this process that I experienced significant growth and learning. Constructing letters from the ground up made me appreciate the unique intricacies and distinctiveness of each character. Moreover, this undertaking demanded a combination of artistic ingenuity and technical expertise. Despite my familiarity with Illustrator, I discovered fresh insights and expanded my knowledge as I delved into the design of my typeface.

Chapter 1 - Size: At the risk of sounding crass, it is the size of the boat that determines its motion in the ocean. Bigger is more noticeable, but not always better. The simplest way to explain it is that your most important elements should be the biggest, but when we get into the details that becomes more complicated. One of the principles of Fitts’s Law is that objects with a bigger size – specifically clickable range – are easier to engage with. In other words, the user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go. Of course, that’s not to say that it’s as simple as making your “DOWNLOAD NOW” call-to-action 10x larger for more conversions. Subtlety and harmony between elements is the key.

Chapter 2 - Color: Your choice of color, even if just blacks and whites, greatly influences how users perceive your site. For starters, each color has its own psychological connections, which we explain in great detail in Web UI Design for the Human Eye. Barring that for a moment, colors themselves have their own hierarchy, where blacks and reds will more readily draw attention, while soft yellows and creams may take a backseat. However, those effects can be enhanced – and even reversed – by the use of contrast. Contrasting colors against their natural opposite (known as complementary colors) draws greater attention to both. This has an enormous impact on visual hierarchy, as placing a yellow call-to-action against a blue background may produce better results than a red CTA. Naturally, the website of digital designer and art director Vito Salvatore should include compelling visuals. And the photo he chose for his home page demonstrates his ability. In terms of color, the The Building Blocks of Visual Hierarchy 16 tan of the sand contrasts with the deep blue of the sky, making this a visually dynamic image. For functionality, the choice of white for the typography allows the links to stand out elegantly, despite the grandeur of the background photography.

Chapter 3 - Layout: Your website interface’s layout is one of the most direct ways to control your visual hierarchy – you can literally place an element at the top of the visual hierarchy by placing it front-and-center. But there’s more at play than just height on the screen. One of these factors are prime pixels. Another principle of Fitt’s Law, which we’ve briefly described, is to take advantage of the locations within easiest reach. In web design these are, amongst others, the corners and border of the screen, as “throwing” the cursor to sides requires less mouse control than a fixed point in the middle.

Search This Blog

Marcus Leong Ka Shing 0363643