Typography / Task 3: Type Design and Communication
7.5.2023 - 20.5.2023 (Week 8 - Week 12)
Johnny Lam Wee Zhe / 0363436 / Bachelor of Design (Hons) in Creative Media
Typography
Task 3
Lecture
Lecture 4
Describing Letter form
Baseline - An imaginary line that lies at the base of the letter forms.
Median - An imaginary line that determines the x-height of the letter, it
the line above the base line.
X-Height - A amount of height that a lower case x is.
Fig. 1.1 Line Heights
Stroke - Any line that define the shape of the letter form.
Apex/Vertex - The point where two diagonal line joins together forming a sharp
curvature (Apex points upwards while
Vertex points downwards).
Ascender - The parts of the lower case alphabet that goes upward and beyond
the median line.
Bard - The half serif in a curve stroke.
Beak - The half serif on a horizontal arm.
Bowl - A round space inside certain alphabets such a 'b' and 'p'.
Bracket - The space in between the stroke and the serif.
Crossbar - A horizontal line that connects two stems (upright or upright-ish
stroke) together.
Cross Stroke - A horizontal line that goes across letters with a single stem
such a t and f.
Crotch - The interior space where stroke meets.
Descender - The parts of the letter (usually lowercase) that goes downward
beyond the base line.
Ear - An extra stroke coming out of the stem or body of the form.
Em/En - Em is the distance equal to the size of the typeface and an En is
half the size of the typeface.
Finial - The rounded non serif terminal stroke to a stem.
Leg - A short stroke that protrude out of either the bottom of the stem (L)
or incline down (R).
Ligature - A character that is formed by combining two letter forms.
Loop - The curve stroke of the lower half of the lower case 'g'.
Link - The stroke that connects the bow of the lowercase 'g' and the loop.
Shoulder - Curve stroke that is no part of the bowl.
Spine - The curve stem of the S.
Spur - The extension the articulates the junction of the curved and
rectilinear stroke.
Stem - The main stroke of the letter usually thickest stroke.
Stem - The main stroke of the letter usually thickest stroke.
Stress - Orientation of the letter form, indicated by the thin stroke in
round forms.
Fig. 1.2 Stress Illustrated
Swash - The flourish that extends the stroke of the letter form.
Tail - The curved diagonal stroke at the finish of certain letters.
Terminal - The self contained finish of a stroke without the serif.
FONTS
Uppercase
Lowercase
Small Capital - Uppercase letter forms that fits the x-height of the letter
form. Usually found in serif fonts.
Uppercase Numerals - Numbers with the same height as uppercase letters with
the same kerning weight.
Lowercase Numerals - Numbers that fit into the size of x-height with
ascenders and descenders.More common in
serif.
Punctuation and Miscellaneous Characters
Fig 1.3 Punctuation
Ornaments - Used as flourishes in invitations and certificates.
Fig. 1.4 Ornaments
Roman - Forms derived from inscriptions of roman monuments.
Italic - Slanted forms based on 15th century Italian handwriting.
Oblique - Slanted forms based on roman letters.
Boldface - Has thicker strokes.
Light - Has thinner strokes.
Condense
Extended
Fig. 1.5 Typeface
Lecture 5
An uppercase letter may seem symmetrical but a close examination of the
letter shows that the left slope is thinner than the right stroke.
Fig 1.6 Univers Font with Grid
The complexity of each individual letter for can be demonstrate here. A
comparison on how stems of the form finish and the bowl meet the stems
reveal a distinguishable difference between the two.
Fig 1.7 Comparison between two similar fonts
Lowercase letter forms tends to fit within the x-height. However, curved
letter forms can goes slightly beyond the median line or base line. Be aware
of the counter form, the space describes by the strokes of the form and
includes space between them. How well you handle counter, can determine how
easily we can read what's been set.
Fig 1.8 Counterform
In order for someone to create a typeface, one must understand and analyze
the type fonts.
Extra Note
- Never use swashes in uppercase letters together as a word.
- If working on complicated typography project, pick type families many
typefaces.
- Small capital are normally use in uppercase abbreviation.
- Lowercase numerals information such as years are use in access ans sticks
out from a sentence.
- Mistakes made by other students is making lots of different changes to the
character.
Instructions
<iframe
src="https://drive.google.com/file/d/1jtp1y920OHZKT0pbHIBkkOOkPLTeg92c/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 3 - Type Design and Communication
EXPLORATION
On the third task, we are task to write down patterns and alphabets in
different types of tools and is encouraged to use tools that are not use
for traditional writing from one of them. For each tool, we have to write
five more sets of alphabets, each are the result of using different ways
to write. The top left paper uses a fine tip pen, the top center paper
uses a paintbrush, the top right center uses a calligraphy pen tip, the
bottom left uses the Chinese calligraphy brush and the bottom right uses a
scissors smeared with black ink.
Fig 1. Experiment with Different Tools (30/05/2023 Week 9)
Then we have to pick the specific tool and specific way of writing in
order for us to continue to the next stage of this project. I decide to
pick a set that uses a paint brush tool while holding it like a Chinese
typography brush. I then write down several more sets of letters in
order to perfect the writing.
Fig 2. Practice Writing (31/05/2023 Week 9)
After I have written a significant amount of writing, I pick a set
of that stands out to me. This is the particular set that I have picked.
Fig 3. Chosen Set of Alphabet (31/05/2023 Week 9)
RESEARCH & DECONSTRUCTION
The next stage of our project is to digitize our fonts. First we have to
pick a font that looks similar to the font we are going for. The font
closest to the look I'm going for is called Burgendry. After picking the
font, I deconstructs the font and analyze what makes this font special,
what is unique about the font and how does it's shape help convey the
feeling of organically written shape.
The Burgendry font has multiple instances of an extra mark that protrudes
beyond the base line and/or the cap line. I have also notice that a lot of
the strokes in the letters has weight transition; from a thick stroke at
the bottom or left to a much thinner stroke above or on the right. The
angles with in the counter of the letter such as A that positions
alternately tends too have different angle to create an organic shape.
Most of the shape here are bent, there are ab occasional straight stroke
used in a few of the letters. I have also notice that the decorative gap
that emulates the loss of paint tend to be on the left side of the
stroke.
Fig 5.1. Deconstruction of Burgendry font (04/05/2023 Week 10)
Realizing that Burgendry is not exactly the best front to emulate if the
result I want has to be neat. I decide to analyze another font so that I
can find a balance between keeping the fonts organic without it becoming
messy. So I download a font call Kalam and start deconstructing again,
this time with a much neater font. Much like Burgendry, I have notice that
some of the stoke has a weight transition from heavy to light. I have also
notice that this font has use parts of other letters to make a different
letter, for example. the I stroke is use to construct the H. Also
similarly to Burgendry, the angles that are placed alternatively both have
different angles.
Fig 5.2. Deconstruction of Kalam font (04/05/2023 Week 10)
DIGITIZATION
After analyzing the font and do some research. We take the information and
starts to digitize our fonts. The first things I do is that I create the
guidelines for the letter construction. As mentioned during the lecture,
those lines are the base line, median line, cap line, ascender line and
descender line. To determine the line position, I use the line guideline
from my analysis of the font similar to the look I'm going for.
I then place my set of alphabet into adobe illustrator and begin my
digitization process. The first letter are add is the letter A. I use the
pen tool and roughly trace the letter.
Fig 4.1 Tracing Shapes (04/05/2023 Week 10)
After the letter A, I will duplicate parts of the letter and use it for
other letters unless the letter has newer parts that no available parts can
imitate, for example: the letter A does not have a curve section to create
the letter P.
Fig 4.2 Copying a stroke from T and apply it to K (05/05/2023 Week
10)
Fig 4.3 Removing Diagonal Stroke to make P (05/05/2023 Week 10)
Fig 4.4 Use a stroke in K to be Used for G (05/05/2023 Week 10)
I repeat the process for all the other letters. From what I have learn
about the fonts I am trying to imitate. I decide to make my fonts a lot
more narrower and here is the rough result.
Fig 4.2 Rough Digitization Fonts (06/05/2023 Week 10)
In the next few steps, I smooth out the rough digitization of the font and
add a few details such as a paintbrush trail. There are a few
experimentation here and there. My font went through a few developments.
The first development, I added a brush stroke like effect for the letters
and smooth out the letter for a bit. In the second development, I make a
small changes on the letter G and I create a gap within a curve stroke
used to create the letter G, R and P.
Fig 4.3 Development of Fonts (06/05/2023 Week 10)
After I have receiving a few suggestion on how the font should be made
however, I decide to revert back to the first development and
redevelopment my fonts. This time however, I add the punctuation along for
the development. I add two different exclamation points so that I can
choose during the final result.
Following Mr. Vinod's suggestions, I proceed to create the font
accordingly.
Fig 5.1 First Development (07/04/2023 Week 10)
Fig 5.2 Second Development (07/04/2023 Week 10)
I then show my second development to Mr. Vinod who has given a feedback
which will be state in the feedback section. I then adjust the font
according to the feedback especially with the letter R and P. I also make
the Y narrower.
Measurement (Measure from Baseline)
Ascender Line: 735.6
Cap Line: 699
Median Line: 500.8
Descender Line: -207.8
FONT LAB DEVELOPMENT
Mr. Vinod has recommended that we watch Font Lab tutorial and follow the
instructions there. In addition, he also shows us demonstration on how to
import the fonts in class. First, I have to copy and paste the fonts onto
Font Labs.
Fig 7.1 Transferring fonts into FontLabs (07/05/2023 Week 10)
Then, I'll start to apply kerning to every letter combination possible to
ensure nothing overlaps or the spaces between letters isn't to big.
Fig 7.2 Kerning Letters in FontLab (07/05/2023 Week 10)
FINAL TYPE DESIGN
Fig 8.1.1 JLWZ Brash Brush Demo Preview (21/05/2023 Week 12)
Fig 8.1.2. JLWZ Brash Brush Demo Preview in PDF (21/05/2023 Week 12)
Fig 8.2.1. JLWZ Brash Brush Poster Preview in JPG (21/05/2023 Week 12)
Fig 8.2.2 JLWZ Brash Brush Poster Preview in PDF (21/05/2023 Week
12)
Reflection
Experience
Working on task 3 is quite interesting, not as interesting as the animation
section of task 1 but interesting regardless. It is the only task that
involves a hands on section where you use actual tools to explore the
potential design of your type design rather than simply sketch out a design
and the digitize it. It is also a somewhat time sensitive project as it
relies on fontlab demo. I have learnt how fonts are properly designed and
the stages of designing a typeface. I have also learnt how to use
fontlab.
Observation
I have observed that adding small details onto typefaces such as a jagged
decor to emulate the actual sketch of the design may not work when
digitalizing. A design may look good in sketches but may not be good when
digitalized.
Findings
During the development, I find the importance of the hands on section of
task 3 is that a potential good idea could come into existence by accident.
In this task while using a paint brush and ink resulted in a gap due to the
way the bristle is arrange. Liking the design potential, I try to repeat the
effect again and again using several methods.
Feedback
Week 11
Specific Feedback
Add a double stroke to the letter R and P and make sure that the line ends
roughly on the base line.
Week 12
General Feedback
If the text poster is large in size, pay attention to the kerning of the
letter. Use your creativity to do things that are beyond the rules of what
needs to be done such as adding words by repeating the sentence. Position the
small caption in a way that connect itself to the main wordings of the poster.
If the space is too big, break them by adding content in it.
Specific Feedback
To create impact, the wording should be place either at the top or bottom to
create tension. What ever space there are, break them by adding contents.
Further Reading
Lettering and Type: Creating Letters and Designing Typefaces by Bruce Willen
For this task, I decide to pick up a book called Lettering and Type: Creating
Letters and Designing Typefaces by Bruce Willen as it is relevant to this
task. There are quite a few thing I have learnt form this book; the first of
which is the principal elements that define individuality. First is the stroke
weight and contrast which refers to the the width of the stroke between thick
or thin, another is the x height, length of descenders and ascenders, the
shape and geometry of curves, aperture, line and edge quality. I have
also learnt more on constructing uppercase letters and what designers
typically do when designing them. As uppercase letters are bigger, the letter
compensate the large space by having a thicker stroke and slightly condense
uppercase letters.
There are also additional info on multiple effect an aspect can make or break
a typeface such as an E with arms of equal lengths make it look awkward, a
letter U with a heavier stroke on the right makes it look backwards, diagonal
of equal lengths makes K dark and heavy, Y with a thicker stroke on the right
makes it look backwards, T should not have a very light stem and very heavy
crossbar etc.
Comments
Post a Comment