Typography-Project 2

October 11, 2019

Typography-Project 2

Week 7-Week 10 (9/10/19 -30/10/19)
Nyoman Anita Putri Arimbawa (0339942)
Project 2

Lecture 7

Week 7 (9/10/19)

This week we start on our second project, Mr. Vinod, started our class with the lecture on the basics of typography. In this lecture, we have many terminologies of typography that we have to remember cause it will be really useful for working on project 2
Describing letterforms

Fig 7.1

Terminologies:

Baseline: The imaginary line the visual base of the letterforms.
Median The imaginary line defining the x-height of letterforms.
X-height The height in any typeface of the lowercase ‘x’.
Ascender is the portion of a minuscule letter in a Latin-derived alphabet that extends above the mean line of a font.
Median or Mean is
Cap height: the height of the uppercase letters. ( frequently a little lower than the full extent of the ascender)
median

Fig 7.2
Stroke is any line that defines the basic letterform

Fig 7.3
Apex / Vertex The point created by joining two diagonal stems (apex above and vertex below)
Arm Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).

Fig 7.4
Barb is the half-serif finish on some curved stroke.

Fig 7.5
Beak is the half-serif finish on some horizontal arms. shorter
Bowl The rounded form that describes a counter. The bowl may be either open or closed.

Fig 7.6

Bracket The transition between the serif and the stem.

Fig 7.7

Cross Bar The horizontal stroke in a letterform that joins two stems together

Fig 7.8

Cross Stroke The horizontal stroke in a letterform that joins two stems together

Fig 7.9

Crotch The interior space where two strokes meet.

Fig 7.10

Descender The portion of the stem of a lowercase letterform that projects below the baseline

Fig 7.11

Ear The stroke extending out from the main stem or body of the letterform.

Fig 7.12

Em/en Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Fig 7.13

Finial The rounded non-serif terminal to a stroke

Fig 7.14

Leg Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).

Fig 7.15

Ligature The character formed by the combination of two or more letterforms.

Fig 7.16

Link The stroke that connects the bowl and the loop of a lowercase G.

Fig 7.17

Loop In some typefaces, the bowl created in the descender of the lowercase G.

Fig 7.18

Serif The right-angled or oblique foot at the end of the stroke

Fig 7.19

Shoulder The curved stroke that is not part of a bowl

Fig 7.20

Spine The curved stem of the S.

Fig 7.21

Spur The extension the articulates the junction of the curved and rectilinear stroke.

Fig 7.22

Stem The significant vertical or oblique stroke.

Fig 7.23

Stress: The orientation of the letterform, indicated by the thin stroke in round forms.

Fig 7.24

Swash: The flourish that extends the stroke of the letterform.

Fig 7.25

Tail: The curved diagonal stroke at the finish of certain letterform

Fig 7.26

Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

Fig 7.27

After learning about the terminologies of a letter, we move on to the font.

There are at least 26 letters in the font so we have to learn how to use it properly.

terminologies:

Uppercase Capital letters, including certain accented vowels, the c cedilla, and n tilde, example: ABCDEFG
Lowercase: Lowercase letters include the same characters as uppercase.
Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.
Lowercase Numerals
Punctuation
Ornament

In one typeface there could be many different styles, for example:

Roman: The normal typography style in which the vertical lines of the characters are straight up and not on an angle.
Book: A slightly lighter stroke than roman
Italic: A typeface with letters slanted slightly to the right. Italic type is used to emphasize words as well as for decoration. Most, but not all, fonts have an italic typeface.
Oblique: Roman-style italic
Bold: A thicker font than roman, there are also a light bold
Condense: A condensed or a narrow font is a typeface that features characters with narrow widths but it also refers to fonts with taller character designs as well.
Extended: Sometimes known as the expanded- extended typeface is the opposite of condensed, where the type is wider than it is with the regular typeface.

There are 10 typefaces that are created in the last 500 years all have two purposes is to make easy readability and appropriate expression of contemporary esthetics.

Fig 7.28

Lecture 8

Week 8 (16/10/19)

The case for the uppercase letter is not always symmetrical

Fig 8.1: Baskerville

An easy example is if we looked at the uppercase 'A" of Baskerville stroke form, we can see that each bracket connecting the serif to the stem has a unique arc.

Other Uppercase letters like Univers may really seem symmetrical but with a closer examination, we able to see that the width of the left slope is thinner than the right stroke. Both Baskerville and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. Honestly, I would never realize any of this, or even care enough to pay attention to it not until I took this module but it's crazy how the effort to make a font

Fig 8.2: Univers

the lowercase of the letter 'a' is the best letter to be examinate cause it shows how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference. here's shows the cooperation of typefaces—Helvetica and Univers, two of this typeface is seems really similar.

Fig 8.3: Helvetica and Univers

Fig 8.4: Comparison

Another important note is the counter form (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.

Lecture 9

No lecture for today we have to focused on our project

Lecture 10

No lecture for today we have to focused on our project and our manifesto exercise

Instruction

Project 2

week 7:

The first thing we must do before designing our own font for project two, we must dissect typefaces so that we could furthermore understand on what we must pay attention to making a font. The font that I chose to dissect is ITC New Baskerville.

I started dissecting "d"

Fig 7.28: dissection of letter d in Adobe Illustrator

Fig 7.29: dissection of letter d in Adobe Illustrator

then I dissect the letter I and then O and finally n

Fig 7.30: Dissection of the letter i in Adobe Illustrator

Fig 7.31: Dissection of the letter i in Adobe Illustrator

Fig 7.32: Dissection of the letter o in Adobe Illustrator

Fig 7.33: Dissection of letter o

Fig 7.34: Dissection of the letter n

Fig 7.35: Dissection of the letter n

After finish, our dissecting Mr. Vinod procced with instructed us, to begin with, our sketches for our font.

Mr. Vinod guides us with how we digitalize our font, we must use Adobe illustration to digital it. The layout for our font is.

Fig 7.36: Sketches font

Fig 7.37: Sketches font

week 8:

In class this week, I showed my sketches to Mr. Vinod, then he picks my second sketch because of the 'n' stroke, then he showed me some sketches on the stroke I did and how I should make it in adobe illustrator later,

Fig 8.5: Mr. Vinod examples

Fig 8.6: Sketches of a stem

Before the lecturers approved my letter i tried to make a the font in Adobe Illustrator, but i wasn't sure about a few of the design, I make and the stoke and the thickness of the font isnt the same so i started a new one.

Fig 8.7: making the font in Adobe Illustrator: Unofficial first trial of making font

Then I used my sketches that were approved by Mr. Vinod and Mr. Shamsul.

Fig 8.8: making the font in Adobe Illustrator: First Attempt

First I took the stem from the sketch then I trace it on Adobe Illustrator, I use the pen tool to make the stem.

Fig 8.9: making the font in Adobe Illustrator: First Attempt on making n

Then I used that shape use it for the n,r,d,h, and others,

Fig 8.10: making the font in Adobe Illustrator: First Attempt on making r

Fig 8.11: making the font in Adobe Illustrator: First Attempt on making r

Then i make the letter 'o'

Fig 8.12: making the font in Adobe Illustrator: First Attempt on making 0

Fig 8.13: making the font in Adobe Illustrator: First Attempt on making o

Then I proceed to make the letter 'd'

Fig 8.14: making the font in Adobe Illustrator: First Attempt on making d

then I took the stem then extend it and make it for the letter 'd'

Fig 8.15: making the font in Adobe Illustrator: First Attempt on making d

Fig 8.16: making the font in Adobe Illustrator: First Attempt on making d

Fig 8.17: making the font in Adobe Illustrator: First Attempt on making g

Then I make the letter g, by using the letter 'o', for the ears of the letter g I took the curve from the word 'r' then adding it to the letter g

Fig 8.18: making the font in Adobe Illustrator: First Attempt on making g

Fig 8.19: making the font in Adobe Illustrator

then I cut any leftover outline, then took that stem for making h and k

Fig 8.20: making the font in Adobe Illustrator: First Attempt on making h

Fig 8.21: making the font in Adobe Illustrator: First Attempt on making k

Fig 8.22: making the font in Adobe Illustrator: First Attempt on making s

Fig 8.23: Font design: First attempt

Week 9

At the beginning of this week class, Mr. Vinod & Mr. Shamsul take a look at my work and I need to redesign my work,

Fig 9.1: Font design second attempt: Making d

First I took the serif from my previous font design, then add it to a new stem, that I make by using the line tool and make the stroke 100, then for the bowl part of the d I use the eclipse tool too make it and also make he stroke 100 and finally combining them.

Fig 9.2: Font design second attempt: making n

Then I reuse the stem I use to make the letter d and making it the x-height to make the word n which later im gonna reuse to make the letter i, r. To make the shoulder of the letter n I use the pen tool and make a curve with the same stroke size.

Fig 9.3: Font design second attempt: making n

Fig 9.4: Font design second attempt: making o

Then, I proceed to make the letter o, by using the eclipse tool and using the direct selecting to add some adjustment to the o.

Fig 9.5: Font design second attempt: making e

Then after that, I proceed to construct the letter e, by again using the eclipse tool then take the cut tool to cut it then add the cross stroke by using the line tool making the stoke size 30

Fig 9.6: Font design second attempt: making h

To make the letter 'h' i took the stem from the letter 'd' then adding the shoulder of the letter 'n'

Fig 9.7: Font design second attempt: making h

Fig 9.8: Font design second attempt: making r

To make the letter 'r' i took the stem of the letter 'n' then added the ear by using the pen tool then making it the same size stoke too.

Fig 9.9: Font design second attempt: making r

then I took the stem from the previous letter to make the 'i' added the dot with the eclipse tool,

Fig 9.10: Font design second attempt: making t

to make the 't', I took the stem and for the tail of the letter i took the ears from the letter 'r' then I rotate and I put it there, then I added the cross stroke that is the same size the letter 'e'.

Fig 9.11: Font design second attempt: making g

Moving on to the letter g, i take the letter o, then the ear of letter r , then make the tail with pen tool then group it

Fig 9.12: Font design second attempt: making g

To make the 'k' took the stem from the previous letters then add the stoke the same size as the cross stroke then add another stem that is the same size which is the 100 pt.

Fig 9.13: Font design second attempt: making s

Save the best for last :), the 'st I construct it with the pen tool and make the stroke 100

for the punctuation,

Fig 9.14: Font design second attempt: making punctuation

for exclamation I use the same stroke then add the dot from the word i, then for the point I use the dot as well, and for the coma, I added a stoke using the pen tool.

Fig 9.15: Font design: Second layer

On the second trial of my font, for me my font doesn't seem like it from the same typeface, so I ask Mr. Shamsul to help, he said that my stroke isn't that smooth, he teach me how to use the smooth tool, and how to fix a few things like the k shouldn't be to extended and my e and o should be the same and my r and my t shouldn't to curve and I took his advice and improved my font design.

Fig 9.16: Font design: Fixing my font

Fig 9.17: Font design: Fixing my font

For the third trial, first, I fix my o and making it become e by cutting it and adding cross stroke then I also adding it to d and g to become the bowl.

Fig 9.18: Font design: Fixing my font

I also fix my t make the tail shorter and make the cross stroke even, and for the k I reduce the font

Fig 9.19: Font design: Fixing my font

I also make my r shorter.

Fig 9.20: Third attempt

There are still a few mistakes on my font design but I still want to try to import it on FontLab, before I Import my font design to FontLab I need to make an outline of my font design,

From this

Fig 9.21: Construction line

To this

Fig 9.22: Making the outline

to make an outline out of my font first, I need to make all the path of my font is well group and nothing shall not be left behind, after combining them make a copy of the artboard of the whole font, then select the path of your font, go to object then find path then make an outline stroke after that find the pathfinder window then combine all of that then finally you can import it to FontLab

Fig 9.23: Making an outline

Fig 9.24: importing font design to FontLab

After making sure that all my font is well outline then I begin to make it in Fontlab, by copying my font then paste it in FontLab.

Fig 9.25: importing font design to FontLab

Fig 9.26: making kerning font design to FontLab

then after importing all my font, I open a new window metrics and adjusting the kerning because of its god apparently,

Fig 9.27: making kerning font design to FontLab

Mr. Vinod said that we have to make our left bearing to 0 then for our right bearing to make it 0-150 or depending on our font,

Fig 9.26: making kerning font design to FontLab

Week 10

after showing my font in FontLab to Mr.Vinod and Mr. Shamsul there are a few things I need to fix, so I return to Adobe Illustrator to fix it.

Fig 10.1: Fixing my font design

then I'm making sure that my font has the same thickness

Fig 10.2: Fixing my font design

Fig 10.3: Fixing my font design

Fig 10.4: Fourth attempt

then I repeated the process on combining my font then making an outline, then I'm adding it to FontLab.

Fig 10.5: Font lab process

Fig 10.6: Font lab process

adding the kerning in Fontlab

Fig 10.7: Font lab process

Fig 10.6: Font lab process: making space

making the space, I have to make sure that that is an n dash.

After we generate our font, the lecturers ask us to make an alignment according to our font in adobe Illustrator in a4 paper size

Fig 10.7: Left Alignment

First I tried left alignment.

Fig 10.8: Middle Alignment

then I tried to see the middle alignment would look like.

Fig 10.9: Right Alignment

Fig 10.10: Making alignment

After that Mr. Vinod told us to add our font name and our name ant the year 2019, in Helvetica or Arial in 7 pt.

Fig 10.11: Left Alignment

Fig 10.12: Middle alignment

Fig 10.13: Right Alignment

Fig 10.13: Alignment

Feedback

week 7:

General Feedback: For our pdf file in our e-portfolio for project one its only for the final submission not on each progress. another feedback is that for our progress in our e-portfolio it is important to have an explanation of our expression, just explain it briefly.

week 8:

General Feedback: when we receive feedback we have to write it right away so we don't forget that feedback We have to update our e-portfolio on every progress we do on what we working on, and do it at the end when we finish the work.

Specific Feedback: After I showed my unapproved sketch for the second project, Mr. Vinod said I already have the characteristics of the letter 'n' that I have to replicate that characteristic in every letter.

week 9:

General Feedback: When marking attendance make sure to click mark attendance after typing the code. For windows/ pc user we must generate our FontLab file as an open/true type. after we finished with have to make an alignment on adobe illustrator in a4 size paper then label with our name

Specific feedback: After Mr. Vinod & Mr. Shamsul see my digitalize font they said that my stroke and my stem isn't consistent at all, and I shouldn't use the pen tool I should've used the shape tool then make the stroke all the same size then finally the font should have the consistency. After that

Mr. Vinod shows me the way to group all the shape then make an outline path and finally use the pathfinder to make the letter that we can copy and paste to FontLab. After the second trial I ask Mr. Shamsul for feedback, then Mr. Shamshul said that my stoke isn't smooth, He showed me how to use the smooth tool, then my 's' is upside down then he help me to rotate it, he also added that 't' and my ' r' is to curve and I should cut it, and I also need to fix my 'k'.

week 10:

General FeedBack: In our a4 god is in the kerning sentence should be in the same point size, and our label should be in Helvetica or Arial in 7 points.

Specific feedback: After showed Mr. Vinod my 'god is in the kerning sentences', they told to fix my s and k because the thickness is different from the other letter.

Reflection

Experience:

Week 7: This week's lecture has a lot of information and to be honest it's hard to get in, I get really confused, but I learned so many new typography words and learning the anatomy of a font is actually kinda overwhelming that actually makes me nervous on this project. Week 8: Really struggling on coming up with a design of my own, cause I'm really out of my comfort zone and also to digitalize the font is definitely the most tedious and sophisticated things to do but to be able to make our own font that we can use absolutely a great experience that will last a lifetime, hopefully. Week 9: When I finally tried to generate my font in Fontlab it was quite arduous, but it's actually a really nice thing to learn and hit me with the reality that typographers probably did that in like Idk, thousands of times? now I see them as a saint, never again I would let society disrespect a typographer :D

observation:

week 7: I was really nervous about doing this project and really confused as well, then I ask around and I wasn't alone but there are also people that are also not mentally prepared for this project. Week 8: Almost everyone is kinda lost and so do I when Mr.Vinod gives us a lecture on how to digitalize the font and also how to import it in Fontlab, as when I see how it did it kinda makes me nervous and many people couldn't get FontLab 5. Week 9: It's a really nice thing to see in the class this that many people helping each other.

finding:

week 7: Something that I found that is baffled me is how much effort and works it takes to design a font, I wouldn't even notice this it wouldn't for a typography course and I guess I've been taking typography for granted.Week 8: Since this project is a quite hard one is there is a lot of crucial things that might happen so, its better if I make sure that I followed what the lecturer instructed and also what pay attention to every step on making this project Week 9: Today was another learning curve, make a quite a lot of mistake that has to fix. There are many trial and error just in life in general, we have to make sure that we come back for our failure and making a success out of it

Search This Blog

Nyoman Anita Putri Arimbawa (0339942)