11.11.2024 - 17.11.24 (Week 8 - Week 12 )
Emily Ong Su Yu / 0365304
Typography/ Bachelor of Design in Creative
Media
Task (Exercises / Task)
TABLE OF CONTENTS
Lectures completed in Task 1
1. Instructions
2. Process Work
4. Feedbacks
6. Reflections
1. Instructions
2. Process Work
4. Feedbacks
6. Reflections
Typography Task 3 / Exercises
Instructions
Type Design & Communication
Module Information Booklet
Figure 1.1 Module Information Booklet Week 1 (23/9/24).
Descriptions
In Task 3, we need to design a limited number of Western alphabets, including o, l, e, d, s, n, c, h, t, i, g, , . ! #. We should begin with rough sketches, exploring a variety of options, and upon approval, proceed to digitise the drawings using Adobe Illustrator. Once digitised, the designs will be transferred to Font Lab 7 to create a typeface.
After striving to create a typeface that embodies the hallmarks of a good design—subtlety or character, presence, legibility, and readability, we are required to produce a basic A4 sized poster to showcase our font.
Process Work
Task / Exercises
References
Figure 2.1 References Week 8 (14/11/24).
Sketches
Figure 2.2 Sketches Week 9 (19/11/24).
Progress
Week 8
Figure 2.3 Tutorial Video Typo Task 3A Typeface
Construction (Shapes) Week 8 (16/11/24).
Shape Tool to build letters:
- Inserting the sketches into Illustrator
- Shaping or typing out the letters using a similar typeface
- Using the Pathfinder tool to join the points together
- Rounding the angles
Figure 2.4 Tutorial Video Typo Task 3A Typeface
Construction (Strokes + Brush) Week 8
(17/11/24).
Stroke Tool to build letters:
-
Drawing the type font using the Pen Tool or Brush Tool
-
Using Menu > Object > Path > Outline Stroke to convert
strokes into shapes
-
Adjusting the angle of strokes by manipulating the brush angle in
Menu > Brushes > Calligraphic Brush Options
-
Ensuring the bottom of circular shapes is wider than the
top
-
Slanting the type font by rotating it
-
Creating rough edges by drawing on the letter with the Brush
Tool, converting it to a shape, and using Pathfinder to subtract
it
Week 9
Figure 2.5 Progress of Building the Letters Week 9
(18/11/24).
Building the Letters:
-
Tools: Cut, width, shape builder, pen and brush
-
Windows: Pathfinder, align, stroke
-
Actions: Menu > Object > Path > Outline Stroke /
Menu > Object > Compound Path > Make
Week 10
Figure 2.4 Tutorial Video Designing Punctuation
Week 10 (25/11/24).
Designing Punctuation:
Figure 2.5 Progress of Building the Letters
Week 10 (26/11/24).
Figure 2.5 Progress of Building the Letters
Week 10 (26/11/24).
Building the Letters:
-
The letters d and t were added to the typeface
Figure 2.5 Tutorial
Video Typo_Task 3A
Illustrator To
FontLab5 Demo Week 10
(26/11/24).
Figure 2.5 Tutorial
Video Typo_Task 3A
Illustrator To
FontLab5 Demo Week 10
(26/11/24).
Illustrator to FontLab:
-
Measure the height of the letters in illustrator
-
Download FontLab 7
Week 11
Figure 2.6 Tutorial Video Typo_Task 3A
Illustrator To FontLab5 Demo Week 11
(02/12/24).
Illustrator to FontLab:
-
File > Font Info, fill up family names, family dimensions
and font dimensions
-
Copy Letters in Illustrator > Paste in Glyph Tab in
FontLab
-
New Metrics Tab > Bearing
-
File > Generate Font > OpenType TT
Figure 2.6 Tutorial Video Typo_Task 3A
Illustrator To FontLab5 Demo Week 11
(02/12/24).
Figure 2.7 Tutorial Video Typo_Task 3A
Illustrator To FontLab7 Demo Week 11
(02/12/24).
Figure 2.7 Tutorial Video Typo_Task 3A
Illustrator To FontLab7 Demo Week 11
(02/12/24).
Illustrator to FontLab:
-
To paste letters in the Glyph tab in the exact position, navigate
to FontLab 7 > Preferences > Paste & Duplicate,
then: Select Ignore... and Import... > Deselect Keep...
-
Kerning to reduce or increase the space between letters
Figure 2.8 Chart Provided Week 11 (02/12/24).
Figure 2.8 Chart Provided Week 11 (02/12/24).
Illustrator to FontLab:
-
Adjust side bearings (left and right spaces of your letter) using
the chart provided
Week 12
Figure 2.9 Progress of Poster Week 12
(15/12/24).
Figure 2.9 Progress of Poster Week 12
(15/12/24).
Poster to Showcase our Font:
-
Type out the sentence "light glides on cold nest" using the font
you designed, Lithewood.
-
Apply 3D Effects in Illustrator to rotate the letters or adjust
their perspective.
-
Include the attribution by [My Name] and the year in the same font
size of 8 pt, using Univers Roman or Regular, and place it on the
poster.
Final Submission
Task / Exercises
Link to Download Font
Download: LithewoodScreen Grab of FontLab Process (side-bearings)
Figure 3.1 Screen Grab of FontLab Process (side-bearings) #1 Week 12 (12/12/24).
Figure 3.2 Screen Grab of FontLab Process (side-bearings) #2 Week 12 (12/12/24).
Figure 3.1 Screen Grab of FontLab Process (side-bearings) #1 Week 12 (12/12/24).
Figure 3.2 Screen Grab of FontLab Process (side-bearings) #2 Week 12 (12/12/24).
Final Type constructions in Ai JPEG
Figure 3.3 Final Type constructions
in Ai JPEG Week 12 (12/12/24).
Figure 3.3 Final Type constructions
in Ai JPEG Week 12 (12/12/24).
Final Type constructions in Ai PDF
Figure 3.4 Final Type
constructions in Ai PDF Week 12
(12/12/24).
Figure 3.4 Final Type
constructions in Ai PDF Week 12
(12/12/24).
Final A4 black & white poster in JPEG
Figure 3.5 Final JPEG A4 black
& white poster Week 12
(15/12/24).
Figure 3.5 Final JPEG A4 black
& white poster Week 12
(15/12/24).
Final A4 black & white poster in PDF
Figure 3.6 Final A4 black
& white poster in PDF Week
12 (15/12/24).
Figure 3.6 Final A4 black
& white poster in PDF Week
12 (15/12/24).
Feedbacks
Week 8
Independent Learning Week
Week 9
General Feedback
It is normal for handwriting to evolve from the initial
sketch during the first attempt. Preserve your progress,
consider adding a slight angle for natural flow, and ensure
consistency—if one letter has detailed features, others should
too. Avoid excessive anchor points, as they make adjustments
harder. The letter T should be shorter, with minimal spacing
between letters. For the letter S, ensure the top is smaller
and the bottom larger to avoid a visually heavy top.
Specific Feedback
Maintain the proportions of the letters, ensuring consistency
throughout. Adjust the letter T to reduce the size of its tail
and make wider letters narrower. Use the letter O as a reference
for all other letters, ensuring they are the same size and
thickness.
Week 10
General Feedback
Manually create the font, digitise it, and retain the pen's
angle while refining details. Ensure consistent thickness and
punctuation design using tools like stroke-to-shape,
pathfinder merge, and the smooth tool. Use squares for uniform
measurements, maintain stability for letters like "S," and
streamline the process by refining scaling and joining points
(Cmd+J).
Specific Feedback
Modify the shape of the comma.
Week 11
General Feedback
Ensure all words are in the same point size, 8 pt, using
Univers Roman or Regular. Include all letters of the font, and
the poster must specify the font name, creator, and
year.
Specific Feedback
Adjust the punctuation.
Week 12
General Feedback
Refer to the provided chart to adjust the kerning in
FontLab.
Specific Feedback
Include all the designed letters in the poster.
Further Reading
Vignelli Canon on Design
Figure 4.1 Vignelli Canon on Design Week 8
- Week 9 (14/11/24 - 21/11/24).
Figure 4.1 Vignelli Canon on Design Week 8
- Week 9 (14/11/24 - 21/11/24).
Layouts
Figure 4.1 Vignelli Canon on
Design Page 82 Week 8
(14/11/24).
Figure 4.1 Vignelli Canon on
Design Page 82 Week 8
(14/11/24).
- Designer Interpretation: Layouts reflect the designer's interpretation of the content.
- Selecting Images: The designer must choose images that best represent the content and have the potential to become iconic.
- Icon Definition: An icon is an image that expresses its content in the most memorable way.
- Importance of Grids: The grid is crucial for consistency in layout design and is especially useful for structuring the publication.
Sequences
Figure 4.2 Vignelli Canon on
Design Page 85 & 86 Week
9 (21/11/24).
Figure 4.2 Vignelli Canon on
Design Page 85 & 86 Week
9 (21/11/24).
- Image Selection and Layout: Sifting through images is the first task in the publication process, followed by the layout sequence.
- Cinematic Experience: A publication is both a static experience (the spread) and a cinematic experience (turning pages). The flow between pages is crucial to the reading experience.
- Importance of Layout: Great emphasis is placed on the layout; it should be forceful and not cluttered with random images or casual bleeding effects.
- Subtle Layouts: The ideal layout is one that almost disappears from the reader’s attention—if the layout is noticeable, it is likely considered poor.
White Space
Figure 4.2 Vignelli
Canon on Design Page 93
Week 10
(29/11/24).
Figure 4.2 Vignelli
Canon on Design Page 93
Week 10
(29/11/24).
- Importance of White Space: White space is as crucial as the black type itself in typography. It defines the context and hierarchy of the design, separating components and positioning the message on the page.
- Space Manipulation in Typography: Tight or loose typesetting, along with adjustments in letter spacing (kerning), transform words and influence the expression of the text, creating distinct visual effects.
- White Space as a Design Element: White space is a powerful tool in design, used to achieve balance and clarity. It plays a crucial role in American graphic design and architecture, helping to communicate the message more effectively and create a sense of grandeur.
Vignelli Canon on Design
Figure 4.2 TypographyReferenced Week 11 - Week
12 (8/13/24 - 16/12/24).
Figure 4.2 TypographyReferenced Week 11 - Week
12 (8/13/24 - 16/12/24).
Type Design and Development: Form a Letter to a Typeface
Figure 4.2 TypographyReferenced Page 39 Week
11 (29/11/24).
Figure 4.2 TypographyReferenced Page 39 Week
11 (29/11/24).
Designing a full alphabet requires balancing features for unity and
readability. Designers often begin with letters such as "a d e h i n
o s" to develop key strokes, avoiding complex or diagonal letters at
first. While sketching "n" and "o" can be useful, working with a
broader set ensures the typeface's style and balance in text
settings..
Type Design and Development: Character Expansion
- The demand for typefaces with extended character sets has been steadily increasing to support multiple languages.
- Operating systems, applications, and brands require typefaces that accommodate various scripts.
- Custom typefaces for major brands often include several thousand characters and span five or more scripts.
- The current standard for international brands typically includes Cyrillic, Greek, and extended Latin for the wider European region.
- There is a growing trend towards including Arabic, Hebrew, and Indian scripts in typeface character sets.
Reflections
Experiences
I learnt a lot about font creation while working on this challenge.
Finding references, making sketches, digitising them, and finally creating
the typeface using the software Fontlab 7.
Observations
One of the issues I encountered this week was font creation during the
digitalise step. We need to keep the letter proportions consistent
throughout. Aside from that, the process of carrying the letters in the
font creation stage of the software Fontlab 7 is fairly difficult.
Fortunately, with Mr Vinod's guidance, I was able to overcome it and build
the typeface.
Findings
I learnt a lot from this work. I learnt how to make a font using Adobe
Illustrator and Fontlab 7. In addition, I learnt that when making a font,
we must have the same angle for the letter strokes. The letter T should be
shorter, with less space between characters. To avoid a visibly heavy top,
make the top of the letter S smaller and the bottom larger.
Comments
Post a Comment