6th October 2021 - 27th October 2021 / Week 7 - Week 10 Name: Isaac Yaw Wai Zac (0343197) Course: Bachelor of Engineering (Hons) Mechanical Engineering Module: Typography // Mr. Vinod & Mr. Charles Task 3A
LECTURES
All the notes which are needed for this task were documented under Task 1
| Exercises and can be found under this Link.
Week 7 (6th October 2021)
Figure 1.1: Week 7's class session & briefing or task 3A
In this week's class session, we started off with a very
detailed briefing and explanation about Task 3A in which we would be using
new software, (Fontlab) to develop our own set of fonts which should be
available to be downloaded and used by other users. Then, we proceeded
with the marking of Task 2 (Typographic Exploration and Communication).
During the making of Task 2, we were all given a set of videos ( Typeface Construction | Fontlab 5 Demo | Fontlab 7 Demo ) to further allow us to understand the task.
Figure 1.2: Week 9's class session and consultation
In week 9's class session, we immediately started off with the consultation session, and all the general and specific feedback were given and documented in the feedback from the lecturer section down below. With the good progress from all of us, Mr. Vinod was very pleased and advised us to proceed with the development of fonts in Fontlab to be submitted by the upcoming class.
In the first video provided by Mr. Vinod on this task, there
were a few things advised and taken into account before getting our hands on
constructing our own fonts. We must first do some research to get idea
inspirations and we must also follow the 10 given fonts as a reference too.
In the process, we must deconstruct the letter to help us see the fine
details and small little details.
Figure 1.3: Example of a deconstructed 'r'
Figure 1.4: Illustration of lines as guides (x-height)
From the video, Mr. Vinod mentioned that the project settings
for this file are:
- 1000pt x 1000pt for each artboard
- 500pt (height) for x-height
With the help of this gridline(s), we get to observe clearly,
the x-height, ascender height, capital line, descender line, baseline, and
median line.
Figure 1.5: Illustration of baselines (labeled)
Following up with the next stage, I went and proceeded with the deconstruction of a few font designs out of the 10 given typefaces to further understand how the detailed view of each element and stroke was constructed by renowned typographers. The reason why I have chosen these few typeface designs is that they are the inspiration for my font that will be designed after this.
Figure 1.6: Deconstruction of Serifa Std (as of 6th October)
Figure 1.7: Deconstruction of Gill Sans (as of 6th October)
Figure 1.8: Deconstruction of Bodoni Std (as of 6th October)
In this task, we are assigned to design and create a limited
number of western alphabets. We can start off by choosing any existing font
design that fits well with the direction that we would like to head
into.
In the first part, a few design sketches were hand-drawn to
be prepared for week 8's consultation session. That is why all the font
families (10 given typefaces) were used as reference and design
inspiration when doing our sketches. According to the description given in
the module information booklet (MIB), the guide to having good typefaces
is to have character, presence, legibility, readability, and subtlety. The
letters we will design are ( a i m e p y t g d o b ! , . ).
According to the 'TYPEFACE CONSTRUCTION' video, only 3
letters will be finalised and Mr. Vinod suggested we pick one lowercase,
one with a descender, one with an ascender, and one within the
x-height.
Figure 2.2: Type design research #1 (as of 9th October 2021)
For the research #1 design, I documented it because of the
minimalistic look to it and it is also a type of font I prefer
(Sens-Serif) as it is more of an unconventional and informal design with a
clean and modern look to it. This set of font also covers both capital and
small letters comfortably, giving me design ideas that I could work on,
such as having my own fonts that have both capital and small letters that
are matching with one another.
Figure 2.3: Type design research #2 (as of 9th October 2021)
In the research #2 design, I documented this design under
this blog because of the slick design and it has a very creative manner in
the way the curves are used whilst maintaining an overall edgy style to it
when viewed from afar. Although this design is way too distorted and has way
too many graphical elements to it, I can still benefit and get some
inspiration from the good use of different thicknesses of the letter strokes
if I decided to go with a font type that could utilise this
effect.
Figure 2.4: Type design research #3 (as of 9th October 2021)
In the research #3 design, I got inspired by the font design
by Domino's Pizza as shown above which gives this very pleasing and
appetising effect. In my opinion, I think that it is because of the use of
colors, and also a very well balance of stroke thicknesses for each letter
in the font, especially the big headline. I personally prefer Sans-Serif
fonts over Serif fonts and therefore, I will most likely take most of my
design inspiration from this research #3 design.
Figure 2.5: Type design research #4 (as of 9th October 2021)
For design research #4, there is no specific design chosen
or selected but I documented these typefaces as a view of comparison
between different phenomenal/well-done fonts. Out of all 8 typefaces as
shown in Figure 2.5 above, I like the second design from the bottom
left because of its minimal design that also looks very clean. If I were
to use this as a design inspiration for my font, I would use it with less
curved strokes because I would go with a 'digital' and 'modern' look for
mine.
According to the video tutorial given by Mr. Vinod on this
task, we are only supposed to use the 10 given font families as shown in
Figure 2.6 below as guides/inspiration to develop our font types.
Although the examples in the type design research examples as shown in the
above diagrams have font types that are very different from the 10 given
typefaces, I got attracted to them and some of them inspired me to develop
my own typeface which is similar to some of the 10 given typefaces.
Figure 2.6: 10 given typefaces (as of 9th October 2021)
Before even developing my own typefaces in the first stage
(sketch), I needed to further understand the difference between Serif
fonts and Sans Serif fonts because they play an important role to meet
different scenarios and different viewing experiences by readers. I
watched this video attached below as a learning reference because this
video is very detailed and complete about this topic.
Figure 2.7: Video explanation on the differences between Serif and Sans
Serif fonts
(as of 9th October 2021)
Figure 2.7: Difference between Serif and Sans Serif fonts (as of 9th October
2021)
These two types of fonts are the 2 most widely used
families of fonts in which the Serif fonts have small strokes at the top
or the bottom of the letter and the Sans Serif fonts don't have these
strokes. With the use of different fonts, we get to influence readers and
illustrate the meaning/goal of our brand or even to deliver different forms of messages.
Serif fonts - (ornate, professional) (normally used in prints, like books
and newspapers)
Sans Serif fonts - (fun, hip, young) (commonly used in web, other liberal
mediums such as magazines)
2. Drafts (Sketches & Digital progress)
As for the first draft/progress, I did some sketches and most
of them were Sans-Serif fonts. I did also try out one Serif font to see how
it would look, and in my opinion, I still prefer the simple and clean look
from my Sans-Serif fonts especially the 3rd one as shown in
Figure 3.1 below. This font design is inspired by the Serifa Std font
and I mashed it up with a digital look.
Figure 3.1: Typeface sketches (as of 10th October 2021)
Figure 3.2: Progress #1 of digitising my font (as of 10th October 2021)
With the current progress #1 as shown above being brought
into week 8's consultation session, Mr. Vinod agreed with my choice of
going with the 3rd sketch design and he added that Sans-Serif fonts may
look simple, but they are not easy to be developed. I totally agree with
him about this statement because having a simple and minimal look means
that with even the slight change in curves/strokes/thickness, the overall
look of the typeface will be very different. With all the feedback from
Mr. Vinod, I then proceeded with the digitising of sketch design #3. All
the specific feedback from this session was documented in the feedback
from lecturer section down below.
Figure 3.3: Progress #2 of digitising my font (as of 13th October 2021)
Figure 3.4: Progress #3 of digitising my font - trying out different but
similar designs
(as of 13th October 2021)
As shown in Figure 3.3 above, a yellow bar/stroke was
used with the same thickness as each vertical and horizontal stroke as a
guide for spacing (kerning/tracking) between each letter. In
Figure 3.4 above, a more detailed overview of 3 different but
similar typefaces was made to see which one is better in terms of design
and has goof typography elements to it. As for the third typeface design
from the top, the close bracket that matches the 'digital' theme is very
contradicting because it now looks like a solid closed bracket { ] }
instead of a curved close bracket { ) }. With the slight changes, I was
very happy with the curved bracket as shown in
Figure 3.5 below.
Figure 3.5: Overview of digitised typefaces with gridlines & in
outline view
(as of 13th October 2021)
Figure 3.6: Overview of digitised typefaces in outline view
(as of 13th October 2021)
Figure 3.7: Selected typeface design (as of 16th October 2021)
With further observation and comparison, I went with the 2nd
digitised design (third one from the top in
Figures 3.4, 3.5, & 3.6). With the outline view of the typeface
design, we get to look closer and see that there is no overshoot in
letters such as (p,y,g,d,o,b) because all the strokes for this typeface
design are in either horizontal or vertical forms perpendicularly and have
no curves at all other than the points where the strokes meet. Therefore,
no overshooting was considered to maintain a clean look and consistency of
the strokes/elements.
Figure 3.8: Layout of letters & punctuations with grids in both outline and full form
(as of 16th October 2021)
From Figure 3.8,
1. Ascender line
2. Capital line
3. Median line
4. Baseline
5. Descender line
Figure 3.9: Progress #4 - Measuring baselines in pt before converting into
Fontlab
(as of 16th October 2021)
With the demo video provided by Mr. Vinod, I then proceeded
with measuring the point sizes relative to the baseline and all the
measurements were documented below. This step is very important as we need
it as reference lines when pasting our design into Fontlab.
Measurements (using the baseline as 0pt - reference point)
Ascender line - 731pt
Capital height/line - 696pt
Median line- 500pt
X-height - 500pt
Descender line - 228pt (negative)
Thickness of strokes (constant & consistent) - 100pt
Figure 3.10: Deconstructed 'Minital' typeface (as of 16th October 2021)
With the continuation of watching and referring to the
video tutorial provided by Mr. Vinod, we all downloaded the Fontlab 7
software and then copy and paste the designed fonts from Adobe
Illustrator. With this Fontlab software, we get to generate and download
the fonts to be used by all users. However, we must make the necessary
changes first before exporting the fonts because we may need to readjust
some elements/strokes/thickness, and most importantly, the letter-spacing
so that it would look appealing to by typed and viewed.
Figure 3.11: Progress #5 - copying and pasting font designs into Fontlab (as of
16th October 2021)
Figure 3.12: Progress #6 - filling up all assigned letters in Fontlab (as
of 16th October 2021)
Figure 3.13: Progress #7 - undergoing letterspacing in Fontlab (as of
16th October 2021)
Figure 3.14: Progress #8 - undergoing letterspacing in Fontlab (as of 16th
October 2021)
Figure 3.15: Progress #9 - testing out typing with designed font in
Fontlab (as of 16th October 2021)
After exporting the fonts, I was eager to try out the
interactive font typing on the Blogspot itself with the help of the video
prepared by Lim Jia Sheng. In the video, he already gave us the code
needed to be pasted onto the Html side under the Blogspot editor, and with
a few tweakings, we can run the interactive font typing bar in the
Blogspot post.
Figure 3.16: Progress #10 - Html coding for typing testing in Blogspot (as
of 16th October 2021)
3. First Draft and review on feedback
As shown in Figure 4.1 below, the first draft of my font designed after exporting from Fontlab 7 is displayed. I was very happy with how it turned out and I was ready with this progress when going into the class session in week 9 for the last consultation before the submission deadline.
However, Mr. Vinod gave a little feedback in week 9's session and a few changes were needed to be made before submitting the final typeface design. Overview of feedback:
- Looks very consistent
- Easy to be read
- Parenthesis (closed bracket) needs to be refined
- The 'dots' for i and ! should be larger in width
- the letter 't' shouldn't have an equal horizontal stroke
Figure 4.1: First draft for Minital typeface (as of 16th October 2021)
4. Final changes
From the feedback obtained from week 9's class session, I only needed to make a few final changes before finalising and exporting the final typeface design. The final progress were documented down below.
Figure 5.2: Task 3A (Minital) final submission in PDF - Typeface Design
In the progress of developing the poster design using my designed typeface, I made a few different compositions before finalising and to stay with one final design as shown in Figures 4.8, 4.9, and 4.10. In the end, I stayed with design #8 because I would try my best to avoid too 'graphical' designed posters as they tend to overdo or take to focus instead of trying to display the titles (fonts). My typeface design is named 'Minital' because it was inspired by the combination of 'minimal and digital'. As for the inspiration from the 10 given typefaces, I took most of the inspiration from Serifa Std and Futura Std.
Figure 5.3: Task 3A (Minital) final submission in JPG - Poster
After undergoing the marking process in week 10's class session, I received some feedback and the feedback stated that I could also add another submission by removing the keycaps graphical elements and rather maintain all the font sizes to be equivalent with one another for the title. With that, I made the necessary changes and documented the extra submission down below.
Figure 5.5: Task 3A (Minital) extra submission in jpg
Figure 5.6: Task 3A (Minital) extra submission in pdf
Duration overview:
Research - 1 hour
Sketches - 1 hour
Digitising - 9 hours
HTML coding - 1 hour
Poster development - 2 hours
Documenting in Blogspot - 4 hours
Total - 18 hours
FEEDBACK
Week 8
General Feedback: - In week 8's session, it was a self-learning week
and therefore, only a short consultation session was done. Overall,
my sketch design that was brought into the consultation session had
gotten positive comments from Mr. Vinod.
Specific Feedback: - In the comments, Mr. Vinod agreed
that I got with design #3 as shown in Figure 3.1 above and
then it is ready to be digitised. When digitising it, he
demonstrated a few letters to see how they would turn out in digital
form. He suggested that I could try out having slanted slopes for
the strokes whenever neccessary to see how they would turn out when
compared to the initial sketch design of having perfectly 90 degrees
(perpendicular) horizontal and vertical strokes.
Week 9
General Feedback: - In this week's lesson, we all showed our final typeface designs through the Facebook comments, and then individual feedback was given by Mr. Vinod. Overall, he was very pleased with my progress and results. There were some minor changes that I could improve and further work on before the submission the following week. Other than that, he mentioned that I could try using the Fontlab 5 software instead of Fontlab 7 because it is the more recommended one.
Specific Feedback: - For the feedback on my typeface design, Mr. Vinod mentioned that I should work on my parenthesis/'closed bracket' because it looks a little odd when compared to the other letters. Other than that, I could also reposition the ascender line and the capital line so that letters such as 't' 'd' & 'b' can look better composed.
REFLECTION
Experience
Week 7 - In this week, there were many things experiences as
there is no gap in between tasks and assignments which means that
we need constant work and research on our assigned tasks. Although there
were relatively overwhelming assignments, I enjoyed the process along
the way because I get to learn many different softwares in a short
period of time.
Week 8 - This week was a self-learning week and therefore, I was
enjoying the process of designing and developing my own typefaces. With
the final results/outcome, I was very happy with how it turned
out.
Week 9 - This week was somewhat interesting because I initially thought that the submission is in this week and therefore, I rushed through the task relatively fast. However, I learned a lot throughout the process because I learned how to manage my time better.
Observation
Week 7 - In the design research during this period of time, I
observed and found out many different unconventional and crazy-looking
fonts in which some of them were pleasing/ terrible/ weird/ creative/
attractive/ stupid in design. I did not know what different
typefaces/fonts can have a very big influence when being compared and
viewed from a different perspective.
Week 8 - There was nothing much being observed this week as I was
progressing and approaching the completion of my typeface design.
However, I noticed that with a slight change in terms of strokes/
alignment/ thickness/ angles, a very different viewpoint can be seen and
that is really interesting to observe.
Week 9 - From what I observed during the consultation session this week, most of the students did Serif fonts and they were very creative in their own ways. This helped me to gain many inspirations and helps to improve my creativity for future design assignments.
Findings
Week 7 - In the research process, I also did some exploration on my
peers' and seniors' typeface(s) designs. They are all very interesting
and creative because different people will have different tastes when
it comes to designing typefaces.
Week 8 - In this week, I did some extra research and findings which
were all documented in the further reading section down below. In this
finding, I instead looked out for fonts that were available out there
were similar to my designed font. With the comparison done, I was very
happy with my own design outcome and I get to extract a lot of
information from just comparing 2 similar typefaces.
Week 9 - Most of my research and findings were done in the previous weeks, and because of the feedback obtained from the consultation session, I went on and further observed my design inspirations which are the Serifa and Gill Sans so that I can fix the minor mistakes or improvements that can be made before the submission.
FURTHER READING
Figure 4.1: Typographic Design - Form and Communication (2015)
This is one of the more popular reference e-book
provided by Mr. Vinod under the files section in the Facebook
group. There are many parts to this book and there is one section
which I am most interested in, which is the font design section.
Although there were not that many font designs explained and
illustrated, I managed to extract a few digital-themed ones which
were somewhat interesting and some Serif fonts as design
inspirations.
Figure 4.2: Examples of digital-themed fonts (Page 134)
Figure 4.3: Illustration of a breakdown and comparison of Georgia
letterform (Page 135)
Figure 4.4: Examples of digital/pixelated-themed fonts (Page 136)
Figure 4.5: Overview of famous and most common typefaces (Page
140)
Figure 4.6: Examples of galactic-themed Sans-Serif fonts (Page
167)
Figure 4.7: Examples of more graphical font designs (Pages 199
& 200)
Figure 4.8: Typography Referenced - Visual guide to the language,
history, and practice of typography
With the first e-book used for further readings,
as shown above, I needed another e-book as a further reference
because it is better to look out for more design inspirations in
terms of typeface designs. To have some research on Serif fonts, I saw that the typeface design as seen in Figure 4.9 is very interesting and it is often seen in 'magical' themed posters. What caught my attention is the use of a very big contrast in the thickness of the strokes which were very pleasing and interesting at the same time. Although my plan was to go with a Sans-Serif font/typeface design, I thought of implementing this creative idea into the development process to see how it would turn out.
Figure 4.9: Illustration of several Serif fonts by German Olaya,
Zuzana Licko, Rui Abreu (Page 7)
Figure 4.10: Illustration of Sans-Serif 'Humanist' typeface
designs (Page 61)
Figure 4.11: Illustration of Sans-Serif 'Square' typeface designs
(Page 63)
After even further research and studies, I still went with an overall minimal typeface design because I like minimalistic designs. In this e-book, I was attracted to Sans-Serif SQUARE and HUMANIST designs as seen in Figures 4.10 and 4.11 above.
Comments
Post a Comment