Advanced Typography - Task 3 - Type exploration and Application
18/10/23-29/11/23 (Week 8-13)
Jessica Tjoe / 0361482
Typography/ BDCM/ Institute of Innovation and Technology
Task 3: Type exploration and Application
Instructions
<iframe
src="https://drive.google.com/file/d/1rSHAk5_7jaGV2ybMRJP2JTzAmKTvcTou/preview"
width="640" height="480" allow="autoplay"></iframe>
Lectures
Week 1
Week 2
Week 3
Week 4
Week 5
Research and experimentation: Idea Exploration Proposal - week 8 - 9
For this task we were ask to create a font to find a solution to an existing
problem. Throughout much of the process I couldn't really think of anything to
solve. It wasn't until I was working on my Live 2d Vtuber that I realized that
the user interface font infuriated me. A lot. So the task now was to create a
new user interface for Live2d (free version), This is apparently not a problem
in the pro version but I can't continue to use the pro version once my free
trial has expired.
<iframe
src="https://drive.google.com/file/d/13CJujSy4eByYl4bJkPRTYB4uDcjj8MHU/preview"
width="640" height="480" allow="autoplay"></iframe>
Figure 3.0: Experimentation (11/28/23)
Development
Development process of letters - week 10
In order to develop the fonts I first start off with a shape. Rectangle is
preferred using the shape tool (M)
I began bending the shape into a curve using the Curvature tool. Proceeding
with using the Japanese Soukou Mincho font for the reference. For this
particular example I used the Hiragana う or the Vowel U.
I then went on to add some more detail such as a curved tail after that
solidifying everything by using the select tool.
Figure 3.4: development of curves (11/1/23)
Figure 3.6: molding of letters (11/28/23)
Start of development: Capital Letters - week 10
After much experimentation I decided to develope the first 26 capital
letters.. Only to get feedback that it looks like a Tim Burton inspired
font...despite the fact I based most of the thickness of Soukou mincho. I
doubled down on it anyways because I love hallows eve and Tim Burton
movies.
Figure 3.1: First draft (11/1/23)
I finished this in 2 days. It took me 6 hours. there were plenty of things that could be improved on such as the Kerning and It looked better in the second draft.
Figure 3.2: Second Draft (11/1/23)
continuing the process I followed up with the process of creating the lower
case letters.
Figure 3.3: lowercase developments (11/1/23)
Development final stage: Punctuation
Continuing on with the Punctuation Mr. Vinod as per tradition decided to keep
us in the school until we were essentially done with our work. I honestly
thought I'd never finish and the thought of this drove me insane because my
parents are staying over and they are very particular about when I would be
home.
But fortunately for me I finished the punctuation in time.
For this I looked up some tutorials provided by Mr. Vinod last year. The
Instagram tutorials had indeed come in handy.
Figure 3.5: Punctuation and number development (11/8/23)
The punctuation and numbers were actually quite fast to develop. Included
are the numbers 0-9, period, coma, colons, semi-colons, curved brackets,
brackets, parenthesis, quotation marks, hashtags etc.
A lot of these were just taken from the letters in order to keep
consistency, however a handful were developed from scratch such as the
brackets, dollar, percentage, and the Ampersand (&).
Kerning
For Kerning I had to download Fontlabs 8. I previously used 7 but the
program's free trail had ran out and I was forced to download 8.
First I merged the letters together so they won't break apart during the
copy paste process. I also brought down the grid from the corner to make
sure that the letters paste properly based on previous experience.
Figure 3.7:Copy paste process (11/28/23)
Figure 3.8: Glyphs (11/28/23)
Once everything was done it will look like this. Now the capital S is on
the bottom because I re-copy pasted the glyph since I wasn't much of a fan
of the first one.
Now after this I genuinely did not know about the kerning guide in the
teams files so I kept at it typing sentence after sentence, Kerning each
one.
Figure 3.9: Kerning before knowledge of kerning guides
Figure 4.0: Kerning after knowledge of guides (11/28/23)
After I was told about the guide my Kerning became more consistent and
equal. I also began to Kern with specific groups.
Figure 4.1: Kerning process of axa (11/28/23)
You can download the font here:
Figure 4.2: SpookyLive Sans on Live2D Before and after.jpeg
I tried modding the software but it would take me too much time so I gave up
and just blocked out my screen shot and replaced all of the UI with my font.
When I asked my friends for feedback they personally preferred the default
free version font because it was consistently clear to see compared to the
thick and thin strokes of SpookyLive Sans despite the weird kerning.
Figure 4.3: the pumpkin patch invite.jpeg
I figured my font worked best for decorative purposes so using the pen tool
and shape tool I made this simple invitation to a Halloween party at the
pumpkin patch. This sparked a realization that SpookyLive Sans was better
used for Halloween decor. Such as this title card;
Figure 4.4: SpookyLive Sans Title card.jpeg
I found this silhouette image from Pinterest, something that made my font
stand out. So I did the same for the one below and found a different
transparent silhouette I downloaded for free.
Figure 4.5: Tim Burton quote.jpeg
The white on black worked really well so with advice from my lecturer I made
a spiral using lore that I made for my original song [Flying skeletons and
cookie nights.]
Figure 4.6: Spiral.jpeg
similarly I also did another one using artwork from the image that inspired
the lore in the first place.
It originally was going to be a quote from another favorite band of mine
called Ellegarden and their song Mountain top. But my lecturer advised me to
reduce it down to 3 words. "Dancing with demons". The character present is a
visual representation of my Vtuber avatar 'Nora', who is portrayed as the
main protagonist of the song's story.
Figure 4.7: Dancing with demons.jpeg
The following artboard I made had lyrics from one of my favorite bands Good
Kid and a lyric from their song Witches. I also found a witch hat png to go
with the image.
Figure 4.8: Witches.jpeg
Final Jpegs and PDFs
JPEGS
01.jpeg
02.jpeg
03.jpeg
04.jpeg
05.jpeg
06.jpeg
07.jpeg
08.jpeg
PDF
<iframe src="https://drive.google.com/file/d/1Uitt7Mzbqc1QgXcUe2nCKTBdIqb3G6ry/preview" width="640" height="480" allow="autoplay"></iframe>
Feedback
Week 8 - General... Don't make the problem you're gonna solve, that would be asking for too much. Instead find a problem to solve.
Specific...
Create a monospaced font
Week 10 - Specific... Make the lower case strokes thicker and don't
forget to show the process of making them.
Week 13 - Specific... Keep the presentation artwork consistent with silhouettes, goth like aesthetics and decorative.
Reflection
Experience
I am very stressed when having to be kept in a room for a very long time. I
did not like it when Mr. Vinod kept us hostage for a good day or so until we
finished the work. Although effective at producing creativity and such, I
absolutely hated it. It caused me a lot of unnecessary stress.
Observation
Even though the kerning is better than the default it is also a bit less
consistent with the thickness causing people to have a hard time reading
it. Most of the problem tends to do with the lowercase letters and the
fact the font is a lot more stylized compared to the default. Where you
can easily point out each letter with the default despite it's terrible
Kerning, its harder to see the lowercase letters because of
inconsistencies in the thickness of the stroke.
Findings
In conclusion it has better use as a decorative font compared to that of a
user interface font.
Further reading
Typographic design by Rob Carter, Philip B. Meggs, Ben Day, Sandra Maxa, and
Mark Sanders
For this particular task I had to look up some gothic fonts for reference.
My Work tend to look similar to that of a font used for a Tim Burton film so
I brought out this book and read up on the Gothic fonts page since they had
use of thick and thin strokes similar to what I use in my font.
Typographic design: form and communication Chapter 1 page 5
Comments
Post a Comment