Advanced Typography / Task 3: Type Exploration and Application
Derin / 0354969 / Design in Creative Media
GCD 61004 / ADVANCED TYPOGRAPHY
Task 3: Type Exploration and Application
INSTRUCTIONS
TASK 3: PROPOSAL
Idea Proposals
In week 8, our task is to create three font proposals that align with our interests. The fonts we create can be based on the following guidelines:
1. Create a font that aims to solve a significant problem or be part of a solution in the field of our interest, such as graphic design, animation, new media, entertainment design, or any other related area, regardless of our specialization.
2. Explore the use of an existing letterform within our area of interest. Analyze its current relationship, identify areas that can be improved, and explore potential solutions or combinations that enhance the existing letterform or lettering. The end result should be a complete generated font (.ttf) with practical applications.
3. Conduct an experiment with typography. To qualify as an experiment, the idea must be novel and unique. We can work with materials that have a three-dimensional aspect, incorporate digital augmentation, be edible, unusual, or explore typographic music videos or fine art. The end result for this proposal is open and defined by the student. To effectively execute this experiment, we should study our selected area, examine how type is used within it, and identify potential weaknesses or areas for further exploration or experimentation. Then, we can provide a creative solution or add value to an existing use.
Based on these guidelines, I made 3 different proposals.
After getting feedback from Mr. Vinod, I took his suggestions into account and made a decision to move forward with either Proposal 1 or Proposal 2. With these chosen proposals in mind, I created type sketches, exploring two variations for each proposal.
TASK 3: RESEARCH AND SKETCHES
Before creating the sketches, I began my research and gathered references for the two proposals. I focused on the subject matter and compiled key points related to the Komodo dragon.
Komodo Dragon
For Proposal 1, the key features of the Komodo dragon that I identified are as follows:
- Scaly texture on its body
- Long tongue
- Sharp claws
- Stubby body
- Tail takes up 1/2 of the overall body length
|
| Fig 1.2 Research and References of Komodo Dragon, Week 9 (01/06/2023) |
Drawing from the key features identified during my research, I developed two distinct variations of the typeface. The first variation was inspired by the body of a Komodo dragon. To replicate the textured scales, I intentionally designed the strokes with a jagged appearance. Moreover, I incorporated a visual representation of the dragon's body shape by thickening the upper part of the font and gradually tapering it down as it descended. This technique aimed to capture the essence of the Komodo dragon's physical form.
For the second variation, my focus shifted to the dragon's tail. Leveraging the concept of negative space, I carefully crafted the silhouette of the tail within the overall typeface design. By strategically employing the absence of ink or pixels, I achieved an intriguing and recognizable representation of the dragon's tail within the letterforms.
To better visualize these ideas, please refer to Figure 1.3, which showcases the results of these design concepts.
|
| Fig 1.3 Sketches based on the Komodo Dragon's key features, Week 10 (06/06/2023) |
Redesign of Stardew Valley's Typeface
For the second proposal, my plan is to revamp the original typeface used in the game due to occasional illegibility. During my investigation of the typeface, I observed several issues that I took note of:
- X-height disproportionate to text height: The x-height, which is the height of lowercase letters, occupies half of the overall text height, resulting in imbalanced proportions.
- Inconsistent letterspacing: The spacing between certain letters appears irregular and inconsistent.
- Inconsistent line width in strokes: Some strokes within the typeface exhibit inconsistencies in their width, leading to an uneven appearance.
|
| Fig 1.4 Problems with Stardew Valley's Typeface, Week 9 (01/06/2023) |
After identifying the problems with the typeface, I moved on to creating sketches for the new typeface. I made sure to keep in mind that the typeface should have a pixelated look, and the x-height needed to occupy about one-third of the overall text height.
For my first concept, I came up with a minimalist pixelated typeface design. I wanted to emphasize simplicity and a clean appearance by reducing unnecessary details. The goal was to maintain readability and clarity while keeping the design sleek and straightforward.
In the second variation, I explored a more traditional pixel font approach. This design aimed to capture the nostalgic feel of retro video games or digital displays with its characteristic pixelated style. It struck a balance between evoking nostalgia and ensuring legibility.
As seen in Figure 1.5, these two variations provided different options to cater to various preferences while meeting the requirements of a pixelated aesthetic and the desired x-height proportion.
|
| Fig 1.5 Sketches for the redesign of Stardew Valley's typeface, Week 10 (06/06/2023) |
Final Chosen Idea
Based on the feedback I received from Mr. Vinod for these sketches, I went with the 1st Proposal, which is to make a font based on the endangered animal Komodo Dragon.
This font takes inspiration from the majestic Komodo dragon, aiming to spark conversations and inspire action against animal extinction. By capturing the essence of this endangered Indonesian species, the font serves as a symbol of the pressing need to safeguard our planet's delicate biodiversity. Its purpose is to raise awareness and empower individuals to advocate for endangered animals worldwide, encouraging them to take a stand for their protection.
|
| Fig 1.6 Final Chosen Idea: Typeface Inspired by the Komodo Dragon, Week 10 (07/06/2023) |
TASK 3: DIGITIZATION
Uppercase
To develop the typefaces, I followed a systematic approach. First, I focused on establishing the basic shape of the letterforms, ensuring they had the right proportions and structure. Once I was satisfied with the foundation, I proceeded to add the scaly texture to the design. This texture was crucial in capturing the essence of the Komodo dragon and giving the typefaces a distinct appearance.
When I started creating the typefaces, I realized that they appeared too thick, which didn't quite match my vision. So, I decided to make them thinner to achieve the desired look and feel.
|
| Fig 2.1 First few Digitization attempts for the Uppercase alphabet (hell), Week 11 (14/6/2023) |
|
| Fig 2.2 Comparison of the letterforms' width, before and after, Week 11 (14/6/2023) |
I felt that my letterform shapes needed improvement, so I sought guidance from tutorials on typeface design by Grillitype on Instagram. These tutorials provided valuable insights and techniques that helped me make the necessary adjustments to my font.
|
| Fig 2.3 Font shaping tutorials, Week 12 (20/6/2023) |
|
| Fig 2.4 Uppercase alphabet shape adjustments, Week 12 (22/6/2023) |
After applying the lessons from Grillitype and conducting design explorations, I made several changes to my font. Through this iterative process, I created various variations and explored different design possibilities. Afterwards, I made the final selection, and the last letter in the group represents the chosen design for the font.
|
| Fig 2.5 Font design explorations, Week 12 (22/6/2023) |
The following (Fig 2.6) is what I ended up with.
|
| Fig 2.6 Final digitization for the Uppercase Alphabet, Week 12 (23/6/2023) |
Lowercase
Designing the lowercase letters was a relatively quicker process as I already had a clear vision of the style I wanted to achieve. Additionally, I was able to reuse some of the shapes I had used for the uppercase letters, which expedited the design process.
During the initial creation of the lowercase letters, I noticed that they appeared wider in comparison to the uppercase letters. To ensure consistency and cohesion between the two letter sets, I made adjustments by condensing the width of the lowercase font. I also made sure to actively compare the uppercase and lowercase fonts together.
|
| Fig 2.7 Lowercase alphabet digitization process, Week 13 (30/6/2023) |
|
| Fig 2.8 Final digitization for the Lowercase Alphabet, Week 13 (30/6/2023) |
Numbers and Symbols
Designing the numbers and symbols was challenging for me since it was my first time creating them in a specific style. To overcome this difficulty, I heavily relied on tutorials to guide me through the process, providing step-by-step instructions and valuable references.
|
| Fig 2.9 Numbers and symbols digitization process, Week 14 (4/7/2023) |
|
| Fig 2.10 Final digitization for the Numbers and symbols, Week 14 (4/7/2023) |
After finalizing the shapes of all the letterforms, I utilized the brush feature in Adobe Illustrator to create a rough effect on the font. To achieve this, I first needed to outline the stroke of each letterform. Then, I used the pencil tool to create wave-like shapes that would serve as the basis for the artbrush. Once the wave-like shape was created, I dragged it into the brush tab and set it as an artbrush. This speeds up the process of creating the scaly surface. Finally, I applied the artbrush to the font, giving it a distinctive rough texture.
|
| Fig 2.11 Wave-like shapes converted into an artbrush, Week 14 (5/7/2023) |
|
| Fig 2.12 Comparison, Week 14 (5/7/2023) |
Final Outcome for Digitization
The following (Fig 2.11) are the final outcome for the digitization process of this task.
|
| Fig 2.13 Final Outcome for Digitization, Week 14 (5/7/2023) |
TASK 3: FONT EDITING & CONVERSION
I used FontLab 7 for the font conversion process. To transfer my fonts into the software, I dragged and imported the digitized versions of my designs.
|
| Fig 3.1 Importing digitized fonts to FontLab7, Week 14 (6/7/2023) |
After importing all the letters, numbers, and symbols into FontLab7, I proceeded with the kerning process. During kerning, I noticed that some of the characters appeared thicker than others, causing a visual imbalance. To address this issue, I adjusted the width of the letterforms accordingly, ensuring a consistent and harmonious appearance.
Another challenge I encountered was with the letter 'j'. When combined with letters lacking a descender, it appeared too distant, while with letters featuring a descender, it seemed too close. Attempting to kern it closer to the other letters resulted in the bottom stroke of 'j' overlapping with letters like 'g,' 'y,' 'p,' and 'q.' To resolve this issue, I modified the length of the bottom stroke, making it shorter to avoid such entanglement.
Additionally, I reduced the size of the punctuation dot since it appeared disproportionately large when placed alongside the letters and numbers.
|
| Fig 3.2 Comparison of the changes made in the digitized fonts, Week 14 (6/7/2023) |
I double checked the font on the sketchboard by typing out various combinations of letters, numbers, and symbols. This helped me ensure that they visually aligned well and maintained consistent spacing, as well as to verify its overall appearance and readability in different contexts.
|
| Fig 3.3 Kerning process, Week 14 (6/7/2023) |
Here are the overview of the imported fonts in FontLab7.
I decided to name this font 'Dragonfire'. In my opinion, this name evokes a sense of power and intensity, reflecting the font's inspiration from the Komodo dragon and its mission to ignite conversations and drive action against animal extinction.
|
| Fig 3.4 Overview of the fonts, Week 14 (6/7/2023) |
Download and test out the font here: DRAGONFIRE
|
| Fig 3.5 Converted Uppercase letters, Week 14 (6/7/2023) |
|
| Fig 3.6 Converted Lowercase letters, Week 14 (6/7/2023) |
|
| Fig 3.7 Converted Numbers and Symbols, Week 14 (6/7/2023) |
Measurements (from baseline)
Ascender: 779 pt
Caps height: 710 pt
x-Height: 502 pt
Descender: -241 pt
Line gap: 100 pt
Base line: 0 pt
TASK 3: APPLICATION
Application #1 - Children's Book Cover
For the application of the font, I chose to use it in a children's book centered around Komodo dragons. To visualize this concept, I employed AI text-to-image generator to create a mock-up cover design for the children's book about a Komodo dragon.
|
| Fig 4.1 Using AI to generate a Komodo Dragon book cover, Week 14 (7/7/2023) |
Afterward, I selected the first image for my font application. I imported the image into Adobe Photoshop and proceeded to remove any unnecessary elements from the image, including the title, watermarks or any other distracting components using the content-fill aware option under 'Edit'.
|
| Fig 4.2 Removing the title, Week 14 (7/7/2023) |
|
| Fig 4.3 Masking the watermark, Week 14 (7/7/2023) |
After removing those elements, I began designing the placement of the font and making color adjustments on the cover page. I explored various variations to find the most visually appealing arrangement. These design variations can be observed in Figure 4.5.
|
| Fig 4.4 Designing the book cover, Week 14 (7/7/2023) |
|
| Fig 4.5 Design variations for the book cover, Week 14 (7/7/2023) |
Making a final decision was challenging, but after careful consideration, I ultimately chose to proceed with the third variation as the final design. The placement of the font looked the most like a children's book, and the font stands out in the cover.
|
| Fig 4.6 Final selection, Week 14 (7/7/2023) |
Application #2 - Children's Book 1st Page
I also created the first page of a children's book about Komodo Dragons separately, the process is the same. :D
|
|
Fig 4.7 Final selection, Week 14 (7/7/2023) |
Application #3 - Awareness Poster
For my application, I decided to design an awareness poster about the endangered Komodo dragon. Initially, I attempted to create a playful background using text elements. However, I wasn't completely satisfied with the outcome, so I decided to start fresh and create a new poster with a different approach.
|
| Fig 4.8 |
I chose a free image for this part of the application, but it was initially blurry. To improve the image quality, I duplicated the layer and placed it above in "hard light" mode. Then, I applied a Gaussian blur effect to create a sharper look. Works like a charm. Finally, I made some adjustments to the colors to enhance the overall appearance.
|
| Fig 4.9 Poster making process |
Since this is a poster for creating awareness, I placed information about the remaining number of Komodo Dragons. Here is the final result!
|
| Fig 4.10 |
Display Poster
Before diving into the design process for the display poster, I engaged in color palette experimentation. Initially, I derived the first color palette from the Komodo Dragon's book cover. Subsequently, I extracted colors from an image of a Komodo dragon to create the second palette.
I attempted to create a display poster based on these palettes (Fig 4.7). However, I encountered difficulties, and the results were not satisfactory. As a result, I made the decision to scrap that particular design.
In order to showcase the font more effectively, I opted for the third color palette (Fig 4.8). This palette features a minimalistic approach, utilizing contrasting colors to enhance the font's visibility and impact.
|
| Fig 4.11 Initial attempt, Week 14 (7/7/2023) |
|
| Fig 4.12 Color palette choices, Week 14 (7/7/2023) |
Afterwards, I began working on creating the display poster. I created multiple variations side by side and compared them together. I inputted some text from Wikipedia as a part of the design. I also used the art brush texture for the font as an element for the design (the audio wave-like thing).
Variation 1 featured a landscape orientation, while variations 2 and 3 were vertical with different font display layouts. In variation 4, I inverted the colors for a distinct look, and variation 5 was an experimental approach to evaluate its visual appeal.
|
| Fig 4.13 Workspace, Week 14 (7/7/2023) |
|
| Fig 4.14 Different designs for the display poster, Week 14 (7/7/2023) |
I decided to go with the 3rd variation as my final selection.
|
| Fig 4.15 Final selection, Week 14 (7/7/2023) |
FINAL OUTCOME FOR TASK 3
Link to Font File: DRAGONFIRE
|
| Fig 5.1 Final type design - JPEG, Week 14 (7/7/2023) |
|
|
|
Fig 5.2 Final type display poster - JPEG, Week 14 (7/7/2023) |
|
| Fig 5.3 Final type application #1 - JPEG, Week 14 (7/7/2023) |
|
| Fig 5.4 Final type application #2 - JPEG, Week 14 (7/7/2023) |
|
| Fig 5.5 Final type application #3 - JPEG, Week 14 (7/7/2023) |
Fig 5.6 Final Outcome for Task 3: Type Exploration and Application
- PDF, Week 14 (7/7/2023)
FEEDBACK
Experience
This assignment helped me delve into the
fascinating world of font shaping, where I learned about letter thickness,
kerning, and overall design. It was both enlightening and challenging, as
I discovered the intricacies of creating visually pleasing and readable
typography. Through exploration and practice, I expanded my knowledge and
skills in font design. I also learned how kerning impacts spacing between
letters, improving readability and flow. I like to think that I was able
to expand my knowledge and skills in font design :).
Observation
During the assignment, I gained valuable insights
by observing the significance of letter thickness and consistency in font
design. Initially, I noticed that my font appeared excessively thick, and
during the kerning process in FontLab7, I discovered inconsistencies in
letter widths. Recognizing these issues, I was able to refine the
thickness and achieve a more pleasing aesthetic. Moreover, my observations
highlighted the crucial role of kerning in ensuring appropriate spacing
between letters, ultimately enhancing the overall legibility and flow of
the font.
Another aspect I explored was the application of the font in a design context. I had the opportunity to create a display poster and apply the font to a children's book cover. This hands-on experience allowed me to witness the transformative power of typography in enhancing visual communication. Through experimentation and iteration, I observed the impact of color palettes, layout variations, and design elements on the overall effectiveness and appeal of the final compositions. It became evident that typography plays a significant role in conveying messages and evoking emotions within a design context.
Findings
As I progressed, I made valuable findings regarding
font shaping. I discovered that precision and attention to detail are
essential in achieving optimal results. The interplay between letter
thickness, spacing, and overall composition is crucial in creating a
cohesive and visually appealing font. By refining my skills in font
shaping, I gained a deeper appreciation for the artistry and technical
considerations involved in typography. These findings have motivated me to
continue exploring and refining my font design abilities.
|
| Fig 6.1 hell |
FURTHER READING
|
|
Fig 7.1 Exploring Typography by Tova Rabinowitz |