22.4.2024 - 29.05.24 ( Week 1 - Week 6 )
Lam Hui Zhen / 0374770
Typography / Bachelor of Design (Honors) in Creative Media / Taylors University
Task 1: Exercise
Table of Contents
- LECTURES
- INSTRUCTIONS
- TASKS
- FEEDBACK
- REFLECTIONS
- FURTHER READING
LECTURES
Week 1 - Briefing
Typo_0_Eportfolio Briefing
In the first class of Typography, Mr Vinod briefed the module and the overview of our course's rules. We are directed to create our own blogger as our e-portfolio platform. We learned some useful skills while creating the blog.
Typo_0_Introduction
In this lecture, Mr Vinod introduced to us what is typography, which is the basis of design that we meet on a daily basis.
-Typography
- Means the act of creating letters (Creation of typefaces)
- Important while designing a website, application, book, poster, logo, and more
- Have evolved over 500 years: Calligraphy > Lettering > Typography
Week 2 - Lecture 1
Typo_1_Development
-Early letterform development: Phoenician to Roman
- Scratching into wet clay with sharpened stick
- Carving into stone with chisel
- Uppercase is combination with straight line and circles
Figure 1.0 Evolution from Phoenician Letter
- Changed the direction of writing
- Developed a style of writing "boustrophedon"
- Text read from left to right, orientation of the letterforms also changed cause this
Figure 1.1 Direction of writing
Figure 1.2 Greek fragment, stone engraving
- Etruscan carves working in marble painted letterforms before inscribing them
- Change in weight from vertical to horizontal
Figure 1.3 Greek fragment, stone engraving
Figure 1.4 Conclusion of the early letterform development: Phoenician to Roman
Week 3 Lecturer 2
Typo_3_Text_P1
-Text / Tracking: Kerning and Letterspacing
- Kerning: Automatic adjustment of space between letters
- Letterspacing: Add space between the letters
Figure 1.5 Example of kerning and letterspacing
- Tracking: Addition or removal of space in a word or sentence
Figure 1.6 Normal Tracking, Loose Tracking and Light Tracking
Designers always letterspace uppercase letters, but there has long been strong resistance within the letters, it is because the uppercase are usually designed to be stand alone.
Figure 1.7 Normal Tracking and Loose Tracking
-Formatting Text
- Flush left: Each line start at the same point but ends wherever the last word on the line ends, space between the words are consistent.
Figure 1.8 Flush Left
- Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
Figure 1.9 Centered
- Flush right: Places emphasis on the end of a line as opposed to its start. Useful in situations.
Figure 1.10 Flush Right
- Justified: Imposes a symmetrical shape on the text, achieved by expanding or reducing spaces between words and letters. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
Figure 1.11 Justified
Sometimes justification is a reflection of certain type of mentality, it shows everything in order. We need to depends on the context that we are using while using different formatting text. Type that calls attention to itself.
The most important goals as a typographer or a designer is to make sure the showcase of the author's message is always clear, appropriate presentation.
It is important to understand how different typefaces feel as text by learning about the unique characteristics of each typeface.
Different typefaces suit different messages. As a good typographer they need to know which typeface suits the message and can express the message in a good way. Different texture of these typefaces will affected the feeling such as smaller x - height or lighter stroke. By make use of these, typographer or designer would be able to create a successful layouts.
- Text / Leading and Line Length
Allow for easy, prolonged reading.
- Type size: Text type should be large enough to be read easily at arms length
- Leading: Mostly vertical eye movement, it can help reader easily loose their place.
- Line Length: A good rule of thumb is to keep line length between 55-65 characters. This means it has bee balance. Short lines needs less leading
Shows sample of typefaces in various different sizes. It is to provide an accurate reference for type, type size, type leading, type line length etc.
Figure 1.13 Sample Type Specimen SheetTypo_4_Text_P2
- Text / Indicating Paragraphs
- Indicating Paragraphs
- Pilcrow (¶) is symbol from medieval manuscripts that seldom use today.
- Line Space ( Leading* ) between the paragraphs. This ensures cross-alignment across columns of text.
Figure 1.15 Line Space vs Leading
- Standard indentation: The indent is the same size of the line spacing,
same as the point size
- Extended paragraphs: Not usual as wide columns of text. It can be strong compositional or functional reasons for choosing it.
- Text / Widows and Orphans
There are two upardonable graffes which is widows and orphans. Widow is a short line that left alone at the end of the column. While orphan is a short line left alone at the start of a new column. Both of two are a serious error in typography, designer and typographer must avoid these two error.
Figure 1.16 Example of a widow and an orphan
- Text / Highlighting Text
Different kinds of emphasis require different kinds of contrast.
Figure 1.17 Example of highlighting text
- Text / Headline within Text
There are many kinds of subdivision within text of a chapters. They have been labeled based to their level of importance.
- A clear break between the topics within a section.
A heads are set larger than the text, in small caps and in bold.
- B heads indicate a new supporting argument or example for the topic at hand.
Figure 1.18 B heads in small caps, italic, bold serif and bold san serif
- The C heads is not common but it highlights specific facets of material within B head text.
C heads in this configuration are followed by at least a space for visual separation.
Figure 1.19 C heads in small caps, italic, bold serif and san serif bold
- Text / Cross Alignment
Cross aligning headlines and captions with text type reinforces the architectural
sense of the page.
Week 4 Lecture 3
Typo_2_Basic
- Basic / Describing letterforms
Evolved over 500 years, it employs a number of technical terms. Knowing a letterform's component parts make it much easier t identify specific typefaces.
- Baseline: The imaginary line the visual base of the letterforms
- Median: The imaginary line defining the x-height of letterforms
- X-height: The Height in any typeface of the lowercase " x "
- Stroke: Any line that defines the basic letterform
- Apex / Vertex: The point created by joining two diagonal stems ( apex above and vertex below )
Figure 1.21 Describing Letterforms pdf
Contains much more than 26 letters.
Figure 1.22 Uppercase & Lowercase
- Small Capitals: Uppercase letterforms draw to the x - height of the typeface. Primarily found in serif fonts as part of what is often called expert set.
- Uppercase Numerals: Same as lining figures, same height as uppercase letters. Used with tabular material or in any situation that calls for uppercase letters
- Lowercase Numerals: Same as old style figures or text figures. Set to x - height with ascenders and descenders. Far less common in sans serif type - faces than in serif.
- Italic: Mostly saw in roman style typeface. The forms in a italic refer back to fifteenth century Italian cursive handwriting.
Figure 1.23 Italic
- Punctuation, Miscellaneous character: Important to be acquainted with all the characters available in a typeface.
- Ornaments: Used as flourishes in invitations or certificates
- Basic / Describing typefaces
- Roman: Name this because the uppercase forms are derived from inscriptions of Roman monuments. Have a slightly lighter stroke.
- Italic: Oblique conversely are based on roman form of typefaces
Figure 1.24 Different Typefaces
The 10 typefaces mentioned in the following slide represent 500 years of type design.
These typefaces have surpassed the latter goal. They have remained in use for decades.
INSTRUCTIONS
Figure 2 Module Information Booklet (Typography)
TASK 1 EXERCISE - TYPE EXPRESSION
In this exercise, we need to select 4 words to express by using the 10 typefaces which is provided.
- No visual elements
- No color can be use
- Choose 4 words to express
SKETCHES
These are the 4 words I have chosen: Dive, Jump, Break, Fly
DIGITIZATION
Figure 3.1 Digitization
FINAL DIGITAZATION
ANIMATION
Animation process at photoshop and Illustrator
Figure 3.3 & 3.4 Animation process at photoshop
Figure 3.5 First attempt Animation for "Break" word
After I done my first animation, I'm not satisfied with it. It doesn't seem like something is broken. During the consultation time, Mr Max give me an advice that I can improve my animation by adding some fragments are falling down.
Figure 3.6 Final Animation
After some optimization, this is the final outcome of the animation.
Exercise 2: Text & Formatting
Kerning and Tracking
In this exercise we are assigned to write our name using the provided 10 fonts. This exercise are done in In Design.
Figure 3.7 Without Kerning
Figure 3.8 with kerning
Layouts
For this exercise we are assigned to design a layout with the provided paragraph. After the tutorial I end up 5 design for this exercise.
Figure 3.9 Layout 1
Figure 3.10 Layout 2
Figure 3.11 Layout 3
Figure 3.12 Layout 4
Figure 3.13 Layout 5
Final Text Formatting Layout
After go through the 5 layouts, Mr Max decided the first layout as my final layout for this exercise.
Figure 3.14 Text Formatting Layout without grid
Figure 3.15 Text Formatting with grid
Figure 3.16 Text Formatting without grid pdf
Figure 3.17 Text Formatting with grid pdf
HEAD LINE
Font/s: Bembo Std
Type Size/s: 72 pt / 24pt
Leading: 12 pt
Paragraph spacing: 0
BODY
Font/s: Bembo Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 55
Alignment: left justified
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm
FEEDBACK
Week 2
General Feedback
- Some of the designs didn't show the expression well.
- Graphic elements are prohibited from being used.
Specific Feedback
- For the JUMP word the first design was chosen, it shows the feeling of jump
- The second, third, and fourth designs for the BREAK word are interesting and can proceed
- Only the fourth design of FLY can proceed, it shows a scenario that words are flying in the sky by using the frame to create a scenario
Week 3
Specific Feedback
- Overall of the digitization are good, "Break" in a brick form are selected as the final digitization among the 3 designs.
- The design of "Break" in brick form be chosen to do the animation
Specific Feedback
- Overall ok
- Can do some animation that the fragments scattered on the ground to express more feeling about break
Week 5
Specific Feedback
- Make sure follow the instructions about the format
- All the paragraph must be align
- Proceed with Layout 1, move the title make sure it is align with the picture
REFLECTIONS
Experience
During the task 1 exercise 1 I'm quite enjoy while animated the word. I have some basic knowledge about illustrator but this is my first time try animated something even tough it is just a simple animation, but it's is kind of new to me. When it comes to exercise 2 the process is fast, but I still found it's interesting to design the layout by using InDesign. Although I've used InDesign before I'm still not familiar with it, while doing the exercise 2 it also help me to recap the knowledge that I have learn before.
Observations
In this class we can use our creativity as much as possible. Mr Max will guide us as much as he can to let us came out with a better design. During this task I found that most of my classmate have good idea and creativity while designing the word, I learned a lot from them.
Finding
In conclusion I realize that typography is not a easier work, it's more complicated and harder than I've imagine before. I wish I could experience more different and interesting typography in the coming task.
FURTHER READING
Figure 6.0 The Vignelli Canon
THE VIGNELLI CANON
This is one of the book that recommend by Mr Vinod, after finish reading I found that some of the part are very interesting and helpful for my further task.
Figure 6.1 Color Chapter
In this chapter, it's state that they prefer to use primary color palette of Red, Blue, and Yellow while doing the design. I was confused at first while seeing this. But after I go through this chapter I found that a good design it often doesn't have to prove that they are a good design by using a lot of colors. " Use the right color at the right time", I like this sentence very much
Instead, sometimes the simplest color can prove that the work has done particularly good job in design and expression. Like the cover of this book, it's simple but fascinating.