Typography / Task 3(A): Type Design and Communication
15/10/2021 - 28/10/2021 (Week 8 - Week 10)
Alicia Teng Yi Ling (0345159) BDCM
Typography
Task 3(A): Type Design and Communication
LECTURES
Lectures 1-5 are in:
Task 1 / Exercise
Lecture 6 is in: Task 2 / Typographic Exploration & Communication
Week 07 (08/10/2021)
Notes from Mr. Vinod's Task Briefing:
- FontLab is required, but do not download it first
- Use Adobe Illustrator for font construction
- Do research first, search through Google and Pinterest - find good fonts to analyze and study, do further readings
- Watch the YouTube tutorials
Typeface Construction:
- Start sketching with the letters 'A,O,T,H' as they are easily interchangeable
- After you finish sketching, find a similar font from the ten typefaces Mr. Vinod provided to reference.
- After choosing the typeface, type out the letters then deconstruct them in order to see how the letterform was constructed.
|
|
Fig 1.1. Deconstruction of the letter 'r' |
|
|
Fig 1.2 x-height & guidelines |
Details:
- Dimensions: Board's height is 1000 pts. X-height has to be 500 pt.
- Use brush and shape tool to construct the letters
- Unite all the shapes in pathfinder to manipulate and structure the forms better
- The letters that I will be designing: a i m e p y t g d o b ! , .
INSTRUCTIONS
Task 3 (A) / Type Design and Communication
Research
To start off, I decided to look at fonts on Google Images and
Pinterest to find typefaces that I thought are interesting and
to take inspiration from them to begin this task's work. I liked the
two typeface designs below as both of them are modern, minimalist
and fit my aesthetic, so I decided to study them.
|
|
Fig 2.1.1 Typeface Inspiration I (19/10/2021) |
'Atiba' Font Letters: This was my initial inspiration for
my work as I liked the strong contrast between the rounded and
straight edges and it looked very bold. I did not want my own
typeface to have such a bold, thick look so I simply took
inspiration from this for the rounded corners in my work.
|
|
Fig 2.1.2 Typeface Inspiration II (19/10/2021) |
'Athena' Font Family: The reason I was chose this typeface was
because of how clean and minimal it looked when I first saw it.
Another thing I noticed was the different widths in the design and
I liked the contrast between the thinner and thicker lines in the
letters.
For my own work, I decided to draw inspiration from both of these
font typefaces. I wanted to include the strong contrast and mix of
curved inner corners and straight edges from the 'Atiba' font and
the different widths of the letters from 'Athena'. Using these
features I decided to make a variety of sketches.
|
|
Fig 2.1.3 Type Analysis I (19/10/2021) |
Then I studied two different typefaces to gain a better
understanding of how to utilize serifs and present the drastic
contrast in the widths of a letterform.
|
|
Fig 2.1.4 Type Analysis II (19/10/2021) |
Once again, I analyzed the 'Bodoni' font design as I wanted to
further understand how to create the dramatic difference between
thick and thin strokes in an aesthetic manner.
Sketches
I started by roughly sketching out different ideas on Adobe
Illustrator (they did not necessarily follow the inspiration but I
just wanted to try out different fonts). I tried out two lowercase
and two uppercase concepts. #1 is simple, rounded look but I
thought it was a little plain. #2 is personally my favourite idea
and it followed my inspiration and I thought it had the most
potential for this task. #3 is my first uppercase sketch, I added
a thick section to each letter in different styles but I thought
it didn't fit what I wanted to produce for this task. #4 is
the uppercase version of idea #2, although I like it, I felt it
was a bit too blockish.
|
|
Fig 2.1.1 Sketched out Ideas (20/10/2021) |
|
|
Fig 2.1.2 Refined Design (20/10/2021) |
I decided to go with number #2 as I wanted a thinner, cleaner and
more sleek typeface design and this one looks the nicest to me
personally. Then, I refined the design further in figure
2.1.2.
Progression
|
|
Fig 2.2.3 First Digital Draft (20/10/2021) |
Here is the updated and final typeface design after the
feedback I received on the 21/10/2021. I added the rounded
corners to all the letterforms, cleaned up the edges, lowered
the letter 't' slightly and also tapered the end of the
exclamation mark.
|
|
Fig 2.2.4 Final Typeface Design Progression (22/10/2021) |
Font Name - Basal
I decided to call my font 'Basal' as it means - relating to a
foundation or being essential. I thought that the typeface
looked quite sturdy and solid as I wanted to name it after this
word.
FontLab Process
|
||
|
Fig 2.3.1 Outline of Combined Letterforms (22/10/2021) in Adobe Illustrator
|
|
|
Fig 2.3.3 All Letterforms put into FontLab (23/10/2021) |
|
|
Fig 2.3.3 Kerning the letterforms(23/10/2021) |
Different Poster Compositions
Then I tried out different poster layouts. I think poster #1 is
good to showcase the different letterforms however is better
suited for reading purposes. I prefer poster #2 and #3 as they
look more visually dynamic and appealing. Between the two, I like
#3 more as it feels more complete and balanced in comparison to
#2.
|
|
Fig 2.4.1 Poster #1 (23/10/2021) |
|
|
Fig 2.4.2 Poster #2 (23/10/2021) |
|
|
Fig 2.4.3 Poster #3 (23/10/2021) |
Final Design Outcome
|
|
Fig 2.5.1 Final Design Outcome for 'Basal' Typeface Design - JPG(24/10/2021) |
Fig 2.5.2 Final Design Outcome for 'Basal' Typeface
Design - PDF(24/10/2021)
 | |
|
Fig 2.5.4 Final Design Outcome for Poster -
PDF(24/10/2021)
Fig 2.5.5 Preview of my Basal Font on Blogger
Please download my font
FEEDBACK
Week 09 (21/10/2021)
- General Feedback
- The design should remain consistent throughout each letter
- Commas cannot should not be too short
- Exclamation marks must taper at the end before the dot
- Specific Feedback
- Nice use of typeface
- Introduce the same amount of thickness throughout the different letters
- Letter 'T' is fine but a bit too tall so shorten that (come below the cap line)
- All the dots have to be bigger
- Space between the exclamation mark and the dot needs to be more
- Taper the line in the exclamation mark more (downwards towards the dot)
- Letter 'y' seems a little wider so replace that with the same 'g' letter just take off the top line
- Download FontLab
REFLECTION
Experience
- It was very fun doing this task as it allowed me to create my very own font from scratch. Although it was difficult at first trying to decide what kind of aesthetic and look I wanted to go for, I got there in the end.
- I learnt how to design and construct a typeface from scratch which will be a very useful skill for my future work and projects
- I like the way my final work turned out, although I did not in the beginning, I am proud of the progression and my efforts and how the end product looked like.
Observations
- It is quite difficult to create an overall visual balance to the different letters in my font. Dr. Vinod helped greatly by advising me to lower the letter 't' height and add the same curved corners throughout the entire typeface.
- The differences between the thick and thin strokes create a more dynamic appearance compared to a letterform with the same width all over.
Findings
- Kerning is very important, it contributes a lot to how the overall final typeface looks. For example, if the spacing is smaller, the words look more cramped and are perhaps better for reading purposes. Whereas, if the spacing is larger, the words look more free and could look more appealing in large works such as a poster title.
- Deconstructing letters is a lot more time consuming and difficult than I initially thought. The amount of details and nuances I found in one letter was so much more but it was still something fun to learn and understand.
FURTHER READING
|
|
Fig 3.2.1 Typographic design: Form and Communication by Rob Carter, et al. (18/10/2021) |
For my first further reading book, I decided to go with this one as it has very good basics and is easy to understand. I looked into different visual characteristics of letterforms.
|
|
This section goes into detail about:
|
|
|
|
This section goes into detail about:
- Thick/Thin Contrast
- Refers to the relationship between the thinnest parts of the strokes in the letters and the thicker parts
- The varying ratios between these parts produce a wide variety of visual textures in text type
- I was particularly interested in this section as I wanted to employ this in my own typeface as one of the features
- x-height
- Based on the height of lowercase letters without ascenders or descenders
- Can vary immensely in different typefaces of the same size
- Ascenders/Descenders
- May appear longer in some typefaces and shorter in others, depending on the relative size of the x-height
- Descenders are typically slightly longer than ascenders among letters of the same typeface
- Stress
- A prominent visual axis resulting from the relationships between thick and thin strokes
- May be left-angled, vertical, or right-angled in appearance
|
|
Fig 3.1.1 A type primer by John Cane (18/10/2021) |
For my second further reading for this topic, I decided to read this book. I read up on the topics:
- Digital Type
- Text typeface classification
- Understanding letterforms
- Maintaining x-height
|
|
Fig 3.1.2 Digital Type (18/10/2021)
Type forms developed in response to the growing
technology, commercial needs, and esthetic trends.
Certain models have endured well past the cultures
that they originated from.
|
|
|
Fig 3.1.3 Text Type Classification (18/10/2021) |
Different types of text type classifications have different visual impacts and meanings. For example, 'Script' is originally an attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in length text settings. Whereas, 'Transitional' is a refinement of old style forms, this style was achieved in part because of advances in casting and printing (thick-to-thin relationships were exaggerated and brackets were lightened).
|
|
Fig 3.1.4 Understanding Letterforms I (18/10/2021) |
|
|
Fig 3.1.5 Understanding Letterforms II (18/10/2021) |
The difference between the uppercase and lowercase 'a' is clear, not only in font style but in construction and history as well. The uppercase 'a' is a Serif with differences in stroke thickness and the lowercase 'a' is Helvetica and looks more modern and clean.
|
|
Fig 3.1.6 Maintaining x-height (18/10/2021)
The x-height generally describes the size of
lowercase letterforms. However, certain shapes with
curved strokes such as the letter 's' must rise above
the median (or sink below the baseline) in order to
appear to be the same size as the other
letterforms.
|
This is when I was still considering what type of font
aesthetic I would go for so I was interested in reading up
about Serif types because of the beautiful constructions and
forms that could be created in this type of style.
REFERENCES
Fig 2.1.1
(ATIBA): https://graphicdesignjunction.com/2017/06/fresh-free-fonts-for-designers-21-fonts/
Fig 2.1.2 (ATHENA):
https://www.behance.net/gallery/68991821/Athena-Font-Family-(Free-Download)
Fig
2.1.3: https://www.behance.net/gallery/92435979/Askja-Modern-Font-Free-Logos?tracking_source=search_projects_recommended%7Cexperimental%20fonts
Fig 2.1.4: https://looka.com/blog/modern-fonts/
Comments
Post a Comment