29.08.22-Ending Date / Week 1-Week 5
Jennifer Huang / 352990
Bachelor of Design in Creative
Media
Typography
LECTURE NOTES
WEEK 1 - Introduction & Briefing
On the first day of class, Mr. Vinod did some basic introducing about
himself, then explaining about what we'll do for this semester. He then
showed us the media that we'll be using such as blogger, Facebook, YouTube
and others. The purpose of documenting our projects to blogger is to build
an e-portfolio that will be useful for us later on..
After that, Mr. Vinod assigned us to our first assignment, but he made
us do it step by step, firstly by making a quick sketch for the
Typography assignment.
Lecture 0 (Typo_0_Introduction)
Typography is a fundamental subject for design students. In this
Pre-recorder lecture, typography basically is the art of creating typefaces,
gifs and much more designs. it is important that typography should be
readable, legible, appealing. The use of typography can be seen in many
designs around us.. Typography isn't just designing texts but also used on
other aspects of design. Reading is crucial because this is a 500 years
worth of knowledge that has now been developed from calligraphy, lettering,
then typography. Calligraphy and lettering used to be made manually.
Learning process helps us to develop our creativity, as a designer a strong
mentality and discipline is required because learning is never easy, we need
to face the harsh truth and accept every feedbacks given to us, if it isn't
good enough, do it again until you slowly make progress.
Figure. 2 (Typography seen in daily surroundings) from
Google
Lecture 1 (Typo_1_Development)
Early Letterform development : Phoenician to Roman
writing back then means scratching into wet clay with sharpened stick
or carving into stone with a chisel. What we use is important because it
determines the writing result. The Greeks then decided to change the
direction of writing from right to left or as it was called
'Boustrophedon' they also changed the orientation of
letterforms.
The process of typographers back then carving letterforms begins with
sketch/draw it out based on the brush that they used, then carved into the
letters we know now.
Figure.3 (Evolution of the alphabet)
Google
Hand script from 3rd - 10th century C E.
Square capitals, mostly found in Roman monuments which then now simply known
as 'serif' fonts. Rustic capitals, is the compressed version of square
capitals, although it was easier to write, it was harder to read because
it's compressed and it wasn't the best development. Both the square and
rustic capitals was a result of writing in a fast way.
Roman Cursive, basically this letter is smaller but easier to read, it
contains both upper case and lower case. Charlemagne was the first unifier
of Europe since the Romans, due to the to much writing systems that made
many strange beliefs, so then they developed punctuations etc. Blackletter
(Textura), this letterform gained popularity in northern Europe, people
start to have different types of writing based on their own style.
Typography timeline :
- 1450 Blackletter : the earliest printing type.
- 1475 Oldstyle : for
book copying (Bembo, Caston, Dante, Garamond, Janson, Jenson, Palatino)
-
1500 Italic : can fit more words per page, they were considered a separate
typeface mixing with straight typeface (serif).
- 1550 script : very
decorative in nature, can be found in decorative cards.
- 1750
Transitional : This style was achieved in part because of advances in
casting and printing (thick to thin).
-1775 Modern : more
rationalization in comparison to the traditional letterforms.
-
1825 Square Serif : for advertising and commercial printing.
- 1900
Sans Serif
- 1990 serif / sans serif
WEEK 2
On this day, we were asked to present our sketches that we've made, he then
gave us some feedbacks regarding our sketches. Everyone was doing a great
job in their sketches, Mr. Vinod also gave us a bitter and honest feedback
about the work each of us made. Though he emphasized his intention on the
feedbacks he gave us in order for us to learn more and improve on our
designs.
Although others perspective and thoughts is important, it is even crucial to
stay true and confident about our own work. Mr. Vinod also told us that
aiming for validation from others won't be the best way to improve.
Lecture 2 (Typo_3_Text_Part1)
Kerning and letterspacing
Text/Tracking : Kerning and Letterspacing
Letterspacing = adding space to the letters.
Kerning = automatic adjustment of space between letters.
Tracking = addition or removal of space in a word or sentence.
Figure. 4 (kerning from
Google)
Kerning is used when we want to remove the awkward spacing , adding
letterspacing is when the letters are to tight.
Formatting text
Flush left : mirrors the asymmetrical experience of handwriting
(from left to right, because we read from left to right).
Centered : a symmetry upon text, equal value and weight from both
side. Sometimes its difficult to read due to the irregular starting point.
Flush Right : The opposite of flush left, the end of a line is neat,
but the starting line is ragged.
Justified : symmetrical shape on the text and achieved by expanding
or reducing spaces between words and sometimes between letters.
Figure. 5 (Examples of Flush left, Flush right, Centered and Justify
from
Google)
Lecture 2a (Typo_4_Text_Part2)
Indicating Paragraphs
Pilcrow (¶): A holdover from medieval manuscripts seldom use today.
Figure.6 (Pilcrow example from Google)
Line Space : between the paragraphs if the linen space is 12pt,
then the paragraph space is 12pt. to maintain cross alignment.
Widows and Orphan
Widow : a short line of type left alone at the end of a column of
text.
Orphan : a short line of type left alone at the start of new
column.
Figure. 7 (orphans and widows
Google)
WEEK 3
This week, we've digitalize our text expressions and will proceed to move on
to the gif animation process. First I sketch it out the layers that will be
made into the gif illustration. Then I watched the tutorial video on YouTube
that Mr. Vinod has provided.
WEEK 4
Finished our gif animation, asked for some feedbacks from Mr. Vinod.
Lecture 4 (Typo_5_Understanding)
Understanding letterforms
Designing letterforms needs to be
symmetrical
Maintaining x-height
Median line and baseline must be same size.
Figure. 8 (Median line and baseline from
Google)
Counterform
basically is the black spaces from the fonts.
the examinations of counterforms provide a good feel for how the balance
between form and counter is achieved and a palpable sense of letterform's
unique characteristics it also gives you a glimpse into the process of
letter making.
Figure. 9 Counterform example from
Google
<iframe
src="https://drive.google.com/file/d/1-ztUhMNlFXOG3lXLTnxmN05Pwdxk8Guc/preview"
width="640" height="480" ></iframe>
Task 1 (20%)
1) Type Expression
Timeframe : Week 1 - Week 5
Deadline : Week 6
Description : Throughout the beginning and the middle of the semester,
exercises will be prescribed one after the other. These exercises will
aid and benefit you in your quest to gain theoretical and practical
knowledge in Typography that will inform you and provide you with the
necessary experience to take on the module's tasks.
Type Expression : You will be given 4 words to compose and
express. During this class, I noticed that I am still too relaxed
with the tasks given to me, I procrastinate a lot! I still tend to
postpone to do tasks into the next day, which then leads to more pile of
works to do which then make the result/final work to be not as good as
it should be since I'm doing it quickly.
2) Formatting text
Formatting Text: Before commencing watch lectures: Text: P1 and Text:
P2. You will be given incremental amounts of text that address
different areas within text formatting i.e. type choice, type size,
leading, line-length, paragraph spacing, forced-line-break, alignment,
kerning, widows and orphans, and cross-alignment. These minor
exercises (Formatting Text 1:4to 4:4A) will increase your familiarity
and capability with appropriate software and develop your knowledge of
information hierarchy and spatial arrangement. The task ends with the
submission of one layout in A4 size, demonstrating what you have
learned from the incremental exercises. (2 weeks). Software: Adobe
InDesign.
Learning Goals :
- To be able to compose and express
using textual information
- To be able to format text for effective communication
EXERCISES
Task 1- Type Expression Sketch
On this first assignment, Mr. Vinod assigned us to our first assignment,
but he made us do it step by step, firstly by making a quick sketch for
the Typography assignment. I first search for some references on google
and Pinterest about this specific assignment, because honestly i have zero
ideas in me.. After doing some research and matching it with the
definition of the words that Mr. Vinod had given, I finally made some
sketches.
Figure 10. Sketch of Tired, Freeze, Sticky (Week 1, 1/9/22)
Figure 11. Sketch of Pain, Screech, Slam (Week 1, 1/9/22)
Type Expression into Digital
Having quite a hard time to learn adobe illustration for the first time,
but managed to figure it out with the help of Mr. Vinod's YouTube
tutorials.
Figure 12. Type expression (Before Feedback) (Week 2, 11,9,22)
Animating Type expression
During animating the type expressions, we'll have to watch the YouTube
tutorial made by Mr. Vinod or even others for further exploration...
During this gif animating, at first it was very stressful because I
haven't really understood the functions and the steps needed, but then I
begin to sketch out the ideas that I have and started out moving it to the
adobe illustrator and here are the layouts..
Figure. 13 (layouts for animating Gif) (Week 3, 18/09/22)
Figure. 14 (First idea for tired gif) (week 3, 18/09/22)
This was the first idea that I had for the "tired" animated gif, and
was quite happy with the result but figured out that I need too make
another one just in case this doesn't work out.
Figure. 15 (second idea for tired gif) (week 3, 18/09/22)
The idea here is just to make the 'I' seems like a battery, and the
battery is draining out.. but then realize
that no colors is allowed. So then I made another version.
Figure 16 (Final gif) (week 3, 18/09/22)Third attempt, I made a black and white battery draining version of the
previous animated gif. This was quite a fun thing to do for me , and I
also learn that turns out we could animate gif using adobe
illustrator.
Task 2 - Text Formatting
Figure. 17 (10 Families typeface exercise) (week 5, 26/09/22)
Figure. 18 (First layout idea) (week 5, 26/09/22)
Figure. 19 (Second Layout) (Week 5, 26/09/22)
Figure.20 (Third layout)
FINAL SUBMISSION
1. Type Expression Final
Figure.21 (Final Type expression gif) (week 3, 18/09/22)
Figure. 22 (Final Layout without guidelines) (week 5, 26/09/22)
Figure.23 (Final layout with grids) (week 5, 26/09/22)
Figure. 24 (Pdf with guidelines) (week 5, 26/09/22)
Figure.25 (Pdf without guide lines) (week 5, 26/09/22)
Fonts : Futura Std
Heading : Bold Condensed Oblique
Captions : Bold Condensed
Body : Light
Point Size
Heading : 40pt
Captions : 24pt
Body Text : 10pt
Leading : 11pt
Paragraph spacing : 11pt
Line length : 53-59
Alignment : Justify Align Left
FEEDBACKS
Week 2 :
General Feedback : It's great to have lots of idea, but
never attach all the ideas into 1 design, because the message from a
design are important when the idea is singular.
Specific Feedback : Although the idea is there, some of the sketch such as
freeze and screech needs more exploration. Must make sure that the
words remains without many letters being distorted.
Week 3 :
General Feedback: : The 4 digitalized type expression that I made turned out to be too
distorted and I ended up redo all of them except for
screech.
Specific Feedback : For screech, is okay. .the idea is there
and its acceptable, but the freeze is not exactly freezing, while
tired and sticky is too distorted.
Week 4 :
General Feedback : The final result is very good and
acceptable.
Specific Feedback : At first, Mr. Vinod thought that my "I" in
the "Tired" was too animated, but then he asked me and make sure if
that's actually the "I" of "Tired", I said it's true it's "I" from
"Tired" he then approved my animated text expression.
Week 5 :
General Feedback : The layout is
basic.
Specific Feedback : Wrong usage of font type, and some
paragraphs have 2 widows.
REFLECTION
Experience : My experience towards typography this far is that
I felt so stressed at the beginning, I get so overwhelmed during the
process mostly when I fail to make the type expression and when I
first get the harsh yet honest feedback from Mr. Vinod that time
during the digitalization of type expression, due to too much
distortion of the letters, I need to re-do everything, and wow I was
devastated because at first I was kind of proud of how it turned out,
also since this was the first time using adobe software. But then I
kept reminding myself that honest feedback is exactly what we need in
order to grow and learn more. So I'm quite thankful for Mr. Vinod for guiding us
this way, although sometimes may be hard but I'm sure we'll all get
used to this.
Observations: During this class, I noticed that I am
still too relaxed with the tasks given to me, I procrastinate a lot! I
still tend to postpone to do tasks into the next day, which then leads
to more pile of works to do which then make the result/final work to
be not as good as it should be since I'm doing it quickly. Now that
I'm aware of this, I'll need to start to be more diligent and do more
research about typography as well.
Findings: I discovered that I still lack of consistency in
doing my tasks, I only did what was told, whereas I could've provide
more. Knowing this, I'm definitely going to push myself to do
more.
FURTHER READING
1. I did some research for the type expression exercise, and found
lots of inspiration from Pinterest.
2. This is the blog I read for further readings about typography since I
was quite curious about typography on the beginning of class. Google
3. And then I look up to this blog about typography too Google
.jpg)
.png)
.jpg)
Comments
Post a Comment