Typography task 3
7/4/2023 - 7/7/2023 Week 1 - Week 14
Wong Kai Xin / 0353027
Typography / Bachelor of Design in Creative Media / The Design School
Task 3 - Type Design & Communication
LECTURES / CLASS NOTES
Week 8 :
Before class, we were instructed to bring along 5 writing materials with
different nibs to class
In class, we were asked to write these on a piece of graph paper. The main
purpose of this is so we could experiment and familiarize with our
handwriting style better before the digitizing process.
Fig 1.1 Writing practice 26/5/2023
Fig 1,2 Writing practice with different nibs 26/5/2023
Note: When writing the letter "O", draw two crescents.
For this week, I watched a tutorial of Mr Vinod guiding us how we could
digitize our letterforms. Some ways we could do this are by using the brush
tool, shape tool or shape tool.
Fig 1.3 tutorial on typeface construction
Some additional notes from class
- order of lines : descender --> baseline --> x-height --> cap height --> ascender
- when bringing the letterforms in illustrator bring them all at once, don't resize them
- once you draw a vertical stroke, use it for the rest of the letterforms, don't need to draw them again
- ideally x height is 500 pt
Week 10 :
- The refine stage is when you improve the strokes of your letters and make the strokes smoother, basically making it look better and more uniformed
Fig 1.4 example of the refining stage
Summary of steps to insert fonts into fontlab:
- file
- font info
- family dimensions
- fill in ascender descender
- after placing ur letter, remember to press KEEP, not round
- font lab preferences
Fig 1.5 font lab preferences
Fig 1.6 two lines on side are know as left and right bearings
7. after that, go to windows
8. click new metrics tab
9. to kern, click this
Fig 1.7 button for kerning
After that, adjust the numbers accordingly in the table on the bottom
left as shown in Fig 1.8
Fig 1.9 Illustrator to FontLab Demo
Fig 1.92 FontLab 7 Demo
Week 11 :
In class, we were given a tutorial on how to export our font and type it on
Adobe Illustrator, to create our A4 poster.
Requirements for poster:
- A4 and only black & white
- all words must be the same font size
- can change angle
- can use helvetica, 12 pt, 14 leading (when writing your name and font name)
- must have impact
- size matters
Additional class notes:
- kerning pairs affect only 2 letters when typed together and only to be used if the problem cannot be fixed with the normal kern
- try to keep left bearing at 0 and adjust right bearing, only adjust left bearing if needed
INSTRUCTIONS
For task 3, we were required to create our own fonts, using the softwares,
Adobe Illustrator as well as FontLab 7. We first had to sketch out the
letters "AETKGRIYMPN" physically, , then digitise it in Adobe Illustrator.
After that, we were to kern and adjust the type in FontLab 7, which then
will be used for designing an impactful A4 poster.
EXERCISES
Week 8 :
We were told to write the letters " A E T K G R I Y M P N " (either
in lowercase or uppercase) with 5 tools in 5 different ways. As shown in
Fig, I practiced writing it on a rough paper before transferring it on graph
paper. Some things we had to take note of are:
- use one stroke
- write in one direction
- do not go over the stroke twice
Fig 2.11 Practice sheet 2/6/2023
Fig 2.12 different selection options 2/6/2023
The writing tools I have used in Fig are:
- Stabilo swing cool highlighter
- Artline 500A Whiteboard marker
- Smiggle color change marker
- Faber-castell permanent 1564
- Pentel sign-pen
- Stabilo boss original highlighter
Week 9 :
For this week, I focused on practicing writing in that style to later pick
which letters look the best so I can pick them for the digitisation process.
While I was writing, I realised it was not as easy as it seems to stay
consistent, even though I was writing the same letters repeatedly. Every
time I write a new row, it would appear slightly different, but those
imperfections are the beauty in handwriting.
Fig 3.11 Practicing writing in chosen style 2/6/2023
For the digitisation process, I created my own personalized brush to get a
more accurate stroke of what I have written down on the graph paper.
Fig 3.12 Personalized brush
After using the brush to create straight strokes, I added some of the
detailings with the help of the direct selection tool, curvature tool, as
well as the smooth tool.
Here in Fig 3.13 shows my first attempt on digitising letterforms
Fig 3.13 Digitisation of letterforms 6/6/2023
I also added guidelines for more accuracy
Week 10 :
This week, I learned about refining my letterforms. The biggest problem with
my letterforms are that the curved strokes being not smooth. With the help
of the direct selection tool, I adjusted it accordingly. I also learned that
having too many points will result into rough strokes, so Mr Vinod suggested
deleted those that are not in use.
Fig 4.11 Before (left) and after (right) refining of curved stroke
9/6/2023
After receiving feedback, Mr Vinod pointed out that stroke sticking out my
letters looked awkward so I removed it, however it looked too basic and does
not have any connections with my other letterforms. Therefore, I used the
thin stroke from the other letters "I' and replaced one of the strokes of
"N" with it.
Fig 4.12 Refining stage of the letter "N" 14/6/2023
Fig 4.13 Refining stage of the letter "A" 14/6/2023
Fig 4.14 Letterforms after refining stage 14/6/2023
Digitisation of punctuations
Fig 4.15vDigitisation of punctuations 14/6/2023
Week 11 :
After receiving feedback, I learned that the biggest problem with my type
are my punctuations. Following Mr Vinod's advice, I typed out letters and
punctuations from existing fonts that looked similar to mine and studied
how it was designed.
Fig 5.11 Bodoni 72
After examining the size and proportions, I improved my punctuations
Fig 5.12 Improved punctuations ( the 2 exclamation marks on the right are
drafts ) 16/6/2023
For the letters "Y" and "M", subtle changes were required but I definitely
see some changes. It made it more smoother looking and appear more
pleasant to the eyes.
Fig 5.13 Letters "Y" and "M" before feedback 16/6/2023
Fig 5.14 Letters "Y" and "M" after feedback 16/6/2023
For this week, I focused on kerning my letterforms, then creating my
poster using my newly designed letterforms.
Before I did kerning, I thought it would be quick and easy but it took
quite a lot of my time. I had to type out all the possibilities of the
type and kern accordingly. In my opinion, the most challenging letters
were A, Y, T, I
Fig 6.11 Kerning process 20/6/2023
Fig 6.12 Before kerning
Fig 6.13 After kerning
Next, I focused on creating my poster. It was kind of challenging to be
honest since we were only allowed to use one font size. But, I tried fun
placements so it wouldn't look too boring.
Fig 6.14 Poster draft #1 21/6/2023
Fig 6.15 Poster draft #2 21/6/2023
After receiving Mr Vinod's feedback on it, he suggested to move the font
name text in a vertical manner so it doesn't look like a feature. He also
suggested to break it up, making it look more interesting.
Fig 6.16 Final Poster 23/6/2023
Submission :
1. Font download link
Fig 7.11 Font download (PDF)
https://drive.google.com/file/d/15vubo7wXXBGVQA_GQjQ7d7C6ny_77mHA/view?usp=sharing
2. Ai generated construction on art board (JPEG)
*image was too large so I exported it with Adobe Photoshop
Fig 7.12 Ai generated construction on art board (JPEG)
Fig 7.13 Screen grab of "New Metrics Window" with sentence
4. Ai generated A4 poster (JPEG)
Fig 7.14 Ai generated A4 poster (JPEG)
5. Both Ai generated artworks in PDF
Fig 7.15 Ai generated construction on art board (PDF)
Fig 7.16 Ai generated A4 poster (PDF)
FEEDBACK
Week 8 :
Specific feedback: Mr Vinod preferred the 5th option out of my writing
styles and asked me to proceed with practicing how to write in that style
for the week.
Week 9 :
General feedback:
General feedback:
When writing the letter "y", remember to write it on the baseline, also
try to understand the typography anatomy as it will be helpful to you when
digitizing your letters.
Week 10 :
General feedback:
-Font should be consistent in its strokes, to achieve this, use the same
strokes eg: the straight vertical line in "I" can be used again in the
letter "T"
-Letters ending at same point gives consistency
-Angles should be accurate, hold your pen in one angle
-Look up fonts in google fonts to get reference
Specific feedback:
-The line sticking out above the letter "I" is awkward so it's better to
remove it.
-The "P" curve stroke is not smooth enough
-The lesser anchor points, the smoother your shape will get
-Maintain the thickness of the curves
-Shorten the tail of the curve sticking outside
Week 11 :
General feedback:
- don't mimic the imperfections of your handwriting, identify the principles
of your handwriting style
- adding a defined point creates a firmness to your letterform
- research sans serif font that have thin and thick strokes
- exclamation mark need to reach cap-height
- maintain the angle of brush
Specific feedback:
- the stroke doesn't have to be the same for exclamation mark, it could be
thick to thin
- height of hashtag is wrong
- M has an issue with the diagonal stroke and the thin and thick strokes
- have straighter line for the letter "y"
- curved ending to the straight stroke
Week 12 :
Specific feedback:
Don't put font name and name text on top, it looks like a feature. Place it
on the bottom or side
REFLECTION
Experience
This task was definitely the one I learned most from. From the sketch, to
digitising, to refining, to kerning, it was certainly not easy to just come
up with a font design. So much thought has to be put in it and among the
processes, the refining stage was the most challenging to me as it required
most thinking. However, the feedbacks from my friends and Mr Vinod really
helped me get through this task and I learned so much from the feedbacks
alone. Using the Fontlab7 software was new to me, and it was not easy to use
as well as the features were confusing. Lastly for the poster design, I was
a bit torn at first as I liked using different font sizes to express my type
in Task 1, however for this task, we were only allowed to keep one font size
for the poster. But this also gave me the challenge of figuring out how to
apply the use of positioning of the letters to good use.
Observations
Looking at other fonts similar to your font design really does help when you
are stuck during the refining stage. I was at doubt at first, but it really
guided me on how big or small a certain letter/punctuation should be. It
also helped with accuracy of the type. Not only that, I realised how tedious
the kerning process could be. It was entirely a time consuming task for font
creators as the letters look different next to each other, so I had to try
all possibilities I could think of and kern accordingly.
Findings
I found that refining your letters and punctuation marks are very important
as it will affect how your font will appear to reader's eyes. For example, I
didn't know that for the long line in the exclamation mark, the bottom part
of the stem is smaller compared to the top part of the stem. This is to
serve its purpose to indicate emphasis. Other than that, typographic
illusions: overshoots are something that I learned that I found really
interesting during this task. I never realised the curve in letters like "o"
are slightly bigger, to make them appear the same size as straight strokes.
FUTHER READING
Fig 8.11 GT Academy punctuation lesson 29
As shown in Fig, the shape of the period should be slightly larger than the
dot on the letter "i". In the case of heavier fonts, a heavier weight would
be used
Fig 8.12 Shape of period compared to letterforms
The size of a comma is around the size of two periods, but the head of the
comma should be slightly smaller than a period's
Fig 8.13 sizing of comma
Fig 8.14 stylistic options of comma
Fig 8.15 comma and semi-colon
Fig 9.11 Character with Braille
My friend recommended this article to me and I found it pretty interesting so
I decided to take a look.
Fig 9.22 formation process of Braille Neue
About Braille Neue, it is a font that is formed using Braille and letters. The main purpose behind this
font is help blind people to communicate with people who can see so that
they can share the same information.
Typefaces
Braille Neue Standard
Braille Neue Outline
Comments
Post a Comment