Typography - Project 2A
TYPOGRAPHY - PROJECT 2A
29/05/20 - 12/06/20/ Week 7 - Week 9
Ibrahim Fazal Ahmad / 0337423
Typography / Bachelor of Design (Hons) in Creative Media / Taylors University
Project 2A - Font Design
LECTURES
Week 7: Typography / Different Medium.
Today we're going to look at both print and screen mediums. In the past typography was much more unforgiving as you can't fix things as easily as you can now. Once it was edited, typeset and printer it was done and no changes could be made. Type setting is no longer controlled only by the designer, the level of experimentation is much more limited as you are limited to a browser or app interface. Typography is affected by many things such as the operating systems, system fonts, the device and the screen itself.
Type for Print: The designers responsibility to make sure it is nice to read and flows well. Type was designed to be read from print before it had made its way to screens. A few good typefaces for print is Caslon, Garamond and Baskerville due to the ease of reading at a small size and also it's simplicity and design. They are also very versatile and easy to read.
Type for Screen: Optimised for the screen, changes are made to typefaces such as taller x-heights, reduced stroke contrast and wider letterforms. These changes are made to increase readability on the screen. There is also more open spacing especially for typefaces that are intended to be small to improve the character recognition and overall readability in things like e-books, websites and our phones.
There are also websafe fonts. Meaning they will show up unchanged on any operating system. If a designer were to use a different typeface, we wouldn't notice at all. We would just think the typeface looks really weird and out of place since it wasn't meant to be like that. Websafe fonts are fonts that overlap between Mac and Google so web designers don't have to worry about their fonts changing.
Today we're going to look at both print and screen mediums. In the past typography was much more unforgiving as you can't fix things as easily as you can now. Once it was edited, typeset and printer it was done and no changes could be made. Type setting is no longer controlled only by the designer, the level of experimentation is much more limited as you are limited to a browser or app interface. Typography is affected by many things such as the operating systems, system fonts, the device and the screen itself.
Type for Print: The designers responsibility to make sure it is nice to read and flows well. Type was designed to be read from print before it had made its way to screens. A few good typefaces for print is Caslon, Garamond and Baskerville due to the ease of reading at a small size and also it's simplicity and design. They are also very versatile and easy to read.
Type for Screen: Optimised for the screen, changes are made to typefaces such as taller x-heights, reduced stroke contrast and wider letterforms. These changes are made to increase readability on the screen. There is also more open spacing especially for typefaces that are intended to be small to improve the character recognition and overall readability in things like e-books, websites and our phones.
There are also websafe fonts. Meaning they will show up unchanged on any operating system. If a designer were to use a different typeface, we wouldn't notice at all. We would just think the typeface looks really weird and out of place since it wasn't meant to be like that. Websafe fonts are fonts that overlap between Mac and Google so web designers don't have to worry about their fonts changing.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1SRHUC7ud9UmkeRZizf0CXgA7CxA376bo/preview" width="640" height="480"></iframe>
TASKS:
Project 2
For the second project, we will be having to make our own type fact of the following letters and symbols in the brackets (a i m e p y t g d o b ! , .). Firstly we had to choose a typeface we would like to draw inspiration from and I ended up choosing ITC New Baskerville std in Roman. I really liked the serif typeface it feels classy and impactful. Our first exercise was to analyse the letters "O, H and D" in either lowercase or uppercase. It was because typeface designers begin with the letter O and H. After which they use them to create the letter D.
Figure 1: O analysis
Figure 1.01: h analysis
Figure 1.02: d analysis
After doing this analysis, we had to come up with a few designs for our font. I came up with the designs below:
Figure 1.03:
The designs were all based on ITC New Baskerville std, I changed them slightly in different ways to experiment with the outcome of the design. After sending the 6 designs to Mr Vinod, I was told to continue on to digitise design number 4. However, there a little thing I missed being the ascender for the letter "h" and "d" are supposed to be facing the same way as they are in most serif typefaces.
I began doing my sketches for the type face before I digitised it. I struggled particularly doing the letter "g" because my type face is very boxy and I was a little confused on how to go about making a serif g in my style.
Figure 1.04: Typeface sketches
After doing my sketches I began the process of doing it in illustrator. Firstly I began with the letter o. I started out with a simple square and rounded the corners because I'm going for a block like typeface. I also added the ascender and descender lines along with the x-height.
Figure 1.05: Making the letter o
After doing the letter "o" I began on the letter "d". I took the letter and use the shape and line tool to add the serif and ascender. I also used the shape builder tool to remove the unneeded part of the o.
Figure 1.06: Making the letter d
I continue making the rest of the letters using the o and d as reference, here is the first version of the design before any critiques:
Figure 1.07: Version 1 of typeface exercise.
Figure 1.08: After the feedback was taken and changes were made.
After the type was done, I follow the tutorial given by Mr Vinod on YouTube on how to use FontLab. First I had to combined the letterforms into one using the pathfinder tool and uniting them. So that we can copy the letter and paste it into FontLab.
Figure 1.09: Letter form united.
Firstly I had to key in the details into font lab, the name of the font. I chose Zerif, because it's a serif font and I have a Z in my name so I thought it'd be cool honestly. I then added the details, the x height, cap height, ascender/descender line.
Figure 1.1: Font name
Figure 1.11: Font dimensions
After that I pasted the letter "a" into FontLab, I just made sure it was following the x height, baseline, ascender/descender lines for each individual letter.
Figure 1.12: Letter "a" in FontLab
I continued to do this for each letter that we had made for the project. Following the lines that were made in the dimensions panel.
Figure 1.13 All letters keyed in.
Next we had to go to Window > New Metrics Window and then change the tracking of each letter. I changed the spacing on the left and right of each letter to 50 like Mr Vinod said. We also had to do individual spacing changes between certain letters if they were too far apart or close together.
Figure 1.14: Letters after spacing was done
Figure 1.15: Letter forms being individually spaced.
Figure: 1.16: Poster before critiques and improvement.
These specific letters had a few issues with the contrast. I observed the ITC New Baskerville more closely and other serif fonts to realise that the bowl of the a and e are typically very thin. Especially in the letter e, there is typically high contrast between the top of the bowl and the bottom. For the y there is one stroke that is thinner than the other, I just made it slightly thinner as it looked awkward when it was too thin.
Figure 1.17: a, before and after
Figure 1.18: e, before and after
Figure 1.19: before and after
Figure 1.2: Final letterforms PNG
Figure 1.21: Final letterforms PDF
Figure 1.22: Final poster PNG
Final 1.23 :Final poster PDF
FEEDBACK
Week 7: -
Week 8: Mr Vinod said the typeface is very interesting and it was hard to balance the levels of curves to the hard corners. I assume it means it was good. I was told to make some small adjustments. Make the top serif of the "d" and "b" flat instead of a sharp point. Along with the top the letter "i". Then I was told to give the letters "m" and "b" the same dip in the shoulder the letter "p" has. Next I was told told to make the long tail of the letter "y" thinner and lastly make the loop of the "g" smaller.
Week 9: The design of the poster is good, the letters (a, e and y) were lacking contrast. It made the typeface look a little odd when you examined it closely but looked okay from far. Just change those letters and it should be good.
Week 9: The design of the poster is good, the letters (a, e and y) were lacking contrast. It made the typeface look a little odd when you examined it closely but looked okay from far. Just change those letters and it should be good.
REFLECTIONS:
Week 8: This exercise was an interesting one like the rest. I learned a lot about the nuances and details in a single typeface. There are so many minuscule details in a typeface that almost nobody would notice unless they were to do a detail analysis. The overall experience so far was not very hard since we had to learn to use illustration in Illustration & Visual Narrative, because of that I am a lot more familiar in using it so making the letters wasn't the most difficult thing in the world. Keeping up with the tiny details however was extremely tiring. One observation I made while studying my reference text was the dots and fulls stop in the font ITC New Baskerville are not perfect circles. They're very slightly imperfect, yet most people wouldn't even notice it. I found that touch very interesting, most likely to give it a more organic and natural feel compared to a perfect circle. A finding I made was that there are so many different typefaces in the world, it is almost impossible to think of something completely unheard of or original, it's probably been done before. I noticed that typography in general is in the details. Make everything look near perfect and the amount of skill required is extremely admirable.
Week 9: Mr Vinod was very correct when he said that after making your first font and typing it out you get this huge feeling of "oh my god! i did it!" it felt so cool and I was so excited when it was actually working and I could type it in photoshop. It wasn't very hard to make in FontLab the interface is easy to follow. Making the poster was interesting, considering we weren't allowed to use any graphical elements as usual. I like how mine turned out to be honest, it was a simple idea which was that since God is considered better than all of us and a higher being, to make the word itself higher than the rest. The experience was very tame in comparison to the rest of the work we've been doing. It was fun coming up with ideas. One observation I made is that the ascenders and descenders of typefaces are typically a lot shorter than I expected, unlike mine in which it's very tall. One finding was that serifs are very hard to design, keep consistent and look like they're apart of one family. A single letter can ruin it all.
Week 9: Mr Vinod was very correct when he said that after making your first font and typing it out you get this huge feeling of "oh my god! i did it!" it felt so cool and I was so excited when it was actually working and I could type it in photoshop. It wasn't very hard to make in FontLab the interface is easy to follow. Making the poster was interesting, considering we weren't allowed to use any graphical elements as usual. I like how mine turned out to be honest, it was a simple idea which was that since God is considered better than all of us and a higher being, to make the word itself higher than the rest. The experience was very tame in comparison to the rest of the work we've been doing. It was fun coming up with ideas. One observation I made is that the ascenders and descenders of typefaces are typically a lot shorter than I expected, unlike mine in which it's very tall. One finding was that serifs are very hard to design, keep consistent and look like they're apart of one family. A single letter can ruin it all.
FURTHER READING:
Vignelli Canon on Design Pg 78:
Figure 1.24: Vignelli Canon on Design
Colour in typography can often seem limited. As black and white are used mostly, and if colour is to be used it's usually red, yellow or blue. But what matters more is whether the colour is being used in the appropriate time and message. Colour is used to convey a specific message mostly and express a specific mood. There are times where black will appropriate and other times where a pastel pink may be appropriate. It all depends on what you're designing for and your audience at the end of the day.
Comments
Post a Comment