Advanced Typography - Task 3 (Type Exploration and Application)

11/10/2023 - 29/11/2023 (Week 7  - Week 14)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Advanced Typography)
TASK 3 - Type Exploration and Application


LECTURES

Lecture notes 1-3 are here: Advanced Typography - Exercises
Lecture notes 4-5 are here: Advanced Typography - Task 2

WEEK 7 - Lecture 7 (11/10/2023)
At the start of the class, we shared our Instagram page where we posted our brand collaterals, posters, etc. After we each got feedback from Mr. Vinod, he gave us an hour to work on our page and correcting the layout of it. Lastly, Mr. Vinod ended the class by briefing us about task 3.

WEEK 8 - Lecture 8 (18/10/2023)
ILW - Had short meeting for feedback session on MS Teams.

WEEK 9 - Lecture 9 (25/10/2023)
We first uploaded our updated proposal onto the Facebook post. Then we were left to do our work in class while Mr. Vinod went to each student to check on our work and give feedback.

WEEK 10 - Lecture 10 (1/11/203)
As usual we uploaded our work progress onto a Facebook post. Then we did our work while Mr. Vinod went around to help each individual on their work by giving us feedback and helping us to correct our work as well.

WEEK 11 - Lecture 11 (8/11/203)
This week I started off by finalising my font and creating the punctuations and symbols. After I was done with that, I printed my font on a paper and gave Mr. Vinod for feedback. He said I had to redo my work and therefore I did with the help of his. I stayed back till nearly 8pm at night to complete my font.

WEEK 12 - Lecture 12 (15/11/203)
Focused on designing our font presentation.

WEEK 13 - Lecture 13 (22/11/203)
Focused on designing our font applications.

WEEK 14 - Lecture 14 (29/11/203)
Focused on completing e-portfolio.

INSTRUCTION

For this project students have to:
Create a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting your specialisation. End result: a complete generated font (.ttf) with applications.
or
Explore the use of an existing letterform in an area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions or combinations that may add value to the existing letterform / lettering. End result: a complete generated font (.ttf) with applications.
or
Experiment. For your idea to qualify as an experiment it must be novel and unique — working with material that might be 3- dimensional, digitally augmented, edible, unusual, typographic music video or fine art. End result: defined by student.

PROPOSAL:

(My final decision was to make a font for dyslexic people)

RESEARCH:
To get more knowledge on how dyslexic people can read better, I had a small interview with Ms. Umadevi who is a lecturer in the school of education department. I showed her my proposal and the few letters I've started to work on.
These were my takeaways:
Dyslexic people have problem with executive function, they are unable to distinguish one letter from another. (Example b&d or p&q).

Factors of a font that can help dyslexic people read better:
- Heavier bottom
- Curvature of letter can be thicker
- Proper Spacing
- Height of the letter should be minimal (Not too short or too long)
- Simple
- Wide
- Not too narrow

Suggestions from Ms. Umadevi on how to improve my current font:
Fig. 1.1 What I showed to Ms. Umadevi


- Heavier bottom
Fig. 1.2 Heavier Bottom

- Darken the right side of the letter (need not be equal)
Fig. 1.3 Darken the right side

- Thicken the curves
Fig. 1.4 Curvature

Fonts that dyslexic people usually use:
- Jill
- Helvetica
- Sans-serif


FONT PROGRESS:
Week 9:
After drawing some sketches for my proposal, I picked one of each letter from what I did. 
I first made the letters A B & C in illustrator. After playing around with the thickness and width of the letter, I started to use the same strokes to create other letters.

Fig. 2.1 The sketches I picked

Fig. 2.2 ABC created from sketch (25/10/2023)

Fig. 2.3 Creating other letters with width & strokes from ABC (25/10/2023)

Fig. 2.4 Confirmed on a few letters (25/10/2023)

After having the talk with Ms. Umadevi (School of Education Lecturer), I had to edit my fonts and rework on each of them. I also noticed that my letters were at the wrong lines of the grid, then proceeded to resize them.

Fig. 2.5 Resizing (29/10/2023)

Fig. 2.6 Uppercase letterforms progress (29/10/2023)


Fig. 2.7 Finished uppercase - Attempt 1 (31/10/2023)

Week 10:
After feedback from Mr. Vinod, I refined the letters by adding a heavier bottom.

Fig. 2.8 Refined Uppercase Letterforms - Attempt 2 (2/11/2023)

After being done with my uppercase letterforms, I did some sketches for my lowercase letterforms.
Fig. 2.9 Lowercase Letterform Sketches (3/11/2023)

I worked on the first few letters from my sketch and used those strokes to created the other letters.
Fig. 2.10 Lowercase Letterform Progress (4-6/11/2023)

Fig. 2.11 Finished Lowercase Letterforms (6/11/2023)

I then started to work on my numerals.
Fig. 2.12 Numerals Progress (7/11/2023)

Fig. 2.13 Finished Numerals (7/11/2023)

Week 11:
During class (Lecture 11), I started to work on my punctuations in class.
Fig. Punctuation Progress (7/11/2023)

Fig. 2.14 Finished Punctuations (8/11/2023)

After we were done with our work, Mr. Vinod asked us to print out our work and show it to him to get feedback.
Fig. 2.15 Font on printed paper (8/11/2023)

Unfortunately Mr. Vinod was not happy with my work, he said this couldn't work out. Therefore I was advised to redo my work and start over. Luckily with the guidance of Mr. Vinod, I was able to finish up my font in that day.

Suddenly, Mr. Vinod saw my curly braces and liked it. He then asked me to create a few letters first with this style.
Fig. 2.16 Curly Braces I created

NEW FONT - ATTEMPT 2:
Week 11:
Fig. 3.1 Creating a few letters first (8/11/2023)

After confirming the strokes to use, I started working on my letters.
Fig. 3.2 Uppercase Progress (8/11/2023)

Fig. 3.3 Lowercase Progress (8/11/2023)

Fig. 3.4 Numerals & Punctuations Progress (8/11/2023)

Final Letterforms:
After finishing up all the letterforms in class, I went home and refined them and then finalised them.
Fig. 3.5 Final Letterforms
FONTLAB:
I've had already used my free trial for FontLab on my current computer. Fortunately I have an old computer laying around, therefore I downloaded FontLab there and did my kernings there. It took me about 4 days to complete my bearings for each letter as there were many pairings to do.

I first started off with the uppercases:
\
Fig. 4.1 Kerning Uppercases (11/11/2023)

Then proceeded with my lowercases:
Fig. 4.2 Kerning Uppercases (12/11/2023)

Then my numbers:
Fig. 4.3 Kerning numbers (12/11/2023)

And lastly kerning every letter with every numeral and punctuation:
Fig. 4.4 Kerning letters and numerals & punctuations (13/11/2023)

FONT PRESENTATION:
This was my first draft/attempt on presenting my font. I was going for an orange black theme. It looked pretty boring and definitely wouldn't make the cut. Mr. Vinod gave me some pointers like asking me to not fit all the characters into one page and that I could separate them into different pages.
Attempt 1:
Fig. 5.1 Font Presentation Attempt 1 (14/11/2023)

Again, I kept the same theme (Orange & Black). However, Mr. Vinod said it wasn't really showing what I created this font for, which was for dyslexic people.
Attempt 2:
Fig. 5.2 Font Presentation Attempt 2 (15/11/2023)

Therefore I decided to make a theme suitable for children, so that this can be a learning font for them. I still went for the bright orange colour but used cream colour this time instead of black so that it's more welcoming for children. 

Attempt 3: (Part 1)
Mr. Vinod said the first one is too focused on the illustration instead of showcasing the font, so that wouldn't work. The 2nd one is ok, the 3rd one is ok but needs some adjustments. 4th one is somewhat messy and the last two doesn't really work.
Fig. 5.3 Font Presentation Attempt 3: (Part 1) (15/11/2023)

Attempt 3: (Part 2)
I switched up the first one and Mr. Vinod said it was ok. The second one was maintained, and I did some adjusted to the letters in the third one to make it look more like as if the letters were actually falling out of the book. I then re-attempted to design the numerals and punctuations one again. However, Mr. Vinod said once again the girl is becoming the main character instead of the letters. 
Fig. 5.4 Font Presentation Attempt 3: (Part 2) (16/11/2023)

Final Font Presentation:
Mr. Vinod suggested to use orange as a background for the numerals and punctuations to balance out all the presentations because I picked presentation 1-4. I didn't use any of the designs of the ones showcasing the sentences because I feel none of them were really good.
Fig. 5.5 Final Presentation

FONT APPLICATION:
Since my font is suitable for both adults and children, I decided to apply my fonts onto books. 

BOOK FOR ADULTS:
First, I showcased my font on a book. However, I totally forgot about the characters per line rule and put so many letters in one line. Therefore during class, Mr. Vinod showed me how I could improve my work.
Fig. 6.1 Attempt 1 - Book (21/11/2023)


This was the final outcome of the book:
Fig. 6.2 Final Adult Book (22/11/2023)

BOOK FOR CHILDREN:
I first made the cover for the book, however once again the illustrations were overpowering my book. Mr. Vinod then asked me to refer to Dick Bruna's books (the author and artist of Miffy). I then used that as reference, and scrapped off this idea.
Fig. 6.3 Children's Book - Attempt 1 (22/11/2023)

I found some cute illustrations on Pinterest and used the selection tool in photoshop cut it out. I tried to make it minimalistic and as simple as possible.
Fig. 6.4 Final Children's Book (23/11/2023)

FINAL SUBMISSION - TASK 3 FINAL PROJECT


Font Presentation:
Fig. 7.1 Font Presentation 1- JPG

Fig. 7.2 Font Presentation 2  - JPG

Fig. 7.3 Font Presentation 3 - JPG

Fig. 7.4 Font Presentation 4 - JPG

Fig. 7.5 Font Presentations - PDF


Font Application:
Fig. 7.6 Font Application 1 - JPG
Fig. 7.7 Font Application 2 - JPG

Fig. 7.8 Font Application 3 - JPG

Fig. 7.9 Font Application 4 - JPG


Fig. 7.10 Font Application - PDF


FEEDBACK

WEEK 9: 
General Feedback: Need to know more specifically what factors in fonts can help dyslexic people read better.
Specific Feedback: Can ask school of education lecturers who specialise in special needs to get some research. Font does not need to be "interesting" or "fancy" as the main goal for dyslexic people is to able to read more smoothly.

WEEK 10: 
General Feedback: Everything else ok.
Specific Feedback: By having a heavier bottom for each letter, can make the bottom part of the stroke thicker by editing it. Then use the same stroke for the rest of the letters.

WEEK 11: 
General Feedback: Some letters are not that readable.
Specific Feedback: 
Feedback 1: The G doesn't rly look like a G. The lines for some letters like E, F, Q are too thin.
Feedback 2: The letterforms don't work. Do again.
Feedback 3: Letterforms are ok now. But the thickness should be same for all the curves. Equal sign needs to have more space in between.

WEEK 12: (Font presentation)
General Feedback: Layout is not good.
Specific Feedback: It doesn't relate to why you created the font. The layout is too tight, can use more artboards, everything doesn't need to be put onto one page. Present it to the audience you were initially creating this font for.

WEEK 13: 
Font Presentation:
General Feedback: First 3 presentation are alright. Last 2 need some change.
Specific Feedback: The 4th one is a bit messy, the girl in the design is being the main thing instead of the fonts. Prefer the initial design. 
Font Application:
General Feedback: The layouts are not really working.
Specific Feedback: The front page looks like I'm not sure what to do with the placing. The characters per line are way too many, will be hard for people to read. 

WEEK 14: 
Font Presentation:
General Feedback: Use orange as a background for the numerals and punctuations to balance out all the presentations. 
Specific Feedback: Can add lines to the back to make it like a notebook.
Font Application:
General Feedback: All ok.

REFLECTION
Experience
Honestly speaking, I really struggled a lot during this assignment. It was really hard at first for me to squeeze out ideas. I wasn't sure what font I could create because I felt like there is already a font created for everything. It was pretty overwhelming at first because we had to create a whole set of fonts in a limited amount of time along with our other assignments, adding on I also had to redo my entire set of fonts mid way. Thankfully with my good time management and planning, I was able to do things at a good pace. Things were starting to come together. Mr. Vinod's feedback and guidance really helped me a lot as well. I honestly thank him for asking us to stay back if we don't finish our work, this way I could constantly ask for feedback and not have to worry about the work anymore at home. I personally enjoyed the font application part especially creating the children book. I actually found some fun and interest in designing it because it was so cute. Overall, this task 3's journey had lots of ups and downs, but I'm so glad that I was able to pull through all of it. 

Observations
I noticed that fonts have to be very consistent. The thickness of each letter should be the same, if one is thicker than the other then the letters will look off and unbalanced. Also, it can be easy to make a set of letters once you get the hang of it. Just by creating a few letters, you can use those strokes to create the other letters as well and finish a whole set of letters. I also noticed sometimes that simple is best, when creating a font I tend to complicate things wanting it to look fancier and more unique. However, now I notice that not everything has to be fancy, simple is best.

Findings
I find myself appreciating fonts much much much more now. In the past, I thought fonts were something easy to design. But no, there is so much more to it. From planning, to sketching, to making it and kerning it. It really takes up a lot of time and effort when creating a set of letterforms.

FURTHER READING

The Complete Manual of Typography, Second Edition by James Felici
Fig. 8.1 The Complete Manual of Typography

Chapter 1 - The state of the art and how we got here

The Building Blocks of Type:
The basic idea of movable type is that every letter of the alphabet, every punctuation mark, and every numeral and symbol is molded in high relief on its own metal block. These blocks are set in rows to form lines of text, and the raised shapes of the letters get inked and pressed onto paper. Credit for inventing movable type probably belongs to the Koreans, who, centuries before Gutenberg, were printing with reusable type blocks made from ceramic. 

Gutenberg’s genius was to work the concept into a complete typesetting and printing system (combining a press design borrowed from winemakers with metal-casting techniques borrowed from jewelers). The fundamental element was standardizing the dimensions and manufacture of those little printing blocks (Figure 8.2).
Fig. 8.2
Gutenberg’s system of movable type was based on the casting of each character on its own metal block. The widths of the blocks varied to accommodate each character. Word spaces were created with shorter blocks that didn’t come up to the level at which the blocks were inked.

Bounding Boxes & Spaces:
Within a computerized typesetting system, every character and symbol is conceived of as existing in a box whose dimensions are analogous to the surface of those old metal printing blocks (Figure 8.3). 
Just as in Gutenberg’s day, this bounding box defines the space each letter takes up on a printed page. The space between the character image itself and the edge of the bounding box—called the side bearing—defines how far that character’s image will be from the image of a character set next to it.
Fig. 8.3
Seen from inside a font editing program, character outlines appear in individual bounding boxes. The points along the outlines indicate where curves with differing shapes and straight line segments meet.

The big difference between metal type and digital type, of course, is that bounding boxes—being virtual boundaries, not physical ones like the edges of a piece of metal type—can now be manipulated so that they overlap (Figure 8.4). Typesetters in the digital age can position every character with infinite freedom and control.
Fig. 8.4

Chapter 8 - What makes good type good (and bad type bad)

Legibility & Readability:
When most people look at a page, they don’t see typefaces and they don’t see type. They see words. They’re not admiring the page—they’re reading it, and reading is all about rhythm. Bad typesetting can stymie a reader almost as much as bad writing. 

Legibility and readability are commonly used words in the world of type. Legibility refers to a reader’s ability to easily recognize letterforms and the word forms built from them. 

Readability refers to the facility and comfort with which text can be comprehended. Text with good readability must also be legible, but mere legibility doesn’t make text readable.


Overly Tight Spacing:
Tight spacing interferes with the reader’s ability to recognize word forms. Readers who have to do a double take to recognize a word or phrase are at once slowed down and annoyed. 
More generally, in tightly spaced text, character-sequence patterns that are usually easy to recognize become unfamiliar, and readers are forced back toward reading letter by letter, as if in a foreign language (see Figure 8.5).

Fig. 8.5
Tight spacing can make familiar letter patterns seem ambiguous. When seen at text sizes and normal reading speeds, letter combinations such as these can be hard to make out, forcing the reader to do a double take.


Comments