Typography / Task 3A: Type Design and Communication

-
15.10.2021 - 12.11.2021 (Week 8 - Week 12)
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Typography / Taylor's University 
Task 3A / Type Design and Communication 

LIST

LECTURES

TASK 1 LECTURE can be found here.
TASK 2 LECTURE can be found here.

Week 7 (08/09/2021) : Introduction to Task 3

Mr. Vinod and Mr. Charles marked our recent assignment today, we were asked to proceeding to task 3. As the first step to proceed to the next task, which creating our own typefaces, we were provided with some videos about how to create the typefaces using Adobe Illustrator, Fontlab, and Calligraphr.

  • "Typo Task 3A Typeface Construction (Shapes)"
First thing first, we were explained to do some researches first to build our understanding and direction. We are recommended to use the 10 typefaces as a guidance on designing our typeface.
fig. 1, references, source; lecture video, Week 7 (08/10/2021)
fig. 2, 10 typefaces, source; lecture video, Week 7 (08/10/2021)

Then, we have to make our 5 sketches, example:
fig. 3, sketches, source; lecture video, Week 7 (08/10/2021)

Then, we have to deconstruct the letter, in order for us to understand the shapes, curves, and details of a typeface we referenced.
fig. 4, deconstructing, source; lecture video, Week 7 (08/10/2021)

Then we have to create an Adobe Illustrator file with this setting:
    • Artboard size 1000 x 100 pt
    • CMYK 
    • Create 3 artboards to deconstruct (1:1 size)
    • Create an artboard to develop all the different character 
fig. 5, artboards, source; lecture video, Week 7 (08/10/2021)
What to note:
    • Artboard height : 1000 pt
    • X-height : 500 pt
    • Ascender and Descender : within the artboard
    • IF the design exceed the guideline -> MUST be reworked
    • Rounded details like in letter "d" sometimes exceed the guidelines, but it's normal.
    • Counterspace : usually the same size of a stem / half size / can be adjusted
fig. 6, guidelines, source; lecture video, Week 7 (08/10/2021)

To create the design, we can use rectangular tool / pen tool as needed. After that, we have to duplicate the artboard (the one that contain our original typeface). Mr. Vinod asked us to duplicate it so we have our original version saved. we should ensure that we copy paste the guide correctly.
fig. 7, copied artboard, source; lecture video, Week 7 (08/10/2021)

Next, we have to unite the shapes to make a vector to easily adjust the letterform. Then, we have to select all the nodes of the shape and adjust the shape with the direct selection tool by dragging inwards or outwards, or to make a uniformed corner, right click and input the number.
Note: we have to clear the unnecessary nodes first to make it easier.
fig. 8, editing the corner, source; lecture video, Week 7 (08/10/2021)

Type the guide size to make it easier in Fontlab. To type it you can use rectangle tool to measure.
  • "Typo_Task 3A_Illustrator To Fontlab5 Demo"
After doing all the things needed in the previous lecture, we started to put in our digitized version to fontlab. 

SOME THINGS TO NOTE BEFORE EXPORTING TO FONTLAB:
1. Make sure we typed the guideline sizes to make it easier.
fig. 9, size guides, source; lecture video, Week 7 (08/10/2021)

2. Combine the shape using object > path > outline stroke, then use pathfinder
(shape should be like the bottom picture)
fig. 10, pathfinder, source; lecture video, Week 7 (08/10/2021)
3. Make the Fontlab file:
  1. Open Fontlab > File > Font Info
  2. First, add name in "Names and Copyright"
  3. Second, open "Metrics and Dimension" then go to "Key Dimension" and input the ascender, descender, x-height size, etc. (When inputting the underline, should be under the descender)
After keying all the necessary details, we should proceed to inputting our design to FontLab

ADDING THE DESIGN TO FONTLAB
  1. Double click the cell
  2. Copy paste the illustrator design (per letter), by dragging the x y line.
fig. 11, importing to FontLab, source; lecture video, Week 7 (08/10/2021)

ADJUSTING KERNING
1. Open new metric window
2. Type in the letters
3. Adjust the left and right barring to 0 first then adjust it uniformly
fig. 12, kerning, source; lecture video, Week 7 (08/10/2021)

4. Try different sequence of letter
5. Adjust the individual kerning, by clicking on the middle part of the letter in the table
fig. 13, individual kerning, source; lecture video, Week 7 (08/10/2021)

ADDING SPACE
To add space, double click on the space cell, and drag it to right.
fig. 14, space, source; lecture video, Week 7 (08/10/2021)

SAVING AND GENERATING FONT
After done creating and adjusting our design, we have to save it. (File > Save as)
Add font to computer system: File > Generate Font
  • "Typo_Task 3A Fontlab7 Demo"
Mr. Vinod demonstrated how to download FontLab7. It's quiet similar to the previous lecture, but the difference is, in this lecture, Mr. Vinod explained more about how to export the font.
1. Go to file > Export Font
2. Don't mess with the setting, just ensure the selected format is .ttf
fig. 15, saving, source; lecture video, Week 7 (08/10/2021)
  • "Typo_Task 3A_Using Calligraphr"
If we have problem with FontLAb, we can use a web font generator named Calligraphr.
STEPS:
1. Open Calligraphr, then create account.
2. Choose "Minimal English" then download the PDF file.
fig. 16, minimal English, source; lecture video, Week 7 (08/10/2021)

        Make sure that:
    • The file format is .pdf
    • Maximise the template size
3. Open the file in Adobe Illustrator (to place the vector shapes)
fig. 17, inserting, source; lecture video, Week 7 (08/10/2021)

4. Go to "My Fonts" and "Upload Template"
5. After uploading you can find your font, and click it for various options
fig. 18, adjusting, source; lecture video, Week 7 (08/10/2021)

6. After that, select "Build Font" and rename.
7. Select the format, .otf or .ttf
  • "Typo Task 3A (optional)"
The lecturer (which isn't mr. Vinod) demonstrated how to embed font tester in our blog
fig. 19, how to add font tester, source; lecture video, Week 7 (08/10/2021)
STEPS:
1. Open FontLab and choose save it as Web TT, the export it.
fig. 20, saving format, source; lecture video, Week 7 (08/10/2021)

2. Then go to Woff2Base Converter, you can click here.
3. Choose File, add font file
4. Copy the HTML code, and paste it on your blog
fig. 21, preview, source; lecture video, Week 7 (08/10/2021)

On the note of the video, Mr. Vinod provided one of a student's font tester preview, which can be found here.

INSTRUCTIONS
<back to top>

<iframe src="https://drive.google.com/file/d/1_JYfWVZTe7oDL_0AAImBCEdqsEdKjEXO/preview" width="640" height="480" allow="autoplay"></iframe>

STEPS:

  1. Watch lectures video and do some researches on internet / Pinterest.
  2. Make 5 sketches referencing from the 10 typefaces provided, choose 3 letters : aimepytgdob!., (at least 1 with descender, 1 with ascender, and 1 without ascender and descender)
  3. Make the shapes using rectangle tool / pen tool in Illustrator
  4. Export the font into Fontlab / Calligraphr
SUBMISSION:
  • The completed e-portfolio submission for Task 3(A) is on Oct. 28, 11:59PM (MST)
  • Note:
    • Check for consistency in strokes thickness (prioritise subtly over complexity)
    • The bench-mark e-portfolio post in terms of research, progression, final output and overall documentation of process for Task 3(A), 
    • Different approaches in presentation is acceptable, as long as the process consist of the major elements:
    1. Research (other typefaces, deconstruction 3 letters from 10)
    2. Exploration (sketches minimum 5, good variety)
    3. Digitization (document your progression)
    4. Fontlab progression
    5. Font generation and basic BW poster
    6. Provide link to download generated typeface

EXERCISES

RESEARCH (other typefaces, deconstruction 3 letters from 10)

Before stepping out to make my typeface (yay :> ). Since I remember that I always make rounded curves when drawing, I was inspired to make a roundy-typefaces. So, I did some research on Google and Pinterest. 

I searched for "rounded fonts," "rounded sans serif font," and "rounded serif font."
fig. 22, exploring, source; Pinterest, Week 7 (08/10/2021)

I found some typefaces, they all have their characteristic, and something unique that exist only on them. I searched more and was interested in these typefaces:
fig. 23, oblong, source; (https://pin.it/b1fXQC4), Week 7 (08/10/2021)
fig. 24, ALCUVA, source; (https://pin.it/ViDNByV), Week 7 (08/10/2021)
fig. 25, Origin, source; (https://pin.it/3aESXBf), Week 7 (08/10/2021)

The three of them have similarity, curves. From Alcuva and Origin font, I noticed they have some kind of "unfinished/cropped" stroke. Being all round and round, I think one of the closest typeface from the 10 typefaces is ITC Garamond Std.
fig. 26, Garamond typeface, Week 7 (08/10/2021)

Then, I began to deconstruct the typeface. My first step of doing deconstruction is, I create the three artboards where my work would be put. Then, I add the letters to be deconstructed. In my case, I choose letter m, a, t since I found out they can represent the rounded trait of Garamond.

fig. 27, Garamond m,a,t ,Week 7 (08/10/2021)

I add my font in 900 pt size, the same as the one I use for my font reference guide. After that, I add the ascender, descender, x-height, etc. of the font family.

fig. 28, Garamond m,a,t with guides, Week 7 (08/10/2021)

To be honest, deconstructing the Garamond font family is a challenge for me. Since after I add some guides for deconstructing, I found out that some strokes are having different size than the other. Also, I noticed that Garamond uniqueness is on its rounded shapes. Anyway, here're my work:

  • Letter m
fig. 29, Garamond m with guides, Week 7 (08/10/2021)

This is the preview before I unite the shapes and add corners.
fig. 30, deconstructed Garamond m with guides, Week 7 (08/10/2021)
Comparison:
fig. 31, original Garamond m compared with deconstructed, Week 7 (08/10/2021)
  • Letter a
fig. 32, Garamond a with guides, Week 7 (08/10/2021)

This is the preview before I unite the shapes and add corners.
fig. 33, deconstructed Garamond a with guides, Week 7 (08/10/2021)
Comparison:
fig. 34, original Garamond a compared with deconstructed, Week 7 (08/10/2021)
  • Letter t
fig. 35, Garamond t with guides, Week 7 (08/10/2021)

This is the preview before I unite the shapes and add corners.
fig. 36, deconstructed Garamond t with guides, Week 7 (08/10/2021)
Comparison:
fig. 37, original Garamond t compared with deconstructed, Week 7 (08/10/2021)

After deconstructing the letter, I began to know Garamond better. I noticed that Garamond has characteristics such as:
  • Always ended up with something rounded / curved, not edges
  • The stroke play with boldness and thinness, some may thick some may thin
  • Consist of lots of curves
  • The feet of the typeface has rounded characteristic
  • Not all stroke have the same points / size, some may differ
fig. 38, Garamond, Week 7 (08/10/2021)

Although it looks like it has edgy / sharp ends, when we zoom in actually we can still see the rounded characteristic.
fig. 39, Garamond closer look, Week 7 (08/10/2021)

EXPLORATION (sketches minimum 5, good variety)

So, I was inspired by the round, curvy corners from the inspiration. I want to make something with similar curves, but with unfinished / exceeding stroke. So, I made some sketches. Since I haven't really understand the meaning of x-height, descender, ascender, baseline back then, I think I'm kinda messed with the typefaces size, but anyway, here they're:
fig. 40, sketch attempt 1, Week 7 (08/10/2021)

I kinda satisfied with my concept though. I started to make the inked version of them, in order to have a clearer look.
fig. 41, sketch attempt 2, Week 7 (08/10/2021)

Explanations:
  1. I want to make the [1] sketch, top left in fig. 41 to have a rounded base, it can be circular or elliptical.
  2. [2] sketch, mid left in fig. 41 is actually similar with [1], but with bolder stroke on the part of the letters, and a stroke that pass through the letter's base shape.
  3. Sketch [3] (mid right) and [5] (top right) actually the sketch [1] and [2] in all caps.
  4. Sketch [4] is actually an all caps type, and it's constructed with thin stroke while it has some kind of bolder stroke on the left as a shade.
Finishing my sketch, I noticed I haven't really understand the technical lines in typography, so I started to learn more about the ascender, descender, etc. terms. I read some pass lectures classes notes, I also use this as a guide:
fig. 42, technical lines, source; (https://www.kreativfont.com/ascender), Week 7 (08/10/2021)

DIGITIZATION (document your progression)

fig. 43, 10 typefaces, Week 8 (15/10/2021)

I actually think that my sketch is more like a combination of Garamond and Univers, but I used Garamond as a reference because of their curves. So, this's the typeface that I'm referring to:
fig. 44, Garamond, Week 8 (15/10/2021)

I started with reading the rectangle and circle. I use the shape tool. Then, to make the curves, I used a 2 circle shapes and use pathfinder to remove the inner circle, so the typeface remain with uniformed circles.
fig. 45, attempt 1, Week 8 (15/10/2021)

So, they're (up) the preview of my first attempt, and I like the round curves. I want to modify the typeface a bit by adding dots, but I think the first one still look better, and Mr. Vinod agreed with choosing the first.
fig. 46, attempt 2, Week 8 (15/10/2021)

fig. 47, attempt 1, 2 with guide, Week 8 (15/10/2021)

I think the result makes me kind of out of the track. I made my typefaces using the combination of shapes at first (not stroke), and it results in inconsistency especially on the curves. I also didn't thought of their width. Based on Mr. Vinod's feedback in Week 9, I think there're some things that needed to be changed. I think I really messed up my digitization :'D.

So, I saturated to do things from sketch, from 0, since I messed up my first and second digitization attempts. This time, I don't want to use shape, I want to use strokes. I'm glad Mr. Vinod demonstrated me how to use strokes, it makes me work 2x times faster to catch up with the deadline.

First, I began to create a new artboard and copy paste the guides. I also noticed that my x-height is not 500 pt, so I adjust it more.
fig. 48, guide, Week 9 (22/10/2021)

Then, I started to use strokes to make the typeface. To edit the curves I used direct selection tool.
fig. 49, making process, Week 9 (22/10/2021)
I started to build the base first:
fig. 50, preview 1, Week 9 (22/10/2021)

Then, I cut the circle in the bottom of the g, and it looked like this:
fig. 51, preview 2, Week 9 (22/10/2021)

Then, I began to deconstruct the basic shapes of other letters:
fig. 52, deconstruct 1, Week 9 (22/10/2021)

Then, I started to cut the strokes:
fig. 53, deconstruct 2, Week 9 (22/10/2021)

I think it resulted better than my first and second attempt. I finally see some consistency of the strokes in my typefaces. Thus, I started to change them into outline shape.
fig. 54, deconstruct 3, Week 9 (22/10/2021)

I adjusted the letters to be more rounded. Then I began to unite the shapes and here's my final preview:
fig. 55, done, Week 9 (22/10/2021)
fig. 56, done (with guide), Week 9 (22/10/2021)

These are the shapes and strokes I used:
fig. 57, shapes and strokes, Week 9 (22/10/2021)

I was actually taught to use circle shape for the tip, but I actually found this little tricks to make the round in the points of the typefaces. I went to stroke and choose the rounded corner, so it produce curves.
fig. 58, strokes, Week 9 (22/10/2021)

FONTLAB PROGRESSION

After I finished doing things in Adobe Illustrator, I proceed the font generating in FontLab7. First, I opened FontLab7, and the first thing I do was renaming and adjusting the technical lines.
fig. 59, name, Week 9 (22/10/2021)

I named.my font "gemoi," it's actually an Indonesian slang word that means "cute." I named it gemoi because I think rounded shapes are identical to something "chubby but cute," and when people think of the it, it refers to the cute stuffs.

So, these are my settings:
fig. 60, settings, Week 9 (22/10/2021)

I started to move my typefaces from Adobe Illustrator to FontLab7 as instructed, by dragging the coordinates before copying.
fig. 61, copy-paste, Week 9 (22/10/2021)

Then, I began to edit the left and right barring:
fig. 62, barring, Week 9 (22/10/2021)

Then I adjust each letter's kerning. I planned to make a thin space between each letters:
fig. 63, kerning, Week 9 (22/10/2021)

FONT GENERATION & POSTER

For the poster one, I started with the word that everyone use, "I'm a type God. Obey me!" I'm thinking of showcasing the letter as a some kind of king, so my approach is using a type expression, and here's some of my attempt:
fig. 64, attempt 1, Week 9 (22/10/2021)
fig. 65, attempt 2, Week 9 (22/10/2021)

I don't think the poster showcase the typeface's traits best. The typeface is actually a reflection of cuteness and childishness, so I want to change the word. So, I made these:
fig. 66, 1:1 post, Week 9 (22/10/2021)
fig. 67, showcase draft, Week 9 (22/10/2021)

I want to make something like snack's bag, so I used lots of "o," also when I adjust my kerning, I found out when I used lots of "a" it looked like a squinting eyes, so I used that as a symbol of "laughing." I want to make the poster look childish, so I used lots of things there.

I thought the showcase don't display all the letters, so I changed my sentence, and I made this in 130 pt:
fig. 68, showcase final, Week 9 (22/10/2021)

I actually fully made the other letters, here're the documentations:

fig. 69, other letters, (02/11/2021)
LINK
"gemoi" font can be downloaded here.
Full version (a-z , . !) can be downloaded here.

TYPE ME OUT:
fig. 70, gemoi typeface preview (PNG), Week 9 (22/10/2021)


SUBMISSION
fig. 71, gemoi typeface preview final (PNG) (JPG), Week 9 (22/10/2021)
fig. 72, gemoi typeface preview final (PDF), Week 9 (22/10/2021)

fig. 73, poster final preview (JPG), Week 9 (22/10/2021)
fig. 74, poster final preview (PDF), Week 9 (22/10/2021)

FEEDBACKS

WEEK 8: (Independent Learning Week)
    General Feedback: 
  • Typography Task:
    • Always use guidelines before making the shapes
    Specific Feedback: n/a

WEEK 9: 
    General Feedback: 
  • Typography Task:
    • (,) -> the curve in the bottom part of the colon HAVE to be thicker, in order to be more impactful.
    Specific Feedback: 
  • Typography Task:
    • Need more consistency in strokes' width
    • Better without dots
fig. 75, feedbacks, Week 9 (22/10/2021)
    • 'm' should refer more to serif type fonts rules
fig. 76, feedbacks, Week 9 (22/10/2021)
    • Adjust the right part of the 't' to have easier kerning

fig. 77, feedbacks, Week 9 (22/10/2021)

WEEK 10: 
    General Feedback: 
  • Typography Task:
    • Careful on the poster term, all letter use the same size
    Specific Feedback: 
  • Typography Task:
    • Poster must use the same font size
    • The typeface designed was relatively consistent in style & stroke. 
    • All in all : Good.
  • E-portfolio:
    • Very good progress and documentation
    • Ensure Label is correct. 
    • Task 3A, Feedback - ensure include some more descriptions

REFLECTION 

-Experience: 
I didn't expect the subject will be this fun. I finally made my first typeface design. It seems an easy and simple thing to do, we just have to copy paste thing and voila! No! It's actually not that easy, yet, it's a very challenging things to do (for me). I also learned to master Adobe Illustrator more, lots of things that Mr. Vinod has taught me is very helpful. The first time I made my design, I did lots of mistakes, but since several trials and errors, I finally understand the concept and found out it's not that hard but not that easy.

-Observation:
Before I learned this module, I never thought that typefaces actually have difference! I even thought that why there're so many fonts provided everywhere, it's so useless. But, as I learnt this module, I was so surprised that actually typefaces have lots of differences, like humans, there're actually no typeface that 100% similar (except if you trace the typeface). And I found out that lots of typefaces have different strokes and styles.

-Finding:
I found out that doing typography, especially designing a typefaces requires lots of knowledge and patient. Also, trials and errors are needed in order to make things better (based on my experience ofc!). I also just know that actually creating font is free and it's not that difficult as I think before I learnt this module.

FURTHER READING


ABOUT GARAMOND:
  • Designed around 1530 by Claude Garamond
  • Used in a book by Erasmus
  • Based on: Venetian Old Style type
  • Started to rose in 1540, and later were adopted by French court and influence the French and West Europe type.
  • Legible and readable especially in prints
UNIQUENESS:
  • Humanist old style
  • Hand drawn calligraphic qualities
  • Have slanted stress, bracketed serif, low contrast
  • Convey sense of fluidity
OTHER CUTS:
fig. 78, cuts, source; (https://issuu.com/cindysuen/docs/garamond), Week 7 (08/10/2021)

Reference:
Suen, Cindy. (2012). Garamond Type Specimen Book. issu.


ANATOMY OF TYPE, GARAMOND EDITION
https://issuu.com/elizabethbdickey/docs/typebookv2

Garamond Characteristic Identification:
fig. 79, characteristic, source; (https://issuu.com/elizabethbdickey/docs/typebookv2), Week 7 (08/10/2021)
  • Evokes airiness, elegance
  • Soft, elegant, rounded
  • Low contrast
  • "a" sharp hook upwards, top left, "e" has small eye
  • Diagonal axis
  • Oblique apexes
  • Aperture and counter: smaller than average
  • Stem closed earlier
  • Lower x-height, look rounder and larger
  • Top serif has downward slopes, above the cap height
  • Cupped base
  • Legs stand away from the letter
Reference:
Dickey, Elizabeth. (2021). Anatomy of Type, Garamond Edition. issu.

Comments

Post a Comment

Popular posts from this blog

How to Create Jump Link

-
Image
What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code:  <span id="LIST"></span>  on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
Read more