Typography ✦Task 3✦

During week 7, our module lecturer, Mr. Vinod has instructed us to prepare 5 different type of stencils, including one non-traditional stencil, along with a few graph papers. Mr. Vinod have first asked us to draw lines and strokes on a piece of paper to observe the differences between each stencil. The strokes mainly differ based on the type of pen nib, however, it may also vary based on the way it is held or the placement of the paper, as well as the pressure exerted when writing.

This small exercise was an introduction to the third assignment of the semester, which was Task 3: Type Design and Communication. This assignment requires us to design a typeface that consist of the hallmarks of a good typeface which includes:

Subtlety or character
Presence
Legibility
Readability

The last task of the assignment includes the creation of a basic A4 size poster displaying the font designed.

◇─────────────────────────────────────────────────────────◇

✦INSTRUCTIONS✦

Figure 1: Assignment guidelines for Typography.

◇─────────────────────────────────────────────────────────◇

✦DESIGN PROCESS✦

1.0 Research

I have conducted research on existing typefaces to understand the general rule of constructing a type. Certain letters consist of different heights which are not adhering to the general ascender or descender height, such as the letter 't' and 'i'. The letter starts from the baseline and stops at a height in between the median and the ascender, giving it a unique size from others yet still manages to maintain consistency.

Figure 1.1: Analysis of the height and size of each letters of Adobe Caslon Pro Regular.
(Week 9 - 30.05.23)

Overshoot is the part of a letterform that extends above or below the vertical dimensions of flatter glyphs. This occurs when there are rounded parts in the letter in which it is slightly sized up to avoid them from looking too small than other letters.

Figure 1.2: Example of overshoot (part highlighted in red).

It was instructed to choose and study an existing font design that adheres to the design direction we are aiming for. I have chosen to analyze the anatomical structure of the font, Adobe Caslon Pro by deconstructing the letters 'a, t, g, m'.

Figure 1.3: Deconstruction of 'a' of Adobe Caslon Pro Regular.
(Week 9 - 30.05.23)

Figure 1.4: Deconstruction of 't' of Adobe Caslon Pro Regular.
(Week 9 - 30.05.23)

Figure 1.5: Deconstruction of 'g' of Adobe Caslon Pro Regular.
(Week 9 - 30.05.23)

Figure 1.6: Deconstruction of 'm' of Adobe Caslon Pro Regular.
(Week 9 - 30.05.23)

2.0 Ideation

The assignment begun with a simple exercise provided using 5 different writing tools. We are required to complete:

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 l g r i y m p n" in the selected style. Choose either UPPERCASE or lowercase to write in.

The tools that I have selected are:

Artline Super Fine 0.1mm
Pentel Permanent Marker N450
Artline Supreme Brush Marker
Artline Calligraphy Pen 4.0mm
Q-tip (cotton swab)

Figure 2.1: Tools used.
(Week 7 - 19.05.23)

I practiced using each tools by drawing strokes at different directions. Each tool exhibit their own unique type of strokes depending on the way it is held and the pressure exerted on the paper. It was fun to see how a difference in pen nib could significantly influence one's style of writing.

Figure 2.2: Practice of 5 different tools with diagonal, horizontal, vertical and circular lines.
(Week 7 - 19.05.23)

After that, I went on and write the provided letters in 5 different writing styles for each tool. The first tool was the Artline Super Fine 0.1mm pen. I am most familiar with this tool as I often use it to write. The pen nib is the thinnest out of all tools selected and it gives a smooth line when writing. It is suitable to create neat and condensed fonts.

Figure 2.3: 5 different writings #1 by Artline Super Fine 0.1mm.
(Week 7 - 20.05.23)

The second tool was the Pentel Permanent Marker N450. It has a round nib that gives a filling and thick line. The ink also flows out well allowing the user to create long strokes.

Figure 2.4: 5 different writings #2 by Pentel Permanent Marker N450.
(Week 7 - 20.05.23)

The third tool was the Artline Supreme Brush Marker which consist of a pen nib similar to that of a paint brush. The strokes created by this brush heavily depended on the pressure exerted when writing. A strong pressure creates uniform and thick brushed lines while a light pressure create thin lines, hence, creating different strokes based on how much force is applied.

Figure 2.5: 5 different writings #3 by Artline Supreme Brush Marker.
(Week 8 - 21.05.23)

The fourth tool was the Artline Calligraphy Pen 4.0mm. This tool is the most unique as the pen nib is totally flat and it gives a very interesting stroke based on the way it is held. The ideal way to hold it is 45° which gives a very traditional handwriting.

Figure 2.6: 5 different writings #4 by Artline Calligraphy Pen 4.0mm.
(Week 8 - 21.05.23)

The final tool was instructed to be a non-traditional tool, which I have chosen the cotton swab, also known as the Q-tip. This tool is commonly used as a stencil as it have a handle and good absorbent at the nib. It gives a rounded line and is steady in a way that is able to create smooth and precise curves when writing.

Figure 2.7: 5 different writings #5 by a Cotton Swab.
(Week 8 - 22.05.23)

Then, I have selected one style of writing for each tool and continuously practiced to refine the words as well as give them a uniform style.

Figure 2.8: Practice and refinement of selected handwritings.
(Week 8 - 22.05.23)

This is followed by the compilation of the handwritings by different tools in one graph paper.

Figure 2.9: Compilation of 5 different handwritings by each tool.
(Week 8 - 22.05.23)

During the evaluation on Week 8, I have misunderstood the guidelines in which we are required to write instead of design the fonts. Hence, I redid the exercise solely based on my handwriting.

Figure 2.10: (Redo) Compilation of 5 different handwritings by each tool.
(Week 8 - 22.05.23)

Based on the 5 different writing stencils used, I have chosen the type written using the Calligraphy pen as I like the traditional calligraphic techniques used with the selected tool. I practiced and refined the letters further to have consistent strokes as well as height and size which complements each of the letters well.

Figure 2.11: Further practice using the Calligraphy pen.
(Week 9 - 30.05.23)

3.0 Digitalisation

Prior to digitalization, I have chosen and compiled the best written for the letters 'a e t k g r i y m p n'. The selections are exported into Adobe Illustrator to be digitalized.

Figure 3.1: Handwritten letters to be digitalized.

First, I have created guides according to the demo video provided by Mr. Vinod such as:

Ascender height
Capital height
Median
Base line
Descender line
Overshoot

Figure 3.2: Guidelines.
(Week 9 - 02.06.23)

Then, I have created the letters ' a t g m' first as they consist of strokes that can be reused on the other letters. I have also standardize the measurements of each variable to maintain consistency throughout the letters.

Figure 3.3: Construction progress of 'a t g m'.
(Week 9 - 02.06.23)

This is followed by the construction of the remaining letters. I have made sure the sizes of the letter are similar as well as reuse certain strokes, such as reusing the horizontal strokes for letters 'r i k n'.

Figure 3.4: Construction progress of 'a e t k g r i y m p n'.
(Week 9 - 02.06.23)

The digitalized letterforms are then compiled into one artboard and presented.

Figure 3.5: Digitalized letters.
(Week 10 - 06.06.23)

During Week 10, Mr. Vinod stated that the letters 'g' and 'y' appeared small in comparison with the other letterforms. Hence, I tried writing them in another way which is able to harmonize with the rest of the alphabets.

Figure 3.6: Redesign of letters 'g' and 'y'.
(Week 10 - 07.06.23)

This is followed by the creation of the punctuations marks ' , . ! #'. I followed the rules provided in the design of punctuation marks and reuse some of the strokes in Illustrator to maintain cohesiveness between the letterforms.

The shape of the period should be related to the size of the dot on the 'i', but should be slightly larger.
The height of the comma is around two stacked periods, in which the comma height should be slightly smaller.
The height of the exclamation point is the same as the capital height, whereas the dot should be smaller than the period.
The hashtag should be numerical-height (slightly shorter than cap height) and similar in width to 'n'. The position of vertical bars to stroke width needs to be balanced to avoid size imbalance.

Figure 3.7: Construction progress of punctuation marks.
(Week 10 - 09.06.23)

The compilation of the updated letterform design as well as punctuation are shown below.

Figure 3.8: Digitalized letterforms and punctuations.
(Week 10 - 09.06.23)

During the evaluation session on Week 11, further refinements are to be made on the letterforms and punctuations which resulted as the final digitalized letterforms as shown below.

Measurements from baseline

Ascender: 700 pt
Capital height: 680 pt
Median: 500 pt
Descender: -200 pt

Overshoot: 10 pt

Stem: 100 pt

Figure 3.9: Digitalized letterforms and punctuations.
(Week 11 - 13.06.23)

Figure 3.10: Grids of digitalized letterforms and punctuations.
(Week 11 - 13.06.23)

4.0 Development in FontsLab

After the digitalization process where I ensured that all the letterforms are consistent as well as pleasing to look at, I have exported them to FontLab according to the tutorial provided by Mr. Vinod.

Figure 4.1: Export of letterforms 'a e t k g r i m p n , . ! #' into FontsLab.
(Week 10 - 10.06.23)

The export of letterforms is followed by the adjustment of kerning between each letter. Certain letters may look closer to one another due to their anatomy, such as t and y. Hence, adjustments have to be made so that the spacing between each letter looks consistent.

Figure 4.2: Kerning between letterforms.
(Week 10 - 10.06.23)

During Week 11, Mr. Vinod pointed out that the spacing between the letters can be reduced slightly. Hence, I have compared each and every letter side by side to ensure that it spaces out well. I also typed out random words and used the punctuations to spot any awkward between spacings.

Figure 4.3: Further adjustments of kerning.
(Week 11 - 13.06.23)

5.0 Poster Design

The next phase of this assignment involves the creation of a simple poster design using the font created. The requirements of the poster is as followed:

The dimension of the poster must be A4 size.
The words must involved all the letterforms created.
The words must be in the same point size.
The poster must express impact to promote the typeface.

After the export of the font, I started compositing my poster. I mapped out a few sentences that include all the alphabets created. My first two ideas were about a grim reaper and a king. Hence, I went with the phrase 'I am a grim reaper. Kill type king!'.

Figure 5.1: Drafting of phrases.
(Week 11 - 16.06.23)

This is followed by the composition of the poster in Adobe Illustration. We did not create the letter 'l' so I used the exclamation marks not only to replace the missing letter, but add urgency in the tone of the word as though the narrator (the grim reaper) is ruthlessly ordering the death of the type king. The words are enlarged to occupy the most space on the canvas to enhance the demanding tone.

Figure 5.2: Poster composition with the font 'Respair'.
(Week 11 - 16.06.23)

However, I was not satisfied with the phrase and the composition. During Week 12 evaluation, Mr. Vinod reminded that the point size must be the same for the phrase. Then, I came up with a new phrase 'i yearn, i make, i type, art.' in which I composite several compositions with different point size and placement of type.

Figure 5.3: Different layouts of poster composition.
(Week 12 - 20.06.23)

I have chosen Composition #2 as I like how each line further made adjustments based on advice given by Mr. Vinod. I was torn between two options using different font size. However, Mr. Vinod commented that a bigger font size as well as tighter kerning may give a more dynamic effect to the poster. Hence, I went with a larger font size for the phrase.

Figure 5.4: Poster using font of 160pt (left) and font of 150pt (right).
(Week 12 - 20.06.23)

Finally. I added texture to the poster by placing a png image of a paper texture. The blending mode of the layer is adjusted to Screens and the opacity is lowered. This is to avoid the appearance of the texture from overshadowing the words as well as maintain clarity of the message to be conveyed by the poster.

Figure 5.5: Addition of texture to the poster.
(Week 12 - 20.06.2023)

6.0 Final Outcome

Preview of font:

Downloadable link of font:

https://drive.google.com/file/d/12xYJ2FW9C0kPTf-aymeFWNr6-saw7EgN/view?usp=sharing

Figure 6.1: Final Task 3: Type Design and Communication "Ordain" - JPEG.
(Week 13 - 26.06.2023)

Figure 6.2: Metrics Window with sentence in FontsLab.
(Week 13 - 26.06.2023)

Figure 6.3: "Ordain" Typo Poster A4 - JPEG.
(Week 13 - 26.06.2023)

Figure 6.4: Final Task 3: Type Design and Communication "Ordain" - PDF.

(Week 13 - 26.06.2023)

Figure 6.5: "Ordain" Typo Poster A4 - PDF.
(Week 13 - 26.06.2023)

◇─────────────────────────────────────────────────────────◇

✦FEEDBACK✦

Week 8

General Feedback:

This week Mr. Vinod evaluated the first exercise for Task 3 in which we are required to write 5 different handwritings by 5 different selected tools. There were a few comments based on the general knowledge of writing in which the letters written should sit on the baseline well. The letter 't' is also usually written slightly taller than the x-height.

Specific Feedback:

The 3rd and 5th writing was the best out of all. The 3rd looks good, however, it looks more of a design than a written word, but it could be brushed up and refined. The 5th is the most preferred in which the letter 'g y t n' can be practiced more to give a neater and uniform look. A few more variations can be made depending on personal preferences to determine the best variations.

Week 9

General Feedback:

This week Mr. Vinod evaluated our final choices from the writing practice in which we are to digitalize and create a font. He commented that we should practice on the handwriting chosen and select the best one for the digitalization process. Adjustments can be made during digitalization only if they improve the characteristic of the typeface. Consistency is important throughout each letter such as a vertical stroke should be the same for all letters, however, inconsistency may be introduced to give a more unique look to the specific type. During the digitalization process, it is recommended to reference existing fonts and study the anatomy of the font as to understand what gives a good typeface.

Specific Feedback:

I have chosen the type written using a Calligraphy Pen which was evaluated during class. Mr. Vinod gave practical examples for certain letters to improve my current practice. For example, the horizontal line on the letter ‘t’ should be placed slightly around the x-height, hence, it can be dealt with an organic stroke connecting the vertical line to the horizontal line.

Week 10

General Feedback:

Mr. Vinod evaluated our digitalized letterforms during class. He has noted that digitalization includes the introduction of control and consistency to the letterform design in which we are to refine the handwritten version. Vertical and horizontals may have up to two variations, however, they must maintain the same throughout. There must be a clear starting point and ending point for all the strokes, hence, clarity is instituted.

Specific Feedback:

Based on my digitalized letterform, it is suggested to analyze pre-existing letterforms to understand the anatomy of each letterform as well as their interaction with one another to show complementary designs. The ‘t’ is generally shorter than the ascender height in which the top falls in the middle between the ascender and median height. Other than that, the end strokes should be the same as it looks neater overall. The ‘g’ and ‘y’ seemed smaller than the other letters, hence, it can be adjusted to be wider and shorter.

Week 11

General Feedback:

This week we have look through not only our digitalized letterforms, but also our e-portfolio blog. The general requirements for our blog included all the required sections and complete elaborations, as well as the respective submissions instructed by the assignment guideline. Other than that, the punctuation marks should also appear cohesive with your letterforms design, such as the stroke on the exclamation mark should be the same width as the vertical strokes on the letterforms. Rounded strokes should always have an overshoot.

Specific Feedback:

Based on the digitalized letterforms, most of the letters are good in which consistency is seen throughout. However, there are a few minor adjustments to be made on certain letters. The strokes on ‘t g’ have slight issues which can be improved by adjusted the end strokes slightly to blend with the style of the other letterforms. Moreover, the angles on the end strokes of the ‘#’ should be flatter to give a more stabilized look.

Week 12

General Feedback:

This week Mr. Vinod evaluated our poster composition. He mentioned that a poster composition should have dynamic, impact as well as tension and balance. Dynamic and impact is important to attract the attention of the audience. Tension and balance are to improve visual experience by creating a sense of harmony between the placement of each element in a poster. This also enhances readability.

Specific Feedback:

The initial issue was that the rule of this assignment was misunderstood in which the point size for the phrases should be the same throughout the poster. Other than that, the composition is overall alright, however, the point size of the phrase can be increased while the kerning can be decreased to enhance the dynamic of the poster. This is also to reduce the white spaces between the words which may affect impact.

◇─────────────────────────────────────────────────────────◇

✦REFLECTION✦

Experience

The duration for the progression of Task 3 of Typography was the longest in which the workload was the heaviest compared to previous assignments. There were many details that have to be taken into consideration throughout the assignment causing many challenges to arise. However, this was the most interesting assignment as we are to design a font from start to finish, including research until exporting of a downloadable font. It was exciting seeing my handwriting becoming a digitalized font that can be typed out, hence, all the work was worth it as the outcome was greatly satisfying. I highly appreciate the valuable experience gained through this assignment.

Observation

Prior to ideation, I have did research on the basics of font design as well as conduct deconstruction of existing fonts to understand the anatomy of individual letters. I have noticed that although letterforms of a font may appear the same height or volume, it is actually a geometric illusion which allows consistency throughout the letterforms. For example, the ascender height of the letter 't' was assumed to be the same as other ascender heights, but in reality it is slightly lower. Overshoot is also a common occurrence for rounded strokes to avoid the letters from appearing too small.

Findings

This assignment has greatly assisted me in understanding the basics of a good typeface design. The design of a single letter takes a long time in which it requires many technicalities, such as the x-height, ascender, descender height, size consistency, stroke width and many more. Kerning between individual letterforms is also an important process which is essential in influencing the readability and clarity of the font. I have also learnt the rules to the design of punctuation. Each punctuation mark has a different set of rule but the strokes are correlated to those of the letterforms, hence, it serves as more challenging than letterform design.

◇─────────────────────────────────────────────────────────◇

✦FURTHER READING✦

I have read an online article titled 'Micro Typography: How to Space and Kern Punctuation Marks and Other Symbols' as I was researching for extra knowledge to aid me in the completion of Task 3. The article can be found here.

Figure 7.1: 'Micro Typography: How to Space and Kern Punctuations Marks and Other Symbols' by Thomas Bohm.

The importance of spacing between symbols include:

Improve the readability of the text
Improve the appearance of the text
Correct orthography (the conventional spelling system of a language) which enhances the value of a text.

Spacing is the control of white space which determines the clarity of the text in comparison to the dark space caused by the text. There are some general trends of spacing that can be applied to certain punctuation marks such as followed:

Figure 7.2: General trends of spacing between punctuation marks.

Default tracking of certain typefaces may appear too tight for their respective punctuation marks, hence, manual kerning must be done in order to improve communication. However, this may cause certain problems to arise:

Spacing of punctuation marks individually is time-consuming.
Modification of the typeface's built-in kerning and sidebearing values is not a good practice.
White space and kerning on web pages lacks technical support.

In summary, in regards to typeface design, the control of white (negative) space in typography is closely correlated to graphic communication. This is as important as the black (positive) space.

Search This Blog

✦Ariel Chin Bei Yi 0343651✦