Typography - Task 02: Typographic Exploration and Communication
30/10/2023 - 13/11/2023 (Week06 - Week 08)
CHIN TZE WEI /
0357423
Typography / Bachelor (Honours) in Creative Media
Task
02 : Typographic Exploration and Communication
LIST
TABLE OF CONTENT
1.
Lectures
1.1
Class Summary
2.
Instructions
2.1.1
Reference
2.1.2
Sketches
2.1.4
Layouts Exploration
3.
Feedback
4.
Reflection
4.1
Experience
4.2
Observation
4.3
Findings
1. LECTURES
1.1 Class Summary
Week 06
- Update feedbacks for Week 06 in Google Feedback Sheet
- Complete and submit Task 01 Eportfolio (Deadline: 05-11-2023)
- Update Task 02 Eportfolio:
- Write lecture summary for Typo_6_Undersatnding
- Update progress Task 02 Editorial layout (Txt. Frmt. & Exp.)
- Update Feedback, Reflection and Further Reading for Week 06
- Upload final Task 02 onto Task 02 Eportfolio post
Week 07
- Complete and submit Task 02 Eportfolio (Deadline: 12-11-2023)
- Update feedback for Week 07 in the Google Feedback Sheet
- Prepare Task 03 material: Graph paper + 3 marker pens (must be 3.0 above)
- Task 03:
- Select a preferred font from the 10 font from the 10 fonts provided. Using the following letter H,o,g,b to do a detail dissection of the letters (write observations in Eportfolio)
- Sketch the following letters ODHNG/odhng using the 3 pens
- Explore 3 different writing styles for each of the 3 pens.
2. INSTRUCTIONS
Task 02: Typographic Exploration and Communication (Text Formatting & Expression) (20%)
Compose and express the content without color or images, but using minor graphical elements such as lines or shades. Explore different options for layout and expression through sketches. Create a well-designed layout with a headline that captures the spirit and message of the text.
- 2-page editorial spread (200mm x 200mm per page)
- With baseline grid (JPEG and PDF)
- Without baseline grid (JPEG and PDF)
Learning goal:
- To demonstrate the use of Grids, Layout and Page Flow
- To apply skills for effective typographic communication and achieve good reading rhythm with memorability.
<iframe
src="https://drive.google.com/file/d/1C4fkXOnm7iWihiwcIMiRYLEEDic3uJFE/preview"
width="640" height="480" allow="autoplay"></iframe>
2.1 Task 02: Typographic Exploration and Communication
This task combines two exercises from Task 1. We need to visually represent
the content provided in a 2-page editorial spread (200mm x 200mm). We can
choose one of three text options for the content. We should use the knowledge
we gained from previous exercises and other modules for this task. We should
also watch the Typo_Task2_Process Demo before starting this task.
Task Requirement:
- We should use the 10 typefaces provided in this task.
- Sketches and digitised sketches are required as part the process of composing layouts.
- A good layout is that the headline expression has an interesting interaction with the body text.
Headlines
- Use Adobe Illustrator for headlines and limit graphical elements to minor ones like lines and shades
Layouts
- We must use Adobe InDesign to compose the layouts.
- No images are allowed, only samll graphics allowed.
- Avoid putting important content and body text in the space between two pages. However, it is acceptable for a prominent and eaily readable headline to span across the gutter.
Submission requirements
- Spread size: 2 pages of 200mmx200mm on each page
- File size: 300ppi
- Format: 2 JPEGs and 2 PDFs (with and without grids)
- Additional layout in required
- Black and white colour
2.1.1 Reference
I decided to make an expression on the word "Unite" in the headline so I
search some images "unite" in the Website and also get idea from
Pinterest.
I have save those ideas inside my Pinterest Board: https://pin.it/1xfYdLe
2.1.2 Sketches
I came out with three sketches with different expressions of headlines and
layouts. I have mentioned the typefaces of the headlines and the number of
columns.
Figure 2.1 Sketch 01
Figure 2.2 Sketch 02
Figure 2.3 Sketch 03
2.1.3 Headline Expressions Exploration
For the expressions of the headlines, I want to make expressions on the
word "Unite"
I started digitising the headline of sketch 01 (Figure 2.1). I use the
reference that I had found on Pinterest. I made these sketches using the
software, Adobe Illustration.
Figure 2.4 Headline Sketch 01
Figure 2.5 Headline Sketch 02
Figure 2.6 Headline Sketch 03
2.1.4 Layout Exploration
I had made several layout for these task using Adobe InDesign.
Figure 2.7 Layout 01
Head
Font/s: Serifa Std (Unite), Adobe Caslon Pro (to visualise a better world), ITC Garamond Std (visual communicators renew their call for a change of priorities).
Type Size/s: 250pt (unite), 36 pt (to visualise a better world)
Body
Font/s: Janson Text Lt Std (55 Roman)
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: (Space after) 4mm
Characters per-line: 56 words
Alignment: Justify all lines
Margins: (Top, Bottom, Inside, Outside)10mm / (Gutter) 5mm
For Layout 01, page 01, I use 5 column for the Heading and the
Lead-in-text.
I use 2 column for the text body.
Mr Vinod did not choose this as the final layout of the task.
Figure 2.8 Layout 02
Head
Font/s: Gill Sans Std (U) & (nite), ITC Garamound Std (Visual communicators renew their call for a change of Priorities!)
Type Size/s: 172pt (U), 80pt (nite)
Body
Font/s: Bembo Std
Type Size/s: 11pt
Leading: 12pt
Paragraph spacing: (Space after) 3mm
Characters per-line: 46 characters
Alignment: Justify all lines
Margins: 10mm (Top, Bottom, Inside, Outside) / 5mm (Gutter)
For layout 02, I use one column for the Headline and Lead-in-Text.
I also use 2 column for the text body.
Mr Vinod choose this layout as the final one, but still got the room for
improve.
He said that, I need to do some changes for the Lead-in-Text and the
font size of the "to visualise a better world" and "visual communicators
renew their call for a change of priorities", make them more smaller and
make them allign with the text body at the next page.
Figure 2.9 Layout 03
Head
Font/s: Gill Sans (nite), Gill Sans (U), ITC Garamond Std (Visual communicators renew their call for a change of Priorities!), Gill Sans MT (To visualise A Better World)
Type Size/s: 109pt (U) / 36pt (nite) / 31pt (to Visualise A Better World)
Body
Font/s: Janson Text LT Std
Type Size/s: 12pt
Leading: 14.4pt
Paragraph spacing: (Space after) 5mm
Characters per-line: 101 characters
Alignment: Align left
Margins: 10mm (Top, Bottom, Inside, Outside) / 5mm (Gutter)
For layout 03, Mr Vinod does not have give me the specific feedbacks for
this layout.
But, I had do some "my feedback" regarding to this layout, which is
- The text body shouldn't be that long (viewer will be hard to read them)
- The font for "To Visualise A Better World" is not that suit, I think I can find another font to do a replacement to improve the layout.
Mr Vinod has choose the Layout 02 for the final layout.
Improvement on Layout 02
After receiving the feedbacks on Week 07, I had choose Layout 02 as my
final layout for this task.
I also had do some changes on it. I have change
Figure 2.10 Final Layout after adjustment
Final Task 02: Typographic Exploration and Communication
Figure 2.11 Final Layout (With Grid), JPEG
Figure 2.12 Final Layout (Without Grid), JPEG
Figure 2.13 Final Layout with Rectangle Box (Grid), PDF
Figure 2.14 Final Layout Without Grid, PDF
Figure 2.15 Final outcome with Grid, PDF
Head
Font/s: Serifa Std (Unite), Adobe Caslon Pro (to visualise a better world), ITC Garamond Std (Visual communicators renew their call for a change of priorities!)
Type Size/s: 250pt (unite), 36pt (to visualise a better world)
Body
Font/s: Janson Text Lt Std (55 Roman)
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: (Space after) 4mm
Characters per-line: 56 characters
Alignment: Justify all lines
Margins: 10mm (Top, Bottom, Inside, Outside) / 5mm (Gutter)
3. FEEDBACK
Week 07
General Feedback:
-
Do NOT have long line length
-
Do NOT have high contrast text in the body text
-
NEVER use fully justify (Alignment)
-
Do NOT format the text in BOLD
-
Avoid using visual elements for layout
-
Avoid rivers while formatting the text
Specific Feedback:
-
There is still have the room of improvement regarding to the
leading text.
- Do NOT have long line length
- Do NOT have high contrast text in the body text
- NEVER use fully justify (Alignment)
- Do NOT format the text in BOLD
- Avoid using visual elements for layout
- Avoid rivers while formatting the text
Specific Feedback:
- There is still have the room of improvement regarding to the leading text.
4. REFLECTION
4.1 Experience
Received feedback on editorial layout for text formatting, kerning, type expression, and overall layout. Improved with constructive feedback. Final editorial layout for Task 2 reviewed and given feedback. Briefed on Task 3 exercise to deconstruct letterforms and understand details of typography. Learned about stroke thickness variations by deconstructing letterforms.
4.2 Observations
From the feedbacks provided by Mr Vinod during lecture class in Week 07, I was able to see improvement in my first layout and final layout. Based on my observation, I starts to have a better understanding in Typography than before even though there is still have much to learn. Through feedback sessions, I learned and stayed on track.
4.3 Findings
For Task 02 Editorial Layout, I reseache and found many examples of layout that was really interesting on Pinterest and on Website. That inspired me a lot and motivated me to create a better work. By deconstructing letterforms, I learned how they were designed and how they differ in strokes, curves, and more. This gave me a better understanding of font design.
5. FURTHER READING
Based on the list of books given, I have chosen "A Type Primer" to begin my further reading.
Figure 5.1 A Type Primer by John Kane
A Type Primer is a book about typography, written by John Kane and published by Princeton Architectural Press in 2013. The book is intended for a general audience, and covers the basics of typography, including type history, type anatomy, and type selection. Kane also discusses the use of type in graphic design, and provides examples of well-designed typography.
Week 06
Chapter 05: Columnar Organization
This chapter explains the significance of columns in text formatting. Columns help us maximize the available space and balance the gray value on a page. It compares a 2-column layout and a 5-column layout for a text with 2 columns, highlighting the differences in space and gray value between the two layouts.
Week 07
Chapter 05: Columnar Organization
Creating a hierarchy in layout is important for readability. This chapter explains how to establish it and provides examples of typefaces, pt size, and more. Comparing and understanding the outcome of your design is crucial in choosing the correct typeface, font, and size.
