Typography: Task 3

Mr Vinod started by asking why some of us didn’t submit our work when it was independent learning week, he continued with why we should be more opportunistic when it comes to deadlines as it may pay back, essentially high-risk high reward. Mr Vinod then showed us how to digitise our typeface, this is best explained by watching the video ‘Typo Task 3A Typeface Construction (Shapes)’ as the video shows us how to deconstruct the 10 fonts given as well as showing us how to construct our own fonts via shapes or the Brush Tool. The art board should be at 1000x1000 pt while the baseline to the x-height should be 500, and capital letters should end at 700 or 750 pt. If letters don’t look like how it is imagined, rewrite those letters to gain a better understanding. Remember to draw the letters at size as changing them will become a hassle later on and there will be inconsistency. Consistency is vital when designing a typeface and there are also overshoots to look out for as well.

Week 10:

Mr Vinod started off this class by giving us feedback towards our digitised fonts, he liked specifying that the vertical and horizontal lines should always be consistent, and if we wanted more personality, we can have 2 types of lines that make up the fonts. He also talked somewhat about the deconstruction of the fonts and gave us tips on how to deconstruct them. After the feedback, he gave us time to redo some of our fonts, during this period, we were asked to add more personality or change our fonts entirely as Mr Vinod said that they are alright but they can be improved upon if more work went into them.

Week 11:

Today’s class started with giving feedback towards 4 different people within our typography class, this is to show us if we understood what is needed in an e-portfolio and what can be changed for the better. Learning from your peers can be a good way to gain new understandings or perspectives towards our own works. Ariel or Helvetica 12 pt for the font size, name of the font and by the person who made it(me), the year it was made(2023). The custom type has to be in the same pt/point size. Create a poster that has IMPACT, creating this poster to promote your typeface/showcase your letterform. The only thing that can be played with is the composition and size.

Week 12:

Mr Vinod started the class by giving feedback towards the posters we made using our type, as he explained last week, he kept telling us that the custom type SHOULD BE THE SAME POINT SIZE, this happened because a lot of people kept making the same mistakes of having different point sizes for their fonts. He also gave us suggestions like using different words that may not relate but can with using punctuation, though best not to abuse this system as some words may showcase the type, it doesn’t mean that we can’t have coherent sentences. He also briefed us on task 3 e-portfolio and what we should put in, preferably our process, both the failures and successes, as this is to show that it was us that made the type and that it isn’t from some third party. Task 3 is also due June 26th, 11:59 pm.

Week 13:

Mr Vinod has a symposium in Singapore so there weren't any physical classes held.

INSTRUCTIONS

Task 3: Type Design & Communication

This task requires us to create our own typeface that has the hallmarks of a good typeface. A good typeface consists of subtlety, character, presence, legibility and readability. The letters that we'll need to design are 'a e t k g r I y m p n ! # , .'. Once the fonts are created, we will need to create a basic A4-size poster that displays our own fonts.

_______________

Research

We were instructed to watch the video 'Typo Task 3A Typeface Construction (Shapes)' to help further our own understanding of what makes a typeface. This video asked us to deconstruct the 10 fonts given that were similar to the sketches that we want to make.

I decided to go for Serif Std [55 Roman], Bodoni Std [Roman] and ITC Garamond Std [Book] for my deconstruction as different fonts have different anatomical structures that convey the typographer's intent and design. I mostly chose capital letters because I want my sketches to be in uppercase.

Fig 1.1, Deconstruction of Serif Std [55 Roman] 'A', 30/05/2023

Fig 1.2, Deconstruction of Bodoni Std [Roman] 'Y', 30/05/2023

Fig 1.3, Deconstruction of ITC Garamond Std [Book] 'R', 30/05/2023

I also researched some fonts to find inspiration for the style I want which is messy splattered wall paint which you would usually see graffitied walls.

Fig 1.4, Font References, 18/05/2023

_______________

Sketches

After doing my own research, Mr Vinod gave us the task of finding 5 different tools to test out writing, what we needed to do with those tools are:

Writing diagonal, horizontal, vertical and circular lines for all 5 tools in 5 different ways for each tool.
Writing 'AOTMX' for all 5 tools in 5 different ways for each tool.
Select 1 option from the 5 different options from each tool and write "a e t k g r i y m p n" in the selected style. Choose either UPPERCASE or lowercase to write in.

The tools I have chosen are:

Pigment Liner 0.1
Artline Calligraphy Pen 3.0
Whiteboard Marker
Broad Marker
Pigma Fine Brush
Wooden Skewer

Later added: Pigma Brush & Watercolour Pen [Will explain later]

Fig 2.1, The First 5 Tools Used, 15/05/2023

I practised each tool in different directions to expand the possibilities they can create. This helps me figure out which type of font I want for my own and what I should avoid. Once I'm finished with my lines, I went ahead with writing 'AOTMX' in different ways to get a gist of the hand placement and angle of each tool.

Fig 2.2, Written fonts with the First 5 Tools, 16/05/2023

Each tool created its own unique consistency and handwritten element that is unique towards each person’s style, this is needed when we go into digitising the fonts as Mr Vinod wants our personality incorporated into our own typeface.

After writing 'AOTMX' in different ways with each tool, I had difficulties with the whiteboard marker since it was impossible to write in as the ink and tip had already deteriorated while the broad marker felt too bold with the font I had in mind. I then changed to the Pigma Brush pen and the Watercolour pen for a more artistic style that matched what I had in mind.

Fig 2.3, New Tools, 18/05/2023

Once I’m finished with choosing my 5 final pens, I went ahead and did some practice with those pens in different hand placements to get a feel for the pen as well as try to find a specific style that I liked.

Fig 2.4, Final 5 tools, 20/05/2023

Fig 2.4, Practice Use of Chosen Hand Written Tools, 21/05/2023

I ended up really liking the Pigma Brush as it was similar to the artistic style I wanted to go for and Mr Vinod also liked it and asked me to choose specific ones that I liked the most. I also like to challenge myself by recreating it through a digital medium.

Fig 2.5, Chosen Sketches, 30/05/2023

_______________

Digitisation

This is where we would use Adobe Illustrator and Fontlab 7 to create our own typefaces. One of the more challenging parts of the task is we need to stay consistent with the style we want to make digitally.

_________

Digitising in Adobe Illustrator

Things to consider when making fonts:

Artboard should be 1000 x 1000 pt.
The baseline to the x-height should be 500 pt.
Ascenders should end around 700 to 750 pt.
Descenders can be taken from Myriad Pro for reference.
Draw letters to size as it may become a hassle later on with inconsistencies.
CONSISTENCY IS KEY!!

Fig 3.1, Artboard Measurements, 01/06/2023

With these in mind, I plan to make a legible type that shows my personal style and the choices I made that go towards making that type.

Mr Vinod gave us different ways to make our type, either using shapes or the brush tool to create the rough shapes of the type. Since the shape method uses the most time, I went with the brush tool to save more time and energy. This was also the time when I had to position my sketched letters in a certain way so that the overshoot isn't touching the ascender line and still remained as capital letters.

Fig 3.2, Simple Shape using Brush Tool, 30/05/2023

Once I was done, I felt that the strokes were too thin compared to what I originally wanted which made me realise that I should've gone with the shape method instead, so I went back to the drawing board and did the rough shapes from there.

Fig 3.3, Simple Shapes using Shape Tool, 01/06/2023

From then on, I needed more personality and elements that make it look like it isn't just a bunch of shapes put together so I added additional nodes that create the jagged brush strokes that paintbrushes usually have. I then used a trick Mr Vinod showed us where you draw a zig-zag motion using the brush tool to the outline of your rough shapes, you can go to Object > Path > Outline Stroke to give it a body to minus from; this creates a more authentic and hand-drawn feel towards the shapes made.

Fig 3.4, 1st Refinement of Type, 01/06/2023

After receiving feedback from Mr Vinod, I went back to Adobe Illustrator and made a width guide that gives me a sense of how big my types should be for them to stay consistent. I used my letter 'R' as my reference and went on from there, my letters 'M' and 'N' were too wide so I had to shorten them and my letter 'Y' felt too narrow so I had to widen it. My letters 'I', 'E' and 'T' had to be reduced as Mr Vinod said that there was too much going on.

Fig 3.5, Final Refinement of Type, 06/06/2023

After following the feedback, my type became more consistent and I liked how it turned out which lead me to make the punctuations needed for the assignment. I started off by going through the Instagram post that Mr Vinod sent to the Facebook group to get an idea of where to start.

Rules to making good punctuation:

The shape of the period should be a slightly larger size than the dot on the letter 'i'.
The height of the comma should be 2 periods stacked on top of each other, though the height should be slightly smaller.
The height of the exclamation point is the same as the capital letter while the dot should be the same or smaller than the period.
The hashtag should be in numerical height, slightly shorter than the capital height, with a similar width to the letter 'n' while also having the width of the vertical and horizontal bar balanced to avoid inconsistency.

With these rules in mind, I went ahead with creating the simple shapes that create the punctuation. Then, I applied the same tricks I used in the type to create very simple punctuations that seem to do the trick.

Fig 3.6, 1st Refinement of Letterform Punctuation, 10/06/2023

After getting feedback from Mr Vinod saying that "my punctuations just look sad". I went back to the drawing board and used the vertical and horizontal lines I already had and remade the punctuations with more personality.

Fig 3.7, Final Refinement of Letterform Punctuation, 14/06/2023

Measurements for digitised fonts:

Ascender: 733 pt
Capital Height: 696 pt
Median: 500 pt
Baseline: 0 pt
Descender: -228 pt
Overshoot: [Top] 22 pt, [Bottom] -15 pt
Stem: 748 pt

Fig 3.8, Measurements for Digitised Fonts, 14/06/2023

Fig 3.9, Grids for Digitised Fonts, 14/06/2023

_________

Development in Fontlab 7

After the digitisation process, I watched two of Mr Vinod's videos, 'Typo_Task_3AIllustrator To Fontlab5 Demo (WATCH FIRST before Fontlab 7 Video)' and 'Typo_Task 3A Fontlab7 Demo (Watch Fontlab 5 Demo First)'. These videos were helpful in terms of getting the basics of what we need to do and once I was done, I exported my type into Fontlab 7.

Fig 4.1, Export of letterforms 'a e t k g r I y m p n ! # , .', 04/06/2023

Before going into bearing and kerning, I had a problem with the letter 'P', where the space inside was filled up but didn't know what the cause is which I had left to ask Mr Vinod about. [Will explain how to remove it later]

Fig 4.2, Problem with the 'P', 04/06/2023

Once I was done, I went into the bearing and kerning the type I had exported, starting with having both the front and back bearings at 50 to set a base before actually kerning the letters into a position I like.

Fig 4.3, Before and after of letterform bearing & kerning, 04/06/2023

In Week 11 when I asked Mr Vinod about the problem with my letter 'P', he explained to me that if the illustrator didn't have any problems then it must be the contours that have messed up. In Fontlab, the nodes are called contours and they have to go in a singular direction to create a space, if one contour is going clockwise while the other is going counterclockwise, it creates an opening that isn't sealed. This can be tackled by joining both of the contours and doing Alt + Fill as that function takes away the filled area.

Fig 4.4, Fixed the problem for 'P', 13/06/2023

After fixing the problem, I went to bearing and kerning the essentials and when it came to test the kerning of different words, I copied from a classmate called Lee Zi Xian(0353088). I really liked how many words he used when he thought of kerning so I wanted to try it out myself.

Fig 4.5, Own letterform bearing & kerning, 15/06/2023

_______________

Poster Design

This is the phase where we have to make a simple poster using the font we made.

Requirements when making the poster:

The dimension of the poster must be A4 size.
The name of the font, creator and year it was made should be stated with either Ariel or Helvetica with 12 point size/pt.
The poster should include all the letters created.
The type should have the same point size/pt.
The poster must create IMPACT to promote the type.

After exporting the fonts back into Adobe Illustrator, I went with composing a poster to my liking. I started with using ChatGPT to create words with the letters I made and the words that stuck to me the most were 'RETAIN MY PRIME!' so I went with that.

Fig 5.1, 1st refinement of poster compositions, 17/06/2023

I went with the 2nd composition as it goes back to the saying where that Left Justified is the best alignment when it comes to legibility.

After getting feedback from Mr Vinod where he explained that I needed to include more words from my type which puts me back on the drawing board and using ChatGPT to come up with new words. I wanted to include all of the punctuation as well since I thought I needed to, I went with the words '#MARKET, #RETAIN, #TAMPER, #ENRAPT, #GRIP MY #PRIME!' since Mr Vinod gave us a tip where the sentence doesn't really have to make sense as long as it looks like a sentence.

Fig 5.2, 2nd refinement of poster compositions, 20/06/2023

After making different compositions, I honestly didn't like most of them as Mr Vinod told the class to show their own compositions and walk around the class to gain more inspiration from the others. After walking around the class, I didn't feel good about my own compositions and knew I could do better.

I felt that I had too many words and re-did them to 'MARK A TIME', 'MERGE MY NAME' and 'MAKE ME KING!'. This was also when I sought out Mr Vinod for help with compositions, he told me since my words have a slight slant towards them, it's better to have the words diagonal than it being vertical or horizontal.

Fig 5.3, 3rd refinement of poster compositions, 20/06/2023

He then advised me to slant the words even more and put them in a cramped area on the top left to give the imagery of the words being brushed on in quick succession to give more graffiti and hurried look which is what I wanted.

_________

FINAL Type Design & Communication

!!Please type with CAPS LOCK ON!!

Download the font here: https://drive.google.com/file/d/1c8kP3FYd3RHO5dUztz2kmsiDFXzrwRWS/view?usp=sharing

Fig 6.1, Final Task 3 Type Design & Communication, 'Chaotic Neutral' Font, 22/06/2023

Fig 6.2, Final Task 3 Type Design & Communication, 'Chaotic Neutral' Font PDF, 22/06/2023

Fig 6.3, Metrics Window with Sentencein Fontlab 7, 22/06/2023

Fig 6.4, 'Chaotic Neutral' Font Poster A4, 22/06/2023

Fig 6.5, 'Chaotic Neutral' Font Poster A4 PDF, 22/06/2023

FEEDBACK

Week 8:

- General & Specific Feedback:

Independent week, though I wasn’t able to gain feedback because I didn’t submit my own work for Mr Vinod’s feedback.

Week 9:

- General Feedback:

!!WATCH THE TYPE INSTRUCTIONS VIDEO BEFORE CREATING THE LETTERS!! Be opportunistic when it comes to deadlines, Mr Vinod may reply when you least expect it. Identifying letters that work well together since some letters will be designed better than others. Minor textures or bumps can help create character towards a letter, but it can’t have any gaps as that would have too much character. When digitising, some if not most characteristics may be lost due to consistency for different letters. The art board should be at 1000x1000 pt while the baseline to the x-height should be 500, and capital letters should end at 700 or 750 pt. If letters don’t look like how it is imagined, rewrite those letters to gain a better understanding. Remember to draw the letters at size as changing them will become a hassle later on and there will be inconsistency. Consistency is critical when designing a typeface.

- Specific Feedback:

Don’t need to do uppercase and lowercase, just choose one that I like and digitise it. Specifically, the letter ‘R’ had too much overshoot, to combat that, I would need to make the sketch smaller and use the curved overshoot as the top of the capital line. Reuse the vertical and horizontal lines that have been drawn, it’s much easier consistency-wise. Remember to maintain the path so we can go back when needed.

Week 10:

- General Feedback:

Consistency is a must when creating a digital typeface, handwritten letters have a different feel because it is handwritten while digital types have control and consistency that determines the vertical and horizontal stroke. Deconstruction of fonts is really helpful when it comes to gaining a better understanding of how typefaces aren’t what they seem, it may look similar sometimes, but most of the time, it isn’t.

- Specific Feedback:

The upper part of the Y is too narrow and high, this can be fixed by widening it and lowering the upper part which can help with the consistency. The letter ‘E’ has some parts sticking out which Mr Vinod said that I may want to consider cleaning up for a better look. I will need to look into my own typeface to see if it’s possible to clean up any areas that may need cleaning up. Mr Vinod saw my second mock-up for my font and said that the width and height should be the same for all the fonts, the letter ‘N’ is too wide while the letter ‘Y’ is too narrow, to combat this, I’ll have to measure all the sizes and come to a conclusion on which to use before finalising my fonts.

Week 11:

- General Feedback:

Look at the link given by Mr Vinod to make punctuations of our own, it’s a good baseline towards making good punctuation that suits our style. A lot of the letterforms given by other students are nice but need more consistency when it comes to the strokes used. This can be tackled by making small details that add up towards the final product. Fontlab 7 and Fontlab 8 are different when it comes to copying and pasting, FL 7 has a prompt for you when you paste it from Illustrator, and FL 8 doesn’t paste at all. This can be tackled by going to Edit > Preferences > Paste & Duplicate > Import as AI, preferably original vector; this will let us copy and paste again.

- Specific Feedback:

My letterforms are good but my punctuation looks sad??? I most likely need to add more personality towards my punctuations, I can either write it on paper with the tool I used or reuse some of the vertical and horizontal strokes I made before to recreate the punctuations with more personality. For Fontlab, ‘A’ and ‘T’ needs more kerning, they look alright for some words but ‘A’ is the most severe one. Need to figure ‘P’ out as the hole doesn’t appear when it is pasted into Fontlab but it appears in Illustrator. Update on the ‘P’, there are things called counters and they can either be clockwise or counter-clockwise. If they are going in opposite or intersecting directions of each other, it breaks and fills up the area that is supposed to be empty. This can be tackled by using the Fill Tool + Alt, it creates a space like the Shapebuilder tool in Illustrator.

Week 12:

- General Feedback:

BE MORE EXPERIMENTAL WHEN IT COMES TO MAKING AN IMPACTFUL POSTER!! The E-portfolio process needs to have EVERY PROCESS to show that we were the ones who did it, each failure and success needs to be recorded to show that we’ve improved on our work. The task 3 e-portfolio is also due on 26th June, 11:59 pm. When doing left and right bearings, the left bearing should mostly stay at 0 while the right should start at 0 but added on later when it comes to whether the custom type you’ve made looks alright or not. Kerning only starts later when everything has a base bearing.

- Specific Feedback:

I need to add a hyphen towards my work if I want to break up the words, I also need to add more words towards my poster for it to showcase more of my type. Update on the poster ideas, he said that the words are alright, it would be nice to redo the composition as it doesn’t command the space as much as he liked and that I would need to explore more to create better compositions. 2nd Update on the poster idea, Mr Vinod helped me with the whole composition and told me that since my type has a slanted look, I should go for a diagonal approach when it comes to making the composition for the poster as it suits my type much better.

Week 13:

- General & Specific Feedback:

Mr Vinod was at a symposium in Singapore so there weren't any feedback given. (yet)

REFLECTION

Experience

Personally, I thought this task was the hardest one by far as there are so many things to consider when it comes to making a font that shows your own style and personality but is still able to stick to the rules such as legibility that every typographer is subjected to. Overall, I think the most challenging part about this task for me was the composition of only using your font as the showcase of itself and the design that it's intended to serve; it made me irritated as I didn't know how to position my words to make it impactful. Though it was really nice to be able to see my hard work come to fruition from a handwritten sketch to a digitised version to a poster.

Observation

While working on this task, I did some partial research on the type of style I wanted and looked at different classmates' works to get a hang of what I should and shouldn't do. Mostly using the feedback Mr Vinod gave and the works of other classmates, I was able to find out the difference between each letter and what makes or breaks the overall shape of the letter. Examples should be the letters 'P' and 'T'

from my own fonts, they may look somewhat different but the vertical lines used are the same while the curve for the 'P' and the horizontal line for 'T' are obviously different.

Findings

Making a typeface, from the designing and development, can be a difficult task without understanding the basics of what makes a good typeface. Designing both singular letters and sentences can be quite a meticulous task with the hassle of needing the know each point size of the ascender, descender, median, baseline and everything that makes the typeface crucial. With the added nuances, personality and elements, every small detail can change an original typeface to a completely new one.