Week 7 – Week 13 | 10/11/23 – 21/12/23
Emily Soh Ching-Ling | 0359478
Emily Soh Ching-Ling | 0359478
Bachelor of Design (Honours) in Creative Media
Typography | Section 02 | GCD60104
Task 3 — Type Design & Communication
TABLE OF CONTENTS
1.0 LECTURES
1.1 WEEK 7 — TASK 3 BRIEFING
WHAT TO DO:
- Step 1: Choose a typeface and font from the 10 given fonts.
- Step 2: Analyse and dissect the letters "H o g b" (you can analyse more if you want).
- Step 3: Sketch the letters "O D H N G" / "o d h n g" using three marker pens.
- Explore three different writing styles for each pen.
- Total nine different writing styles.
MATERIALS NEEDED:
- Graft paper.
- Three marker pens (must be ≥ 3.0).
1.2 WEEK 9 — TYPEFACE CONSTRUCTION (STROKES & BRUSH)
.png) |
| Figure 1.2-1: Anatomy of A Typeface |
TOOLS TO CONSTRUCT TYPEFACES:
- Shape Tool.
- Pen Tool (strokes).
ILLUSTRATOR SHORTCUTS:
- Ctrl + y: Show strokes without line weight.
HOW TO CONSTRUCT TYPEFACES:
- Step 1: Construct the overall structure using Pen Tool.
- Step 2: Convert the strokes into shapes. Object > Path > Outline Stroke.
- Step 3: Adjust the width / thickness of the strokes.
- How to Change Brush Characteristics: Brushes > New Brush.
- Step 4: Merge the shapes. Pathfinder > Unite.
- How to Create Ragged Edges: Select a brush > Draw minor imperfections on the letterform's edges > Select the imperfection > Step 2–4 > Select letterform & imperfection > Pathfinder > Minus Front.
- *Keep three artboards for each letter, one for strokes, one for shapes, and one for united shapes.
1.3 WEEK 10 — ILLUSTRATOR TO FONTLAB
- Use FontLab 7, not 8.
- Copy and paste your Illustrator letter into FontLab.
- Click Turn Off Round when Editing / Keep.
- DO NOT click Round.
- FontLab 7 > Preferences > Import original position ☑.
- Window > New Metrics Tab > Show Text Bar > Show Metrics Table.
1.4 WEEK 11 — POSTER BRIEFING
Poster Briefing:
- A4 poster.
- Black and white only.
- Font size must be consistent.
- Type out a sentence using "o l e d s n c h t i g , . ! #".
- All letters designed must be present in the poster.
- Typeface name, your name, the year.
- Univers Roman, 8 pt.
2.0 INSTRUCTIONS
3.0 TASK 3 — TYPE DESIGN & COMMUNICATION
Instructions: You are tasked to design a limited set of Western alphabets.
- Analyse the anatomical parts of the letters "H o g b" in one of the 10 fonts.
- Explore the characters "O D H N G" / "o d h n g" in nine different writing styles using three pens (three each).
- Create your own font consisting of the letters: "o l e d s n c h t i g , . ! #".
- Create a basic A4-sized poster showcasing your font.
- All letters must be shown.
3.1 RESEARCH, ANALYSIS & SKETCHES
3.1.1 RESEARCH
I'm a big fan of old-timey, retro fonts, regardless of whether they're serif or sans-serif, so I started my research in that direction.
Many serif fonts from that era have swashes and finíals in their anatomy, giving them a bubbly, playful look. They also have thicker stems. I think I'll exaggerate the swashes, finíals, and stems more in my font to make it over-the-top and chunky-looking (Are these famous last words? We'll find out soon). Another common occurrence in retro fonts is the longer bowls and higher cross bars.
.png) |
| Figure 3.1.1-1: Research References, Week 8 (14/11/23) |
3.1.2 ANALYSIS
ITC Garamond Std was the most retro-looking font out of the bunch, so that's what I chose. High-key regret dissecting it but it's done now.💀 -100/10 would not recommend.
TAKEAWAYS:
- Stem width of uppercase letters is slightly wider than lowercase letters.
- The stem of "H" is not a perfect rectangle, it is slightly indented on all sides.
- Stress on "o" is slightly slanted, however, stress on "g" is not.
- "g" is linked.
- Many, many minor adjustments to the individual letters...
.png) |
| Figure 3.1.2-1: ITC Garamond Std Ultra Deconstruction, Week 8 (15/11/23) |
3.1.3 SKETCHES
Here I've got a #1 flat nib marker, #2 ultra-wide flat nib marker, and #3 brush nib pen. I started with some warm-ups before getting into the real thing (I have limited graph paper lol).
.png) |
| Figure 3.1.3-1: Markers I Will Be Using, Week 8 (16/11/23) |
I thought #1 and #2 would be easier to write in but the angle of the nib makes the ink inconsistent. Maybe because it was meant to be held like a whiteboard marker? #3 was much easier to write with, and I can get a variety of stroke widths with the flexible nib.
.jpg) |
| Figure 3.1.3-2: Warm-ups, Week 8 (16/11/23) |
I kept in mind the things I've learned during research and font dissection when sketching. Unfortunately adding flourishes was a little hard due to the wideness of the marker nib, so I tried to implement other characteristics of retro fonts, such as the thick strokes and serifs of Sketch #5 (Figure E8.5). My favourites are: #2, #8, and #9.
.jpg) |
| Figure 3.1.3.3: Sketches, Week 8 (16/11/23) |
I went ahead with Sketch #9 for my final design, which I decided was my favourite (and the most visually interesting). One of the key differences is that I thickened the strokes of the letterforms and made them more bottom-heavy. This made them look balloon-like and psychedelic.
 |
| Figure 3.1.3-4: Refined Sketch #9, Week 8 (17/11/23) |
3.2 DIGITISATION
I tried creating my typeface using the Brush Tool since I thought the option to have varying line weights would speed up the digitisation process, but I didn't like how it ended up looking (harder to control + get smooth lines), so I stuck with using the Pen Tool.
 |
| Figure 3.2-1: Stroke / Outline (Before Feedback), Week 9 (23/11/23) |
 |
| Figure 3.2-2: Shapes (Before Feedback), Week 9 (23/11/23) |
Most of my letters are some combination of or derived from the shapes in Figure 3.2-3.
 |
| Figure 3.2-3: Frequently Used Shapes, Week 9 (23/11/23) |
3.3 FINETUNING
Based on Mr Vinod's feedback, I need to make changes to "!" and "#".
- "!" — I figured my "!" looked more like an inverted "i" rather than an exclamation mark, so I made the bottom more tapered.
- "#" — Looking at other typefaces similar to mine, many keep their hashtags fairly simple and standard-looking.
- "," — I found out that commas should be around twice the height of a period through this video, so I extended the tail of my "," to make it more obvious.
.png) |
| Figure 3.3-1: ", ! #" (Before & After), Week 11 (08/12/23) |
I also removed extra anchor points to make the shapes look smoother.
 |
| Figure 3.3-2: After Removing Excess Anchor Points, Week 11 (08/12/23) |
3.4 FONTLAB
 |
| Figure 3.4-1: Imported Letters in FontLab, Week 11 (08/12/23) |
Since my letters have the same width and similar outline, I kept the side bearings pretty much the same.
.png) |
| Figure 3.4-2: Side Bearings (Before & After), Week 11 (09/12/23) |
 |
| Figure 3.4-3: Sentence Kerning, Week 11 (09/12/23) |
3.5 POSTER DESIGN
I wanted the name of my typeface to show its personality and characteristics, so I went down a rabbit hole of word synonyms until I created one that liked: Bulbous Roots.
It's weird, it's unconventional, and it gave me whiplash when I read it aloud. Bulbous because it's fat and round, roots because it looks like tubers and teeth roots.
 |
| Figure 3.5-1: Poster Mock-Ups, Week 12 (15/12/23) |
Posters #1 and #5–8 look a bit boring and empty, but the triangular shape of the text reminds me of an hourglass, so that's how I got Posters #2–4.
I chose Poster #2 for my final submission, with minor additions such as lines and font size.
3.6 FINAL SUBMISSION
Download Bulbous Roots here. |
| Figure 3.6-1: FontLab Screenshot (Final Submission), Week 12 (15/12/23) |
.png) |
| Figure 3.6-2: Type Construction (Final Submission) — JPEG, Week 12 (15/12/23) |
Figure 3.6-3: Type Construction (Final Submission) — JPEG, Week 12 (15/12/23)
.png) |
| Figure 3.6-4: Poster (Final Submission) — JPEG, Week 12 (15/12/23) |
Figure 3.6-5: Poster (Final Submission) — PDF, Week 12 (15/12/23)
Figure 3.6-6: Font Tester, Week 12 (15/12/23)
4.0 FEEDBACK
4.1 WEEK 9
General Feedback:
- Create only uppercase or lowercase letters for the final submission.
- The fewer the anchor points of the font, the smoother the stroke.
- Consistency of the shape and structure of the font is key.
4.2 WEEK 10
Specific Feedback:
- "!" and "#" need work.
- The rest of the letters: Good job.
General Feedback:
- Consistency (in style, in width) is very important.
- Certain shapes can be repeated to maintain consistency throughout letterforms.
- "!" must be tapered at the end, or it will be mistaken as an inverted "i".
4.3 WEEK 11
General Feedback:
- Keep the angle and thickness / thinness of the stroke consistent.
4.4 WEEK 12
Specific Feedback:
- No problems here.
5.0 REFLECTION
5.1 EXPERIENCE
I had a great time doing this project. Watching your own typeface come to life is so unbelievably satisfying. The best part was typing it out in FontLab and coming up with phrases for the poster.
I thought this project would be stressful since we had to individually design each letter (which seems like a lot), but it came together relatively quickly and was really fun. 9/10 experience.
5.2 OBSERVATIONS
I realised that I struggle with making smooth lines using the Brush Tool in Illustrator, whereas my lines in Procreate are fine. This could be a mouse VS pen proficiency thing. I know that there is a smoothing option for the Brush Tool, so maybe I could try that out and see if there's any improvement.
5.3 FINDINGS
Designing a typeface is much more nuanced than it seems. Minor details can make or break a font. It takes a sharp eye to take into account what makes a good font, such as readability and consistency.
6.0 FURTHER READING
6.1 WEEK 7–13 — TYPOGRAPHIC DESIGN: FORM AND COMMUNICATION, 6TH EDITION |
| Figure 6.1-1: Typographic Design: Form and Communication, 6th Edition by Carter et al. |
Reference: Carter, R., Meggs, P., Day, B., Maxa, S., & Sanders, M. (2014, October 2). Typographic Design: Form and Communication, 6th Edition. John Wiley & Sons.
Comments
Post a Comment