Typography | Task 3A - Type Design and Communication

6/10/2021 - 27/10/2021 / Week 7 - 10
Shofwa Alyadiena / 0350019

Typography / Bachelor of Design in Creative Media

Type Design and Communication

TUTORIALS

Week 7

In week 7 we had our last task marked and reviewed. The blog for last week's task can be found here. Moving on, a new task is started this week. We are to construct our own typefaces. During the lecturer's reviewing I watched the first video assigned to this task, titled 'Typo Task 3A Typeface Construction (Shapes)' (linked below). In it, we were explained the steps of constructing a typeface.

Task 3A Demo

Week 8

Since I have finished all lectures in week 1-5; I will link task 3A's tutorials instead, and give brief descriptions of what I've understood from each of them.

Fontlab 5 Demo | Fontlab 7 Demo | Preview Font on Blogger | Using Calligrphr

INSTRUCTIONS

Task 3A - Type Construction

A. Visual Research

By observing the apps I currently use, it's clear that sans-serif fonts are the most popular.

Fig. 2.1 Social Media Fonts

From seeing these examples, I looked up what font each media uses. I couldn't find all of them since different fonts are available in the settings for some of them, but I stumbled upon an article that describes popular fonts and why they're used (link below)

2020 Top 10 Fonts

To summarize the article above, sans serif fonts like Helvetica, Calibri, and Futura are the top three. To me, even if it's a neutral font it's used most for its readability. Fonts with serifs tend to be for titles with shorter length sentences.

B. Exploration

The next step is to explore ideas. Although it was recommended to sketch first and then deconstruct, I wanted to see the details of pre-existing fonts to see the details I could incorporate in mine.

Fig. 2.2 'a' Type Deconstruction (17/10/2021)

Fig. 2.3 'g' Type Deconstruction (17/10/2021)

Fig. 2.4 'y' Type Deconstruction (17/10/2021)

I chose the letters a, g, y. I chose to deconstruct a letter from 'Didot' instead of continuing with the ten typefaces provided since it's closest to what I imagine mine will look like. I may have over-complicated finding the curves, but I enjoyed the process and learned a few details I would have missed.

From the 'a' in Serifa Std (figure 2.2), I notice that a circle hardly ever fit the curves perfectly. it's a bit square-ish and has sharp turns.

The 'g' from ITC New Baskerville Std (figure 2.3) is almost the exact opposite from Serifa Std. There are no visible straight lines. Other than that, not much interesting stuff to note down.

Unlike the two previous fonts, the 'y' from Didot (figure 2.4) has a character that attracted me. A detail I hadn't noticed before deconstructing was that the tail of the letter 'y' isn't continued straight from the top half. There is an almost unnoticeable curve. After I had noticed it I wasn't able to see it as a straight line again.

Fig. 2.5 First Sketches (18/10/2021)

That being done, I moved on to sketches. I did 8 of them very casually to get a general idea of what I wanted. One of my inspiration for these is my friend's poster. She had troubles deciding what fonts to use, and although she had already finished it anyway I wanted to create a font that would fit perfectly. However, there was a few I thought was too similar to another, so I started a second set of sketches by removing the fonts i didn't want from the first sketch.

Fig. 2.6 Second Sketches (19/10/2021)

C. Construction

After getting a general Idea of it, I worked on constructing the type on Adobe Illustrator.

Fig. 2.7 Determining Measurements (19/10/2021)

The first thing I did while following the tutorial was determining the basic measurements. I dragged the ruler to create the baseline and placed (0.0) where it is.

Measurements:

Ascender Line: 732 pts
Capital Height: 698 pts
Median Line: 500 pts
x-Height: 500 pts
Descender Line: -(226) pts

Fig. 2.8 Placing Stems (19/10/2021)

I then continued working on the first font draft. I set the widths of the stems at 150 points and duplicated it across the artboard for the letters that have them. Below is the basic shapes and the version with serifs added.

Fig. 2.9 Basic Shapes vs Serifs added (19/10/2021)

After I finished with the digital version of the uppercase set of letters, I moved on to digitizing the lowercase set using the previous measurements. The idea for the lowercase set is to keep things as rounded as possible while still being able to read the letters. I'm not sure about the letter 'e' for this one.

Fig. 2.10 Basic Shapes VS Edited (19/10/2021)

As I wrote down below in the feedback section, one of the suggestions were to remove the serifs and thicken the right sides of the bowls. Originally I thought to disagree as my first idea is to keep it left-heavy, but I had to try and see it for myself before making a decision.

Fig. 2.11 Last Progress of Font in Illustrator (20/10/2021)

D. Exporting to Fontlab

After that was complete, I worked on moving the font into Fontlab. I couldn't get Fontlab 5, so I continued the task using Fontlab 7. First, I attempt to key in the measurements. The default measurements were about 5-10 points different from mine. I pasted from illustrator the individual letters "a i m e p y t g d o b ! , .". I've repeated those letters so much I've memorized them at this point.

Fig. 3.1 Adding Letters to Fontlab 7 (24/10/2021)

I had no troubles copy and pasting letters from Adobe Illustrator to Fontlab 7. I followed the tutorial and proceeded to edit individual kernings in the metrics window.

Fig. 3.2 Adding Measurements to Letters (24/10/2021)

Individual kernings aren't enough to finish the entire typeface. I then typed every possible pair from my typeface as there wasn't too many, and zoomed out to see any odd spaces between each pair. Luckily, most were just fine.

Fig. 3.3 Special Pairs Kerning Check (26/10/2021)

Fig. 3.4 Scanning and Editing Pair Kernings (26/10/2021)

Below are the points for certain pairs' spacing

AT -25
AG -25
AO -25
EG -25
EO -25
PA -50
PY 25
PT -25
YA -50
YY 50
YO -50
TA -25
TY 50
TO -25
GA -25
GY -50
GT -25
DE -50
DO -25
OA -50
OT -25
BT -50
BG -25
BO -25
P, -50
P. -50
Y, -50
Y. -50
Y! -25

I proceeded to name the font "Plimbo Enzo".

E. Minimalistic Poster

Before starting any compositions I searched up for inspirations on the internet. From searching online I've gathered two references.

Fig. 4.1 'Parasite' Poster

Fig. 4.2"Water" Cropped Typography (Taken from Here)

What I got inspired from by these two examples are the contrasting color of the type with the background. Both are very simple and have only basic shapes so far as graphic elements.

Fig. 4.3 Brainstorming the Poster (26/10/2021)

At first I thought about doing the closed-space idea where all elements squish each other. I realize that it wouldn't be possible without distorting the typeface, so I stopped after the border being added and restarted the whole thing.

Fig. 4.4 Getting the Bigger Picture (26/10/2021)

I remembered from the previous task that it's a good idea to place rectangles over the text to gain a better perspective of the image as a whole, so I did that before adding the letters this time around.

Fig. 4.5 Final Two Ideas (26/10/2021)

Unfortunately, I got lost in The Zone and collected little progress shots, and I'm left with two designs. I can't choose between the two, nor can I confirm if gray backgrounds are even allowed.

F. Final Designs

1. Font Preview:

(Use "A B D E G I M O P T Y , . !" lowercase letters will not work.)

Fig 5.1 Font Preview (26/10/2021)

I learned how to add this to my blog by watching the Font Preview Tutorial by Lim Jia Sheng.

2. JPG

Fig. 5.2 Final Typeface Letters JPG (26/10/2021)

Fig. 5.3 Final Black & White Poster JPG (26/10/2021)

Download/View The Font (Click This)

3. PDF

Fig. 5.4 Final Typeface Letters PDF (26/10/2021)

Fig. 5.5 Final Black & White Poster PDF (26/10/2021)

Feedbacks

General Feedback

What I've gathered from the session was that what matters most in a typeface is readability and consistence, and that sometimes the best typefaces are the simpler ones. Another thing to note is remembering to keep commas' tails under the baseline, and making sure all symbols are sized proportionately to the text.

Specific Feedback

From reviewing my typeface design, there were three things being discussed. The first thing was very noticeably the exclamation mark needing to hit the ascender line. The second thing is to keep the font a sans-serif typeface. Lastly, to thicken the right side of the letters and round up the stems inside bowls.

For the black and white poster I was not allowed to have different point sizes for the sentences, so I adjusted it afterwards.

Reflections

Experience

My overall experience doing this project was just plain excitement. Of course, I didn't like how I limited myself from creating a more decorative typeface, but it turned out well. My favorite moments in doing this project was deconstructing and illustrating the typeface and then adjusting the kerning in Fontlab. The poster was a bit tricky for me because I couldn't think of any good sentences that uses all letters without following the senior's work.

Observations

What I've been seeing from other classmate's works are all different. Some went for more decorative pieces and others went simple while keeping it interesting. I found it hard to read words that are too condensed or too thick, however the graphic elements in some balances the readability. I notice some people found this task more complicated than I have, yet persevered and produced incredible typefaces!

Findings

What I've gathered from everything that happened these past few weeks was that typefaces aren't as easy as it seems to make. It has a lot of thought put into it if usability is in mind. I will admit, there are still some things I don't fully understand, but experiencing it hands on helps a lot.

Shofwa Alyadiena (0350019)

Search This Blog