Typography Task 2 // Typographic Exploration & Communication
03.05.2022 - 17.05.22 Week 6 - Week 8
Lim Yi Xvan 0354552Bachelor of Design in Creative Media
Task 2
LECTURES
Week 6
Typo_Task 2_Process Demo
Mr. Vinod briefed us about the details and outlines for Task 2. We were assigned to watch the YouTube playlist which he pre-recorded, Typo_Task2 and then we may start our progress and publish a new blog for this task 2.
|
| fig 1 - task 2 process video |
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/12aZlwq84RPtSIhX6__Go2YAo_BUI34hU/preview"
width="640" height="480" allow="autoplay"></iframe>
Task 2 // Typographic Exploration & Communication (Text Formatting and Expression)
In task 2 is we will be asked to express typographically the content
in the link provided in a 2-page editorial spread. Noimages are allowed.
However, some very minor graphical elements, i.e. line, shade, etc. might be
allowed.
We were asked to choose one of the text in the link and express the title,
text formatting the paragraphs and create a layout for
them.
I've start my progress with sketching my layouts idea, and I've did some
research too in Pinterest.
|
| fig 2.1 - layout inspiration from Pinterest |
|
|||
|
My idea for task 2 is to focus more on the design and expression for the text, the layout of the text I'll just go with something simple and neat which is more tidy to read. I've chosen two editorial texts from the options and to explore with them.
The following texts are what I've chosen to further my layout design
with:
|
|
fig 2.4 - editorial texts chosen for my further exploration in
task 2 |
With the following ideas, I've made quite a few designs for 'Visualise
for a Better World' which I kinda decided to express on the phrase 'A
Better World'. And for 'Follow The Code', I express on the word
'Code'.
|
|||
|
fig 2.5 - Text expression for the headlines, 7/5/22 (first
attempt)
For the design on #1,2,3 of 'A Better World', my idea was to
make the words align in a spiral form and then surrounded them
together like a chain so it looks like the structure of the
universe.
Then, #4 design focus on the text expression of 'Code', my
intention was to stacks up the code so that it kinda looks
like pixels of codes appear in the computer which the stacks
also kinda make our visions to follow them and look downwards.
So then, after few consideration I picked design #3 and #4 to
submit on week 7 for feedbacks of Mr.Vinod in class.
After week 7 class, I got my feedbacks from Mr.Vinod. He said
that my design for 'Visualise for a Better World' looks more
like an atom and expression for the word 'Code' still needs
more exploration as he doesn't see how the design was related
with the word. By that, I've explore on the designs and do
some experiments and there're few designs I've came out with.
fig 2.8 - Text expression and Formatting for 'Visualise for a Better World', 10/5/22 (second attempt)
fig 2.9 - Text expression and Formatting for 'Follow the Code', 11/5/22 (second attempt)
fig 2.9.1 - closeup look for the text expression for 'Code'
As can see in fig 2.8, I was trying to create a circle text
form filled with the words 'A better world' and with a
spiral surrounding the circle which kinda looks more alike
the Universal Studio sign which represents the world.
Next, in fig 2.9, I added a bunch of numberings inside the
word 'code' by masking it so it will bring out a stronger
meaning for the word 'Code'.
fig 3.1 - Text expression and Formatting for 'Visualise for a Better World', 12/5/22 (third attempt)
fig 3.2 - Text expression
and Formatting for 'Follow the Code',
12/5/22 (third attempt)
Then, I also made few designs out for the respective
headlines.
Fig 3.1 is clearly a global structure which I made using
linear form to create the shape.
Fig 3.2, I adjusted the post for the word 'Code' then added
inks felling off from the words which form a barcode to
express more of the word.
Final Submission Task 2: Typographic Exploration & Communication
fig 4.1 - Submission for task 2 in jpeg, 13/5/22
|
fig 4.2 - Submission for task 2 in pdf, 13/5/22
fig 4.3 - Submission for task 2 in pdf with guidelines, 13/5/22
Font : Gill Sans
Typeface : Gill Sans Bold Italic & Light
Font size : 22pt, 10 pt
Leading: 12 pt
Paragraph Spacing: 12 pt
Average characters per line : 55~65
Alignment: Justify Left
Margins : 30 mm (top), 10 mm (left, right, bottom)
Columns : 2
Gutter (for columns) : 5 mm
FEEDBACKS
Week 7
General Feedback: Title need to be related with the design and easy to be read.
Specific Feedback: For design #1 (Follow The Code), the word 'code' doesn't expressed in its meaning with the design as it looks like stacks more than the meaning coding in pixels. Text formatting here is fine. For design #2 (Visualize for a Better World), the word in the title 'world' is hard to be read which takes time for the viewer to read the title as it's difficult to see.
REFLECTIONS
Experience:
Throughout the whole progress for our task 2, it's more easier for me to do
this compared to task 1 as we've already learn on how to format the
text previously and now we just only have to do the same thing again
plus the editorial texts for task 2 is lesser than task 1 so is much more
easier to be formatted. For text expression, we can also design in any
way we want as this time graphic elements, lines etc are
not restricted so we are able to explore wider than before. However,
once these applied, it's actually more harder for me to express the words in
their own meaning as at first, I was more focus on the design instead
of its meaning. But still at last, I get to rethink the words and create a
more related text expression.
Observation:
Through this task given, I've found that text expression of the
headline is important as it's the key to catch viewer's attention
and by that they'll have the interest to continue reading
the article. Also, text alignment and formatting is
also significant in creating a good layout. Uses of type of
family faces are important too to create a well
text formatting.
Findings:
I've learn on how to express the text in their meanings and not just
focus on the design. Then, to align the text with the headline to create a
better visual in text formatting and also never exceeded 3 taps for leading and spacing so that
the words never look too loose or tight.
FURTHER READINGS
Based on the list of recommended readings in the MIB, I did some further reading on this one.
1. Saltz, I (2019). Typography Essentials Revised and Updated : 100 Design Principles for Working with Type. Edition: Revised and updated. Beverly, MA : Rockport Publishers.
fig 6.1 - Typography Essentials Revised and Updated by Ina Saltz (2019)
Chapter 3: The Paragraph
55. Letter spacing and word spacing
Columns of type that are set justified will have uneven word spacing in
order to accomplish the alignment; good typesetting will minimize that
disparity as much as possible. At text-type size settings (up to 12 or
14 points), preset kerning pairs and automatic word spacing will look
fine. But at display type sizes, word spacing and letter spacing
(kerning) will most likely need additional small but critical manual
adjustments to look optically correct.
57. Tracking guidelines
NOT TOO LOOSE AND NOT TOO TIGHT: tracking should feel “just right”.
Tracking refers to the overall or global adjustment of letter spacing
within a word, a line, a paragraph, or a passage of text. As in all
things typographic, the goal is consistency in the appearance of the
text.
61. Basic leading principles
A GOOD RULE OF THUMB FOR TEXT TYPE is to add two extra points of
leading. This creates a good comfort level for extended reading.
However, when the typeface has strong verticals in relation to its
horizontals and serifs, it will do better with a bit more
leading.
fig 6.1.5 - Feature spread, Donald Partyka
Whether two or three columns, this format has sufficient leading for
good legibility. This text is also highly legible due to its size,
stroke width, and weight (strong typographic color).
fig 6.1.6 - Feature spread, Donald Partyka
A comparison of these two columns of text makes it clear at a glance
that extra leading, especially when lines are long, makes for a more
comfortable reading experience. Tight leading makes it more difficult
for the eye to return to the next line from the end of the line
above.
A good typographic “color” on the page is interrupted when a word or
word fragment is alone on a line at the end of a paragraph or column
(known as a widow) or, even worse, at the top of a column or page (known
as an orphan). The reason an orphan is even worse than a widow is that
it not only creates a gap in typographic color, but it also disrupts the
horizontal alignment across the tops of the columns of text.
Comments
Post a Comment