Typography- Task 3: Type Design and Communication
Typography- Task 3: Type Design and Communication
24/09/2024- 05/01/2024 (Week 1 - Week 14)
Alicia Lo Yann Wei / 0357917 / Bachelor of Mass Communication in
Digital Media Production
GCD60104 Typography
GCD60104 Typography
TABLE OF CONTENTS
1. LECTURES
2. INSTRUCTIONS
3. FEEDBACK
4. REFLECTIONS
LECTURES
Lectures have been completed in
Task 1. Kindly refer to the link.
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/13Xc-5gcjq44NScB5ugZ8Iz8qVIkj0kDb/preview"
width="640" height="480" allow="autoplay"></iframe>
TASK 3: TYPE DESIGN AND COMMUNICATION
This week’s task is to select one font from the 10 options provided and analyze the letters H, O, G, and B in detail. Import these letters into Adobe Illustrator (artboard size: 1000pt x 1000pt) and conduct a thorough dissection.
Next, on graph paper, write both uppercase and lowercase versions of the letters H, O, G, and B (HOGB / hogb) using three different pens with nib widths over 3.0. We are required to write at least three unique writing styles for each pen. I selected a few example from the 10 fonts provided in Task 1.
1. Research
Before starting my sketches, I looked at different fonts for inspiration
on Dafont and Google Font. According to the briefing, our font design must
follow typography guidelines like the baseline, median, ascender, and
descender, as well as basic typography principles.
Figure 1.1.1 Visual References (8/11/24)
2. Deconstruction
I selected Janson LT Std Bold as my reference from the 10 typefaces
because it closely matches the sketch I envisioned, especially the
letters o, g, and b. I then deconstructed the letters H, o, g, and b,
and outlined my observations below.
Figure 1.2.1 Deconstruction
H (Uppercase):
- The letter has two vertical stems connected by a horizontal crossbar, with a strong, geometric appearance.
- Subtle contrast between the vertical and horizontal strokes, typical of old-style typefaces.
- The serifs are bracketed and slightly curved, giving the letter a classic, elegant look.
- The cap height is consistent with other uppercase letters, aligning neatly with the top of the font’s design space.
o (Lowercase):
- The letter is an oval, slightly taller than it is wide, with a vertical stress.
- The letter sits cleanly on the baseline with no extensions.
- Since O has no vertical extensions, it does not interact with the ascender or descender lines.
- The top of the letter aligns with the x-height, maintaining consistency with other lowercase letters.
g (Lowercase):
- A two-story form with a closed upper loop and an open lower bowl connected by a horizontal link.
- The ear extends slightly upward and outward, adding character to the letter.
- The lower bowl sits firmly on the baseline, while the loop rises to the x-height. The lower bowl does not extend below the baseline, as this particular design of g has no descending tail.
b (Lowercase):
- The letter has a rounded, double-bowl structure with a vertical stress.
- The top of the letter slightly surpasses the x-height, touching the ascender line, creating a balanced proportion.
- Subtle, bracketed serifs enhance the flow and elegance of the letter.
3. Sketches
We were instructed to use three different types of pens to explore how
each tool influences the way letters are formed. The focus was on
experimenting with the letters HOGB in both uppercase and lowercase,
introducing variations in style with each pen.
Figure 1.3.1 Practice Using 3 Different Pens 1 (12/11/24)
After experimenting with various styles, I needed to choose one that
resonated most with me based on my prior practice. Once I selected a
style, I wrote out the following letters and symbols: o, l, e, d, s, n,
c, h, t, i, g and ( , . ! #). Below are my design explorations for these
characters. I incorporated insights from my research and drew
inspiration from the 10 typefaces provided.
Figure 1.3.2 Practice Using 3 Different Pens (15/11/24)
Figure 1.3.3 Final Outcome (17/11/24)
4. Digitalization
After receiving feedback from Ms. Vitiyaa, I imported my final sketch into
Adobe Illustrator for digitization. Using the Stroke Tool and Shape Tool, I
began transforming the fonts from my sketch into a digital format. For most
of the work, I relied on these tools to refine and replicate the details,
particularly focusing on the end strokes of the letters.
The first letter I constructed was the letter O. To achieve a thinner
inner shape, I removed the fill and applied a stroke to outline the circle
instead. Using the Pathfinder tool, I divided the shape, which allowed me
to refine the inside of the O to be thinner, perfectly aligning with the
design I had in mind.
Figure 1.4.1 Construction of the Letter "O"
I started with the Rectangle Tool to draw a tall, narrow rectangle as the
base structure of the letter l. I refined the corners and edges of the
letter using the Direct Selection Tool to achieve a clean and polished
appearance.
Figure 1.4.2 Construction of the Letter "l"
For the letter e, I began with a circular shape for the main body of the
e, similar to how I constructed the letter O. I used the Ellipse Tool to
create a perfect circle as a foundation. I added a horizontal stroke
across the middle of the shape to form the bar of the e.
Figure 1.4.3 Construction of the Letter "e"
The construction of the letters o, l, and e serves as a strong foundation
for extending and creating other letters, such as d, s, n, c, t, i, g, and
the symbols , . ! #. Below is the outline before merging all the letters in
the shape.
Figure 1.4.4 Outline of Shapes Before Merging (30/12/24)
Figure 1.4.5 Final Outline of Shapes (30/12/24)
Final Outcome:
Figure 1.4.6 Final Outcome (5/12/24)
5. Fontlab 7
After completing my typeface design in Illustrator, I used Mr. Vinod’s
demo video as a guide to develop and export the font using FontLab 7. I
set up the font information, named it "Taily," and configured key
measurements such as ascender and descender heights.
Figure 1.5.1 Copying and Pasting the Letters into Fontlab7 (10/12/24)
Once the letterforms were imported, I focused on kerning each glyph in
the metrics tab. Starting with consistent left and right bearings to 50,
I adjusted the spacing between letters to ensure they paired
harmoniously.
I also created additional letterforms to expand the range of
words I could use.
Figure 1.5.3 Additional Letters in Fontlab7 (14/12/24)
6. Poster
After exporting and installing the font, we were asked to design a
poster using the font we created. Given the freedom to choose any
phrases, I spent some time selecting ones that would highlight my
typeface while incorporating all the letters I had designed.
Since the font I created features longer strokes that convey an elegant
and gothic feel, I searched for references that matched this aesthetic
to guide my design.
Figure 1.6.1 Reference on Pinterest
When I started typing out my font on the poster, I noticed that the
kerning appeared too wide because I had set the left and right bearings
to 50.
Figure 1.6.2 Initial Poster Design (14/12/24)
After adjusting the kerning and alignments, it seems better but I still
found the design to be too simple and uninteresting.
Figure 1.6.3 Adjustments on Kernings and Alignments (16/12/24)
Final Task 3: Type Design and Communication
Download Font Here: https://drive.google.com/file/d/19zzU3k4b_MxkYS5uDNuO1A0pnHKwKJFV/view
Figure 2.1.1 Screen Grab of Fontlab Process (14/12/24)
Figure 2.1.2 "Taily" Final Type Construction in AI - JPEG (14/12/24)
Figure 2.1.3 "Taily" Final Type Construction AI in PDF (14/12/24)
Figure 2.1.4 "Taily" Final JPEG A4 B&W Poster (20/12/24)
Figure 2.1.5 "Taily" Final PDF A4 B&W Poster (20/12/24)
FEEDBACK
Week 9
General Feedback:
Ms. Vitiyaa reminded us to watch the video tutorial and focus on
writing the word instead of drawing it. She also emphasized
reviewing Mr. Vinod's feedback to refine our e-portfolios
further.
Specific Feedback:
I presented my sketched word designs to Ms. Vitiyaa, and she
approved two sketches done with a black marker pen in an italic
style. However, she noted that my lowercase g needs to be
fixed.
Week 10
General Feedback: Ms. Vitiyaa pointed out common mistakes in our
e-portfolios and encouraged us to make the necessary improvements.
She instructed us to import our designed fonts into FontLab after
getting approval, following the video tutorial.
Specific Feedback: After digitizing my sketches, Ms. Vitiyaa
observed that my initial italic design looked inconsistent and
uncertain. She suggested making the letterforms upright, as this
would help maintain consistency and improve the overall
appearance.
Week 11
General Feedback: Ms. Vitiyaa highlighted common issues in our
e-portfolios and stressed the importance of avoiding these mistakes
moving forward. She also recommended referring to Mr. Vinod's videos
for detailed steps on exporting letterforms into
FontLab.
Specific Feedback: Ms. Vitiyaa suggested using the website DaFont
as a resource for better font references. She also advised me to
enable gridlines to ensure all my alphabets align
consistently.
Week 12
General Feedback: This week, we were reminded to complete Task 3
and submit our posters to Ms.Vitiyaa and has to be reviewed by the
end of class.
Specific Feedback: Ms. Vitiyaa pointed out that the end strokes of
my alphabets, particularly o, l, and e, need to have consistent
strokes. She advised me not to mix both sharp and flat shapes in the
tails of the letters.
Week 13
General Feedback: Ms. Vitiyaa reminded us to complete
our e-portfolio and final compilation according to the provided
sample. She also guided us in reviewing our poster to ensure it met
the requirements and was well-prepared before the submission
date.
Specific Feedback: She also mentioned that she liked the lettering
on my poster but suggested I could further improve it by adjusting
the alignments.
REFLECTIONS
Experience:
Designing my own letterforms was both exciting and overwhelming. The
process started with sketching and eventually turning my ideas into
a digital typeface. I remember feeling a great sense of
accomplishment when I used the typeface to type the byline on my
poster. However, it wasn’t smooth sailing. Deciding on a font style
was daunting, and I often felt stuck when comparing my work to
others. With Ms. Vitiyaa’s guidance, I learned that even a simple
typeface can have its own charm if crafted thoughtfully. While it
was far from perfect, I’m proud that my typeface reflects my effort
and personality.
Observation:
This task opened my eyes to the finer details of typography. By
breaking down letterforms, I noticed small but significant features
I’d never thought about before, like how some letters are shorter or
have unique proportions. Watching my classmates’ progress was
inspiring, as everyone’s approach was so distinct. I also decided to
challenge myself by using the Shape Tool with the combination of
Pathfinder in Adobe Illustrator, even though I was unfamiliar with
it. Though it was tricky at first, I gradually became more
confident, and it felt rewarding to see my letterforms take shape.
Findings:
One of the biggest lessons I learned was the importance of patience
and precision. Designing a typeface is not a quick process; it
requires constant adjustments and attention to tiny details. Even a
slight misalignment can disrupt the entire design. Though my final
typeface didn’t match my initial vision, it turned out better than I
expected. This experience not only taught me technical skills but
also gave me a deeper understanding of typography and how much
thought goes into every character.
FURTHER READING
1000 Type Treatments: From Script to Serif, Letterforms Used to Perfection
Figure 3.1.1 1000 Type Treatments
I was inspired by the expressive nature of typography and how specific design elements can completely transform the tone of a typeface. The book's showcase of elegant scripts and refined serifs influenced my decision to incorporate more prominent strokes and add a "taily" flair to my font, emphasizing its elegance and sophistication. Seeing how subtle curves and extended strokes could elevate a letterform’s visual appeal pushed me to refine these details in my own design. This approach allowed me to create a typeface that not only felt functional but also carried a sense of grace and personality, aligning with the aesthetic I aimed to achieve.
Fonts & Encodings
Figure 3.1.2 Fonts & Encodings
Comments
Post a Comment