T&H Week 9 - Week 10 Project 2 Font Design
30/5/17 - 6/6/17, Week 9 - Week 10
Kamal Afiq [0330643]
Typography and Hypertextuality
Project 2 Font Design
Week 10
We were not given a theoretical lecture this week. Instead Mr. Vinod gave us a lecture/demonstration on how to use FontLab Studio. He talked us through how to setup the font parameters; e.g. Ascender and Cap height. He also taught us how to transfer our glyphs from Illustrator to Fontlab, and how to carry out letterspacing and kerning on our font. He also taught us how to generate the font for 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
The first step to designing my font was to figure out what kind of font I wanted to make; modern, classical, vintage, Gothic, etc. In the past, I happened to chance upon a book called the 'Tigerfibel', a whose title used a font I found visually appealing and striking.
The first step in recreating this font is to closely study all the pre-existing examples of this font, so essentially, all of the Tigerfibel's headings and titles. I then have to study the style of these letterforms and try to recreate them digitally. Before that however I'll have to start coming up with some sketches for all the letters. The problem is, I have to make 27 letters, in both uppercase and lowercase. Because I can't find all the letters in every case within the book, I'll have to create my own letters while mimicking the style of the ones already available.
I drew out all the letters, keeping in mind that they need to have the same style throughout all the various letterforms. After close analysis, I discerned that the overwhelming majority of the letters consisted of basic shapes such as a circle and a broad stroke, both of the same thickness. I then proceeded to draw out the remaining letters trying to keep in mind their fundamental shapes. After I had done so, I proceeded to begin digitization of the letters in Adobe Illustrator.
I initially set up a 500 by 500 pixel document with 96 artboards. I configured the grid in Illustrator so that there would be a grid line every 50 pixels. I then drew out the fundamental shapes (the strokes and circles) outside the artboards, turned on snap to grid, and began mixing and matching the shapes to create the various letterforms. My x-height was 500 pixels while my descender and ascender heights were both 300 pixels. For some letters that had shapes that didn't conform to my fundamental shapes, I used the pen tool to manually draw them out. An example is the curve in the letters 'm' and the number '2'. I took a week to digitize all the letters, which I then proceeded to show Mr. Vinod.
After feedback from him, I was told that I had to redo the artboards and set their measurements to points, not pixels. He also said that I had to ensure when scaling the letters, that their x-height was 500 points. Luckily for me all I had to do was create a separate document with the new specifications and scale up all the letterforms by 200%.
After approval on the design of the letterforms, I began moving all the glyphs to FontLab. I setup the font settings' variables such as x-height and ascender height to match my font, and started transferring all the individual fonts to the program for generation.
After having moved all the glyphs individually through Fontlab, I began to carry out editing the letterspacing and kerning on my font. My display font looks best when there is very tight tracking, so I ensured that there wasn't much space between each letter as the counterforms of my glyphs are quite small.
After repeated review and feedback, I made a number of changes to the letterforms so that they would better follow type design convention. Certain changes suggested by Mr. Vinod I specifically disagreed with, as I wanted to keep the design of the letters as close as possible to the original source material. One of these changes he suggested was extending the bowls of letters like 'a' or 'b' beyond the baseline and x-heights to further emphasize their optical appearance. It is here that I willingly chose to not follow convention.
Kamal Afiq [0330643]
Typography and Hypertextuality
Project 2 Font Design
Lecture Notes
Week 9
We didn't have a traditional lecture this week. In class we focused our efforts on further developing our fonts; digitization, fixing errors, etc. We reviewed our progress and gave us feedback on the work we had completed so far.
We were not given a theoretical lecture this week. Instead Mr. Vinod gave us a lecture/demonstration on how to use FontLab Studio. He talked us through how to setup the font parameters; e.g. Ascender and Cap height. He also taught us how to transfer our glyphs from Illustrator to Fontlab, and how to carry out letterspacing and kerning on our font. He also taught us how to generate the font for use.
Instructions
Project 2: Font Design
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.
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 Processes
 |
| The front cover of the Tigerfibel. Take not of the font style. |
The first step in recreating this font is to closely study all the pre-existing examples of this font, so essentially, all of the Tigerfibel's headings and titles. I then have to study the style of these letterforms and try to recreate them digitally. Before that however I'll have to start coming up with some sketches for all the letters. The problem is, I have to make 27 letters, in both uppercase and lowercase. Because I can't find all the letters in every case within the book, I'll have to create my own letters while mimicking the style of the ones already available.
 |
| The drawn out letterforms. |
I drew out all the letters, keeping in mind that they need to have the same style throughout all the various letterforms. After close analysis, I discerned that the overwhelming majority of the letters consisted of basic shapes such as a circle and a broad stroke, both of the same thickness. I then proceeded to draw out the remaining letters trying to keep in mind their fundamental shapes. After I had done so, I proceeded to begin digitization of the letters in Adobe Illustrator.
 |
| The original artboard for the letters. |
I initially set up a 500 by 500 pixel document with 96 artboards. I configured the grid in Illustrator so that there would be a grid line every 50 pixels. I then drew out the fundamental shapes (the strokes and circles) outside the artboards, turned on snap to grid, and began mixing and matching the shapes to create the various letterforms. My x-height was 500 pixels while my descender and ascender heights were both 300 pixels. For some letters that had shapes that didn't conform to my fundamental shapes, I used the pen tool to manually draw them out. An example is the curve in the letters 'm' and the number '2'. I took a week to digitize all the letters, which I then proceeded to show Mr. Vinod.
 |
| The digitized letterforms. I kept the construction shapes and lines so that I could make adjustments later following feedback. |
After approval on the design of the letterforms, I began moving all the glyphs to FontLab. I setup the font settings' variables such as x-height and ascender height to match my font, and started transferring all the individual fonts to the program for generation.
After having moved all the glyphs individually through Fontlab, I began to carry out editing the letterspacing and kerning on my font. My display font looks best when there is very tight tracking, so I ensured that there wasn't much space between each letter as the counterforms of my glyphs are quite small.
 |
| All the glyphs transferred to FontLab. |
Final Submissions
 |
| All the finished letterforms. |
 |
| Font design submission, preview of the OTF/TTF is open in windows. |
Feedback
Project 2: Font Design
Mr. Vinod said that I jumped the gun a bit, because my initial digitization document was measured in pixels. He told me to create a new document for my digitized letterforms, and to ensure the measurement units were in points. He also told me to ensure my x-height was 500 points. I had to scale all the letters so that the x-height was 500 points. Furthermore he added that I should make certain letterforms in the alphabet thicker or thinner so as to create a uniform appearance throughout. For now I'll have to keep refining my font and ensure they meet technical conventions.
After repeated review and feedback, I made a number of changes to the letterforms so that they would better follow type design convention. Certain changes suggested by Mr. Vinod I specifically disagreed with, as I wanted to keep the design of the letters as close as possible to the original source material. One of these changes he suggested was extending the bowls of letters like 'a' or 'b' beyond the baseline and x-heights to further emphasize their optical appearance. It is here that I willingly chose to not follow convention.
Reflections
Project 2: Font Design (Week 9- Week 10) reflection
It's around these couple weeks that we stopped having theoretical lecturers in class. But replacing that was a wealth of hands-on knowledge that we gained from working on our second project. This is the first time I've had a project that revolved exclusively around font design, and it's really been a fascinating experience going through the process.
The research I did for my font design helped me understand how font design conventions have changed as time passed, because I often did research on older fonts produced in the early 20th century. The struggles of actually creating the letterforms, adjusting and tweaking them to try to meet modern day conventions has also thought me a lot about how design standards for fonts have changed the past 70 years or so. My font took heavy inspiration from a display font made in the 1930s, and when I showed it to my lecturers, we had quite a clash of opinions pertaining to what was considered acceptable for font designs. I even knowingly ignored some modern day conventions because I really wanted to give my font its own if unconventional character.
The final process of having everything compiled together, having the letterspacing done and generating the font makes me appreciate the entire process of creating a font even more, as there's a significant amount of work that goes behind crafting these individual letters and shapes that we take for granted everyday.
The research I did for my font design helped me understand how font design conventions have changed as time passed, because I often did research on older fonts produced in the early 20th century. The struggles of actually creating the letterforms, adjusting and tweaking them to try to meet modern day conventions has also thought me a lot about how design standards for fonts have changed the past 70 years or so. My font took heavy inspiration from a display font made in the 1930s, and when I showed it to my lecturers, we had quite a clash of opinions pertaining to what was considered acceptable for font designs. I even knowingly ignored some modern day conventions because I really wanted to give my font its own if unconventional character.
The final process of having everything compiled together, having the letterspacing done and generating the font makes me appreciate the entire process of creating a font even more, as there's a significant amount of work that goes behind crafting these individual letters and shapes that we take for granted everyday.
Further Reading
Tigerfibel
The Tigerfibel is a training manual for driving a tank. In WWII, the German army wanted a way to teach and train their crewmen to operate one of the most fearsome tanks in the war, the Tiger tank without boring them, so they created an instruction manual that was both fun to read and at the same time very informative. They used humor, motto's, lullabies, lyrics, tricks, drawings of girls and other devices to make the task of learning to drive a tank much more enjoyable. The manual was such a success that the German army commissioned another manual for a separate tank.
I found the style of the font used for the heading and titles within the book very appealing and stylish. Most letterforms used only two types of shapes in their composition, a stroke and a circle. Because the letterforms have very dominant positive spaces, they appear quite striking on print. At the same time, the curvature of their forms makes the text look relaxed and somewhat fun-looking.
I've then decided that the font I will create is going to be a very close reproduction of this very font, as I was unable to find anywhere online or in the Adobe Font folio another typeface that matches this font's particular style.
I've then decided that the font I will create is going to be a very close reproduction of this very font, as I was unable to find anywhere online or in the Adobe Font folio another typeface that matches this font's particular style.
References & Bibliography
- Alan Hamby. 2003. Tiger I Information Center. [ONLINE] Available at: http://www.alanhamby.com/tigerfibel.shtml. [Accessed 20 June 2017].
Very Informative post.
ReplyDeleteVanavil Avvaiyar tamil font download
Latha tamil font free download
Excellent Information.
ReplyDeleteHindi fonts download
Stylish Hindi fonts download
Hindi calligraphy fonts download
3d Hindi fonts free download