Typography: Task 2
9/5/2023- 23/5/23 / Week 6-Week 8
Mercy Chong HuiZiun / 0360929
Typography / BDCM
Task 2: Typographic Exploration &
Communication
LECTURES
> Refer to task 1 exercises
INSTRUCTIONS
Fig 1.0 Module Information Booklet
Task 2: Typographic Exploration & Communication
Requirements
- Layout Research and references
- A 2 page editorial spread of 200mm x 200mm dimensions per page
- No image allowed. However minor graphical elements can be accepted (line, shade..)
- Only using the 10 fonts that were given
- Greyscale
Layout Research
> Firstly, We were provided with the editorial text options for
this task and we have to choose one out of three of the editorial text.
Based on what we have chosen, We can brainstorm some layout ideas for the
headline and lead-in text to make the spread look more interesting.
The editorial text that I have chosen comes with the headline
"Unite to visualise a better world". By that, I went and started to
find some references for ideas.
I saved a few layout text design ideas for further referencing.
Fig 2.0 Editorial layout design inspo (Source: Pinterest/Behance)
Ideation sketches
> Some rough sketches I've done to give myself some ideas on how to
create my own kind of text layouts.
Fig 2.1 ideation sketches
Process of text formatting layout process
Fig 2.2 process of the body text
> From what I can see here, this layout looks messy on the
body text part on the right page. Initially wanted to make the
lead-in lines as a curve in the middle and some of the paragraphs
would be shaped in a curve as well (refer to fig 2.2 top, the
process of the body text) but in the end it didn't really work out
from what I've visualized so I have to amend on the positioning of
the paragraph texts.
> After a few tries, I can say that I am quite satisfied with what
the layout looks like. I expanded the size of the lead-in text and
placed them in the middle so that it's more visible and able to
differentiate it from the body texts.
As for the main heading layout, I first made the text 'UNITE' to have
lesser spacing between the letters so that it looks 'united' and this
is a small tip given by Sir while he was going around and evaluating
our work. For the text 'VISUALISE', I added lines outside to give an
impression of visualizing something from an eye level. I wanted to
give a clearer impression of this text so I copied and reduced the
opacity of the text to focus on the middle/actual 'visualise' text.
Lastly for the text "A BETTER WORLD", I'm going to highlight on the
'world' part so I used the type on path tool and created a simple
curve below. My ideation of this is that the world is like the earth =
circle which explains the curve for this text.
More processes of the text layout in the next few pages
.png)
Fig 2.5 Using AI to create outlines for the headline text
.png)
Fig 2.6 Adding stroke lines around the body text
.png)
Fig 2.7 Enabling the baseline grids to ensure the texts are neatly aligned
Fig 2.8 Few more attempts of the editorial design layout. (15/5/23)
Final Editorial Layout
Head
Font: Gill Sans.
(UNITE + lead-in text): Heavy Italic
(TO VISUALISE): Bold Italic
(A BETTER WORLD): Medium Italic
Type Size: 100 pt (Unite), 34 pt (To Visualise), 45 pt (A better world), 16 pt (lead-in text)
Leading: -
Paragraph spacing: -
Body
Font: Janson text LT Std (Roman)
Type size: 10 pt
Leading: 12 pt
Paragraph Spacing: 12 pt
Alignment: Left alignment and justify
Margins: 10 mm (top,bottom,left,right)
Columns: 2
Gutter: 5 mm
Fig 2.9 Final layout (JPEG, no baseline grids) (17/5/23)
Fig 2.10 Final Layout (PDF,no baseline grids) (20/5/23)
1024_1.jpg)
Fig 2.11 Final Layout (JPEG, with grids) (20/5/23)
Fig 2.12 Final Layout (PDF, with grids) (20/5/23)
FEEDBACK
Week 6
General Feedback
> The headline should not be too striking. The readers might lose focus to read the body text afterward.
> The headline should not be too striking. The readers might lose focus to read the body text afterward.
Week 7
General Feedback
> For the e-portfolio, do ensure that the PDF files that were uploaded here can be viewed without any errors. I've made this mistake when I'm submitting my task 1 e-portfolio and turns out my google drive files were restricted, which is why the PDF files can't be seen and this is also a common mistake among other students according to Mr. Vinod.
> For the e-portfolio, do ensure that the PDF files that were uploaded here can be viewed without any errors. I've made this mistake when I'm submitting my task 1 e-portfolio and turns out my google drive files were restricted, which is why the PDF files can't be seen and this is also a common mistake among other students according to Mr. Vinod.
REFLECTION
> My experience throughout task 2 was more on the explorative side as I get to experiment with different editorial layout spreads in another new software, Adobe InDesign. Since this software was quite new to me, I've spent some time watching the lecture's playlist to get a hint of it while doing this assignment. But overall I get to learn more new knowledge about typography in terms of the leading, type size, margins and columns, and how to ensure that the spread looks more readable with enough spacing for each text.
FURTHER READING
Stop Stealing Sheep & find out how type works
Fig 3.0 Book cover
> In this third edition, acclaimed type designer Erik Spiekermann brings his type classic fully up to date on mobile and web typography. He also includes scores of new visual examples on how to effectively communicate with type and a full selection of new typefaces that are used and referenced throughout the book.
