TYPOGRAPHY | TASK 1: EXERCISES
23.09.2024 - 28.10.2024 /Week 1 - Week 6
Loh Kai Xuan (0365780)
Typography, Bachelors of Design (Honours) in Creative Media, Taylor's
University
Task 1
TABLE OF CONTENTS
✦
Lectures
✦ Research
✦ Ideation
✦ Feedback
1. LECTURES
Week 1: Lecture Video 0-01
What is Typography?
the art or work of preparing books, etc. for printing, especially of
designing how text will appear when it is printed -Oxford Dictionary
It can be used in many ways!
Movie titles, GIF animations, UI/UX, Signage, bottle labels...
How to Learn?
- Practice, observation, reading
- Consult your seniors and teachers
- Trial and Errors
- "Learn the Rules before you Break them"
Font: Refers to the individual font/wight within the typeface.
E.g. Georgia Regular and Georgia Italics.
Typeface: Refers to the entire family of fonts that share similar characteristics
/ styles. E.g. Georgia, Arial and Times New Roman.
This module will cover:
- Type Creation
- Type Expression
- Type Arrangement
Development/Timeline
Phoenicians: Right to left writing, straight lines and pieces of
circles
Romans: Changed way of writing to "Boustrophedon" (Alternates
from L to R then R to L, even reversing the letters)
Etruscan: Change in weight from vertical to horizontal, started
the broadening of strokes at the start and finish of letterforms.
Fig 1.2. Late 1st century B.C.E. Augustan inscription in the Roman
forum, Rome.
HANDSCRIPT TIMELINE
Fig 1.3. Hand script Timeline Notes
TEXT TYPE CLASSIFICATION
Fig 1.4. Text type classification Notes
Week 2: Lecture Video 03 (Pt1)
Text/Tracking: Kerning and Letterspacing
Kerning: automatic adjustment of space between letters
Letterspacing: To add
space between letters
Tracking: The adding and
removal of space in a word or sentence
Designers always letterspace uppercase letters, but doing so to
lowercase letters receives strong resistance in the type community as it
affects readability.
- Flush Left: Mirror the asymmetrical experience of handwritting. (Ragged Right)
- Centered: Ragged right and left, imposes symmetry upon the text, adds pictorial quality. It is important to amend line breaks to ensure the text does not appear too jagged.
- Flush Right: Ragged left, places emphasis on the end of a line as opposed to its start. can be useful in situations (e.g. captions) where relationship between text and image might be ambiguous without strong orientation to the right.
- Justified: Like centering, it imposes symmetry, but can produce rivers of white spaces. Careful attention to line breaks and hyphenation is a must to amend this problem.
Fig 1.5. Anatomy of a typeface, picture taken from lecture
video
Leading and Line length
- Type Size: Should be large enough to be read easily at arms length
- Leading: Text set too tightly encourages vertical eye movement, a reader can easily loose his or her place. Too loose will instead create stripes, distracting readers from the material at hand.
- Line Length: Shorter lines require less leading; longer lines more. A good rule is to keep line length between 55-56 characters. Too long or short can impair reading.
Week 3: Lecture Video 03 (Pt2)
Indicating Paragraphs:
- Pilcrow (¶): A holdover from medieval manuscripts seldom use today.
- Line Space (leading*): If the lines spaces are 12pt, then the paragraph space is 12pt, to ensure cross alignment across columns of text.
Fig 1.6. from left to right, example of pilcrow and line space vs
leading, picture taken from lecture video
- Indentation: Typically, the indent is the same size of the line spacing or same as the point of your size.
- Extended Paragraph: Creates unusually wide columns of text. However, there can be strong compositional or functional reasons for choosing this method.
Fig 1.6. from left to right, example of indentation and extended
paragraph, picture taken from lecture video
Unpardonable Gaffes:
- Widow: A widow is a short line of type left alone at the end of a column of text.
- Orphan: An orphan is a short line of type left alone at the start of a new column.
- In justified text, these are serious gaffes, Flush right and ragged left text is more forgiving towards widows, but orphans still a big no.
- Solution for widows is to rebreak your line endings throughout your paragraph so that the last line isn't obvious.
- Orphans, require more care. make sure no column of text starts with the last line of preceding paragraph.
Highlighting Text:
Fig 1.7. highlighting text example, picture taken from
lecture video
- If we were to use another front to highlight texts, we should adjust the points to match the x-height.
- To ensure visual cohesion of text.
Fig 1.8. example of changing point size, picture taken from
lecture video
- Also take note, when highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis (right example) of the text ensures readability is at its best.
Fig 1.9. example of placing colour, picture taken from
lecture video
- Sometimes it is necessary to place certain typographic elements outside the left margin of a column type (extending as opposed to indenting) to maintain a strong axis.
Fig 1.10. example of typographic elements, picture taken from
lecture video
Quotation marks:
- Like bullets, can create a clear indent, breaking the left reading axis. Compare below.
- PRIME (') IS NOT A QUOTE (")!!!
Fig 1.11. quotation marks, picture taken from lecture
video
Subdivisions within Text:
- A head indicates a clear break between topics within a section. 'A' heads are set larger than the text, in small caps and in bold. The 4th example shows an A head extended to the left.
Fig 1.12. A head example from lecture video
- C heads are not common but highlights specific facets of material within B head texts. C heads are always followed by an em space for visual separation.
Fig 1.13. C head example from lecture video
- Putting together a sequence of subheads = hierarchy.
Fig 1.14. Example of heads from lecture video
Cross Aligning headlines and captions:
- Reinforces the architectural sense of the page (the structure) while articulating the complimentary vertical rhythms.
- E.g. 4 lines of caption type (leaded 9pts) cross align with 3 lines of text type (leaded 13.5pts).
Fig 1.15. cross aligning example from lecture video
Week 4: Lecture Video 02
Basics
Fig 1.16. Lecture notes for Type_04
Week 5: Lecture Video 05
Understanding
Fig 1.17. Lecture notes for Type_05
2. INSTRUCTIONS
3.1. PROCESS WORK FOR TYPE EXPRESSION
3.1.1 RESEARCH
Typography is done through the creative use of existing typefaces...
After researching the words in depth, I started looking for inspiration to
kick off my ideas! Through this I have learnt that many words can also
have the same meaning, or that words can be expressed in various
definitions. So I also looked for ideas from different word's typography
styles.
Fig 3.1.1 Images taken from
Pinterest,
Definition of Sleep from
Oxford Languages
Fig 3.1.2 Images taken from Pinterest, Definition of swirl from Oxford Languages
Fig 3.1.3 Images taken from Pinterest, Definition of cry from Oxford Languages
3.1.2 IDEATION
Using my research I did multiple quick sketches of any ideas that
come to mind on a piece of paper.
- Cry: I mostly went with the idea of making the word feel "small" to show vulnerability while crying and tears dripping down from 'r' and 'y'. I also made a design of the other definition of cry (like screaming for help), though eventually felt like the general meaning of cry would be more clearer to represent.
- Sleep: At first I wanted to make a bed or eyes closed with this word but as it was already done many times before i tried to get more creative and leaned more to making the word look "tired" by slanting it or sinking.
- Swirl: I had many ideas for this but my biggest problem was the readability so I had to explore more afterwards.
- Climb: This was an easy one as I really liked the idea of using stairs to show the climb, so I focused more on that instead.
After testing the fonts I chose Univers Lt Std Black as it looked like
blocks. I liked the stairs idea for climb the most, so i started to
explore different designs using the "shear tool" in Illustrator.
Overall I like the 2nd design on the first row that shows the climbing
idea more clearly.
Fig 3.2.4 Current Progress on Week 2
I was clearly struggling with Adobe Illustrator so I focused
more on digitalizing at least 1 design for each word so that i
can ask for feedback during tutorial. In the meantime, I watched
more tutorial to adapt to adobe faster.
Fig 3.2.5 "Swirl" type expression, exploration on week
3
Fig 3.2.6 Final still image text expressions for task
1
After all is done, I proceeded to the animation. I chose
"cry", as I thought that animating tears would be fun. I
only made 14 frames but, with stretching the tear drop and
appropriate positioning I tried my best to make it smooth. I
also lowered the opacity of the original still image and put
it at the back. This helped me to make it more
consistent.
Fig 3.2.7 14 frames of my "cry" animation in Adobe
Illustrator
Although I had a lot of technical issues while making
the animation. I am quite proud of how it turned out. I
made it feel a little playful but very "drippy" to
imitate a crying child.
Fig 3.2.8 Takuma Mamizuka from School Babysitters
(2018)
One subtle little thing was that I made the "c"
tilt while "crying" to represent the shivering
movement while crying. While the "r" is the up and
down movement when we cry too hard, or trying to
hold snot in. And "y", the more dramatic
interpretation of tears falling down.
Fig 3.2.9 Final animation of "cry" from
photoshop
3.1.3 FINAL OUTCOME
Fig 3.3.1 Final type expression PDF of "cry, sleep, climb and
swirl"
Fig 3.3.2. Final animation of "cry" from photoshop
3.2. PROCESS WORK FOR TEXT FORMATTING
3.2.1 Minor exercise on kerning and
tracking
Mr.Vinod provided us with instructions and videos to better guide us for
these minor exercises. Can refer above for detailed instructions. I first
typed out my name in 10 typefaces, following Mr. Max's instructions during
the tutorial.
Fig 3.2.8 Text Formatting Without Kerning and with kerning
Fig 3.2.9 Comparison of Text Formatting With and Without Kerning
and Tracking
I decided to switch a few fonts to something more readable as my name
includes a 'K' and 'X', so simpler fonts are more easier to perceive
compared to ornate ones.
Fig 3.3.3 Final Text Formatting
3.2.1 Minor exercise on kerning and tracking
For instructions, refer above. Following Mr. Max's instructions during
tutorial, I started with the body text, and made sure there are no
rivers, orphans, widows... etc.
Fig 3.2.10 Edited Body Text
Next, I did some research for inspirations regarding the layout. I
wanted to go for something simple yet easy to read.
Fig 3.2.11 Layout Inspiration
https://www.pinterest.com/pin/1018939484441785309/
Fig 3.2.12 Digital Exploration
After asking for opinion, I adjusted the 6th attempt and changed the font to Bembo Std due to requirements.
Fig 3.2.13 Final Composition
3.2.3 FINAL OUTCOME
HEADLINE
Typeface: Bembo Std
Font/s: Bembo Std Semi Bold, Extra Bold, Regular
Type Size/s: 44, 97, 21.6 pt
Leading: 0 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 8.5 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 63
Alignment: left justified
Margins: 12.7 mm top, 12.7 mm bottom, 12.7 mm left, 12.7mm right
Columns: 1
Gutter: 4.233 mm
Fig 3.2.14 Final Composition
Fig 3.2.15 Final Composition with baseline
4. FEEDBACK
4.1. Type Expression
Week 1:
Introduction to Typography and briefing on E-portfolio, Setup Blogspot. We voted 4 words for our first exercise: Swirl, Cry, Climb and Sleep. Then did some research on the words and look for inspiration.
Week 2:
General Feedback: Make the words more readable and use the 10 fonts as a base. Do not use illustrations.
Specific Feedback: Regarding first sketches, Make "Cry" feel more emotional, Make the
"EE" in sleep fall backwards instead of downwards. Explore more on "swirl"
and work on the 3d "Climb" design. Make the "swirl" designs more
readable.
Week 3:
General Feedback: Digitalize all sketch in adobe illustrator.
Specific Feedback: Cry, climb and sleep is good. Swirl does not feel like it's
"swirling". Should Explore more on bottom left design in Fig.3.2.2.
Week 4:
General Feedback: Animations don't need to have a lot of frames. Simple animations will do.
Specific Feedback: All great, can proceed. Animation good, can upload to blog.
Week 5:
General Feedback: Be mindful of orphans and windows.
Specific Feedback: Working on text alignment, recommended to create at least 6
different layouts and will decide on the final one in Week 6.
Week 6:
General Feedback: Finish and submit text alignment, remember to check for rivers and submit with baseline as well.
Specific Feedback: First and last design looks the best, but remember to change all font to Bembo Std.
5. REFLECTION
Experience
Typography was overwhelming for me, with the history, terms and many rules of typography. Even now, I'm still a little struggling with getting used to it but it was a rewarding experience. I learned a lot of new things about typography, and learned to put it to use through our assignments.
Observations
Compared to Foundation In Design subjects, which I already thought was a lot of work, typography was really fast paced for me. I had to get work done on different exercises every week. Something I observed from this subject is that I am more used to using pictures and illustrations as references or inspiration instead of type design. So I do not pay attention to little things like leading, kerning...etc. It was fairly new to me and I was surprised there was so much care put into typography.
Findings
This course is the first subject I encountered in BDCM. It helped me familiarize myself with the many soft-wares/websites we needed for this course. E.g. Blogspot, Adobe Illustrator, In Design...Other than that, it made me find out the crazy details that go into the art of typography, even the body text is very important. I also learnt that it is a good thing to have many drafts and sketches no matter how ugly they seem at first, as it can always be improved on.
6. FURTHER READING
Fig 6.1 The vignelli canon on design by Massimo Vignelli
This book looked interesting so I decided to read it. The design was what
piqued me the most. This book is about Vignelli sharing his and his wife's
professional experience and about typography in graphic design. I read the
first 10 pages, which were the introduction and regarding semantics, an
aspect of design that is important to him.
Semantics: The research and understanding all aspects of the subject
you will be designing.
15.10.2024.
I learned a few new terms I have never heard before, but the main one was
syntactics.
Extracted from PG12, The essence of syntax: the
discipline that controls the proper use of grammar in the construction of
phrases and the articulation of a language, Design. And grids are the best
helper to achieve this consistency.
Fig 7.2 5 laws of design layout & composition *golden rules* by (Shapes
by Sean)
24.10.2024.
I watched a video talking about design layout and rules. It was a short
and simple video that helped me a lot with text alignment exercise and I
hope to apply it more in the future.
- Modular Grids can be setup in Adobe soft-wares which can allow element to snap to the grid. This helps in a cleaner and organized design.
- Hierarchy and proximity in designs ensure visual engagement and guide the viewer's attention in the right order.
- Layering gives a sense of creativity which also gives depth to your designs.
- Harmonized colors enhance the visual appeal, and Global colors allow for easy and quick color adjustments across the whole designs
- Give a clear focal point so that the message and direction of the design is conveyed directly.
Comments
Post a Comment