Typography / Task 1
2.4.2021 - 30.4.2021 (Week 1 - Week 5)
Lew Se Win / 0347637 /
Bachelor of Design (Hons) in Creative Media
Typography
Task 1 / Exercises
LECTURES
Week 1
Today was the first class for the Typography module. We meet Mr. Vinod and
Mr. Shamsul through Zoom. Mr. Vinod gave us a briefing about this module and
notified us that all the class materials and announcements will be in the
Facebook group. Besides, Mr. Vinod also guided us to create our e-portfolio in
his class. We are also being informed that we have to watch pre-recorded
lectures on YouTube.
Week 2
We are divided into small groups to evaluate other's sketches. My groupmates
gave some feedbacks about my sketches based on the question provided by Mr.
Vinod. After that, Mr. Vinod and Mr. Shamsul taught us how to digitalize our
sketches using Adobe Illustrator. We were given time to try to digitalize one
of our sketches on our own and ask them questions after that.
Week 3
For this week's lecture, we started with the discussion of our
digitalize words. Students are separated into different breakout rooms and use
comments on each other's work. Later on, Mr. Vinod and Mr. Shamsul also gave
some feedback to a few students. After that, Mr. Shamsul teaches us how to
create a GIF using Adobe Illustrator and Adobe Photoshop. We are also given
time to create a simple GIF during the practical session.
Week 4
This week's lecture started with e-portfolio feedback from Mr. Shamsul. Mr.
Shamsul went through everyone's e-portfolio. Besides, Mr. Vinod and Mr.
Shamsul also gave some feedback on our last week's work, which is the animated
GIF. After that, we are assigned for this week's task, which is text
formatting. Mr. Vinod showed us step by step on doing the text formatting task
in Adobe InDesign. We are also given time to explore more on Adobe
InDesign.
Week 5
Mr. Vinod started this week's lecture by having a more detailed discussion on
text formatting. Mr. Vinod asked us some of the theories to make sure that all
of us understand the basics. After that, we are divided into breakout rooms
and we have to give some feedback on each other's design. Mr. Vinod also
scrolls through our work to give some feedback to random students. We were
also being introduced to task 2 before the end of the class.
Pre-recorded lectures:
Timeline
-
Early letterform (Phoenician - Roman)
- Initial writing = scratching into wet clay
- The Greeks changed the direction of writing (boustrophedon)
Figure 1.0 'boustrophedon', 5.4.2021
- Etruscan carves painted on marbles before inscribing them
Figure 1.1 Phoenician to Roman, 5.4.2021
-
Hand Script from 3rd - 10th century C.E.- Compressed version of square capitals
- Square capitals
Figure 1.2 Square capitals, 5.4.2021
- Square and rustic capitals
- Uncials
- Half-uncials
- Charlemagne
-
Blackletter to Gutenberg's type
- 'rotunda'
- Gutenberg's skills included engineering, metalsmithing and chemistry
Figure 1.3 Gutenberg's type, 5.4.2021
Describing letterforms
- Stroke: line that define basic letterforms
- Apex/Vertex: point created by joining 2 steams
- Arm: short stroke off the stem
- Ascender: portion of stem of a lowercase above the median
- Barb: half-serif finish on some curved stroke
- Beak: half-serif finish on horizontal arms
- Bowl: rounded form that describes a counter
- Bracket: transition between the serif and the stem
- Cross Bar: horizontal stroke that join 2 stems
- Cross Stroke: horizontal stroke that join 2 stems together
- Crotch: interior space where 2 strokes meet
- Ear: stroke extending out from main stem
- Em: (originally) width of an uppercase M
- En: half of an em
- Finial: the rounded non-serif terminal to a stroke
- Leg: short stroke off the stem of the letterform
- Ligature: character formed by the combination of 2 or more letterforms
- Link: stroke that connects the bowl and the loop of a lowercase letterform
- Loop: bowl created in the descender of the lowercase G
- Serif: right angled/oblique foot at the end of the stroke.
- Shoulder: curved stroke that is not part of the bowl
- Spine: curved stem of the S
- Spur: extension/articulates/junction of the curved & rectilinear stroke
- Stem: Significant vertical/oblique stroke
- Stress: orientation of the letterform
- Swash: flourish that extend the stroke of the letterform
- Terminal: self-contained finish of a stroke without a serif
The font
-
Uppercase
Figure 2.0 Capital letters. 12.4.2021
-
Lowercase
Figure 2.1 Lowercase letters, 12.4.2021
-
Small Capitals: uppercase letterforms draw to the x-height of the typeface
Figure 2.2 Small capitals, 12.4.2021
Tracking
- Kerning: automatic adjustment of space between letters
Figure 3.1 Kerning, 17.4.2021
Figure 3.2 Tracking, 17.4.2021
Formatting Text
-
Flush left
- starts at the same point, ends wherever the last word ends
- ragged right
Figure 3.3 Flush left, 17.4.2021
-
Centered
- imposes symmetry upon the text
- ragged right & left
Figure 3.4 Centered, 17.4.2021 -
Flush Right
- emphasis on the end of the line
- ragged left
Figure 3.5 Flush right, 17.4.2021
-
Justified
- centering
- 'rivers'
Figure 3.6 Justified, 17.4.2021
Indicating Paragraphs
-
Pilcrow: indicate paragraphs space
Figure 4.0 Leading vs Line spacing, 17.4.2021
Windows & Orphans
-
Windows: short line of type left alone at the end of a column of
text
- solution: rebreak your line -
Orphan: short line of type left alone at the start of new column
- solution: reduce line length
Letters
-
Uppercase letter forms
- suggest symmetry but not symmetrical
- may appear symmetrical, but left slope is slightly thinner
Figure 5.0 Baskerville stroke form, 29.4.2021
Figure 5.1 Univers 29.4.2021
-
The complexity demostrated by examing the lowercase 'a'
Figure 5.2 Typefaces Helvetica & Univers, 29.4.2021
Maintaining x-height
-
curved stroke must rise above the median in order to appear to be the same
size
Figure 5.3 x-height, 29.4.2021
Contrast
-
Most powerful dynamic in design
Figure 5.4 contrast, 29.4.2021
Different median
-
Type for Print
- ensure that text is smooth, flowing and peasant to read
- Caslon, Garamond, Baskerville
- elegant & intellectual
Figure 5.5 print type, 29.4.2021 -
Type for Screen
- use on the web
- enhance readability and performance on screen
- smaller typefaces, more open spacing
- Hyperlink : word/ phase/ image that you can click on to jump to a new document/ section
- Font size on screen : 16-pixel text
- Web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
-
Static Typography
- minimal characteristics
- Motion Typography
- "dramatize" type
INSTRUCTIONS
Week 1
We are assigned to sketch 4 out of the 7 highest vote words from this Facebook poll.
I did some research on different typography design on Pinterest before I start my sketches.
I did some brief sketches in my notebook. I chose the word slice, scream, eat and wave for this exercise.
Week 2
The "slice" word is the first word I choose to turn my sketches into digital version using Adobe Illustrator. I used the text tool and pen tool to create this design.
I tried different designs for different words so that I can explore more about digitalization.
Week 3
We are assigned to upload our digitalized words on a Facebook post.
Figure 3.1 is the GIF created in 15 minutes during the practical session.
After that, I tried to make the GIF using the word "eat".
I did few attempts but I was not satisfied with the first and second
designs. The result that came out was different from my expectation. Hence, I
tried to modify my designs.
Week 4
We learned a new Adobe software which is InDesign. We are required to watch 4
pre-recorded lectures to do the exercises. We are also guided step-by-step in
the pre-recorded lectures.
In the first video, we learned about
kerning and tracking.
Figure 4.0.1 Exercise, 25.4.2021
After that, we learned about the layout, which also includes point size, paragraph spacing and leading. Besides, we can always adjust the columns and margins. We should also make adjustments in kerning and tracking to reduce ragging in paragraphs.
Font size 10, Leading 12, Paragraph spacing 12, Line Length around 57
Week 5
We got some feedback from Mr. Vinod and other classmates. Hence, I did some
improvements to my text formatting design.
FEEDBACK
We should digitalize the words with lesser distortions.
Breakout room: The expression for the word "slice" and "eat" matched the meaning of the word. However, "scream" and "wave" need more improvement. For "wave" I could add text wrap to the word so that it can enhance the meaning of wave.
The word can be in different arrangements but it must be still readable. We should also minimize the usage of graphic elements.
For my e-portfolio, I have to add the word "exercises" beside task 1. Mr. Shamsul and Mr. Vinod said that I did a great job on my e-portfolio. However, I still need to add more for the further reading part.
Mr. Shamsul and Mr. Vinod went through my e-portfolio and said that I did well on it. They are also looking forward to better work.
Experience:
I think that Typography classes are interesting. We
could express the meaning of words with text and not graphics. The lecturers
are friendly and the module is constructed systematically. Digitalization of
words in Illustrator is not as easy as I think. For text formatting, I think
that it was a fun exercise. I learned new software, Adobe InDesign. Task 1 was
an interesting exercise and I learned a lot about typography after completing
task 1.
Observations:
I think that we are required to have great time
management skills as there are many deadlines arranged in this module. I was
impressed by the designs of my classmates. Their designs could express the
meaning of the word in a very direct way and also without using very few
graphic elements. Besides, I was familiarizing myself with Adobe Illustrator,
Adobe Photoshop and Adobe InDesign after completed task 1.
Findings:
I found that sketches are important to construct
nice artwork. Besides, it is important to document my process in a more
detailed arrangement so that my design can be present clearly. I also found
out that I need to put more effort into mastering Adobe Illustrator. Hence, I
will work hard for it. Moreover, I think that more explorations are needed for
me to gain more knowledge on typography. Thus, reading is important to gain
improvement.
FURTHER READING
I read the type history and timeline chapter from this book. It is written by Allan Haley with Kathryn Henderson. The history of type dates back to the ancient Greeks and the timeline starts through 2010. I found out that there are different typefaces develop in different timelines. Johannes Gutenberg was the first person to create the art of typography. In the 1980s, typography was founded to design and market in digital form. Later on, web fonts became commercially viable.
Besides, I read about type design and development. It is written by Gerry Leonidas. Now, we stopped counting the total number of typefaces in circulation but we all know the market is growing. Designers will use the past as inspiration and typeforms are inextricably linked to writing. It is not easy to design a full alphabet and there has been a gradual return to team design. Particular sequences are documented as starting sequences to the rapid development of a new typeface. Space between letters is also known as the most important element in a typeface.
Comments
Post a Comment