04/11/19 - 25/11/19 (Week 11 - Week 14)
Piyaphon Inthavong (0337589)
Advanced Typography
Final Project
October 28th, 2019
To begin my first week of the final project, I started with the ideation process where I find typographic problems to solve. Mind mapping is the first thing I worked on ideating a plan. Through the first few days, I couldn’t think of much but my surroundings which include the “unclear signs” problems such as some road signs, or maybe a new way to implement the name tag (because most people dislike wearing it). My initial ideas were not so brilliant.
After several days of thinking about the surrounding environment, I realize I’m not getting anywhere with my ideas. Unaware of recycling through the same thoughts to find a typographic solution, it’s time I need to change. That was when I detach myself from the environment and think through my past experiences which finally leads to the problems I encountered back then during my internship in Laos. The Lao language never had a proper calligraphy typeface for a decorative script showcase for events and different situations. It was an irritation to all Lao designers, and that was the problem I knew I could solve.
After identifying the problem, I came up with a proposal which is then approved by Mr. Vinod.
Week 11:
November 4th, 2019
The initial stage into the implementation process was to write down all the letters and consonants on papers with pen and ink.
The first attempt did not satisfy what I want as the letter contrast was not too visible. I realize that I was trying to make the consonants look symmetrical, which defeats the purpose of the idea of creating a handwritten style calligraphy script. Without further ado, I quickly rewrite all the consonants again.
Again, I identified the same issue I faced from the first attempt. It was irritating because its almost impossible to create the huge letter stroke contrast with the pen I was using. On the other hand, while trying to use a more reliable tool, the brush, I found out it was very complicated to control the round strokes that most Laos language have.
After several rounds of practicing, I finally feel more comfortable with the small brush and rewrote all the consonants again with the ink and the brush.
The results were better than expected. Despite the lack of letter contrast that the small brush offer, I decided to continue the process by digital modification through Adobe illustrator. The next thing to do was to scan the paper to get a clearer photo and follow up with the Image Trace option in Illustrator.
Once the preparation of the vectorized consonants were ready, it's time for the digital refinement process. The digital refinement process of all individual letters are broken down into few steps, first being the manual refine which is done through the direct selection tool to fix the letters' appearance into a desired shape.
I then want the vertical strokes to have a similar thickness. This step is fulfilled by extracting the shape from the other letters which have similar characteristics.
The same techniques are repeated for different letters to achieve a consistent width for the letter contrast.
The letters are refined in many ways and are not limited to any set amount of tools. The puppet tool is very popular among the rest due to its ability to bend shapes to create curves that are present in most Laos language letters. The smooth tool comes second in the list, and lastly is the original pen tool.
Through the given feedback from Mr. Vinod, it would be a waste to separate the language from each other in this application of this final project. To fully show the use of the newly drawn typeface, they must be featured together in a piece of artboard. I first worked on info designs for travellers in Laos:
The following are the first few attempts on creating info designs for travellers in Laos. Due to the fact that the words were all too crowded when placed in an artboard, I simplified them later on for the final outcome.
After receiving a few feedback from Mr. Vinod for the info design, I finalized the design by placing one word (intended for translation) into one artboard so that the focus and hierarchy is straightforward and not overwhelming.
Week 10:
Week 11: With the ideation process done, implementing the idea is the difficult part. This is the part where people often give up on due to the amount of workload which is required to produce quality work. It feels overwhelming as workload starts to stack up.
Week 12: By making sure my objectives are clear, I continued working with the process of the digital lettering modification for the week. It was more tiring than ever to spend so much time on a result that looks minimal, although, having a clear path in mind on what to do made me feel less stress than the ideation process.
Week 13: Tiring day in general, we were all rushing to do our e-portfolio and final project as we were reminded by Mr. Vinod to get all done by the week for an assessment. Despite the fatigue, I felt more relieved to receive great feedback from both the lecturers.
Week 11: The implementation process of the idea takes time. I have lots of character to digitize, not only Lao characters but also English because it is essential to have bilingual language for both Laotians and English users.
Week 12: As I continue to digitize and modify the Lao language characters, I gradually deformed the letter script style I intended to create in the first place. This is because I wanted the letters to look symmetrical, which is really not what a calligraphy script looks like.
Week 13: Time was our biggest enemy during this week. Workload keeps increasing from different classes. Final submission deadlines are slowly pushing in.
Week 11: It's not efficient to work on the brush style of each letter individually because there are too many type characters that has to be done. Use online brushes that are relevant to my work to speed up the process of adding letter textures.
Week 12: After realizing that my letters were starting to lose its characteristics, the first thing I had to do was take a little break from the screen. This helps clear my mind so that I can spot the mistakes and find a solution right away. Staring at your own work for an extensive amount of time only limits what the eyes can perceive at that moment.
Week 13: By understanding that everyone is facing the same situation during this packed week, I feel less pressure overall which helps me work with lesser stress.
This is a blog written to feature advice from type designers add monotype and font smith for designers Wanting to create a typeface for the first time.
The first step before designing anything is the research period it’s important to identify the style of typeface we want and to know your target audience in which the typeface will be used. To get an idea of the final outcome, the mood board is advised as an important ideation process for the typeface.
Start designing the typeface by sketching as it helps to capture the idea as fast as possible. The sketch is like a prototype for the final outcome. Many designers still prefer the traditional way of using the pencil and a paper or a sketchbook. Others prefer to draw digitally through tablets, and some works directly in font-design software.
Use common prototype words like “Hamburgefonstiv” or “Adhesion” to test the key characteristics, the structure for and which among different letters. When the letters are all ready to be implemented, use software such as Adobe Illustrator and FontLab to process the vectors. Experiment with the letter anatomy such as the kerning, alignment, measurement, leading and ligatures.
Piyaphon Inthavong (0337589)
Advanced Typography
Final Project
INSTRUCTIONS
EXERCISES
Week 10:October 28th, 2019
To begin my first week of the final project, I started with the ideation process where I find typographic problems to solve. Mind mapping is the first thing I worked on ideating a plan. Through the first few days, I couldn’t think of much but my surroundings which include the “unclear signs” problems such as some road signs, or maybe a new way to implement the name tag (because most people dislike wearing it). My initial ideas were not so brilliant.
After several days of thinking about the surrounding environment, I realize I’m not getting anywhere with my ideas. Unaware of recycling through the same thoughts to find a typographic solution, it’s time I need to change. That was when I detach myself from the environment and think through my past experiences which finally leads to the problems I encountered back then during my internship in Laos. The Lao language never had a proper calligraphy typeface for a decorative script showcase for events and different situations. It was an irritation to all Lao designers, and that was the problem I knew I could solve.
 |
| Figure 10.1. Mind mapping for ideas for the final project. |
After identifying the problem, I came up with a proposal which is then approved by Mr. Vinod.
Week 11:
November 4th, 2019
The initial stage into the implementation process was to write down all the letters and consonants on papers with pen and ink.
 |
| Figure 11.1. First try on writing the Lao script. |
 |
| Figure 11.2. The first attempt to complete the consonants of the Lao language. |
The first attempt did not satisfy what I want as the letter contrast was not too visible. I realize that I was trying to make the consonants look symmetrical, which defeats the purpose of the idea of creating a handwritten style calligraphy script. Without further ado, I quickly rewrite all the consonants again.
 |
| 11.3. Rewriting the consonants with more letter contrast. |
 |
| Figure 11.4. A second attempt in writing a complete lao consonants and vowels. |
Again, I identified the same issue I faced from the first attempt. It was irritating because its almost impossible to create the huge letter stroke contrast with the pen I was using. On the other hand, while trying to use a more reliable tool, the brush, I found out it was very complicated to control the round strokes that most Laos language have.
 |
| Figure 11.5. All the drafts and trial and errors for writing. |
 |
| Figure 11.6. Continued drafts. |
After several rounds of practicing, I finally feel more comfortable with the small brush and rewrote all the consonants again with the ink and the brush.
 |
| Figure 11.7. Final complete Laos consonants and vowels on paper. |
The results were better than expected. Despite the lack of letter contrast that the small brush offer, I decided to continue the process by digital modification through Adobe illustrator. The next thing to do was to scan the paper to get a clearer photo and follow up with the Image Trace option in Illustrator.
 |
| Figure 11.8. Scanned paper of the complete Laos consonants and vowels. |
Once the preparation of the vectorized consonants were ready, it's time for the digital refinement process. The digital refinement process of all individual letters are broken down into few steps, first being the manual refine which is done through the direct selection tool to fix the letters' appearance into a desired shape.
 |
| Figure 11.10. Manual refinement with direct selection tool. |
I then want the vertical strokes to have a similar thickness. This step is fulfilled by extracting the shape from the other letters which have similar characteristics.
 |
| Figure 11.9. Digital refinement: an attempt in creating a thicker vertical letter strokes. |
The same techniques are repeated for different letters to achieve a consistent width for the letter contrast.
 |
| Figure 11.11. Extracting heavy strokes from a letter to fit into another. |
The letters are refined in many ways and are not limited to any set amount of tools. The puppet tool is very popular among the rest due to its ability to bend shapes to create curves that are present in most Laos language letters. The smooth tool comes second in the list, and lastly is the original pen tool.
 |
| Figure 11.12. Modifying curved strokes with the Puppet Tool. |
 |
| Figure 11.13. Working progress on the letters. |
 |
| Figure 11.14. Studying all the Lao characters from the glyphs. |
 |
| Figure 11.15. The first batch of a complete vectorized Laos characters (without textures). |
Week 12:
November 11th, 2019
Through the progress check with Mr. Vinod, I was told to create bilingual language for this typeface, that means another set of language (English) must be worked on for submission. As there was no more further instructions needed for the final project, I continued with work from the previous session. This week, I mainly focus on texturizing all the letters.
The second layer of adding texture is carried out by using the traced shapes. The shapes are created using the pen tool. Every individual letters' texture is produced by placing the constructed shapes on the edge of each letters one by one.
The results of the letters are shown below in comparison to the final result and the behind-the-scene. Referring to figure 12.6 behind-the-scene, the purple shapes are the letters' main body, the small black shapes represents an "addition" to the main body, while the white means subtraction to the original letter shapes.
The process is repeated for each letters.
The exact process used for the Laos language are repeated for the English alphabets.
Once all alphabets are ready, I start aligning them to the baseline and its x-height, ascender, descender. To get the proportion and shapes right, I used the typeface "Futura Std" as a benchmark for the letters. I chose Futura due to its extended ascender which is higher than average fonts.
Pheung's script is a handwritten typeface inspired by one of my respected relative's inking calligraphy style. The word "Pheung" means bee, and so the theme follows. This typeface is Ideal for title purposes such as name tag, handwritten quotes, product packaging, merchandise, social media, greeting cards, etc.
Week 13:
November 18th, 2019
After finish designing and implementing the typeface, I now have to create collaterals to display the typeface in bilingual language. I began by creating a handwritten quote poster separately to showcase the use of the typeface.
November 11th, 2019
Through the progress check with Mr. Vinod, I was told to create bilingual language for this typeface, that means another set of language (English) must be worked on for submission. As there was no more further instructions needed for the final project, I continued with work from the previous session. This week, I mainly focus on texturizing all the letters.
To simplify the process in my workload, I break down the process of digital texturization into 3 steps:
1. Using Adobe Illustrator preset brush as the first layer of minimal texture.
2. Add textures manually with the "traced texture" shapes as the main texture.
3. Build the complex shapes together using the shape builder tool.
 |
| Figure 12.1. The brush settings I used for the first layer of texture. |
 |
| Figure 12.2. Shapes of textures I created using the Pen tool. |
The second layer of adding texture is carried out by using the traced shapes. The shapes are created using the pen tool. Every individual letters' texture is produced by placing the constructed shapes on the edge of each letters one by one.
 |
| Figure 12.3. Some texture shapes are modified using the puppet tool to create variations. |
 |
| Figure 12.4. Connecting the complex texture shapes with the shape builder tool. |
 |
| Figure 12.5. Overprint preview is used to check the "subtracted" shapes to create the rough texture on the edges. |
The results of the letters are shown below in comparison to the final result and the behind-the-scene. Referring to figure 12.6 behind-the-scene, the purple shapes are the letters' main body, the small black shapes represents an "addition" to the main body, while the white means subtraction to the original letter shapes.
 |
| Figure 12.6. How the textures are made. |
The process is repeated for each letters.
 |
| Figure 12.7. A comparison of before and after the digitized script. |
 |
| Figure 12.8. Lao keyboard layout positioning. |
English alphabets
Once done with the all Laos language characters, the English are next in the list. Compared to Laos curved letters, English are less difficult and I also feel more confident writing them with a brush. |
| Figure 12.9. English alphabets written with a brush. |
The exact process used for the Laos language are repeated for the English alphabets.
 |
| Figure 12.10. Manual refinement with direct selection tool. |
 |
| 12.11. Measuring stroke contrast consistency with blocks. |
Once all alphabets are ready, I start aligning them to the baseline and its x-height, ascender, descender. To get the proportion and shapes right, I used the typeface "Futura Std" as a benchmark for the letters. I chose Futura due to its extended ascender which is higher than average fonts.
 |
| Figure 12.12. Measuring the baseline, x-height, and ascender to "Futura Std." |
 |
| Figure 12.13. Preparing a guide for the letters descender. |
 |
| Figure 12.14. Finishing lining up letters into its right position. |
 |
| Figure 12.15. Numbers progress. |
 |
| Figure 12.16. Aligning the Lao language characters into its baseline and height. |
 |
| Figure 12.17. Setting up the positioning for the numbers and symbols using Arial as its benchmark. |
 |
| Figure 12.18. Final refinement of the completed typeface in bilingual language. |
Pheung's script is a handwritten typeface inspired by one of my respected relative's inking calligraphy style. The word "Pheung" means bee, and so the theme follows. This typeface is Ideal for title purposes such as name tag, handwritten quotes, product packaging, merchandise, social media, greeting cards, etc.
PDF embedded version of the final outcome
Week 13:
November 18th, 2019
After finish designing and implementing the typeface, I now have to create collaterals to display the typeface in bilingual language. I began by creating a handwritten quote poster separately to showcase the use of the typeface.
 |
| Figure 13.1. Few trials of the quote poster in English. |
 |
| Figure 13.2. A handwritten quote poster in English. |
 |
| Figure 13.3. The handwritten quote poster in Laos language. |
Through the given feedback from Mr. Vinod, it would be a waste to separate the language from each other in this application of this final project. To fully show the use of the newly drawn typeface, they must be featured together in a piece of artboard. I first worked on info designs for travellers in Laos:
 |
| Figure 13.4. Info design, Laos. |
 |
| Figure 13.5. Info design, Laos (with map). |
 |
| Figure 13.6. Postcard (collateral). |
 |
| Figure 13.7. Attempt on creating an wedding invitation (collateral). |
The following are the first few attempts on creating info designs for travellers in Laos. Due to the fact that the words were all too crowded when placed in an artboard, I simplified them later on for the final outcome.
 |
| Figure 13.8. Info design 1 (English-Laos). |
 |
| Figure 13.9. Info design 2 (English-Laos). |
 |
| Figure 13.10. Info design 3 (English-Laos). |
 |
| Figure 13.11. Info design 4 (English-Laos). |
 |
| Figure 13.12. Info design 5 (English-Laos). |
 |
| Figure 13.13. Info design 6 (English-Laos). |
 |
| Figure 13.14. Info design 7 (English-Laos). |
 |
| Figure 13.15. Info design 8 (English-Laos). |
After receiving a few feedback from Mr. Vinod for the info design, I finalized the design by placing one word (intended for translation) into one artboard so that the focus and hierarchy is straightforward and not overwhelming.
PDF embedded file of the final info designs.
Video of the letter creation process.
------------------------------------------------------------------------------------------------
Pheung's Script Font Download:
------------------------------------------------------------------------------------------------
FEEDBACK
October 28th, 2019
Specific feedback
After proposing the typographic problem and solution to Mr. Vinod, he agreed upon the idea and suggested that I also look into and study which key on the keyboard is for which Lao character.
Week 11:
November 4th, 2019
Specific feedback
Do bilingual typeface meaning both english and lao characters. Increase work speed by using brush style built inside Adobe Illustrator; Good brushes can also be downloaded online.
Week 12:
November 11th, 2019
Specific feedback
The final result is looking good. Now use them in a bilingual manner for series of something specific. Simulate its use/uses.
Week 13:
November 18th, 2019
Specific feedback
Make collaterals to feature the bilingual typeface together. The reason for designing 2 languages in the first place was to match the strokes in different languages which do not originally go well together. Combine the two languages together in one piece, and do not separate them because that defeats the purpose of making the typeface available in bilingual language. Also keep in mind to maintain the color consistency.
Specific feedback
After proposing the typographic problem and solution to Mr. Vinod, he agreed upon the idea and suggested that I also look into and study which key on the keyboard is for which Lao character.
Week 11:
November 4th, 2019
Specific feedback
Do bilingual typeface meaning both english and lao characters. Increase work speed by using brush style built inside Adobe Illustrator; Good brushes can also be downloaded online.
Week 12:
November 11th, 2019
Specific feedback
The final result is looking good. Now use them in a bilingual manner for series of something specific. Simulate its use/uses.
Week 13:
November 18th, 2019
Specific feedback
Make collaterals to feature the bilingual typeface together. The reason for designing 2 languages in the first place was to match the strokes in different languages which do not originally go well together. Combine the two languages together in one piece, and do not separate them because that defeats the purpose of making the typeface available in bilingual language. Also keep in mind to maintain the color consistency.
REFLECTION
Experiences
Week 10: Although it was an e-learning week, we had to carry on with the ideation process for our final project. I struggled for 3 days just trying to think of a good solution to solve. It feels different that I have to start looking for problems out of nowhere to solve.Week 11: With the ideation process done, implementing the idea is the difficult part. This is the part where people often give up on due to the amount of workload which is required to produce quality work. It feels overwhelming as workload starts to stack up.
Week 12: By making sure my objectives are clear, I continued working with the process of the digital lettering modification for the week. It was more tiring than ever to spend so much time on a result that looks minimal, although, having a clear path in mind on what to do made me feel less stress than the ideation process.
Week 13: Tiring day in general, we were all rushing to do our e-portfolio and final project as we were reminded by Mr. Vinod to get all done by the week for an assessment. Despite the fatigue, I felt more relieved to receive great feedback from both the lecturers.
Observation
Week 10: The ideation process requires time to carefully think about. I can see how important a small idea can lead to. Being prepared right in the first step is crucial.Week 11: The implementation process of the idea takes time. I have lots of character to digitize, not only Lao characters but also English because it is essential to have bilingual language for both Laotians and English users.
Week 12: As I continue to digitize and modify the Lao language characters, I gradually deformed the letter script style I intended to create in the first place. This is because I wanted the letters to look symmetrical, which is really not what a calligraphy script looks like.
Week 13: Time was our biggest enemy during this week. Workload keeps increasing from different classes. Final submission deadlines are slowly pushing in.
Findings
Week 10: Through all the draft I go through to find a single typography solution to solve, I keep facing a creative block where I couldn't think of much. In the end, I found out how important it is to relate the problems to my own life. That is the revisiting my memories and identifying problems that I face back then that was not yet solved.Week 11: It's not efficient to work on the brush style of each letter individually because there are too many type characters that has to be done. Use online brushes that are relevant to my work to speed up the process of adding letter textures.
Week 12: After realizing that my letters were starting to lose its characteristics, the first thing I had to do was take a little break from the screen. This helps clear my mind so that I can spot the mistakes and find a solution right away. Staring at your own work for an extensive amount of time only limits what the eyes can perceive at that moment.
Week 13: By understanding that everyone is facing the same situation during this packed week, I feel less pressure overall which helps me work with lesser stress.
FURTHER READING
 |
| How to design a font, an article by Miriam Harris. |
This is a blog written to feature advice from type designers add monotype and font smith for designers Wanting to create a typeface for the first time.
The first step before designing anything is the research period it’s important to identify the style of typeface we want and to know your target audience in which the typeface will be used. To get an idea of the final outcome, the mood board is advised as an important ideation process for the typeface.
Start designing the typeface by sketching as it helps to capture the idea as fast as possible. The sketch is like a prototype for the final outcome. Many designers still prefer the traditional way of using the pencil and a paper or a sketchbook. Others prefer to draw digitally through tablets, and some works directly in font-design software.
 |
| The traditional method of sketching typeface with a pencil and sketchbook. |
Use common prototype words like “Hamburgefonstiv” or “Adhesion” to test the key characteristics, the structure for and which among different letters. When the letters are all ready to be implemented, use software such as Adobe Illustrator and FontLab to process the vectors. Experiment with the letter anatomy such as the kerning, alignment, measurement, leading and ligatures.
Comments
Post a Comment