Typography - Task 3: Type Design & Communication

11.11.2024 - 23.12.2024 / Week 8 - Week 14

Brenda Wynn / 0372128

Typography / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 3

JUMP LINKS

LECTURE

Week 8

Independent Learning Week

Week 9

Mr. Vinod explained more about how to use the tools that we will need to use during the making of our own fonts. Mr. Vinod also told us about some details we need to keep in mind while making the fonts, such as: 1. The bottom part of the letter "s" has to be much bigger to create a sense of balance, 2. The stem of a lowercase letter "t" can't go over the ascender line, 3. Punctuation mark "!" is better made thicker on the top and thinner on the bottom.

Week 10

Mr. Vinod showed us a tutorial on how to make the right punctuations. For example: the period (".") has to be slightly bigger than the dot on top of the letter "i". Secondly, the round period has an overshoot so it will go over the baseline. However rectangular periods can't go over the baseline, since the base of the period is straight. Finally, the height of a comma is similar to two periods stacked on top of each other. Though the head has to be smaller than the period. We were also informed about the size of the period, since it can't interrupt the readers reading flow.

BACK TO TITLE

INSTRUCTIONS

TASK 3

We were assigned to do a detailed dissection before making our very own font. We have to dissect the letters "H o g b". I chose to dissect the UniversLTStd typeface. I used the line segment tool and also the ellipse tool.

Figure 2.1.1 letter dissection progress 1 (13/11/2024, week 8)

Figure 2.1.2 letter dissection progress 2 (13/11/2024, week 8)

I used both the ellipse tool and the line segment tool to dissect all 4 letters. Here are the results:

Figure 2.1.3 letter dissection final result (13/11/2024, week 8)

While dissecting the letters, I noticed a few features on the letters that are hard to extinguish just by looking at it. Here are what I found during dissecting the letters:

"H" The letter "H" is symmetrical and it is composed with straight lines.
"o" The letter "o" may look like it is balanced, but the middle part of the "o" is somewhat symmetrical. Because during the dissection I noticed that it was like a reflection between 2 sides, since the parts that are similar are on the opposite side of each other.
"g" The letter "g" stem may look straight, but the top part or the start of the top part of the stem actually includes a subtle arc going outwards.
"b" The letter "b" stem may also look straight, but at the end of the stem or the lower part of the stem is actually a bit slanted out. So, the stem is not as straight as how we would notice by just seeing it.

After carefully dissecting the words, I wanted to get some inspiration on how I should make my very own font. So, I looked up some poster ideas and started to brainstorm from those. Here is my reference board:

Figure 2.1.4 reference board (14/11/2024, week 8)

We were told to prepare A4 graph sheets, and 3 pens with different tips. To make our fonts, we made sketches with various types of writing and different pens. These are the pens I used for my writing sketches:

Figure 2.1.5 three types of pens (14/11/2024, week 8)

Then I started sketching with all 3 pens. Here are my sketches for all 3 pens:

Figure 2.1.6 pen sketches (14/11/2024, week 8)

After sketching, I tried 3 different styles for each pen and picked 3 styles I liked from each pen. Here are the sketches I picked:

Figure 2.1.7 3 sketches each pen (14/11/2024, week 8)

During the time I was sketching, I am mostly comfortable with using the 3.0 pen. In addition, I liked the first sketch using the 3.0 pen the most. This is the sketch I decided to settle with:

Figure 2.1.8 final font choice (14/11/2024, week 8)

Then, I sketched the following letters and punctuation marks "o l e d s n c h t i g , . ! #". Here are the sketches:

Figure 2.2.1 font writing (14/11/2024, week 8)

After sketching the letters and punctuation marks, I started to digitize it on Adobe Illustrator. I watched the tutorial videos beforehand to make the process much easier. Then I started by making the x-height first using the rectangle tool. Following that, I also set up grids as the descender, ascender, etc.

Figure 2.2.2 font digitization progress 1 (15/11/2024, week 8)

Then I used several different shapes to make the overall shape of my font.

Figure 2.2.3 font digitization progress 2 (15/11/2024, week 8)

For my first attempt, I made my x-height with the size of 500pt x 500pt. Here is my first attempt result:

Figure 2.2.4 font digitization first attempt (15/11/2024, week 8)

During class, Mr. Vinod gave us feedback and guided us to make our font better. He also explained some details we need to know while making the fonts. After the feedback and tips Mr. Vinod gave, I attempted to make my font much similar to the sketch I made. But this time, I used a brush with a 110pt size and adjusted roundness. Following that, I made my x-height size into 356pt x 356pt. This is my second attempt result:

Figure 2.3.1 font digitization second attempt (18/11/2024, week 9)

After making the second attempt, Mr. Vinod gave me some feedback regarding the letter "s". To make the letter "s" I used the letter "o" as the base and use the scissors tool to cut it. Then I will use the pen tool to make the line that is connecting both parts. For the finishing touches, I used the curvature tool to make the line much more smooth.

Figure 2.3.2 letter "s" progression (18/11/2024, week 9)

Below is the result after the modification on the letter "s":

Figure 2.3.3 font digitization third attempt (18/11/2024, week 9)

After observing the font, I decided to make it much more compressed so it looks much more similar to the sketch. Here are the adjustments I made:

Figure 2.3.4 font digitization progress fourth attempt (19/11/2024, week 9)

Descriptions: (All letters was made using a custom brush with a 110pt size and adjusted roundness)

"o"

For the letter "o", I used the rounded rectangle tool to make the overall base and the I used the direct selection tool to smoothen the edges. After that, I used the pen tool to create the line across the counter.

"e"

The letter "e" was made using the letter "o" without the line as the base. Which is then cut using the scissors tool. I also used the pen tool to make the line.

"s"

Letter "s" is also made using the letter "o" without the line as the base. Then it was cut using the scissors tool and connected by a line using the pen tool. To make the line smoother, I used the curvature tool.

"n"

The letter "o" without the line is also used for the shoulder of the letter "n". The letter "o" is then cut using the scissors tool to make the shoulder. Then I used the letter "l", shortened it and used it to complete the letter "n".

"c"

For the letter "c" I also used the letter "o" without the line as the base and cut it using the scissors tool.

"g"

The bowl of the letter "g" is made with the letter "c", which is then attached to a line I made using the pen tool. To create the descender I used a combination of lines I made with the pen tool for the foundation and then I used the curvature tool to make the arc of the descender. I also used the direct selection tool to smoothen the edges of the descender's foundation.

For the letters " l t i" and the punctuation marks, I kept it the same. The rest of the letters, which is "d h" was just a combination of other letters ahead of them with some added modification.

This is my fourth attempt result:

Figure 2.3.5 font digitization fourth attempt (19/11/2024, week 9)

Here is a comparison of my font sketch and digitization:

Figure 2.3.6 font comparison (19/11/2024, week 9)

After the feedback on week 10, where Mr. Vinod advised me to decrease the amount of anchor points I had. I re-made a few of the letters, such as the letters "n c h". For the rest of the letters, I just made some minor adjustments and decreased the anchor points. The changes on the letter "n" that I made was straightening the stroke from the shoulder that is connected to the stem. I made it by cutting the letter "o" and using anchor points to connect it to the stem. To make the aperture visible, I cut the letter "l" and placed it below the shoulder. The letter "h" was just changed by combining the letter "l" and "n".

Figure 2.4.1 letter "n" adjustment (25/11/2024, week 10)

The letter "c" was made by using the letter "o" as the base, which is then cut using the scissors tool to make it look like the letter "c". I also used a line to help, just so that the cut can be straight.

Figure 2.4.2 letter "c" adjustment (25/11/2024, week 10)

I have also changed my punctuation marks, after watching the tutorial videos given. For the period ("."), I made it simply just by making a square shape from the rectangle tool. The comma was made by stacking the period on top of each other first. Then I deleted the bottom period to make the stroke on the bottom to finish off the comma. The exclamation mark dot was made by copying the period and the upper part was made using the rectangular tool as the base. Which I then stretched using anchor points to make the top of the upper part wider. I also used lines as guides to make sure it is symmetrical. Lastly, the hashtag was adjusted a bit by making it smaller. I also made the lines straighter, and the horizontal part was done by rotating the original stroke. I used the letter "l" as the foundation.

Figure 2.4.3 punctuation marks adjustments (25/11/2024, week 10)

This is the result after the adjustments I did on week 10:

Figure 2.4.4 font digitization fifth attempt (25/11/2024, week 10)

After the feedback I received on week 11, I decided to alter the letters and punctuation marks. First, I started to make the letters into 1 shape. To do that, I first made the letters into a shape using the outline stroke. Then I merged it together and decrease the amount of anchor points using the delete anchor point tool. I also looked at the outline to make sure there are no unnecessary lines. For the letter "o", I erased the line that was placed across the counter. Because it looks more like the number 0, rather than the letter "o".

Figure 2.5.1 letters adjustments (02/12/2024, week 11)

The letter "d" and "g" I made the stroke that was attached to the stem much thinner. For reference, I typed the letters using the text tool using the Myriad Pro typeface. This technique made it easier for me to analyze each letters. To make the stroke thinner, I used the isolation mode in Illustrator and altered it using the direct selection tool to move the anchor points. I then made it into 1 shape using outline stroke, which I merged together using the merge tool. I also looked at the outline and deleted any extra lines. Lastly, I reduced the amount of anchor points using the delete anchor point tool. But then, I realized that the lower part of the stem for the letter "d" was placed further back compared to the top part. So for the last adjustment, I pushed the lower part of the stem a little to the side using anchor points. There were no more adjustments for the letter "g", except making it into 1 shape, deleting unwanted lines, and making the stroke that is connected to the stem thinner.

Figure 2.5.2 letter "d" adjustment (02/12/2024, week 11)

Figure 2.5.3 letter "g" adjustment (02/12/2024, week 11)

The letter "n" stroke that was connected to the stem was straighten using anchor points, since it looked a bit curved. After the adjustment, I made it into an outline stroke and merged it using the merge tool. Following that, I looked at the outline stroke and deleted any unnecessary lines. Finally, I deleted unwanted anchor points using the delete anchor point tool.

Figure 2.5.4 letter "n" second adjustment (02/12/2024, week 11)

For the letter "s", I made the top part slightly smaller than the bottom part to make it more readable. To do that, I used anchor points. After I was satisfied with the adjustment, I made it into 1 shape with the same process as before. Which starts with making it into an outline stroke, then merging it together. Then deleting unwanted lines while seeing the outline stroke, and finishing of by deleting anchor points using the delete anchor point tool.

Figure 2.5.5 letter "s" adjustment (02/12/2024, week 11)

I also fixed the stroke that was attached to the stem of the letter "h". First, I made the letter "h" into a outline stroke. Then I copied the letter "n" that was already adjusted and used the knife tool to separate the shoulder from the stem and attached it to the stem of the letter "h" using the merge tool that was already cut using the scissor tool. I then merged it into 1 shape, deleted the unwanted lines, and also deleted the unnecessary anchor points.

Figure 2.5.6 letter "h" adjustment (02/12/2024, week 11)

For, the punctuation marks, I made it into an outline stroke first. Then I merged it together using the merge tool, and deleted both the unwanted lines and anchor points. For the hashtag, I realized that it should be much bigger, so I altered it to make it larger.

Figure 2.5.7 punctuation marks second adjustments (02/12/2024, week 11)

After looking at the final outcome, I realized that the letter "t" crossbar could be much more visible. So, I used the anchor points to make it wider and much more visible.

Figure 2.5.8 letter "t" adjustment (02/12/2024, week 11)

FONT RESULT

Figure 2.5.9 font result (02/12/2024, week 11)

Figure 2.5.10 font outline (02/12/2024, week 11)

After finishing the final font result, I moved it to FontLab to make it typeable. First, I named my font "Tinjo-Regular". I then continued to settle the ascender, descender, cap height, and x height of my font. I then transferred all the letters and punctuation marks to their designated boxes by copying and pasting i, making sure I keep the exact shape when pasting it to FontLab.

Figure 2.5.11 FontLab progress (05/12/2024, week 11)

Before I used the guides, I altered the side bearings and kerning using my bare eyes. This is my first attempt on adjusting the kerning and side bearings of the letters:

Figure 2.5.12 FontLab kerning attempt 1 (05/12/2024, week 11)

After transferring both the letters and punctuation marks, I then adjusted the side bearings starting with the letter "o" and "n". Following that, I continued to alter the side bearings of other letters using the help of this guide.

Figure 2.6.1 side-bearings guides (09/12/2024, week 12)

Figure 2.6.2 side-bearings progress (09/12/2024, week 12)

I then continued by adjusting the kerning on some letters, because of how they look on text or a word.

Figure 2.6.3 side-bearings and kerning result (09/12/2024, week 12)

After I was satisfied with the results on FontLab, I downloaded the font and started making my poster. I decided to use the quote "cling on to the light". These are the few posters I first came up with:

Figure 2.6.4 posters attempt 1 (09/12/2024, week 12)

After the feedback, Mr. Vinod advised me to make a better idea for the poster. He also showed me some ideas to make my poster better. Here are all the attempts I made before finalizing my poster idea:

Figure 2.7.1 posters attempt 2 (16/12/2024, week 13)

To fit all of the alphabets I made on FontLab into a quote, I decided to change my quote into "let things end, it is cool". Then, Mr. Vinod suggested me to stick with the concept of the very top right poster. To make the final poster I firstly typed the quote using the type tool, arranged it into different arrangements and changed the colors on half of the text. For the final touches, I made my comma as if it was a bulletin for my font name, my name, and the year.

Figure 2.7.2 poster progress (16/12/2024, week 13)

FINAL TASK 3 RESULT

Link to download font:

https://drive.google.com/file/d/1cBrdQF2zjH6c30Toyen3n0fjDMQ81ZCL/view?usp=sharing

Figure 2.7.3 side-bearings and kerning final result on FontLab (19/12/2024, week 13)

Figure 2.7.4 final font result from Illustrator jpeg (19/12/2024, week 13)

Figure 2.7.5 final font result from Illustrator pdf (19/12/2024, week 13)

Figure 2.7.6 final poster design jpeg (19/12/2024, week 13)

Figure 2.7.7 final poster design pdf (19/12/2024, week 13)

BACK TO TITLE

FEEDBACK

Week 8

<Independent Learning Week>

General Feedback: -

Specific Feedback: -

Week 9

General Feedback: Mr. Vinod told us to keep the letters and punctuation marks consistent through out the font. He also reminded us to use the x-height correctly. He also informed us about some minor details that needs to be looked at in detail, such as: the bottom part of the letter "s" needs to be bigger than the top, etc.

Specific Feedback: The letter "s" on the second attempt needs some more work, it lacks the consistent pattern in the font compared to the other letters.

Week 10

General Feedback: -

Specific Feedback: Mr. Vinod told me to decrease the amount of anchor points I had on my letters. He also advised me to make the stroke of the shoulder that is connected to the stems of the letters "h" and "n" more straight.

Week 11

General Feedback: -

Specific Feedback: Mr. Vinod advised me to change my punctuation marks, so that it looks more elegant and readable. Mr. Vinod also informed me to make the strokes of the bowl that connects to the stem of the letters "g" and "d" on my fonts much thinner. He also told me to erase the stroke that is placed across my letter "o".

Week 12

General Feedback:

Specific Feedback: Mr. Vinod gave me feedback regarding the font that I did on FontLab, he told me to fix both of my kerning and side bearings on each letters.

Week 13

General Feedback: -

Specific Feedback: Mr. Vinod told me to fix the composition of the posters I made. He also recommended me to some ideas for my posters. Lastly he told me to change the quote into a quote that includes all the letters I made.

BACK TO TITLE

REFLECTION

Experience

This task requires us to make our very own font. During the first week of making this task, it seemed to be quite scary to approach. But when I actually started on the task, I found the process to be very enjoyable. I liked that I can create my very own font. I also find it rather amusing that there is quite a bit of rules that you need to follow to make the font readable. Though sometimes creating my own font can be quite challenging. But through the attempts that I have made, I have learned much more rules that needs to be followed to create a readable letter. For example: there is no need to make a line that hovers over the space of the letter "o", because it will look more like the number zero. When it was time to move the letters to FontLab, at first it was a bit confusing. But as I got more comfortable with the software, it was much easier to operate. Though, I didn't know that the space between letters also had their rules to make it readable. Through that, I was able to learn on how to properly set the side-bearings on the letters. After making the font and transferring it to Illustrator, I was a bit confused on how I should make my poster look nice. I had a lot of ideas, but I still needed to improve my composition skills.

Observations

For this task, I realized that you need to experiment a lot when digitizing. I find that it can be quite hard at first, but as time goes on and the more practice I get. It becomes rather fun, for me it is because I can see the progress I made overtime. I also noticed that I needed to experiment a lot, because I lacked technical skills. But by the attempts I made so far, I am satisfied with the progress of my digitization. I have also seen some of my peers work, they were incredible and all of them had their own unique flare. I have also come to notice that I really liked to experiment with my choices while making my font, before settling with one that I was satisfied with. Though, I wished that I could have learned much more about how to make good punctuation marks. Just so that it will be much more readable and noticeable. Then I transferred the letters to FontLab and learned about the proper way to set the side-bearings, and I was satisfied with the result. Though, I couldn't help but notice how complex my peers works are. I also realized that when I was making the posters, I found that I was lacking in terms of how I make compositions.

Findings

During the making of this task, so far I have improved on my understanding of certain tools. Some of those tools are the scissors tool, the brush tool, etc. I also found that I can improve my technical skills in a fast pace if I experiment a lot. Though I still have a lot to learn to master the tools, so I will continue to experiment more on the software. Throughout the weeks that passed by, I got to learn new short-cuts to make adjusting the fonts each week much more efficient. I also learned a lot of small details that can really matter to the result of the font. When I was transferring the letters to FontLab, I gained some knowledge regarding the rules that we had to adapt to set the side-bearings on each letter. But when the time came to make the posters, I was lacking behind on my composition skills. I wished that I would have spared much more time to get a much more clearer understanding on how to make a good composition.

BACK TO TITLE

The chapter I read this week is titled "Lettering". I read the chapter from page 24-28. This chapter first informs readers about the Roman letterforms that has not changed significantly over the past few centuries. The most common lettering was the inscription in stone. Though there is one procedure that is always followed. The procedure states that, "Letters are such and such forms; therefore, whatever tools and materials we have to use, we must make these forms as well as the tools and material will allow". These inscriptions in stone was basically a model for all letterforms. For example: The Vergil in the St. Gall, Switzerland library shows that pen letterforms was not invented. It was just a writing of the letterforms that was already created using a different tool. Though, the new inventions of these tools has made writing much more faster, since there was a increase in use of writing.

Week 9

This week I continued to read the book on week 8, which is titled "An Essay on Typography" that is published in 1931 by the author named Eric Gill. Though this book incorporates a new intro by Christopher Skelton.

I continued reading the chapter titled "Lettering", from page 29-32. This part of the book tells us that the serif typeface was easy to inscribe in stone. The serif form was a way to end a line neatly in a inscription. Though, using the pen tool to write in serif form was not easy and that is the reason why the penmen's abandoned using them whenever its not necessary. The pen does not really affect stone inscriptions, since it takes a lot of time to make inscriptions. But some forms are harder to inscribe than others, for example: the letter "K" and "G". It is also a fact that every artist or letter-maker never really invent new forms, they were just simply writing the existing forms using whatever tools and materials they had. The first printers was not considered as a new letter inventor either. Because the printed books was just a copy of pen writings.

Week 10

For this week, I continued to read the book with the title "An Essay on Typography". I resumed to read the chapter titled "Lettering" from page 33-36. The book was published in 1931 by the author named Eric Gill. This book also includes a new intro by Christopher Skelton.

From the pages that I read this week, the book states that printing was firstly used in northern Europe. Though the centre of culture was not located in the north. German printers then relocated to the South. The affect of Italian letter forms can be seen through the 'semi-gothic' or semi-humanistic' type of Sweynheim and Pannartz. Though gothic letter forms were abandoned in Germany. The Italian printers wanted to create the typographic forms of Italian penmanship, but they did not create new forms. They were just formalizing and adjusting existing forms. The main work was completed by early Italian printers, but there was no significant changes from the Roman letter forms. This was because of the variety of national temper and commerce. Because of the necessity of commercials, especially for the newspaper printers. It gave a strong drive to create modern type faces. Soon enough, the modern type face became the common type face. The nineteenth century letter-cutter, writers, and engravers did their best to imitate the modern type face in their own ways. In the nineteenth century, a machine to imitate type faces from the pre-commercial era was created.

Week 11

On week 11, I continued reading the book titled "An Essay on Typography". It was published in 1931 by the author named Eric Gill. It also contains a new introduction by Christopher Skelton. This week I proceeded reading the chapter titled "Lettering" from page 37-39.

The book from page 37-39 contains information stating that letters are letters, whether it is created by hand or a machine. Though it is recommended if modern machinery can be used to create letterforms, if the value of the letterforms aligns with the quality of the machine production. Though the traditional way of lettering has been used for the last 400 years, there are still a lot of other necessities that needs to be fulfilled by lettering except being used in books or newspapers. Handwriting was also maintained, and the italic style still maintains its cursive character. Though most of the italic typefaces are too sloped and cursive. Perpetua and Joanna italics are the few examples that are slightly sloped and is used with upright capitals. Though the Joanna italic was created to be used by itself, not as a emphasis. However, the overuse of cursive in italic has constantly affect Greek types. This may be caused by the small amount of use in Greek printing, so the leaders of typographic design in the fifteenth century have never taken it accountable. It can possibly be seen in the case of Russian writing by what the Emperor Peter the Great did. Both the Russian and Greek alphabets are closely associated, since the authorization was succeeded by the Dutch typographers that the Emperor recruited. That same thing could also be done for Greek. Greek has a lot of different varieties of Greek types, yet most of them are more italic than the italic itself.

Week 12

This week I continued to read the book titled "An Essay on Typography". The book was published in 1931 by the author Eric Gill. It also includes a new introduction by Christopher Skelton. I read the page 40 and 41 from the "Lettering" chapter for this week.

The book tells us that there have been many improvements that were done throughout the years, but none of them was made to the Greek capitals. It was always created the same way as Roman capitals. The first attempt to modify Greek letterforms was the Perpetua Greek. The Perpetua Greek capitals are in the same type family as Perpetua Roman and that applies to the lower-case letterforms too.

When the Roman thought of lettering, they thought that inscriptions and writings were printed letters for them. Though, printings are also unsatisfying as there is an unreasonable amount of different letterforms that is compiled together onto a page or a book. It is recommended not to combine different typefaces or type families onto a book or a page. A book that is printed in one typeface or an even better typeface combination would be a better choice.

Week 13

For week 13, I resumed my reading on the book titled "An Essay on Typography" by the author Eric Gill. The book was published in 1931 and it also incorporates a new introduction by Christopher Skelton. The pages that I read this week on the "Lettering" chapter was from the page 46-58.

The book informs us that the first attempt to figure out the norm of plain letters was done by Mr. Edward Johnston when he was making the sans-serif letterforms for the London Underground Railways. Though there are many norms that can be used, it depends on how the letters are used.

Despite industrialism, designing letterforms is still considered as a profession that deserves enthusiasm from individuals. There is only a small amount of lettering in the world, but the tools that were used through the evolvement of lettering has a great influence to letterforms. If modern handwriting had to be revised, there must be a good understanding about the technique and the printing, not about the restoration of the medieval calligraphy.

BACK TO TITLE