Advance Typography - Task 3 : Type Exploration and Application
Ting Wen Yi / 0361799
Advanced Typography/Bachelor of Design (Hons) in Creative Media
Task 3/Type Exploration and Application
CONTENT / LINK
1. Lectures
2. Instructions
3. Task 3
4. Feedbacks
5. Reflections
LECTURES
All lectures 1 to 5 completed in Task 1 - Exercise 1 & 2
INSTRCTIONS
Task 3: Type Exploration and Application
In Task 3, our objective is to create a font that addresses a specific problem or adds value to a chosen field, whether it be graphic design, animation, or any related area. We'll start with thorough research and analysis, identifying weaknesses and areas for improvement in typography within the domain. Then, we'll develop a concept and design the font, keeping the practical applications in mind. For those who opt to work with an existing letterform, improvements and creative combinations will be the focus. If the project is experimental, it should result in a truly unique and tangible output. The ultimate goal is to produce a complete .ttf font with real-world applications.
1. Proposed Ideas
| Figure 1.1.1 Proposal Ideas - Week 8 (17/10/2023) |
I have proposed three ideas for the task 3 assignment:
- Basket Weave Designs
- Fonts with tall and thin appearance
- Fonts with half bold and half thin
Idea 1
My first idea is to create a distinctive "Basket Weave Font" that integrates the intricate patterns and textures of traditional basket weaving into letterforms. This font will offer a unique visual and tactile experience, presenting an innovative approach to typography that can be applied in design, branding, and artistic contexts, adding character and texture to various projects.
Idea 2
I thought about creating a font that is tall but not excessively thin and presenting it in a more creative manner. This font can be presented in a creative and unconventional manner, potentially exploring how its height and design elements can evoke a sense of modernity, elegance, or uniqueness.
Idea 3
My third idea is combination of both bold and thin aspects within the same characters. The font's dynamic duality could be used to emphasize and differentiate key information within text, making it a valuable addition to design projects seeking a bold yet elegant style.
Week 8
| Figure 1.1.2 Proposal Ideas 2 - Week 8 (19/10/2023) |
I have selected problem 1 as my purpose to create the typeface.
Reference
 |
| Figure 1.1.3 Dry Brush- Week 8 (19/10/2023) |
 | ||
|
2. Creating the Brush
Figure 1.2.1 Brush Adjustment - Week 9 (25/10/2023)
To achieve the effect of creating a horror font style, I decided to design my own font in Procreate. I've been using Procreate for quite some time, so I'm quite familiar with how it works. While I'm aware of the many brushes available to create the brush strokes I want, I wanted to make something special and create the font almost from scratch.
 |
| Figure 1.2.2 Shape Setting - Week 9 (25/10/2023) |
 |
| Figure 1.2.3 Shape Pattern - Week 9 (25/10/2023) |
I began by creating a new font using the default brush. Then, I adjusted the brush settings to achieve a dry brush effect. To do this, I drew shape patterns and imported them into the Procreate settings under "shape."
 |
| Figure 1.2.4 Grain Setting - Week 9 (25/10/2023) |
 |
| Figure 1.2.5 Grain Pattern - Week 9 (25/10/2023) |
Additionally, I created a grain pattern for the brush.
I didn't achieve the perfect brush in just one attempt. I made several attempts, adjusting the settings and redoing the patterns. After experimenting with different combinations, I ended up with multiple brushes. In the end, I found the perfect fit for my horror font by combining elements from two different brushes. The fusion of these brushes yielded a unique, dry, ink-like texture. It was a process of experimentation and learning, and I valued every step of it.
 |
| Figure 1.2.7 All Brushes in Writing - Week 9 (25/10/2023) |
 |
| Figure 1.2.8 Brush Strokes - Week 9 (26/10/2023) |
I drew some brush strokes for later use. I also provided a brush download so that others can test it out in Procreate.
Brush Download Link (Procreate) : Click Here!
3. Ideas and Sketches
 |
| Figure 1.3.1 Brush 4 - Week 9 (26/10/2023) |
 |
| Figure 1.3.2 Brush 5 - Week 9 (26/10/2023) |
I handwrote each of the lowercase letters from 'a' to 'z' using brush 4 & 5. This step allowed me to create a custom font or lettering style that perfectly aligns with the horror theme I aimed to make in my project.
Figure 1.3.3 Sketches - Week 9 (26/10/2023)
While I was writing these letters, I decided to approach it in a similar way to the typography task we did in task 3. I used brush 4 to write both the lowercase and uppercase letters and then selected the best versions.
4. Digitize
 |
| Figure 1.4.1 Image Trace Brush Strokes in AI - Week 9 (26/10/2023) |
To achieve the dry brush effect, I imported the strokes as an image into Illustrator, refer to Figure 1.2.8. Then, I used image trace on the picture and imported it as an art brush in Illustrator.
 |
| Figure 1.4.2 Brush Strokes Test Out- Week 9 (26/10/2023) |
I tested the brush and made adjustments to its shape and width.
 |
| Figure 1.4.3 Pen Tool - Week 9 (26/10/2023) |
Before applying the art brush, I used the pen tool to draw the line.
 |
| Figure 1.4.4 All Brush Strokes in AI - Week 9 (26/10/2023) |
When I align my line perfectly with the guidelines and apply the brush, it extends beyond the guidelines. Therefore, for some letters, I make the lines smaller to ensure they stay within the intended guidelines.
 |
| Figure 1.5.1 Outline View - Week 9 (26/10/2023) |
Problem Faced
 |
| Figure 1.4.6 Letter G - Week 9 (26/10/2023) |
 |
| Figure 1.4.6 Letter L&M - Week 9 (26/10/2023) |
It also happens with the letters L and M. So, when I use the same vector line for the entire letter, the turning points look like distorted brush strokes and appear squeezed.
 |
| Figure 1.4.7 Problem Solved - Week 9 (26/10/2023) |
Therefore, to solve this, I use only straight lines. For 'L', I use two straight lines, and for 'M', I use four. This approach ensures that the brush strokes' distortion and squeezing at turning points are minimized.
Week 10
 |
| Figure 1.4.8 All Brush Strokes in AI - Week 10 (30/10/2023) Figure 1.4.8 showcases all the brushes I have created, customized for short strokes, long strokes, and some designed for a thinner end side. |
 |
| Figure 1.4.9 Design 1 - Week 10 (30/10/2023) For my first design, I studied and drew inspiration from existing fonts, using their lines as a reference point. I aim for the font's ergonomics to be perfect. |
 |
| Figure 1.4.10 Design 2 - Week 10 (30/10/2023) |
For my second design, I aim to create a more handwritten style, departing from the rigidity of the first design. I make the lines slightly slanted and less uniform.
 |
| Figure 1.4.11 Design 3 - Week 10 (30/10/2023) |
I intend to develop Design 3 to reflect a handwriting style similar to how a 'ghost' or spirit, especially in a horror-themed font, might write on a wall. To achieve this, I am applying a slanted, italicized appearance to the text, avoiding rigid lines, and adding more fluidity to the strokes to create an eerie, spectral effect.
 |
| Figure 1.4.12 All Letters & Punctuations - Week 10 (30/10/2023) |
 |
| Figure 1.4.13 Outline - Week 10 (30/10/2023) |
 |
| Figure 1.4.14 Unite Element - Week 10 (30/10/2023) |
Mr. Vinod advised me to unite the shapes of the letters in my font, as the font file is currently invalid. It's possible that the issue stems from the letters being too heavy or complex.
5. Into the FontLab
 |
| Figure 1.5.1 Importing to FontLab - Week 11 (6/11/2023) |
After completing the design process for my typeface, I expanded the appearance to convert it into a shape instead of a single line. Then, I imported the shape into FontLab. However, due to the numerous vectors within the shape, the software becomes laggy each time I import a letter.
 |
| Figure 1.5.1 Importing to FontLab - Week 11 (6/11/2023) |
When importing my fonts, I had to manually adjust the height and width myself. This was necessary because all of my fonts didn't align properly along the desired axis, as I created several artboards in my Illustrator. Most of the uppercase letters extend beyond the cap height because the horror/dry brush effect causes a slight frayed brush appearance.
 |
| Figure 1.5.3 Kerning FontLab - Week 11 (8/11/2023) |
I referenced the kerning and side bearings from the provided picture by Mr. Vinod, but for some characters, I used my own measurements. I aimed to maintain a consistent gap between each letter. Regarding the letter 'j,' I adjusted its side bearing to be smaller because the hook of the 'j' extends too far. If I were to keep the side bearing the same as 'n' (which is in the reference), it wouldn't appear visually consistent. Additionally, I attempted to position the uppercase letters next to 'j' and various other letters to remain the consistency.
 |
| Figure 1.5.4 Kerning Punctuations - Week 11 (8/11/2023) |
I've also adjusted the kerning for the punctuation marks. I placed them next to the letter 'j' to visualize how the spacing appears when the punctuations are alongside the letters. This allows me to better see how the overall spacing looks and ensure consistency between the punctuation marks and the letters.
6. Naming My Typeface
DarkHaunt
I name my font as "DarkHaunt" because it fits the font's purpose well. The font is made for creating scary and dark designs, especially for spooky and mysterious themes like conjuring. The name was chosen to show that it's all about creating a scary and eerie feeling.
Download DarkHaunt Font: Click Here!
7. Type Presentation
 |
| Figure 1.6.1 First Attempt - Week 11 (12/11/2023) |
I'm experimenting with type application, envisioning how horror fonts might be presented. I've chosen a red color scheme and incorporated blood elements. I've created a spooky font design using red and blood elements. The first poster has a mirror effect with a creepy handprint in the background for added suspense.
 |
| Figure 1.6.2 Second Attempt - Week 12 (15/11/2023) |
Mr. Vinod suggested avoiding using pure black for my poster. Instead, opt for an off-white tone with a hint of grey. If considering the use of black, incorporate it with texture to enhance depth. I have updated the pages featuring text, punctuation, and numbers to a greyish-white background. Additionally, I've added a wall-like texture and 3D drops of blood.
 |
| Figure 1.6.3 Type Presentation Progress - Week 12 (15/11/2023) |
I've also designed additional pages to create a sense of horror, incorporating various colors, especially red, to intensify the chilling effect.
 |
| Figure 1.6.3 Type Presentation Progress - Week 13 (22/11/2023) |
I've made some minor adjustments as Mr. Vinod suggested: left-aligning my letters and increasing the letter size.
7. Type Application
 | |
|
As I have created horror fonts, my focus on font application is mainly on scary elements. I've designed a webpage for 'The Conjuring,' presenting an introduction to the movie. This webpage includes ratings and a synopsis of the film.
 |
| Figure 1.7.2 Type Presentation Progress - Week 12 (15/11/2023) |
In another attempt, I crafted a phrase, 'I can't wait to wear your face,' and placed it on a window to create a spooky Halloween decoration. I played with the picture's color adjustments to create a darker, cloudy-day atmosphere.
For my third design, I used my font on a Halloween movie poster, giving it a subway-advertisement aesthetic. Finally, I created a 'Conjuring' poster using my font, intentionally giving it a torn and weathered appearance.
Final Task 3: Type Exploration and Application
Download DarkHaunt Font: Click Here!
Figure 2.1 Final Generated Type DarkHaunt - Week 13 (22/11/2023)
 |
| Figure 2.2.1 Type Presentation 1 - Week 13 (22/11/2023) |
 |
| Figure 2.2.2 Type Presentation 2 - Week 13 (22/11/2023) |
 |
| Figure 2.2.3 Type Presentation 3 - Week 13 (22/11/2023) |
 |
| Figure 2.2.4 Type Presentation 4 - Week 13 (22/11/2023) |
 |
| Figure 2.2.5 Type Presentation 5 - Week 13 (22/11/2023) |
 |
| Figure 2.2.6 Type Presentation 6 - Week 13 (22/11/2023) |
Figure 2.2.7 Type Presentation PDF - Week 13 (22/11/2023)
 |
| Figure 2.3.1 Type Application 1 - Week 13 (22/11/2023) |
 |
| Figure 2.3.2 Type Application 2 - Week 13 (22/11/2023) |
 |
| Figure 2.3.3 Type Application 3 - Week 13 (22/11/2023) |
 |
| Figure 2.3.4 Type Application 4 - Week 13 (22/11/2023) |
Figure 2.3.5 Type Application PDF - Week 13 (22/11/2023)
Type Playground
You can type characters from the font 'DarkHaunt' below:
Figure 2.4 Type Playground - Week 13 (22/11/2023)
FEEDBACKS
Week 13:
Specific Feedback: For the Uppercase Type Presentation, make the blood element smaller as it drew attention away from the letters. Additionally, enlarge the uppercase letters and align the letters to the left and ensure they are uniformly aligned together.
Week 12:
Specific Feedback: Avoid using pure black for poster. Instead, opt for an off-white tone with a hint of grey. If considering the use of black, incorporate it with texture to enhance depth.
Week 11:
Specific Feedback: You need to use the pathfinder tool to combine your font. While it may be a bit troublesome, this process helps simplify the shapes, especially when dealing with complex vectors in your fonts.
Week 10:
Specific Feedback: Complete punctuations, expand the fonts, and place them into FontLab. You can browse through KreativeBeats for reference.
REFLECTIONS
Experience
Creating a whole new font was quite enjoyable for me because I had a clear vision of what I wanted to make. I immediately started the process without going through the phase where you might get confused or lost in what you're doing. Having used FontLab last semester, I was quite familiar with the software, so placing the font into FontLab was no issue for me. However, I did face some problems with the file as it turned out to be much more complex than what I worked on last time. I planned to progress at a faster pace because I'm concerned about the due date, but I'm still doing my best to produce quality work. It turns out well for me, and I am satisfied.
Observation
During the font creation process, a notable observation was the careful consideration of the x-height. The x-height, representing the height of lowercase letters without ascenders or descenders, played a crucial role in defining the overall aesthetic and readability of the font.
Findings
As I worked on creating the font, I noticed that it's much easier to kick off the design process by focusing on letters like H, O, A, and N. These letters are great starting points because they have straightforward, straight, and horizontal lines. Starting with these letters has practical benefits. The simplicity of their structural elements makes it easy to copy and tweak them to create a variety of other letters. This not only speeds up the design work but also gives the entire font a consistent look and feel.
FURTHER READING
 |
| Lettering and Type: Creating Letters and Designing Typefaces (2009) |
Reference:
Library of Congress Cataloging-in-Publication Data
Willen, Bruce, 1981-
Lettering & type : creating letters and designing typefaces / Bruce Willen
and Nolen Strals ; with a foreword by Ellen Lupton. — 1st ed
The provided text discusses the principles and considerations involved in designing letters, with a focus on lowercase characters in a sans serif font like Franklin Gothic. The analysis emphasizes the interconnectedness of letterforms and the importance of understanding their relationships.
 |
| Lowercase |
Designers often concurrently draw both lowercase and uppercase characters to establish their connections, with the emphasis on lowercase in text typefaces due to its frequent usage. Various design elements, such as x-height, ascenders, descenders, serif size, character width, counter space, crossbar placement, and curve shape, significantly influence the overall feel, legibility, and usefulness of a font. Additionally, accurate spacing and side bearings for the lowercase alphabet are crucial, as increased letterspacing may adversely impact legibility. The text also highlights the benefits of digital technology, allowing designers to easily compare and contrast different typefaces for analysis.
 |
| Uppercase |
Uppercase letters are generally taller and wider than their lowercase counterparts, maintaining proportional balance. To compensate for the additional space occupied by uppercase characters, their stroke weight is usually slightly heavier than that of the lowercase. To prevent capitals from overpowering the smaller lowercase letters and to ensure consistent widths, type designers often condense the uppercase characters slightly. It's emphasized that the height of the lowercase ascenders does not necessarily dictate the cap height, as the uppercase in many fonts is shorter than the ascender height.
 |
| Punctuation and Accents |
Punctuation is vital in organizing written language, complementing letters in typography. Well-designed punctuation and symbols, when appropriately sized and spaced, seamlessly integrate with the alphabet, enhancing clarity without disrupting the flow of text. Type designers carefully treat these secondary characters, ensuring they align with the overall design principles of the font.
Learning Outcome
Exploring font design principles has deepened my understanding of the intricate relationships between lowercase and uppercase characters, influencing decisions on proportions and visual balance. Prioritizing the design of lowercase letters in text typefaces has become crucial, impacting various design elements.
Comments
Post a Comment