Typography Project 2 - Font Design
25/10/2017-08/11/2017 (Week 8 - Week 10)
Tiffany Kezia Joe [0333043]
Typography and Hypertextuality
Project 2: Font Design
Briefing/Lecture 8 - Week 8 (25/10/2017)
Lecture/Tutorial 10 - Week 10 (08/11/2017)
Feedback
Week 9
General Feedback: This week, Mr. Vinod checked our e-portfolio and reminded us the requirements; the pages of storybook as spread with 0.5 border, embedded pdf, the thumbnail, the animated storybook video, and also the picture of hardcopy. Regarding project 2, we need to digitize our fonts before next week.
Specific feedback: Mr. Vinod said that my e-portfolio could have been better and I should add border on the pages, write the title's section so it could be clearer, redo the pdf since mine was done in pages instead of spreads, and I also need to upload the thumbnail and upload the book for further reading. While I was tracing my letters on Illustrator, Mr. Shamsul saw my work and mentioned that the closed counter on my 'b' needs to be smoother.
Week 10
General Feedback: Before proceeding to FontLab, we need to make sure that our letters already changed to shape and there is no overlapping. We also required to print out our font in A4 size for next week.
Specific Feedback: I changed my font design and decided to start over. Initially, my letters were constructed by shape instead of stroke. Then Mr. Shamsul came to my table, he said that I need to construct it with stroke and adjustments could be made later when I switched the strokes into outline stroke. After I've changed it to stroke, he looked at my work again and told me to reduce the thickness a bit.
Week 11
General Feedback: Project 2 needs to be submitted by today or it will be considered late submission. Before class ended, Mr. Vinod briefly explained about our last project which is making poster out of our own font. We could compose the poster with quotes or just showcase our font and when we make the poster, we should not think about the animation first.
Specific Feedback: Mr. Vinod told me to finish my work quickly as today is the submission day. He also told me that the numbers looked inconsistent so I need to fix that. While I was adjusting my letters on FontLab, Mr. Shamsul saw my work and mentioned that some of the letterspacing already nice in the sentence "the quick brown fox.." but when he changed it to another sentence, it turns out that letterspacing looked messy and I need to test on every sentence to make sure all of the spacing between the letter are even.
Tiffany Kezia Joe [0333043]
Typography and Hypertextuality
Project 2: Font Design
-
Lectures
Briefing/Lecture 8 - Week 8 (25/10/2017)
No lecture, Mr. Vinod & Mr. Shamsul was checking our previous project's animation, then Mr. Vinod instructed us to start designing our fonts.
Lecture/Tutorial 9 - Week 9 (01/11/2017)
No lecture, Mr. Vinod & Mr. Shamsul walked around the class and checked on our digitized fonts.
Lecture/Tutorial 10 - Week 10 (08/11/2017)
Mr. Vinod gave us lecture about letter spacing and kerning. Most of the time, letter spacing often mistaken as kerning and vice versa. Letter spacing is the automatic adjustment between letters, meanwhile kerning is when you add space between the letters. When you do both of letter spacing and kerning, it is called tracking. There are three types of tracking; normal tracking, loose tracking, and tight tracking.
When we read, it is easier to read in lowercase instead of uppercase. Because we recognize the counter form of the letters. Uppercase are made to be stand out, therefore space must be added between the letters in order to be readable.
Besides of tracking, letter spacing, etc. Our lecturer also explained about formatting letters. There are few types;
Instructions
The Brief
Font Design.
Duration of Assignment
2 Weeks (Briefing on week 8)
Deadline
Week 10
Description
You will be expected to design a font of 27 western alphabets along with punctuation marks. To begin with choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analysing its anatomical parts.
Identify a Form (Basic shapes i.e., Square, Circle, Triangle) this shall be the starting point of your designs. You may also choose shapes that you see around you or that you like (i.e. an arrow, a face, a building, etc). One of these shapes will form the basis of your font design. Your font can be designed to also fulfil a specific need.
Start with rough sketches and upon approval begin digitization of the drawings—software for digitization shall be determined in class. Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use.
Requirements The student must utilise the accumulated knowledge from the exercises, lectures and from their own reading (library books and online sources) to guide them and inform them in their decisions.
The student must document the process (sketches, trial and errors) in their eporfolio and hardcopy portfolio. The student will be expected to submit the final mock-up in the hardcopy portfolio and the softcopy PDF (and or JPEG) uploaded or embedded unto the eportfolio. Create a separate folder in your Google Drive and store all files, artefacts, project submissions, etc. here.
Ensure all items are logically and chronologically ordered, labelled and dated.
Submission
Objectives
Work Process
Requirements :
- Sketches on A4 Green Graph Papers
- Adobe Illustrator
- Font Lab Studio
Initially, I wanted to create serif font and taking up Garamond as my guide. I was inspired by the font below.
As I started to digitize my fonts, I faced several problems. Either it was because the letters consistency or probably I was not familiar with designing font. Then I made up my mind and tried to start over again, this time with sans-serif.
My intention was to make a rounded font, then I came across Korean characters (hangeul/한글) which consisted with basic shapes; circle and straight line. I dissected the elements and reassembled it. After finishing my sketches, I proceed to digitizing my letters. Each letters should be made in Adobe Illustrator then it will be transferred to FontLab.
The letters; uppercase, lowercase, and punctuation will be made in with the size 1000pt x 1000pt. The measurement should be in points since we are going to be working with fonts. The x-height should be set to 500pt. Generally, the ascender and descender would be half the size of the x-height depending on the font design.
 |
| Image 1.1 Loose tracking (top), normal tracking (middle), tight tracking (bottom) |
 |
| Image 1.2 Tracking, Leading, and Kerning |
Besides of tracking, letter spacing, etc. Our lecturer also explained about formatting letters. There are few types;
- Flush left : Closely mirrors the asymmetrical experience of handwriting. This type has even grey value since each spaces between words are consistent.
- Centered alignment : Creates an even symmetry on the text, making it quite difficult to read. Therefore this alignment must be used sparingly, appears quite often on invitation.
- Flush right : Places emphasis on left since each line starts at different point, making the text seems ragging.
- Justified : Makes the text appear symmetrical by expanding or reducing the spaces which could create rivers/gaps between the letters. Ideally, there must be 55-60 characters in each line.
 |
| Image 1.3 Left, Center, Right, and Justified alignment |
Text is the vital element in design. When you design something, consider that your design will have some impact on someone.
Instructions
PROJECT 2 (20%)
The Brief
Font Design.
Duration of Assignment
2 Weeks (Briefing on week 8)
Deadline
Week 10
Description
You will be expected to design a font of 27 western alphabets along with punctuation marks. To begin with choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analysing its anatomical parts.
Identify a Form (Basic shapes i.e., Square, Circle, Triangle) this shall be the starting point of your designs. You may also choose shapes that you see around you or that you like (i.e. an arrow, a face, a building, etc). One of these shapes will form the basis of your font design. Your font can be designed to also fulfil a specific need.
Start with rough sketches and upon approval begin digitization of the drawings—software for digitization shall be determined in class. Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use.
Requirements The student must utilise the accumulated knowledge from the exercises, lectures and from their own reading (library books and online sources) to guide them and inform them in their decisions.
The student must document the process (sketches, trial and errors) in their eporfolio and hardcopy portfolio. The student will be expected to submit the final mock-up in the hardcopy portfolio and the softcopy PDF (and or JPEG) uploaded or embedded unto the eportfolio. Create a separate folder in your Google Drive and store all files, artefacts, project submissions, etc. here.
Ensure all items are logically and chronologically ordered, labelled and dated.
Submission
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the A4 Clear Sheet hardcopy portfolio. The works labelled and dated.
- All gathered information (failures, successes, epiphanies, sketches, visual research, printouts, websites, images, charts, etc.) documented logically and chronologically in the eportfolio for the duration of the project in one post.
- Images of all the designed alphabets or glyphs on one A3 printed and uploaded.
- All the glyphs transferred to the determined software, formatted for the purpose of generation
- To develop students ability to construct a readable and legible font.
- To develop students ability to design a font with consistent characteristics.
- To allow students to experience the various phases of font design.
Work Process
- Sketches on A4 Green Graph Papers
- Adobe Illustrator
- Font Lab Studio
Initially, I wanted to create serif font and taking up Garamond as my guide. I was inspired by the font below.
 |
| Image 2.1 Reference |
 |
| Image 2.2 First sketch |
As I started to digitize my fonts, I faced several problems. Either it was because the letters consistency or probably I was not familiar with designing font. Then I made up my mind and tried to start over again, this time with sans-serif.
 |
| Image 2.3 Second sketch |
My intention was to make a rounded font, then I came across Korean characters (hangeul/한글) which consisted with basic shapes; circle and straight line. I dissected the elements and reassembled it. After finishing my sketches, I proceed to digitizing my letters. Each letters should be made in Adobe Illustrator then it will be transferred to FontLab.
 |
| Image 2.4 Presets |
The letters; uppercase, lowercase, and punctuation will be made in with the size 1000pt x 1000pt. The measurement should be in points since we are going to be working with fonts. The x-height should be set to 500pt. Generally, the ascender and descender would be half the size of the x-height depending on the font design.
First, we need to construct the letters by using strokes only. After we've done with the strokes, we could convert it into outline stroke which can be adjusted with more details and finally, the outcome would be in fill. We need to ensure that the letters are one object, with no overlapping paths before we move on to FontLab.
 |
| Image 2.5 Constructing the letters with strokes |
 |
| Image 2.6 The outline of the letters |
 |
| Image 2.7 Generating the font in FontLab |
 |
| Image 2.8 The finished letterforms |
 |
| Image 2.9 Generated font |
Feedback
Week 9
General Feedback: This week, Mr. Vinod checked our e-portfolio and reminded us the requirements; the pages of storybook as spread with 0.5 border, embedded pdf, the thumbnail, the animated storybook video, and also the picture of hardcopy. Regarding project 2, we need to digitize our fonts before next week.
Specific feedback: Mr. Vinod said that my e-portfolio could have been better and I should add border on the pages, write the title's section so it could be clearer, redo the pdf since mine was done in pages instead of spreads, and I also need to upload the thumbnail and upload the book for further reading. While I was tracing my letters on Illustrator, Mr. Shamsul saw my work and mentioned that the closed counter on my 'b' needs to be smoother.
Week 10
General Feedback: Before proceeding to FontLab, we need to make sure that our letters already changed to shape and there is no overlapping. We also required to print out our font in A4 size for next week.
Specific Feedback: I changed my font design and decided to start over. Initially, my letters were constructed by shape instead of stroke. Then Mr. Shamsul came to my table, he said that I need to construct it with stroke and adjustments could be made later when I switched the strokes into outline stroke. After I've changed it to stroke, he looked at my work again and told me to reduce the thickness a bit.
Week 11
General Feedback: Project 2 needs to be submitted by today or it will be considered late submission. Before class ended, Mr. Vinod briefly explained about our last project which is making poster out of our own font. We could compose the poster with quotes or just showcase our font and when we make the poster, we should not think about the animation first.
Specific Feedback: Mr. Vinod told me to finish my work quickly as today is the submission day. He also told me that the numbers looked inconsistent so I need to fix that. While I was adjusting my letters on FontLab, Mr. Shamsul saw my work and mentioned that some of the letterspacing already nice in the sentence "the quick brown fox.." but when he changed it to another sentence, it turns out that letterspacing looked messy and I need to test on every sentence to make sure all of the spacing between the letter are even.
Reflection
Experience
Week 9 : It was quite exciting to design our own font.
Week 10 : Digitizing serif font is really challenging, therefore I decided to make another design.
Week 11: Transferring and adjusting letters one by one needs a lot of patience
Observation
Week 9 : I actually had a lot of idea regarding what kind of fonts I wanted.
Week 10 : I faced some difficulties in maintaining the consistency.
Week 11 : I needed some time to adapt with new software. But when I have become comfortable with the software, I could work quickly.
Findings
Week 9 : The fun part of designing a font actually only in the sketching process. Because when you digitize your font, you need to be meticulous and pay attention to the details
Week 10 : It is better to start off with something easy to learn, rather doing it the difficult way and end up not progressing.
Week 11 : I need to sort out my ideas first and manage my time wisely.
Further Reading
Stop Stealing Sheep & find out how type works by Erik Spiekermann and E.M Ginger
This book is mentioned in the reference of typography module and it must be a good book. While I was reading this, I realized that this book included several visual explanation in almost every single page.
There were few things that caught my attention in this book. First, not every typeface will suit certain words. Second, different culture and background in the country will affect the choice of type.
To sum up, this is a quite good book to read, it clearly explains every single thing with visual.
Stop Stealing Sheep & find out how type works by Erik Spiekermann and E.M Ginger
 |
| Image 3.1 Cover page |
There were few things that caught my attention in this book. First, not every typeface will suit certain words. Second, different culture and background in the country will affect the choice of type.
 |
| Image 3.2 Trying out suitable typeface that clearly explain "Doubt" |
 |
| Image 3.3 Different newspapers headlines in several countries |
To sum up, this is a quite good book to read, it clearly explains every single thing with visual.
Comments
Post a Comment