Week 5 - Week 6 : 22 Sept 2021 - 5 Oct 2021
Tan Yi Yun 0345559
Bachelor of Design (Hons) in Creative Media
Task 2 / Typographic Exploration & Communication
LECTURE
Lecture notes 1-5 were jotted down at Task 1/Exercises.
Recorded lectures :
Typography - Screen and Print
In this lecture, we were brought through the typography in different
mediums, mainly in screen and print.
Mr. Vinod talked about the print would stay in the future, as he thinks
that some would still prefer to use the physical book, but this is
subjective. Personally, I preferred reading physical book compared to online
e-book because I don't like staring at the screens for few hours, my eyes
would sore (welp but I have been sitting in front of the screens the whole
day to complete the assignments :).
1. Different Medium
|
| Figure 1.1, Typography designed for screen purposes |
|
| Figure 1.2, Screen Design for Website |
Today, typography exists not only on paper but on a multitude of screens.
It is subject to many unknown and fluctuating parameters, such as operating
system, system fonts, the device and screen itself, the viewport and more.
Our experience of typography today changes based on how the page is
rendered, because typesetting happens in the browser.
2. Print Type vs Screen Type
Print Type
- Good typeface for print : Caslon, Garamond, Baskerville (Because of their characteristic which are elegant and intellectual & highly readable when set at small font size)
- They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.
Screen Type
- Typefaces for web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
- Example : taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles for some designs.
- Common typefaces on screen : Verdana, Georgia.
- Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing.
Hyperlink
- A word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
- Are found in nearly all Web pages, allowing users to click their way from page to another.
- Text hyperlinks are normally blue and underlined by default. The cursor change to a small hand pointing when you hover over a hyperlink.
Font size for screen
- 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close (often only a few inches away /10 points) . If you were to read them at arm’s length, you’d want at least 12 points (16 pixels on screen).
System Fonts for Screen/ Web Safe Fonts
- Each device comes with its own pre-installed font selection (based largely on its operating system). The problem is that each differs a little bit.
- ‘Web safe’ fonts appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google.
Pixel Differential Between Devices
- The text you see on PCs, tablets, phones and TVs differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
- Even within a single device class there will be a lot of variation.
|
| Figure 1.3, Pixel differential between devices |
2. Static vs Motion
Static
- Has minimal characteristic in expressing words. Traditional characteristics (bold and italic) offer only a fraction of the expressive potential of dynamic properties.
- Examples of used of static typography : billboards, posters, magazines, fliers.
- The level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
Motion
- Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999).
- Film title, motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.
- Often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.
- More expressive, helping to establish the tone of associated content or express a set of brand values, helping to evoke a certain mood.
INSTRUCTIONS
TASK 2: Typographic Exploration & Communication
In this project, we are required to express
typographically the content in the link provided in a 2-page editorial spread. We are not
allowed to use images and colours. We have to utilise the knowledge gained in the previous exercises, we will
use Adobe InDesign to typographically compose and express the text in the
size of 200 x 200 per page. We may use Adobe Illustrator to create the headline expression. We can only
use the given 10 typefaces.
Inspirations
I looked for some inspirations from the Internet and compiled
these interesting editorial spreads examples as my mood
board.
|
|
Figure 2.1, Mood board 1, Week 5 (15/9/2021) |
|
| Figure 2.2, Mood board 2, Week 5 (25/9/2021) |
Sketches
I chose to work on the second editorial text : Be Good, Do
Good, Follow The Code. Before I start sketching, I read the text
first to understand its message. It is an interesting text and I
like the quote of "The work you bring into the world is your legacy. It will
outlive you. And it will speak for you." Somehow it reminds me to work harder to produce an
impactful art.
I did some rough sketches on paper before I digitise them in the
software. I came out with 4 layouts. I planned to emphasis on the
word "code", or the entire phrase "follow the code". I also wanted
to highlight the last sentence of this editorial text.
|
| Figure 2.3, Rough sketches, Week 5 (26/9/2021) |
Then, I tried my layouts in Adobe InDesign to see if my plans are
workable. I think the texts are more than I expect. The main thing
I focused here is the overall layout design and thus, I did not
adjust the kerning and cross alignment at this moment.
|
| Figure 2.4, Layout Design 1, Week 5 (26/9/2021) |
|
| Figure 2.5, Layout Design 2, Week 5 (26/9/2021) |
Things I have to take note :
- Font size (8–12)
- Line Length (55–65/50–60 characters)
- Text Leading (2, 2.5, 3 points larger than font size)
- Ragging (left alignment) / Rivers (Left Justification)
- Cross Alignment
- No Widows / Orphans
- Reduce/ Don't use hyphenation
Type Expression
After receiving some advice, I expressed the word "code" by adding
black and white lines to create the shape of barcode. I let the
"C" stands out among the rest, by italicising and increasing its
size.
|
|
Figure 2.6, "Code" Expression 1, Week 6
(1/10/2021) |
|
|
Figure 2.7, Barcode Design in Adobe
Illustrator, Week 6 (1/10/2021) |
I like my barcode
expression but I wanted to
further experiment with the
type expression. Once of the
feedback I received is that
"*" symbol does not appear
in coding. To fix that, I
replaced the "O" with
"<>".
|
| Figure 2.8, "Code" Expression 2, Week 6 (1/10/2021) |
I got another idea of
expressing the "code" in 0
and 1. From my research, it
is called binary code. They are used in digital
computers, based on a binary number system in
which there are only two possible states, off
and on, usually symbolized by 0 and 1. I think
it would be great to replace "O" with "0" and
break down the "E" into "1" and 3 horizontal
lines.
|
| Figure 2.8, "Code" Expression 3, Week 6 (1/10/2021) |
Layout Progress
With all the elements at hand, now I moved on to another round of
layout design.
|
| Figure 2.9, Hidden characters and cross alignment, Week 6 (2/10/2021) |
|
| Figure 3.1, Hidden characters and cross alignment, Week 6 (2/10/2021) |
|
| Figure 3.2, Kerning and tracking, Week 6 (2/10/2021) |
|
| Figure 3.3, Editorial spreads tryouts, Week 6 (2/10/2021) |
|
| Figure 3.4, Editorial spreads blocked out, Week 6 (2/10/2021) |
Here are the four designs I prefer to further
develop :
Design A
|
|
Figure 3.5, Design A, Week 6
(3/10/2021)
Fonts: ITC Garamond Std
- Ultra Narrow, Bold Narrow Italic
(heading)
Futura Std - Book (body text)
Point size: 9pt (text), 10pt
(highlighted text), 45pt (heading)
Leading: 12pt (body text),
60pt (heading)
Line length: 51-64
characters
|
Design B
|
|
Figure 3.6, Design B, Week 6
(3/10/2021)
Fonts: ITC Garamond
Std - Ultra Narrow, Bold Narrow
Italic (heading)
Futura Std - Book (body
text)
Point size: 9pt
(text), 10pt (highlighted text),
45pt (heading)
Leading: 12pt (body
text), 60pt (heading)
Line length: 51-64
characters
|
Design C
|
|
Figure 3.7, Design C, Week 6 (3/10/2021)
Fonts: ITC Garamond Std - Ultra Narrow, Bold
Narrow Italic (heading)
Futura Std -
Heavy Oblique (heading)
Univers LT
Std - Bold Condensed (heading)
Futura Std -
Book (body text)
Point size: 9pt (text), 10pt (highlighted
text), 45 & 50pt (heading)
Leading: 12pt (body text), 60pt (heading)
Line length: 54-65 characters
|
Design D
|
|
Figure 3.8, Design D, Week 6 (3/10/2021)
Fonts: Futura Std - Heavy, Bold (heading)
Adobe Caslon Pro
- Regular, Bold Italic, Bold (body text)
Point size: 9pt (text), 12pt (highlighted
text), 36, 45 & 72pt (heading)
Leading: 12pt (body text)
Line length: 58-69 characters
|
Then, I asked feedbacks from my friends. Most of my friends like
Design B and C. Design A and B have the same layout, the
difference is the former used lines to guide the viewers' eyes,
while the later used barcodes. They preferred Design B is better
because overall it looks clean. Design C is okay but the binary
codes make everything too packed together. Also, it would be
better to align the fourth column and the third column to maintain
a good reading flow. Last but not least, Design D is the weakest
because it is lack of relation between two pages. For me, I also
like Design C the most. I chose to make amendments on Design B and C.
Amendment for Design B
|
| Figure 3.9, Reduced font size by 0.5pt to give more breathing space, Week 6 (5/10/2021) |
Amendment for Design C
|
| Figure 4.1, Bring down the whole phrase to maintain the reading flow, Week 6 (5/20/2021) |
Amendment for Design C
|
| Figure 4.2, Reduce font size and lighten the grey, Week 6 (5/10/2021) |
After the amendments were made, I came out with another 3 designs and get another round of feedbacks.
Design B (i)
|
| Figure 4.3, Design B (i), Week 6 (5/10/2021) |
Fonts: ITC Garamond Std - Ultra
Narrow, Bold Narrow Italic (heading)
Futura Std - Book (body text)
Point size: 8.5pt (text), 10pt
(highlighted text), 45pt (heading)
Leading: 12pt (body text), 60pt
(heading)
Line length: 56-70 characters
Design C (i)
|
| Figure 4.4, Design C (i), Week 6 (5/10/2021) |
Fonts: ITC Garamond Std - Ultra
Narrow, Bold Narrow Italic (heading)
Futura Std - Heavy Oblique (heading)
Univers LT Std - Bold Condensed (heading)
Futura Std - Book (body text)
Point size: 9pt (text), 10pt
(highlighted text), 45 & 50pt (heading)
Leading: 12pt (body text), 60pt
(heading)
Line length: 54-65 characters
Design C (ii)
|
| Figure 4.5, Design C (ii), Week 6 (5/10/2021) |
Fonts: ITC Garamond Std - Ultra
Narrow, Bold Narrow Italic (heading)
Futura Std - Heavy Oblique (heading)
Univers LT Std - Bold Condensed (heading)
Futura Std - Book (body text)
Point size: 9pt (text), 10pt
(highlighted text), 48 & 50pt (heading)
Leading: 12pt (body text), 60pt
(heading)
Line length: 54-65 characters
I think Design C (ii) could be my final submission. Some still
picked Design B (i) and Design C (i), but majority preferred
bringing down the entire phrase "follow the code" so that the
reading will not be interrupted.
Final Submission - Typographic Exploration &
Communication
|
| Figure 4.7, Submission in JPEG, Week 6 (5/10/2021) |
After received feedback in Week 7, I made some changes to improve the
layout design and the type expression.
 |
| Figure 4.8, Final Submission in JPEG, Week 7 (9/10/2021) |
PDF - Final Submission in PDF, Week 7 (9/10/2021)
Week 6 :
General Feedback
We are advised to express the title first before moving into the layout
experimentations. We should plan the hierarchy to make sure the
information is well delivered.
Specific Feedback
Mr. Vinod asked me to explore more on the type expression. He
said "*" symbol is not used in coding. He also asked me to take
note of the capital letters of the title because now they are
inconsistent.
I also asked feedbacks from my friends. Most of my friends
like Design B and C. They preferred Design B is better because
overall it looks clean. Design C is okay but the binary codes
make everything too packed together. Also, it would be better
to align the fourth column and the third column to maintain a
good reading flow. Last but not least, Design D is the weakest
because it is lack of relation between two pages.
After the amendments were made, I asked for feedbacks
again. Some still picked Design B (i) and Design C (i), but majority
preferred bringing down the entire phrase "follow the code" so
that the reading will not be interrupted.
Week 7 :
General Feedback
For e-portfolio, we should label our posts and images properly.
Some labelled the submission wrongly. For the lecture section,
we need to insert the link that bring us to the lecture notes
jotted down in Task 1.
Specific Feedback
Mr. Vinod said my idea is not well integrated with the headline
expression. Layout needs more work, lacks appeal or attractive
form. I will need to express more in the heading, instead of
adding small binary codes at the side. Good progress for e-Blog,
but I can add more feedback description at the feedback section.
REFLECTION
Experience
Initially, I was a bit confused how to begin. I did some rough sketches
to place the text together and tried digitising it. The results was not
appealing because there was a lack of type expression. After receiving
feedbacks in Week 6, I started over again to design the title first this time. Since now I
am more familiar with this software, I did not face much challenges at
this stage. I am happy that I am able to do multiple type expressions
for a single word, "code". For the layout design, I was struggling to
choose the best one. I kept improving and asked feedbacks from my
friends and approached lecturers to get advice. Overall I enjoy doing
this task.
Observation
I realised I should explore the type expression first because it will
give me a clearer concept to plan my layouts. I think I have improved in terms of the arrangement of the information
because this time I have carried out more investigations and explorations,
and also applied the knowledge I gained from previous exercise. Besides, I
have benefit from peer learning. Their suggestions help me to identify my
mistakes and room for improvement. As the results, I could learn from them
and produce a better outcome.
Findings
I have learnt about the techniques to design a good editorial
spreads. From the examples given by sir, I have found that
little aid of lines/shapes can add some interest into the
layout design. But too much graphic elements will ruin the
piece, so we should be aware of using them. I also learnt
about ways to maintain the hierarchy, for example, order the
heading, subheading and body text by size.
FURTHER READING
What is Typography? by David Jury
|
| Figure 3.1, Cover of "What is Typography?", Week 5 (27/9/2021) |
This is a physical book I bought few months ago before class commence. I chose this book because I knew I will learn about this in my first semester and I wanted to read this to further enhance my understanding.
Issue - The nature of
typography
Different aspects of
typography —— the terminology,
the technology, the micro attention to
the smallest details...all and all
gives people the impression of a
discipline of daunting precision. I
believe that every typographer is
trained to have a good observation
skill.
The content describes a basic set of
characters is required for long texts
(like capitals, lowercase, punctuation,
small capitals, diacritic
characters...). All of these must be in
roman and italic. However, there is no
standard that defines what constitutes a
font. We need to thoroughly examine the
requirements for which the font is
intended. Also, there is no standards concerning weight
of character, or how many different
weights, or how these varying weights
might be measured and described.
Similarly, the angle of italic varies
from typeface to typeface.
Although everyone agrees that the
size of a typeface is the height of
the body, the visible perception (the
"feel") of two different typefaces can
be very different. This is due to the
fact that the x-height is determined
at the discretion of the type
designer. For example, 24pt Helvetica
appears larger than 24
Caslon.
Then, I continued reading the next
chapter "Speaking and Typography". It
compares these 2 activities : speaking
is informal, writing is formal.
Speaking has more spontaneity and lack
of "correctness", while writing needs
to consider whether the chosen words
are understood or not. It is
interesting to see that people are
arguing whether "speech" or "text" is
the primary medium of communication in
these days.
After reading these chapters, it
leaves me to ponder the differences
between spoken and written language,
their usage in different
situations.