TYPOGRAPHY TASK 3A: Type Design & Communication

 

17/05/2022 - 24/05/2022 / Week 8 - Week 9

Tay Yee Shien / 0341472

Typography / Bachelor of Mass Communication (Hons)

Task 3A / Type Design and Communication

---

LECTURES

WEEK 8 - TYPEFACE CONSTRUCTION

Notes:

- Do research on fonts and typefaces 

- Sketch the letters a,o, t, as they are basic ones that can be used in designing other.

- Create 5 to 6 sketches of design.

- Choose 1 to 2 designs you have the most emotional connection with

- Look for reference from the 10 typefaces provided by Mr. Vinod that is the closest to the design.

- Deconstruct the letters 

- Design the typeface

WEEK 9 - ILLUSTRATOR TO FONTLAB 5 / FONTLAB 7

Notes:

- Measure the cap, ascender, descender and x-height and write down the points. 

- Outline the paths of letterforms. 

- Select "Font Info" in “Files”, to customise the font names and other details

- Double-click on the letter cells to paste in the letters and punctuations. 

- Edit the side bearings and kerning of each letter.

- Export the font

---

INSTRUCTIONS

TASK 3A: TYPE DESIGN AND COMMUNICATION

We are assigned to create a set of letters and punctuations using Adobe Illustrator and Fontlab.

RESEARCH:

I did some research to refresh my memory on the principles of type design and guidelines. 

Kerning

Kerning refers to modifying the space between individual letters. Even though in most cases we can get away with applying tracking, we sometimes need to get in there and tweak the space solely between two letters. These “kernable” gaps will most commonly appear around letterforms like A, W, V, T.

Anatomy

fig. 1.1 Anatomy of letters. (17/05/2022)

Reference: https://99designs.com/blog/tips/typography-design/

fig. 1.2 My Pinterest board. (17/05/2022)

I also went to Pinterest for some ideas on fonts and typefaces. 

IDEA EXPLORATION AND DESCRIPTION:

Sketches

fig. 1.3 Rough sketches. (17/05/2022)

I did 5 sketches of typefaces and decided to go with the second one.

Deconstruction of Typeface

fig. 1.4 Deconstruction of Bodoni. (20/05/2022)

I deconstructed the font, Bodoni, as it resembles closest to my sketch for its contrasting strokes. I deconstructed the letters “a” “t” and “y.”

Digitalisation of Font Design

fig. 1.5 Rough digitalisation. (20/05/2022)

I started digitalising the font on Adobe Illustrator. At first, it looked very stiff. 

fig. 1.6 My digitalisation (24/05/2022)

Next, I used the pen tool to draw curves of the letterforms.

fig. 1.7 Attempt 1 of digitalisation (25/05/2022)

This is my first attempt at finishing the set of alphabets and punctuations.

Adjustment on Letterforms

fig. 1.8 Making improvements to the letterforms (27/05/2022)

I made further adjustments to improve the look of my letterforms. I created a few variations. The ones on the right-hand side are the finalised ones for each letterform. 

Finalised Design

fig. 1.9 Final design on Illustrator (28/05/2022)

fig. 1.10 Final design in JPEG (28/05/2022)

This is my finalised typeface design. I name it "Dream."

Developing the font in Fontlab 7

fig. 1.11 Noting down the heights (29/05/2022)

Then I double confirmed the heights of my typeface so I can insert into Fontlab. 

fig. 1.12 Inserting letterforms into Fontlab (29/05/2022)

I insert the letterforms individually into the respective places on Fontlab 7 from Adobe Illustrator. 

fig. 1.13 Fontlab metrics tab (29/05/2022)

Then I adjusted the side bearings and kerning of the letterforms. 

fig. 1.14 Testing phrases on Fontlab 7 (29/05/2022)

Then I tried to type the phrase “make type great again!” to see what it’d look like. 

fig. 1.15 Final adjustments on Fontlab 7 (30/05/2022)

I’ve also adjusted the side bearings and kerning for all the letterform combinations. 

fig. 1.16 Font installation (30/05/2022)

Finally, I exported the font and installed it on my laptop.

Designing the Typeface Poster

Next, need to design a poster using the font we created. Below are my attempts. 

fig. 1.17 Attempt 1 (02/06/2022)

fig. 1.18 Attempt 2 (02/06/2022)

fig. 1.19 Attempt 3 (02/06/2022)

fig. 1.20 Attempt 4 (03/06/2022)

fig. 1.21 Attempt 5 (03/06/2022)

fig. 1.22 Attempt 6 (03/06/2022)

fig. 1.23 Final Poster (03/06/2022)

In the end, I went with attempt 6 as I think it looks the best. 

Final Submission for Task 3A: Type Design and Communication

Font link: https://drive.google.com/file/d/17Qs9gsTjZDMpUbXHJk8g7Gj5iFkdMCUg/view?usp=sharing

Final outcome 'Dream' for Task 3A: Type Design and Communication (JPEG). (05/06/2022).

Final outcome 'Dream' typeface poster for Task 3A - Type Design and Communication (JPEG). (05/06/2022).

Final outcome 'Dream' for Task 3A - Type Design and Communication (PDF). (05/06/2022).

Final outcome 'Dream' typeface poster for Task 3A - Type Design and Communication (PDF). (05/06/2022).

---

FEEDBACK

Week 8

General Feedback: Mr. Vinod said that those who would like his opinion on which sketch to be digitised can post the sketches in the comment section on Friday between 9-11AM.

Specific Feedback: Mr. Vinod said my second sketch looked nice, but I was lacking 2 more sketches.  

Week 9

General Feedback: When using Fontlab, we select the option to preserve the AI artwork. We should also write the feedback to Mr.Vinod's feedback in black. When designing the typeface, make subtle changes to references: Curves to straight lines, curves to connecting lines, etc. Finalise the typeface before putting it in FontLab and the typeface should be a path. We must remember to put the coordinates before putting the vector file.

Specific Feedback: Mr. Vinod told me to make sure the widths of the stroke match optically, start from standard and adjust accordingly. For letter A, make the top curve less slanted. 

Week 10

General Feedback: Mr. Vinod advised us to finish our work so we can move on to the final assignment. 

Specific Feedback: My friend told me the point size fig.21 looked to big.  

---

REFLECTION

Experience

So far, this is the toughest assignment out of all from the Typography module. I think it is because 1) I’ve never designed a font before in my life 2) I never thought that there would be so many guidelines in creating a typeface 3) I had a work with software that I’ve never used before, which is Fontlab. Nevertheless, it is creating the font that I have a connection with that motivates me to perfect it and execute it the best that I possibly can. Although things got tough, I had classmates who were going through the same thing as me, and having someone to talk to helps me get on.

Observation

I find that I have always been observant of the fonts, whether they are on products or on any form of media. After working on this assignment, deconstructing and creating my own font, made me even more observant of the fonts used around me. Sometimes, I am able to recognise fonts used by brands or labels on objects. There are so many fonts and typefaces. It seems easy to simply use any to express something, but it takes time to craft so make sure it suits the meaning it is trying to express. 

Findings

I find that it is not as easy as it seems to create a font. There are many things to consider like the readability, the height of the letterforms, kerning, etc. There is much meticulous detailing involved in creating a font and may take a while to complete. I also find that small changes can make a big impact on a font. They are subtle but play a part in making a typeface even better than they did before. 

---

FURTHER READING

Online Article: How to design a font

Summary: 

The article teaches step by step on how to create a font.

Step 1: Research

It’s important to research what’s available in the market to ensure the relevance and value that your work will have. Think: Is it going to be a font for texts or headlines? Is it going to be intended for printed media, screens, or mobile devices? How many weights would be needed? Is there a need to design characters for other languages on top of Latin? Create a mood board that allows you to sketch by hand first and exercise ideas for the character and features of the font. 

Step 2a: Drawing and Calligraphy

It’s a matter of exploring different ways – is your typeface mimicking natural handwriting, or is it more vector-based? Make notes accompanied by rough drawings in a sketchbook. Once you have a small prototype of around 10 or 20 letters in one or two weights, you can make creative changes quickly without building out the whole character set.

Step 2b: Tools for sketching and drawing letters

When using a particular tool, the size can change the weight of the typeface very much. For manuscripts, calligraphy fountain pens are widely available and practical. For finer, crisper notes, it is recommended to use traditional metal calligraphy nibs made by established manufacturers like Brause, Mitchell, and Automatic Pens. 

Step 3: Tools for digital typeface design

Once the basic characters like A-Z, a-z, and numbers are defined, start extending the character set. Begin to experiment with letters, keeping in mind their anatomy - such as kerning, alignment, measurement, leading,         and ligatures. The ‘editing’ of a typeface usually continues throughout the entire process. But the first five or 10 percent is the most important design decision because it becomes more and more time-consuming to edit after you’ve built it out. This process is definitely the lengthiest. Designing the typeface or family could take anything from three months to a couple of years.

Step 4: Testing in context

Once a working version of the design is ready, test the typeface within its intended context. The typeface must be tested in layouts to attest to its graphic performance, but also in different media and outputs, for its technical performance. Nowadays with the diversity of browsers, screens, printers, and devices, it can be very tricky to get your typeface working perfectly in all available media. You can test the font using real words and text strings within the font creation app, putting every letter next to every letter.