Typography Task 2 - Typographic Exploration and Communication
04/05/2022 - 11/05/2022
Tan Pei Yun / 0345386
Typography /Bachelor of Design in Creative Media
Task 2 Typographic Exploration and Communication
(Text Formatting And Expression)
LECTURES
WEEK 6 - 04/05/2022
TYPOGRAPHY TASK 2 PROCESS DEMO
Fig 1.0 Typography Task 2 Demo Video,
Week 6 (04/05/2022)
Here we begin with our second task, which is about text formatting and expressions. In this video, Mr. Vinod demonstrates these two topics, which mentioned about how to edit with the spread in two page. The main idea for formatting was about to have a clear, consistent layout and have to ensure the information are readability, legibility and accessible to the reader.
INSTRUCTIONS
TASK 2 - Typographic Exploration & Communication
(Text Formatting and Expression)
In this task, we will be asked to express
typographically the content in the link provided in a 2-page
editorial spread. No images are allowed. However, some very
minor graphical elements, line, shade, etc. might be
allowed. Utilising the knowledge gained in the exercises and
other modules from the same semester, use Adobe
InDesign to typographically compose and express the text
within a given size (200 x 200mm per page) and only use the 10 typefaces given by Mr Vinod.
1. VISUAL RESEARCH
 |
Fig 2.0 Layout Inspiration From Pinterest, Week 6 (04/05/2022) |
These are some typography layouts which caught my eye in Pinterest, but I realized there are a few things to note and concern which are the readability of the text in heading and body-text. It is so nice to see how interesting and not boring each of their layouts are, something I hope to achieve in my own as well.
2. SKETCHES
 |
| Fig 3.0 Sketches Progress in Procreate Week 6 (04/05/2022) |
 |
| Fig 3.1 Sketches - Layout ideas #1 Week 6 (04/05/2022) In these sketches, I gathered a few layout ideas from Pinterest, as one of my targets is to make it look interesting and not boring. The content of "Follow the Code" is only have the heading and also the body text , but with the observation the paragraph were a little longer than the others , which can be slightly challenging in adjusting the columns and paragraph. |
 |
| Fig 3.2 Sketches - Layout ideas #2 Week 6 (04/05/2022) |
While brainstorming more ideas , I find it working with type on a path can be quite interesting and end up adding them to my layout ideas as well.
 |
| Fig 3.3 Final Sketches - Layout ideas Week 6 (04/05/2022) |
The sketches were quite hard for me to expect the final outcome as there are many things to concern for instance the paragraph, font , line length, alignment, leading etc and I decided to try out and experiment more further in the InDesign.
3. TYPE EXPRESSION
 |
| Fig 4.0 Progress in Type Expression Week 6 (04/05/2022) |
 |
| Fig 4.1 Type of Font Week 6 (04/05/2022) |
To figure out the font I would like to use for type expression , here I chosen few fonts that I really like which are the Gill Sans, Universe LT Std and Futura , they look kinda similar and I like about how they are a good reading fonts which they are based on simple geometric shapes like rectangles and circles and it is easier to transform and adding elements to it.
 |
| Fig 4.2 Variations of 'Follow the code" Type Expression Week 6 (04/05/2022) |
Typeface : Futura (Condensed ExtraBold) , Universe LT Std (75 Black) , Gills Sans (Bold)
The following are some type expressions I created using Illustrator, I added graphic elements such as lines and shapes and also transformed a few letters in the "F" and "L" to create emphasis which can help to stood out from other letters.
The following are some type expressions I created using Illustrator, I added graphic elements such as lines and shapes and also transformed a few letters in the "F" and "L" to create emphasis which can help to stood out from other letters.
LAYOUT PROGRESS
 |
| Fig 5.0 Progress in InDesign Week 7 (11/05/2022) |
|
| Fig 5.1 Cross Alignment , Week 7 (11/05/2022) |
|
| Fig 5.2 Hidden Characters , Week 7 (11/05/2022) |
 |
| Fig 5.3 Hidden Characters , Week 7 (11/05/2022) |
 |
| Fig 5.4 Layout Progress #1, Week 7 (11/05/2022) |
 |
| Fig 5.5 Layout Progress #2, Week 7 (11/05/2022) |
The following are the eight layouts I did at InDesign . To test whether the type expression and columns worked, I used few different types of expression and different columns in Progress #1, while in Progress #2, I used the same type expression and arranged them into two columns (2 & 3 columns). Below are a few of the ones I chose which I liked.
 |
| Fig 5.6 Layout #1 Week 7 (11/05/2022) |
Font : Gill Sans MT
Typeface : Gills Sans Bold Italics , Regular
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 35-43
Alignment: Left Alignment
Columns : 3
Gutter (for columns) : 5mm
 |
| Fig 5.7 Layout #2 Week 7 (11/05/2022) |
Font : Gill Sans MT
Typeface : Gills Sans Bold Italics , Regular
Condensed ExtraBold , 75 Black ,
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 35-43
Alignment: Left Alignment
Columns : 3
Gutter (for columns) : 5mm
 |
| Fig 5.8 Layout #3 Week 7 (11/05/2022) |
Font : Futura (Heading) , Gill Sans (Body text)
Typeface : Gills Sans Regular , Futura Bold
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 54-65
Alignment: Left Alignment
Columns : 2
Gutter (for columns) : 5mm
 |
| Fig 5.9 Layout #4 Week 7 (11/05/2022) |
Font : Futura (Heading) , Gill Sans (Body text)
Typeface : Futura Bold , Gills Sans Regular
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 52-65
Alignment: Left Alignment
Columns : 2
Gutter (for columns) : 5mm
 |
| Fig 6.0 Layout #5 Week 7 (11/05/2022) |
Font : Futura (Heading) , Gill Sans (Body text)
Typeface : Futura Bold (Heading) , Gills Sans Regular (Body text)
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 52-65
Alignment: Left Alignment
Columns : 2
Gutter (for columns) : 5mm
 |
| Fig 6.1 Layout #6 Week 7 (11/05/2022) |
Font : Futura (Heading) , Gill Sans (Body text)
Typeface : Futura Bold (Heading) , Gills Sans Regular (Body text)
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 55-69
Alignment: Left Alignment
Columns : 2
Gutter (for columns) : 5mm
FINAL LAYOUT
The first and second attempts in layout 1 and 2 had a slight mistake with the average character per line, where the columns doest not fit between 50-65 characters. So I decided to choose layout 6 and improved by adding more to it as my final outcome for task 2.
 |
| Fig 6.2 Final Layout - Progress Week 7 (11/05/2022)  Week 7 (11/05/2022) |
In order to express the words "follow" and emphasis the word "code", I added few shapes like triangle and rectangular shapes. Not only that, to avoid having too much empty space, I decided to use the heading "follow the code" to fill up the space and also reduce the opacity to achieve a kind of overlay effect.
 |
| Fig 6.4 Final Task 2 In JPG Week 7 (11/05/2022) |
 |
| Fig 6.5 Final Layouts in Blocks Week 7 (11/05/2022) |
Fig 6.6 Final Task 2 With Baseline Grids
Week 7 (11/05/2022)
Week 7 (11/05/2022)
Fig 6.7 Final Task 2 In PDF
Week 7 (11/05/2022)
Week 7 (11/05/2022)
Font : Futura (Heading) , Gill Sans (Body text)
Typeface : Futura Bold (Heading) , Gills Sans Regular (Body text)
Font size : 10pt (body text)
Leading: 12pt (body text)
Paragraph Spacing: 12pt
Average characters per line : 55-69
Alignment: Left Alignment
Columns : 2
Gutter (for columns) : 5mm
FEEDBACKS
Week 7 (11/05/2022)
Specific feedback
Specific feedback
Type expression could be explore more into a better idea , try to look find more inspiration and have stronger ideas. while for type formatting is to consider about the white space and layouts ideas can be strong , is good to use different fonts to differentiate, take note which word you would like to express it out and make sure in cross alignment and it should be looked in overall balance
General feedback
Avoid too much graphic elements to the type expression and avoid the heading in centred, is it the best to start from the left and to the right.
REFLECTIONS
Experience
So far within this 7 weeks , I getting much more familiar with the Adobe Illustrator and Indesign software, It was quite time consuming with learning each tools by tools , but sooner it was easier and useful, which is really worth it for the task and also in future. I also experienced a lot in the process of keep testing and learning. Identify the mistake and it flaws. Accept every process and the task working with.
Observation
Observe more typography layouts and typography is so much more than choosing an attractive font. There are a number of elements to consider when practicing typography.
Findings
Using the design thinking in typography. Understanding about text formatting with its purpose.Formatting is for changing the font style, size, colour and appearance of the text not only that formatting helps finding information with headings, tables of contents, and emphasis like bold text.
FURTHER READING
Thinking with type by Ellen Lupton
 |
| Fig 7.0 Thinking With Type By Ellen Lupton Week 7 (11/05/2022) |
“The relationships among letters in a font are more important than
the identity of individual characters.”
The author shows how the letters and texts can influence the way we see a piece of design and how we can improve readability by following some rules.I believe this is a really great book like me as a beginner wanting to get into typography. It not only teaches the basic principles, it also gives a good bit of the history and theory. It divided into three sections: letter, text, and grid. Each section begins with an easy-to-grasp essay that reviews historical, technological, and theoretical concepts.
Comments
Post a Comment