Typography - Project 2A
Yeo Hui Qi / 0334134 / B' CS
Typography
Project 2A / Font Design
LECTURES
Week 6
We were asked to watch Typo_5_Understanding video in order to gain more insight in understanding letterforms for Project 2a which we were going to be carrying out next week, in Week 7.
When we analyse uppercase letterforms, at first glance they might seem symmetrical but on closer inspection, they aren't. These subtle differences make a huge impact on the look, feel and readability. We also notice that curved strokes of lowercase letterform such as in "s" and "o" must rise above or sink below the median and base line in order to appear to be the same height as the other lowercase letters. Sensitivity to counterform or negative space affects the readability of a type face. We must analyze type in close detail, to understand its form and counterform.
The most powerful dynamic in design is contrast. The difference between light and bold, condensed and extended, small and large, all affect the look and feel of your design. For example, we use contrast when we want to create difference in the hierarchy of information.
Week 7 (Project 2a briefing)
We were taken through the process of designing our own type face. It involved deconstructing and understanding existing type faces and then sketching some of our own and adding our own twist to it. After that we were to show our sketches and ideas. Once approved or chosen 1 type face design, we need to digitize our designs using Adobe Illustrator.
Week 8 (Project 2a feedback and Font Lab demo)
Mr. Vinod gave us feedback on our sketches and digitized work for Project 2a and we were given some time to make amendments and show him our progress for a second round of feedback. Mr Vinod then went through the process of making our glyphs into font in Font Lab. Following the video he has provided, we are supposed to copy paste our glyphs from Illustrator into Font Lab and do kerning for each letter. Then, we can generate our font and use it in Illustrator to make a poster with the words, "I am a type god, obey me!".
INSTRUCTION
Project 2a:
- Choose an existing type face to reference.
- Deconstruct and analyze the chosen type face.
- Sketch our ideas. Minimum 3, maximum 5 designs and show them to the lecturer for feedback.
- Digitize our work.
- Set the x-height, cap height, ascender and descender height in Font Lab.
- Copy and paste our glyphs into Font Lab
- Kern.
- Generate font.
- Install using the ".ttf" file.
- Use font to make a poster.
Here is my analysis:
 |
| Figure 1.1 Deconstruction of Gill Sans "a" |
Analyzation of lowercase "a" in Gill Sans:
There is a slight difference in the width of the top curve and the stem. The curve stroke on top is approximately 94 points and the stem is 99 points. From Figure 1.1, we see the curved stroke top and the bowl of the "a" extends above and below the median and base line respectively. We also notice that the top curve is not the same length and does not align with the bowl of the "a". Noticeably, the part of the bowl that connects to the stem is significantly thinner in width, 79 points to be exact. we also see the tail at the end of the stem curving up and also gets significantly thinner as it curves upward.
Analyzation of lowercase "g" in Gill Sans:
From Figure 1.2, we see that the bowl of the bottom story of the "g" is not quite as symmetrical as we thought. By using 2 perfect circles, we see that one side is bigger than the other and therefore is uneven or asymmetrical. I also noticed that the shoulder of the "g" is ever so slightly shorter compared to the bowl at the bottom. After making measurements, the shoulder is 77 pts, the top circle has a curve stroke of 89 pts, and the bottom story curve stroke is 96 pts. Just by looking at the letter, I have never though that these 3 strokes would be of different widths.
Analyzation of lowercase "p" in Gill Sans:
 |
| Figure 1.2 Deconstruction of Gill Sans "g" |
Analyzation of lowercase "g" in Gill Sans:
From Figure 1.2, we see that the bowl of the bottom story of the "g" is not quite as symmetrical as we thought. By using 2 perfect circles, we see that one side is bigger than the other and therefore is uneven or asymmetrical. I also noticed that the shoulder of the "g" is ever so slightly shorter compared to the bowl at the bottom. After making measurements, the shoulder is 77 pts, the top circle has a curve stroke of 89 pts, and the bottom story curve stroke is 96 pts. Just by looking at the letter, I have never though that these 3 strokes would be of different widths.
 |
| Figure 1.3 Deconstruction of Gill Sans "p" |
Analyzation of lowercase "p" in Gill Sans:
We first take notice of the curve of the "p" where it is noticeably bending towards the bottom, almost like a pregnant belly, and goes below the base line. When trying to use perfect circles it was quite difficult to align them to the inside of the curve. The width of the curve is 101.5 pts which is thicker than its stem which is 99 pts. We can also see the curve of the p actually starts out straight at the top where it connects to the stem and its width is 89 pts. We also notice the end of the curve where it joins to the p is significantly thinner as it curves up.
 |
| Figure 1.1 Analyzation of Gill Sans 14 characters |
I made an analyzation of the Gill Sans ascender height and descender height so that I can get an approximate positioning of certain parts of the letters such as the dot of the "i" and the height of the "t" because both of these are not the same as the ascender height.
For these sketches, I used a grid paper from an old high school exercise book. I followed a consistent x-height of 3 squares, and descender and ascender height of 2 squares. From this image, Mr Vinod suggested going with the second row on the right. He also commented on the inconsistency of the stokes in my "g" for that design and suggested changing it to a single story "g" instead.
I had some trouble with copy pasting the glyphs because it was bigger than the metrics and proportions set in Font Lab. Mr. Vinod advised me to use the scaling tool, it helped a lot and I managed to get all my fonts to the right size.
FEEDBACK
Week 7
REFLECTION
Sketches:
 |
| Figure 1.5 Sketches of 5 designs |
For these sketches, I used a grid paper from an old high school exercise book. I followed a consistent x-height of 3 squares, and descender and ascender height of 2 squares. From this image, Mr Vinod suggested going with the second row on the right. He also commented on the inconsistency of the stokes in my "g" for that design and suggested changing it to a single story "g" instead.
 |
| Figure 1.6 Sketches of the 14 characters |
This time I switched to using graph paper in order to get the consistency I need for my strokes since it provides me more accuracy when sketching. After showing this to Mr. Vinod, he asked me to start my digitization process.
Digitization First Attempt:
 |
| Figure 1.7 Digitized Version (Screenshot) |
 |
| Figure 1.8 Digitized Version (JPEG format) |
After Mr Vinod's feedback, I made changes to my "m", "t", "i", exclamation mark, comma, and full-stop, as seen below (Figure 1.9):
 |
| Figure 1.9 Second Digitized Version (screenshot) |
On week 9, Mr. Vinod gave me more feedback based on the poster that I've done and made some comments on my "b" and "d" and said I should make it the same size as my x-height. I've made the changes accordingly, as seen in Figure 1.10 below.
 |
| Figure 1.10 Final Digitized Version (JPEG format) |
Note: Final submission JPEG and PDF is attached below together with the poster and .ttf link
Font Lab Process:
- Copy paste glyphs into Font Lab after setting the x-height, cap height, ascender height and descender height.
- Do kerning. Advisably, start with 50 on each side and adjust according to each kerning pair.
- Generate font.
- Install.
 |
| Figure 1.11 Font Name in Font Lab |
I decided to name my type face Arcadia because it was squarish and cute, like something you would find in a game. The name is based on the word "arcade" and I added a little twist to it.
 |
| Figure 1.12 Metrics Setting in Font Lab |
 |
| Figure 1.13 Glyphs in Font Lab |
I had some trouble with copy pasting the glyphs because it was bigger than the metrics and proportions set in Font Lab. Mr. Vinod advised me to use the scaling tool, it helped a lot and I managed to get all my fonts to the right size.
 |
| Figure 1.14 Kerning in Font Lab |
For the kerning, I stuck with 50 on each side of the letters. Since my font was boxy, all the kerning pairs looked fine with the same kerning width. I had no trouble with this part of the process.
 |
| Figure 1.15 Installation File |
After generating the file in Font Lab, my type face was ready to install and used for the next part of Project 2a, which is making the poster.
Final Font Design:
|
| Figure 1.16 Final Digitized Version (JPEG format) |
Font Design PDF version:
Figure 1.17 Final Digitized Version (PDF format)
Link for Arcadia Font Download:
Final Poster:
 |
| Figure 1.18 Final Poster (JPEG format) |
Final Poster (PDF Version):
Figure 1.19 Final Poster (PDF format)
FEEDBACK
Week 7
Specific feedback: (through Facebook messenger)
- Regarding my square-ish font design: "That seems to be consistent and practical with the exception of the "g", which does not have strokes that are consistent in weight."
- "I would suggest referencing other letterforms other than Gill Sans that are more similar to your typeface to see solutions for 'g'. Perhaps you could use a single story 'g' as opposed to a double story 'g'."
General Feedback:
- Exclamation mark does not stop at the cap height, it reaches the ascender height.
- Size of full stop is usually bigger than your usual stroke size.
- Only embed PDFs when submitting final work.
Specific Feedback
- "m" make the negative space between the stem and top bridge more noticeable.
- Make the crossbar of "t" shorter
- For "!", make the space between the stroke and the dot bigger and the size of the dot must also be made bigger
- Make the tail of the "," longer
- Make the size of my full-stop bigger
- Increase the distance of the dot from the stem of the "i"
Specific Feedback
- Make the bowl of the "b" and "d" extended to the x-height
- For the poster, align "obey me!" to the left of the page and make the font size bigger.
REFLECTION
Week 7
FURTHER READING
- Experiences
- It was a refreshing week as I enjoyed the class. Since there was no assessment of our work, I felt more at ease.
- Observations
- When doing my analyzation for Gill Sans, I faced some problems when analyzing rounded or curved strokes. I was advised to look at other student's blog to see how they did it.
- Findings
- Sometimes, less is more i guess. Mr. Vinod chose a simple yet interesting design out of the 5 of my designs. Even though I found it to be too simple, it looked quite interesting once I started digitizing it.
Week 8
- Experiences
- This week, Mr. Vinod asked everyone to turn on their webcams and it was great to see everyone's faces.
- Feedback for this week was helpful to me and I found the lesson very interesting.
- Observations
- Seeing everyone's work made me feel more at ease, because even though mine was fairly simple it wasn't like anything anyone else did and made me realize that everyone's designs are really quite unique.
- Findings
- Making my own font was a fairly enjoyable experience, it was fun and rewarding.
FURTHER READING
Week 7
Excerpt from: Typography Essentials: 100 Design Principles for Working with Type
Author: Ina Saltz
Topic: Being Expressive
A strong typographic personality can be a very effective showstopper, as over the top as a designer chooses to make it. Any and all effects can be used to express the spirit and meaning of the text, including hand-drawn lettering, modified typography, and distorted or manipulated letterforms, as longas they are created in service of the content or to amplify the meaning of the text. Like the handmade solution on the preceding pages, expressive typography is a display-only solution, because text type or body copy must be legible. Legibility is not as great a concern for expressive typography; however depending on the solution, it most likely cannot be completely illegible, unless it is intended to stand solely as an image.
Week 8
Excerpt from: Typography Essentials: 100 Design Principles for Working with Type
Author: Ina Saltz
Topic: Invisible Typography, Highly Evident Typography
Sometimes the best way to emphasize the content visually us with "quite" typography. At other times, the nature of the content calls for a low-key-treatment. "Softness" can be accomplished, in a variety of ways: choosing a typeface with a thin stroke width, or choosing to keep contrast to a minimum. Using a small point size is another method for "invisible" typography, but we have to keep in mind the legibility may be impaired if these techniques are not properly executed.
On the other hand, highly evident typography, also known as high-impact type is like high-impact aerobics: it gets your heart rate pumping, and fast. Type can be aggressive, loud and even harsh; it screams out for attention. One of the attributes of highly evident typography is its ability to create balance when paired with a strong; together, they send a powerful message.
Comments
Post a Comment