Typography Task 3/ Type Design & Communication

11 November 2024- 2 December 2024/ Week 8-11

Chika Clarissa Widjaja / 0378636

Typography / Bachelors Of Design (Creative Media) / Taylor's University

Task 3 (Type Design & Communication)

---

TABLE OF CONTENTS

1. LECTURES
2. INSTRUCTIONS
3. REFLECTIONS
4. FEEBACK
5. FURTHER READING

---

LECTURES

---

INSTRUCTIONS

TASK 3: TYPE DESIGN & COMMUNICATION

Observation

Figure 2.1 Letter h, o, observed (8/11/24)

Figure 2.2 Letter g, b, observed (8/11/24)

Font: Bembo Std Regular

h= The h has a nice, smooth curve going into the upright line, which makes it feel kind of soft and balanced. The top part of the upright line isn't just straight, it's a little thinner, which makes it look more delicate. The h is pretty open and has a sturdy look, but its still easy to read and not too harsh.

o= The O is almost a perfect circle, but its slightly thicker on the sides and a bit thinner on the top and bottom. This gives it a classic feel and makes it stands out as part of an old style font. Its a very round shape, which makes it recognizable.

g= The g is really unique because it has two parts. The top part is a small round shape that is from the letter O (is not centered), and the bottom has a loop that makes it look interesting and sort of fancy. The way the top and bottom are connected is smooth and there is a thinner line just like at the start of the loop that gives it a nice, elegant touch.

b=  The b has a rounded line that leads into the curved part, which is sort of like a teardrop shape. The top part of the bowl thins out a bit, which gives it a softer look. The thickness of the strokes changes slightly, so the letter feels balanced and has a timeless look that fits with the font.

Sketches and Ideation

First, I experimented with different brushes in class to create my own font by holding my hand in different angles for each style. 

Figure 2.3 Exploration (4/11/24)

Some were thick, thin, taller, more looser, than the others. I let my hand move by itself so I can choose the preferable font that I like.

Figure 2.4 Exploration (4/11/24)

After selecting which ones I like,  here are the results.

Figure 2.5  First Pen (4/11/24) 

Figure 2.6 Second Pen (4/11/24)

Figure 2.7 Third Pen (4/11/24)

Digitalization

After experimenting with different fonts, I figured this one would be the most suitable to digitalize as I think is the most aesthetically pleasing and not so hard to do. I also wrote the letters ' o, l, e, d, s, n, c, h, t, i, g" in my font for reference when digitalizing.

Figure 2.8 My own font (15/11/24)

After watching the tutorial Mr.Vinod gave, I start off by adding guide lines and making my font, keeping in mind to keep the elements the same size to have consistency.

Figure 2.9  Guidelines (15/11/24)

To make it even more similar with the sketch, I used the shape builder tool to minus some of the shapes, used the pen tool to round the inner edges, and rounded the outer edges.

.

Figure 2.10 Shapebuilder, rounding the edges (15/11/24)

Before rounding off the edges and adjusting:

Figure 2.11 Before Revision (15/11/24)

After rounding off the edges:

Figure 2.12 After Revision (15/11/24)

Figure 2.13  Outline (15/11/24)

After receiving feedback from Mr.Vinod to keep the lines consistent, and use the letter O as the main structure, I made some changes.

Figure 2.14 Final Typeface Design (19/11/24)

Figure 2.15 Outline Revised (18/11/24)

After realizing that the letters N, T, and H needed to be the same size as the letter D, I fixed them. I also adjusted the punctuation after watching the video provided by Mr. Vinod.  I used the guides to ensure the letters were evenly spaced and measured the ascender height, cap line, median line, baseline, and descender height. Finally, I combined the shapes together using pathfinder unite.

Figure 2.16 Final Typeface Design (27/11/24)

Inserting into Fontlab

On week 11, our task was to insert our typeface into fontlab. Before starting, I measured the typeface using the ruler tool. Below are the measurements.

• Ascender height: 727 pt
• Cap line: 690 pt
• Median Line: 503 pt
• Baseline: 0 pt
• Descender height: 214 pt

With these measurements, I then open fontlab and began inserting the measurements.

Figure 2.17 Name and Dimensions Measurements (2/12/24)

Next, I placed the typeface from adobe illustrator to font lab.

Figure 2.18 Inserting Typeface to Fontlab (2/12/24)

Finally i adjusted the kerning according to the chart that Mr. Vinod has given us.

Figure 2.19 Kerning Adjustment (2/12/24)

Poster 

This is the first composition I tried in Adobe Illustrator. Since the quote was about Christmas, my initial idea was to make it resemble a half Christmas tree. I made sure to include all the letters in one sentence.

Figure 2.20 First Poster Composition (9/12/24)

After receiving feedback from Mr. Vinod, I added the hashtag to symbolize a star on top of a Christmas tree and used the text-on-path tool to create confetti falling down, ensuring it did not appear behind the text to avoid clashing with the typeface and making it harder to read.

Figure 2.21 Making of Confetti (9/12/24)

The confettis look empty so I added effects using a full stop from my typeface and created a variety of sizes and rotation. I made sure to not include the effects behind the typeface so the readability of the typeface can be good.

Figure 2.22 Poster Design with and without Effects (9/12/24)

Submission

https://drive.google.com/file/d/1V0lQV8GMx5Md1XH-YQ7W8lq5mfnU35nb/view?usp=share_link

Final Poster PDF (16/12/24)

Final Poster JPEG (16/12/24)

Screenshot of my Progress (16/12/24)

Typeface Design PDF (16/12/24)

---

REFLECTIONS

Experience

Overall, I had quite an experience with this assignment. By observing fonts, I got to learn more about them. There’s so much more to fonts when you look closely. For example, I noticed the curves and details in fonts, and how each font differs upon closer inspection, even if they seem similar at first glance.One of the challenges I faced while observing fonts was putting my thoughts into words. I’ve always struggled to describe my feelings, and even now, writing this reflection is challenging. Creating my own font, however, was a lot of fun. I enjoyed experimenting with different styles and seeing the font come to life as I worked on it in Adobe Illustrator. The most challenging part was using the new software, FontLab. The tutorial provided by Mr. Vinod was outdated, which made it harder to follow, so I had to look it up myself on Youtube which didn't help either since mostly the videos were from 11 years ago. I solved this by experimenting myself in the software which took a lot of time. Another thing is I had to do a lot of fixing after first designing the font in Illustrator. For example, I struggled with maintaining consistency in my font and faced difficulties creating punctuation marks because the Instagram tutorial I followed was vague. Despite these challenges, this has been my favorite project. Now, I know how to bring my font to life and can create one in the future.

Observations

At first, I thought picking fonts was just about choosing something that looked nice. But when I started paying closer attention, I noticed the tiny details, like the curves and strokes—that make each font special. This made me realize that fonts, which seem alike at first, have subtle differences when you look closely. Not only that, I did a lot of observing to my own font to fix any mistakes. Whether it's crossing the X height, Cap line, etc. 

Findings

I found out from Mr.Vinod why the letter s is smaller at the top and bigger at the bottom. Its to keep it balanced, since there is a tissue in our brain that sees the top are bigger. How to remove achor point: press minus on keyboard, press shift on the anchor point u wanna delete, and press delete. Use pathfinder unite to merge all the shapes. Select all first, and delete the achor point. The more anchor point in ur work, the more difficult it is to duplicate. T should be lower not at the ascender height. T should not be too wide or else the counter space is too big. To know if the counter space is too big, add a square. I also found out how to make punctuations from the video Mr.Vinod gave. I got an introduction on how to use font lab and learned the basics such as how to move my font from Illustrator to the software, and how to generate the font to Illustrator. From making the confettis in my poster, I found out how to use the text on path tool.

---

FEEDBACK

Week 9

Specific feedback: What is this Miss? (Pointing to the letter d)  You are not a calligrapher, so make the letter O as a structure for the rest of the letters. Copy and paste the artboard and redo it.

General feedback: Important to retain your progress- prove u have done it, if something goes wrong here, you can always revert back to the previous stages. It needs to be consistent such as the vertical stroke and thickness.  Horizontal stroke need to be the same too. T should be lower not at the ascender height. T should not be too wide or else the counter space is too big. To know if the counter space is too big, add a square. Select both shape and command j to merge two objects. S is smaller at the top, bigger at the bottom. So it looks balanced. 

Week 10

Specific Feedback: H is too wide, d needs to be the same w n and h. T is too wide on the right and the top needs to be higher. Take a look at today's instructions and revise your punctuations because when you zoom out you can’t see them and can’t differentiate them. Other than that it looks okay.

Week 11

Specific Feedback: Mr.Vinod gave a demo to fix the punctuations by using a base from the letter t.

Week 12

Specific Feedback: Mr.Vinod said the composition already looks okay, but It can be better by putting a hashtag in the top as the star, and using my name as a confetti and using the text on path tool.

Week 13

Specific Feedback: I wasn't sure if we were allowed to use the full stop as snow, so I asked Mr.Vinod and he said it was allowed and good.

General Feedback: Make sure to include all the letters in the poster. However, you don't need to include all of the punctuation.

---

FURTHER READING

Punctuations

Tabular Figures

Tabular figures are great for keeping numbers lined up in vertical columns. This makes it easier to read tables or spreadsheets quickly.

Punctuation Essentials

• Fonts should have all the basic punctuation marks you need, like periods and question marks.
• They should also include different dashes: hyphen, en dash, and em dash.
• Always use proper quotation marks (curly quotes) instead of straight quotes.

Quotation Marks

• Curly Quotes (Smart Quotes): These look like filled-in 6s and 9s and are used for quoted text or dialogue.
• Straight Quotes (Dumb Quotes): These are plain vertical lines, and using them can make your typography look bad.
• Using improper quotation marks shows a lack of attention to detail and looks unprofessional.

Typography and System Design

• Good punctuation, like curly quotes and apostrophes, matches with other marks like commas and periods.
• Straight quotes don’t fit in well with this system.

Historical Context of Straight Quotes

• Straight quotes come from the typewriter days when saving keyboard space was important.
• They became common with old desktop publishing software and computer keyboards.
• Unless your software fixes it, typing quotation marks on a keyboard might still give you straight quotes by default.

Legibility vs. Readability

• Legibility: Text can be interpreted but doesn’t guarantee it’s enjoyable to read (like how tree bark is technically edible).
• Readability: Focuses on both the emotional appeal and ease of reading.

Readability’s Role in Design

• Poor typography can discourage readers, just like long text (TL;DR).
• Stephen Coles explains readability isn’t just about “Can you read it?” but “Do you want to read it?”

The Impact of Design Choices

• Bad design decisions can confuse readers or make them quit reading entirely.
• A poorly designed layout might drive readers to do something else, like check Facebook.

Keeping Readers Engaged

• A good design draws readers in and helps them stay focused.
• Thoughtful design enhances understanding and improves the reading experience.

Fixations and Eye Movements

• When we read, our eyes pause briefly in spots called fixations.
• During a fixation, only a few characters are clear, while the rest blur out.
• Our brains automatically piece these pauses together to make sense of the text.

How Letter Shapes Affect Reading

• The shapes of letters (and how they form words) make a big difference in how we read.
• If you cover the top half of letters, it’s super hard to read. But if you cover the bottom half, it’s not as bad.
• That’s because the top halves of letters carry more clues about what they are.

Word Shapes and Reading Faster

• As we read, we start to recognize word shapes without even thinking about it.
• This helps us read faster, especially when we’re used to seeing certain words.

Familiarity Helps

• The more you read in familiar styles, the better you get. Like Zuzana Licko said: “Readers read best what they read most.”

Typography on Screen vs. Print

• Screen typography is different because readers deal with two environments: the physical space (lighting, location) and the device itself.
• Readers might be outside in bright sunlight on their phone or in a dark room watching TV from a distance.

Challenges for Designers

• Designers can’t control things like lighting, screen brightness, or contrast on readers’ devices, which can be frustrating.
• Since we can’t fix every reader’s settings, we have to design typography that works well in all situations.

Adapting Typography

• The goal is to make typography sturdy and functional across different screen sizes, connections, and environments.
• The key is to focus on creating a good reading experience no matter the circumstances.

Typography and Communication

• Typography is about more than putting words on a screen—it’s how we communicate effectively.
• Just like a random mash of piano keys won’t create music, poorly designed typography won’t make a message clear.
• Designers should prioritize readers and use typography to enhance both the reading experience and the message being delivered.
• 
  

No Rules in Typography

• Typography has no strict rules—only principles, best practices, and methods that work most of the time.
• Learning typography is about finding the best choices for each situation.

The Ubiquity of Type

• We’re surrounded by type every day: signs, emails, websites, labels, and more.
• Despite its prevalence, bad typography still exists because good typography is challenging to achieve.

Why Typography Feels Overwhelming

• There are more typefaces than anyone could use in a lifetime, each with intricate details and thousands of glyphs.
• Other factors like size, spacing, color, and tone also affect how text is read and understood.

Good Typography is Subtle

• Good typography often goes unnoticed—it’s only noticed when it fails.
• Readers are more likely to notice bad typography if it disrupts their ability to understand the message.

Challenges of Screen Typography

• Designers face extra challenges on screens, like adapting to new devices, resolutions, and responsive web design.
• The digital environment adds complexity, especially with readers’ tendency to click away quickly.

Typography as Communication

• Creating websites involves communicating, whether you’re a designer, writer, or developer.
• Designers can draw from centuries of print design knowledge to improve web typography.

Typography’s Purpose

• At its core, typography is a tool for effective communication, not just a creative output.