Typography / Task 3A: Type Design and Communication

10.08.2021 - 10.28.2021 (Week 7 - Week 10)
Devina Angeline Wiratama / 0350824
Typography / Bachelor of Design (Hons) in Creative Media
Task 3A: Type Design and Communication

Jump Link

LECTURES

💁‍♀️: Lectures 1 to 4 completed in Task 1 - Exercise 1&2
and Lecture 5 to 6 completed in Task 2

1. Week 7 / 10.08.2021
At the beginning of class, Mr Vinod briefed us about Task 3 and a demo of how to construct a typeface using shapes and strokes. We need to do:
a. Do research about type design
b. Do sketches (approx. 5) with Different options (sans serif/serif, uppercase/lowercase).
c. Identify our sketches with the 10 typefaces (the closest) that have been provided.
d. Deconstruct 3 references

We need to deconstruct within the 10 typefaces. The purpose is to learn and observe the detail of those fonts, how's the thickness, indentation, etc. From this, we get more appreciation for the writers. It is not only a plain stroke.

Fig. 1.1 / Deconstructed, Week 7 (10.08.2021)

Identify our font design:
- Ascender line
- Cap line
- Mean/median line
- Baseline
- Descender line

Fig. 1.2 / Guidelines, Week 7 (10.08.2021)

Make sure when you digitalize
- The artboard 1000 pt x 1000 pt
- The x-height 500 pt.

- The descender line is always higher than the capital line.

Fig. 1.3 - 1.4 / Shapes or Strokes, Week 7 (10.08.2021)

When you digitalize, there are 2 ways to create typefaces. Using shapes and strokes. In (fig. 1.3 - 1.4), Mr Vinod creates using shapes. If used strokes, go to object > path > outline stroke in Adobe Illustrator. You can reuse the shapes to maintain consistency. To change into outline view, press Ctrl + Y.

2. Week 9 / 10.22.2021

To change the name of your font in FontLab 7 (64-bit)
File > Font info > Names
To adjust the size of ascender, x-height, descender, caps height
File > Font info > Family and Font dimensions
To copy-paste your font
First, make sure there are no strokes in your font. In AI, press Ctrl + R > take x & y coordinated and drag it near the letterform > Copy-paste to FontLab

Fig. 2.1 - 2.2 / No. 3 Copy-paste, Week 9 (10.22.2021)
Setting
Go to Edit > Preferences > Paste and Duplicate. Do the same thing like (fig. 2.3)

Fig. 2.3 / No. 4 Setting, Week 9 (10.22.2021)
Kerning
After copy-pasting, all of them, go to Window > Metrics Tab > Click Show Text Bar and Show Metrics Table (like in fig. 2.4, look at the cursor).

Fig. 2.4 / No. 5 Metrics, Week 9 (10.22.2021)

Before going through the FontLab, Mr Vinod remind us about:

Use the demo version and do according to what is on Mr Vinod's youtube (FontLab 7 video)
Poster A4, black and white
Must use all the letters that are provided (aimepytgdbo!.,)
Make sure the composition has the same font size
Do not have too much white space
If your typeface is very thin, you must compose it in a big size
Consider readability and impact (it's like celebrating and promoting your type)
Give typeface name, your full name, and the year (ex: Kezia Serif by Vinod J. Noir, 2021)

Fig. 2.5 / Poster References, Week 9 (10.22.2021)

INSTRUCTION

We will be designing a limited number of western alphabets.

To begin, choose an existing font design that adheres to the direction that you would like to head in. Study the font carefully by analysing its anatomical parts.
Start with rough sketches and upon approval begin digitization of the drawings—software for digitization shall be determined in class. Artworks shall be printed out for critique sessions followed by refinements. If time permits we shall generate the font for actual use.
You will endeavour to create a typeface that has the hallmarks of a good typeface; subtlety, character, presence, legibility and readability. Below are the letters you will design: a i m e p y t g d o b ! , .
Software: Adobe Illustrator and FontLab7 or 5???

#week8_202108 (Fri) Hi students, to ensure clarity in the deadline, the completed e-portfolio submission for Task 3(A) is on Oct. 28, 11:59PM.

What needs to be completed before next week's class (20th Oct)?

ALL your letters and punctuation in adobe illustrator placed on a baseline, with x-height, ascender, descender and cap lines visible (see attached image)
FontLab (5 preferable, if not 7) Demo (or *ahem*) downloaded
Note* check for consistency in strokes thickness, for character consistency and ensure to prioritise subtly over complexity. If you did not attend the one-hour ILW session (week 8 ), make sure to watch and listen to the feedback, explanations and demonstrations here: https://youtu.be/GMG9YeEeTtU and https://youtu.be/LCniYlJ0Xag
Also note* the bench-mark e-portfolio post in terms of research, progression, final output and overall documentation of the process for Task 3(A), is contained in Hsiao's post https://trxssah.blogspot.com/.../typography-task-3-type... — that said, different approaches in presentation is acceptable (you are all different), as long as the process consists of the major elements:
research (other typefaces, deconstruction 3 letters from 10)
exploration (sketches minimum 5, good variety)
digitization (document your progression)
FontLab progression
font generation and basic BW poster
Provide the link to download generated typeface

Fig. 2.6 / References from Lui Hsiao, Week 8 (10.15.2021)

TASK 3A

1. Research
As mentioned before in the lecture, we need to make the guidelines (Ascender, cap line, med line, baseline, and descender). I found this picture on the homepage of Typography's Facebook.

Fig. 3.1 / Glossary of Term, Week 7 (10.08.2021)

Second, these are my font references from the internet. One of my concepts is I want to make a simple font/ minimalist font from the circle or oval shapes.

Fig. 3.2 - 3.8 / Research, Week 7 (10.08.2021)

2. Sketches
Here are my sketches and exploration. I made them on Procreate.

Vid. 4.1 / Video Exploration, Week 7 (10.08.2021)

Fig. 4.9 - 4.11 / Sketches and the Guidelines, Week 7 (10.08.2021)

Personally, I like the second and the third of my sketches. Then in week 8 (independent week), I attended an unofficial typography class. Mr Vinod suggested I choose the second one. He said he was okay with that sketch. The second sketch is inspired by the crotchet note symbol (fig. ?.2)

3. Digitalize
For the digitalize, he told me to watch the Video Record Wednesday week 8. Since my ascender and descender are long, I need to adjust the x-height in the FontLab. But when I watch the Wednesday Lecture, Mr Vinod told one of the students to avoid it because it's complicated. Because of that, I decided to cut off the descender and the ascender so that can fit with the guidelines, not exceed the artboard. Before the digital work, here are my three deconstructing with Futura std light and Gill sans italic fonts.

Fig. 5.11 / Deconstructed "d" - Futura Std Light, Week 8 (10.15.2021)

Fig. 5.2 / Deconstructed "o" - Gill Sans Italic, Week 8 (10.15.2021)

Fig. 5.3 / Deconstructed "m" - Gill Sans Italic, Week 8 (10.15.2021)

I chose Futura Std Light and Gill Sans Italic because there are similar to both of them with my second sketches. Frankly, I'm surprised that Futura font is not that simple as I taught.
Here are my guidelines.

Fig. 5.4 / Guidelines, Week 8 (10.15.2021)

I use Gill Sans as my guidelines (fig. ?.15).

Fig. 5.5 - 5.7 / Strokes - Shapes - Unite, Week 8 (10.15.2021)

Here's the size of Gill Sans font as a guideline.

Fig. 5.8 / Size, Week 8 (10.15.2021)

- Ascender Line: 737 pt
- Capital Line: 733 pt
- Medium Line: 499 pt
- Baseline: 0 pt
- Descender Line: -246 pt

Here's my first take.

Fig. 5.9 / First Take, Week 8 (10.15.2021)

After receiving the feedback (week 9) from Mr Vinod, I change the "y" similar to "g" and also increase the size of the dots.

Here's my final design font AI

Fig. 5.10 / Final Take, Week 9 (10.22.2021)

4. Developing The Final Font in FontLab 7

After I finished the font in AI, I need to download the FontLab. I download the 7 one. Second, I named my font, adjust the ascender, descender, x-height, etc, and I adjust the setting of paste and duplicate. Next, I copy-paste that into FontLab referring to Mr Vinod Video.

Fig. 6.1 - 6.2 / Copy-Paste, Week 9 (10.22.2021)

Then, I did individual kerning and tried some sentences.

Fig. 6.3 - 6.5 / Kerning, Week 9 (10.22.2021)

After that, I export it and install it.

5. Poster Progression

Next, I tried to make some posters. The sentences are "I am, a type god. obey me!" and "aiyo! a mad boy ate a pie. at a big bay." with my font, Devina's Font - Regular, 2021. Here is the process.

Fig. 7.1 / Evidence of progress, Week 9 (10.22.2021)

Next, here are my seven posters.

Fig. 7.2 - 7.8 / Posters, Week 9 (10.22.2021)

I think I'll choose the fourth (fig 7.5).

6. Final Task 3A: Type Design and Communication

Font Download:

https://drive.google.com/drive/folders/1Ej8VBHxX4_KmwTDzFMBf3Xlos368z7wM?usp=sharing

Final in JPG

Fig. 8.1 / Font Final Task 3A in JPG, Week 9 (10.22.2021)

Fig. 8.2 / Poster Final Task 3A in JPG, Week 9 (10.22.2021)

Final in PDF

Check this out! ^^

(Source: Preview & Type Your Font)

ini

FEEDBACK

Week 8 / 10.15.2021 (Independent Learning Week)

Exercise:
General Feedback:
Make sure before sketching, draw the guidelines first.
Specific Feedback:
May choose the third one. Your font has a long descender and ascender might be you need to reduce the size and adjust the x-height in FontLab later on.

Week 9 / 10.22.2021

Exercise:
General Feedback:
Make sure there is consistency. Can download the FontLab. Good to take the references, draw the guidelines
Specific Feedback:
The dots need to be bigger. Change the "y" into like "g". The tail of "t" needs to be shorter.

Week 10: Submission / 10.29.2021

Exercise:
Very good documentation of progress. Detail orientated. Good consistent and down-to-earth typeface. The poster can/should be improved further to do justice to the typeface. Good!
E-Blog:
Good Progress! Nice work!

REFLECTION

Experience
Of all the typography assignments I've ever done, this 3A task is my favourite. Besides being faster and easier to work with, we are also given creative freedom to make our own fonts. And the most satisfying part is when the font has been exported from FontLab and used on other platforms or software. It's like, "I do this?". It's really fascinating

Observations
Before I got this assignment, I always thought that round fonts like Futura, etc. must be perfect circles. But I was wrong, I observed how a simple-looking font is not that simple, a circular one is not that round. I'm grateful to have really observed the fonts.

Findings
Once again, I find that already created fonts are not that simple. It takes a lot of time, effort, and precision when make it. I've also just discovered that most rounded fonts have a slight overshoot and that most of the lines of the cap are shorter than the ascenders. It made me appreciate the author (font builder) more. This assignment is interesting.

FURTHER READING

Fig. 9.1 / Typographic Design: Form and Communication 2015 Book, Week 9 (10.22.2021) - Source: Facebook

Based on one of the requirements of this typography blog, I did some further reading with the book "Typographic Design: Form and Communication (2015)" by Wiley, which Mr Vinod recommended.

Reference:

Carter, R., Day, B., Meggs, P. B., Maxa, S., & Sanders, M.

(2015). Typographic design: Form and communication.

Hoboken, New Jersey: John Wiley & Sons, Inc.

The parts of letterforms

Over the centuries, a nomenclature has evolved that identifies the various components of individual letterforms. By learning this vocabulary, designers and typographers can develop a greater understanding of and sensitivity to the visual harmony and complexity of the alphabet. In medieval times, horizontal guidelines were drawn to contain and align each line of lettering. Today, letterforms and their parts are drawn on imaginary guidelines to bring uniformity to typography. All characters align optically on the baseline. The body height of lowercase characters aligns optically at the x-height, and the tops of capitals align optically along the cap line. To achieve precise alignments, the typeface designer makes optical adjustments.

Fig. 9.2 - 9.3 / Guidelines, Week 9 (10.22.2021)

Proportions of the letterform

The proportions of the individual letterform are an important consideration in typography. Four major variables control letterform proportion and have a considerable impact upon the visual appearance of a typeface: the ratio of letterform height to stroke width; the variation between the thickest and thinnest strokes of the letterform; the width of the letters; and the relationship of the x-height to the height of capitals, ascenders, and descenders.

Stroke-to-height ratio.

The roman letterform, above, has the stroke-width-tocapital-height proportion found on Roman inscriptions. Superimposition on a grid demonstrates that the height of the letter is ten times the stroke width. In the adjacent rectangles, the centre letter is reduced to one-half the normal stroke width, and the letter on the right has its stroke width expanded to twice the normal width. In both cases, a pronounced change in the weight and appearance of the letterform occurs.

The contrast in stroke weight.

A change in the contrast between thick and thin strokes can alter the optical qualities of letterforms. The series of O’s, shown with the date of each specimen demonstrates how the development of technology and printing has enabled typeface designers to make thinner strokes. In the Old Style typography of the Renaissance, designers attempted to capture some of the visual properties of pen writing. Since the writing pens of the period had a flat edge, they created thick and thin strokes. Stress is the term used to define this thickening of the strokes, which is particularly pronounced on curves. Note how the placement of weight within the Old Style O creates a diagonal axis. As time has passed, type designers have been less influenced by writing. In many of the earliest sans serif typefaces, stress disappeared completely. Some of these typefaces have a monoline stroke that is completely even in weight.

Expanded and condensed styles.
The design qualities of a typographic font change dramatically when the widths of the letterforms are expanded or condensed. The word proportion, set in two sans serif typefaces, demonstrates extreme expansion and condensation. In the top example, set in Aurora Condensed, the stroke-to-height ratio is 1 to 9. In the bottom example, set in Information, the stroke-toheight ratio is 1 to 2. Although both words are exactly the same height, the condensed typeface takes up far less area on the page.

x-height and proportion.
The proportional relationship between the x-height and capital, ascender, and descender heights influences the optical qualities of typography in a significant way. The same characters are set in 72-point type using three typefaces with widely varying x-heights

Fig. 9.4 / Proportion, Week 9 (10.22.2021)

Jump Link

Devina Angeline Wiratama (0350824)

Search This Blog

Typography / Task 3A: Type Design and Communication

Comments

Post a Comment