PROJECT 2
TYPOGRAPHY - PROJECT 2
Farissa Eryna Sham (0336814)
Project 2 - Font Design
9/10/19 - 23/10/19 (Week 7-9)
LECTURE NOTES
Week 7
(09/10/19)
Lecture 7: For this week's lecture, we learned the specific parts of letterforms. Knowing a letterform’s component parts make it much easier to identify specific typefaces.
Baseline is the imaginary line the visual base of the letterforms. Median is the imaginary line defining the x-height of letterforms. X-height is the height in any typeface of the lowercase ‘x’.
Fig 1.1 Anatomy of a Typeface
Fig 1.2 Stroke in a letter.
The apex/vertex is the point created by joining two diagonal stems. Apex is when it touches above and vertex when it touches below. The letter A in Fig 1.3 has an apex and for the letter 'M' and 'V' has a vertex.
Fig 1.3 Apex/Vertex in a letter.
Fig 1.4 Arm in a letter.
Fig 1.5 Example of an ascender in a letter.
Fig 1.6 Bowl in a letter.
Fig 1.7 & 1.8 Cross bar and cross stroke.
Oblique is based on Roman form of typeface.
Fig 1.9 Oblique
Condense is a version of the Roman form where the type is kerned tighter, and extremely condense styles are often called "compressed".
Fig 1.10 Condense
Boldface has a thicker stroke than a Roman form; it is sometimes called "semibold", "medium", "black", "extra bold" or "super".
Fig 1.11 Boldface example
Extended is a variation of a Roman font.
Fig 1.12 Extended example
Here are a few examples:
Fig 1.13 Examples of typefamilies
INSTRUCTIONS
PROJECT 2
9/10/19 - 23/10/19 (Week 7-9)
To start off with this project, we were told to dissect three to five letters from "d,g,i,s,n,o,e,h,t,k,r". Mr Vinod told us to choose a font that we feel 'close' to or comfortable with. Most of us should probably have a preferred font after several exercises. The objective of dissecting is to study the design of the font. I decided to dissect the letter 'd,h,i,n'. I chose the font 'Serifa Std, Roman'. We could choose from the 11 fonts that were given which is Bembo, Futura, Gill Sans, Garamond, New Baskerville, Serifa, Univers, Caslon, and Janson.
I used thin straight lines to dissect the letter and made it in the color red to make it more obvious. Here is my dissection process;
Fig 2.1 Dissection process.
Fig 2.2 Dissection of letter 'd'.
Fig 2.3 Dissection of letter 'h'.
Fig 2.4 Dissection of letter 'i'.
Fig 2.5 Dissection of letter 'n'.
Next, we had to sketch out our ideas for our very own font. In class, Mr Vinod told us to not make it too different than the original font and avoid 'fancy' designs for the font. We had to sketch at least two or more different designs. Here are my sketches for project 2;
Fig 2.6 Sketches.
I drew out the original font in the most left column as reference and sketched out two different designs. The difference between my designs and the original font is very subtle as the only difference is the serif. I personally prefer design 1 (middle column, fig 2.6).
Fig 2.7 Closer look at design 1 & 2's serif.
I sketched my design on a graph paper as well.
Fig 2.8 Sketch on graph paper.
Before class ended I got Mr Vinod's approval, I could start digitizing it in Adobe Illustator, we were told that we could take a picture of the sketch and trace it or do it in any way we prefer to. The document settings for this project was 11000 by 1000 pts.
Fig 2.9 Document setup for project 2.
Once I have set the document, I used a rectangle tool to create a box 1000 pt by 100. Then I transformed it to X: 0 and Y:0, I also changed the reference point to the top left box.
Fig 2.10 Settings for transform.
Afterwards, I dragged a line from the ruler (CTRL+R) and set it directly on the box's line. For the X-height, I used a rectangle tool and set it to 500 pt by 500 pt and placed it in the center. Then I placed the rulers horizontally according to the box. I purposely made the box in grey so it'll be easier to see when i'm setting up the lines.
Fig 2.11 Setting up the X-height.
Once I got all the lines in place, I started digitizing my own font. I took a picture of my sketch to trace it on Illustrator, however I find my sketch of the letters are not proportioned properly, so, I decided to use the original font as a template on Illustrator and change the design according to my sketch. I changed the size of the stroke, the bowl placement (i made it more centered) and added my own serif.
Fig 2.12 Digitizing the bowl.
Fig 2.13 Digitizing my own size of stroke.
For the serif, I used a rectangle tool to create the shape like the one in Fig 2.13. I also changed the letter 'i' quite a bit.
Fig 2.14 Digitization of the letter 'i'.
For the letter 'e', I was having a hard time figuring out how do I add my own style to this letter. I couldn't add the serif as it'd turn out quite weird and it doesn't look right. So I decided to change some parts of it slightly.
Fig 2.15 Digitizing the letter 'e'.
I decided to change the bowl in the letter 'e' and make it less sharp at the edge. Once I was done digitizing all the letters, I had to 'unite' the paths on the letter. Windows - Pathfinder - Unite. We were told to do this step before we transfer our letters to 'FontLab'. Mr Vinod said the letters must be in one line and not separated.
Fig 2.16 Unite option in Pathfinder.
Afterwards, I copied my letter in Adobe Illustrator and pasted them in Fontlab. I did it letter by letter. I started with the letter 'd'. Mr Vinod also told us in Fontlab, to zoom in, press the 'Z' key and to zoom out, press the 'X' key.
Once I launched Fontlab, there will be a window full of letters (uppercase and lowercase) so all I had to do was kick in letter by letter in the boxes. Not to forget, I also had to change the descender and ascender according to my letters. Descender has to always be in 'negative'.
Fig 2.17 Settings for descender and ascender.
After I was done with the settings (fig 2.17) I copied my letters from Illustrator and pasted it in Fontlab.
Fig 2.18 Transferred letter 'd' into Fontlab.
Mr Vinod and Mr Sam told us that our letter must be at the very left in the box.
Fig 2.19 '0' for left alignment.
Fig 2.20 letter 'g' in FontLab.
I proceeded this step (fig 2.18 & 2.20) for all the other letters. When I was done transferring all the letters, I opened 'New Metrics Window' and typed in 'god is in the kerning'. I had to change the kerning and spacing as well.
Fig 2.21 First draft after changing the spacing.
I realized that the spacing was too broad and the kerning was still not right. I also forgot to put the exclamation mark, comma and period. I decided to change it again.
Fig 2.22 Added '!,.'
Then I generated my font and typed it out in Adobe Illustrator with our own composition.
We had to show Mr Vinod and Mr Sam in class and this was my first composition. (fig 2.23).
Fig 2.23 First draft.
Mr Vinod said it was decent and simple but I should make g's stem more smooth. He also said to make it more round. So I changed it in fontlab. Here are pictures of the process:
Fig 2.24 Changed the stem.
Afterwards, I had to re-do my text in Adobe Illustrator again with the new change on 'g'. This time I decided to change my composition. We were also told to print the text out.
Fig 2.25 Re-doing "god is in the kerning!".
Once I typed out the text, I changed the original font to my font. I also changed my composition. I wanted to make it into flush left alignment.
Fig 2.26 Using my font.
I made the text into 100pt. I figured that was the right size and it looked alright.
Fig 2.27 Changed the point size.
This is my final outcome, I printed a copy of it as well. I named my font "Farissa Std" simply because I don't know what to call it.
Fig 2.28 Final outcome
Here is the PDF file for project 2.
Fig 2.29 PDF version
FEEDBACK
WEEK 7; Specific feedback: My idea is interesting and bold and I should apply the idea to other letters. The bottom part of the letters does not have to follow the serif. Mr Vinod also said the serif for my letters looks interesting.
General feedback: We have to explain our caption well for our pictures on the blog and explain the process briefly. It is important to do these steps as people are most likely going to read the captions.
WEEK 8; Specific feedback: It looks nice and interesting. I should use the shape tools to construct the letter.
WEEK 9; Specific feedback: Everything is fine, I just have to make sure the ascender and descender are correctly kicked in.
General feedback: For students who are using Windows, use 'tru type' when generating font.
WEEK 10; Specific feedback: My font looks decent and simple. I should make the letter g's stem ot be more smooth and round.
REFLECTIONS
Experience.
Week 7; It was quite tough to create a font and make it different but simple. It took me awhile to sketch out a few ideas for this project.
Week 8: I struggled to decide which method to use to trace the letters in Adobe Illustrator.
Week 9; I was confused on how to kick in the ascender and descender settings in Fontlab but Mr Vinod helped me out in class.
Week 10; Since I was using fontlab 5 'demo', I had complications installing my font in to Illustrator.
Observations.
Week 7; I realized that we should not make our font too fancy,
Week 8; Using the rulers in Illustrator helps a lot.
Week 9; The process of putting in letters in to Fontlab was not as tough as I thought it'd be.
Week 10; I should not use Fontlab's demo version.
Findings.
Week 7; It is so much better to draw out letters on a graph pad than on a blank piece of paper.
Week 8; Used pen tool to draw out my design in Adobe Illustrator.
Week 9; We learned how to make the paths in to a single line before transferring the design to Fontlab.
Week 10; Students can go to the mac lab to use Fontlab 5 for those who doesn't have it installed in their laptops.
FURTHER READINGS
Practical Typography by Matthew Butterick.
(14/10/19 - 00/00/19)
Fig 3.1 Front cover
A chapter I read on in this book was called ' What is good typography?'. I discovered that good typography supports and reinforces the message. Good typography makes the text more effective. This message was also told to us during lecture in class. These are a few interesting things I read in this particular chapter:
Good typography is measured by how well it reinforces the meaning of the text, not by some abstract scale of merit. Typographic choices that work for one text won’t necessarily work for another. Corollary: good typographers don’t rely on rote solutions. One size never fits all.
Secondly, your ability to produce good typography depends on how well you understand the goals of your text, not on taste or visual training. Corollary: if you misunderstand the goals of your text, good typography becomes purely a matter of luck.
I also learned that typography that is aesthetically pleasant, but that doesn’t reinforce the meaning of the text, is a failure. Typography that reinforces the meaning of the text, even if aesthetically unpleasant, is a success.
The writer included a few pictures that uses different fonts and describes which one suits the meaning.
Fig 3.2 Example 1
Fig 3.3 Example 2
In my opinion, Fig 3.2 looks better and clearer as it is a sign for direction. It is important for the design to be easy to read and does not take a long time to figure out what the text is.
Comments
Post a Comment