Typography // Task 2 // Typographic Exploration and Communication
22/9/21- 13/10/21 Week 5-8
Chan Siew Ni #0352518 #BDCM
Typography Task 2: Typographic Exploration and Communication
LECTURES
Lecture 1-5 is on :
Task 1
Week 5 Lecture 6: ( Screen& Print)
Typography // Different Medium
Past: viewed as living only when it reached paper. It was done once publication was edited, typeset and printed. Skilled typesetters and designers result good typography and readability
Now: not only exists not only on paper but on a multitude of screen. It is subject to operating system, system fonts, the device and screen itself. Our experience of typography today changes based on how the page is rendered because typesetting happens in the browser.
Past: viewed as living only when it reached paper. It was done once publication was edited, typeset and printed. Skilled typesetters and designers result good typography and readability
Now: not only exists not only on paper but on a multitude of screen. It is subject to operating system, system fonts, the device and screen itself. Our experience of typography today changes based on how the page is rendered because typesetting happens in the browser.
Print Type VS Screen Type
Type for Print
1. Designed intended for reading from print long before we read from
screen. It is designer’s job to ensure that the text is smooth, flowing
and pleasant to read.
2. Caslon, Garamond, Baskerville are the most common typefaces that is used for print because of their characteristic (elegant& intellectual) and also highly readable when set at small font size
3. Versatile, easy-to-digest classic typeface, has a neutrality and versatility.
2. Caslon, Garamond, Baskerville are the most common typefaces that is used for print because of their characteristic (elegant& intellectual) and also highly readable when set at small font size
3. Versatile, easy-to-digest classic typeface, has a neutrality and versatility.
Figure 1: Print type
Type for Screen
1. Use on the web are optimized and often modified to enhance
readability and performance onscreen in a variety of digital
environment.
2. A taller x-height (/reduced ascenders and descenders), wider
letterforms, more open counters, heavier thin strokes and serifs,
reduced stroke contrast, modified curves and angles.
3.For typefaces intended for smaller sizes is more open spacing. All
these factors serve to improve character recognition and overall
readability in the non-print environment(web, e-books, e-readers, mobile
devices)
Figure 1.1: Screen type sources from Google
Hyperactive Link/Hyperlink
- Is a word, phrase or image that you can click on to jump to a new document or a new section within the current document.
- Found in nearly all web pages
- Allowing users to clicks their way from page to another
- Normally blue and underlined by default
- When you move the cursor over a hyperlink(text/image), the arrow should change to a small hand pointing at the link
Figure 1.2: Hyperlink sources from Google
Font size for screen
1. 16-pixels text on a screen = text printed in a book/magazine
(accounting for reading distance)
2. Reading a book pretty close (a few inches away)- typically set at
around 10pt
3. Read them at arm’s length- at least 12pt = same size as 16pixels on most screen
3. Read them at arm’s length- at least 12pt = same size as 16pixels on most screen
4. 20-24pt for screen is better
System Fonts for screen/ Web Safe Fonts
-Each device comes with its own pre-installed font selection (Windows, MacOs, Google)
-Each device comes with its own pre-installed font selection (Windows, MacOs, Google)
- If you don’t have that font already installed and It’s not pulling
from a web-friendly place, you would see default back to some basic
variation like Times New Roman
Web Safe Fonts: appear across all operating system, the small collection
of fonts that overlap from Windows to Mac to Google
Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Pixel differential between devices
The screens used by our PCs, tablets, phones and TVs are not only different sizes but different in proportion too because they have different sized pixels
100pixels on a laptop are not equal to 100pixels on a 60” HDTV
The screens used by our PCs, tablets, phones and TVs are not only different sizes but different in proportion too because they have different sized pixels
100pixels on a laptop are not equal to 100pixels on a 60” HDTV
Static VS Motion
Static:
Static:
- Minimal characteristic in expressing words
- Traditional characteristic such as bold and italic offer only a fraction of the expression potential of dynamic properties
- The level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
Figure 1.3: Static typography example
Motion:- Offer typographers opportunities to ‘dramatize’ type, for letterforms to become ‘fluid’ and ‘kinetic’
- Animation often bringing film tittle credits to life
- The brand identities of film and television production companies increasingly contain animated type (motion graphics)
- Often overlaid onto music videos and advertisements
- Often set in motion following the rhythm of a soundtrack
- On-screen typography has developed to become expressive for helping to establish the tone of associated content or express a set of brand values
- Typography must prepare the audience for the film by evoking a certain mood
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1d7FSu2HCPWTOvD1tx2n6_8-Y7dikBcuB/preview"
width="640" height="480" allow="autoplay"></iframe>
For task 2, we have to express typographically the
content in the
link
provided in a 2-page editorial spread. No images are allowed but some very
minor graphical elements, i.e. line, shade, etc. might be allowed. We will
use Adobe InDesign to typographically compose and express the text within a
given size (200 x 200 per page).We may use Adobe Illustrator to create
headline expression but the final layout has to be completed in Adobe
InDesign.
Research of Bauhaus
Figure 2: Bauhaus movement sources from Google
Figure 2.1: Type expression of 'Bauhaus' sources from Google
Research of Layout
Figure 2.2: spread layout sources from Google
Figure 2.3: spread layout sources from Google
1. Digital Sketches
Figure 3: Different typefaces of 'Bauhaus' type expression ,26/9
For the type expression, I want to express the word 'Bauhaus' because I
think this is the main subject of the headline. I express it using a few
different typefaces and I feel like the second one is a bit too complex so
I delete it and make another one.
Figure 3.1 : Different typefaces of 'Bauhaus' type expression
,27/9
The first express I did is try to make it looks like a building. Then, the
second one I try to use circles, triangles and also rectangles to express
the word. I also try to use white space to express the word 'H'. The third
one is quite similar to the second one but I am not doing much graphic
element to make it more simple. After that, the fourth and fifth design is
also quite similar but I think that fifth one is a bit too complex and I
prefer that fourth one.
2. Layout
Work Progress
Figure 4: Cross alignment
Notes from Lecturer:
- 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
Layouts
Figure 4.1: Layout#1 ,27/9/21
Figure4.2: Layout #1 after changes , 30/9
The first layout I made is like a line guiding the reader from left to
right. The line is following the flow of the text. I made some changes
after the feedback. I edited all the line to make them all look the same
width and I draw more line to make a 'square' thing so that it is more
relatable to the text.
Fonts: body text(Adobe Caslon Pro),heading&
sub-heading(Futura Light condensed)
Point size: body text (10pt), heading(31pt), word 'Bauhaus'
(125pt), subheading(14pt)
Leading: body text (13pt), heading(34pt), word 'Bauhaus'(128pt),
sub-heading(16pt),
Paragraph Spacing: Body text (13pt/ 4.586mm)
Line Length: 47(body text)
Alignment: Justify with last line aligned left
Figure 4.3: Layout #2 , 1/10
I like this type expression of 'Bauhaus' the most. I arrange the body
text from high to short to make it looks like the building. I think I
will use this type expression and explore more layout. I think this
layout is my favorite. The tittle is clear to see and the text is also
aligned.
Fonts: body text(Adobe Caslon Pro), heading(Futura Bold),
sub-heading(Futura Bold)
Point size: body text (9pt), heading(31pt), word 'Bauhaus'
(138pt), subheading(14pt)
Leading: body text (12pt), heading(34pt), word
'Bauhaus'(141pt), sub-heading(16pt),
Paragraph Spacing: Body text (12pt/ 4.233mm)
Line Length: 53(body text)
Alignment: Justify with last line aligned left
Figure4.4: Layout #3 ,2/10
I tried to make the text on left side and I feel like this is
not very good to read because reader will look at the text first
before the heading.
Fonts: body text(Adobe Caslon Pro), heading(Futura
Bold), sub-heading(Futura Bold)
Point size: body text (9pt), heading(31pt), word
'Bauhaus' (128pt), subheading(16pt)
Leading: body text (12pt), heading(34pt), word
'Bauhaus'(131pt), sub-heading(19pt),
Paragraph Spacing: Body text (12pt/
4.233mm)
Line Length: 52(body text)
Alignment: Justify with last line aligned
left
Figure 4.5: Layout #4, 2/10
I enlarged the heading size and also re-arrange the body
text.
Fonts: body text(Adobe Caslon Pro), heading(Futura
Bold), sub-heading(Futura Bold)
Point size: body text (9pt), heading(31pt), word
'Bauhaus' (162pt), subheading(17pt)
Leading: body text (12pt), heading(34pt), word
'Bauhaus'(165pt), sub-heading(20pt),
Paragraph Spacing: Body text (12pt/
4.233mm)
Line Length: 55(body text)
Alignment: Justify with last line aligned left
Figure 4.6: Layout #5 , 5/10
I use another type expression to make a layout and I think the
type expression if Bauhaus is actually too much graphic element
but I like the layout of the text.
Fonts: body text(Adobe Caslon Pro),word
'Bauhaus'(Bembo regular), heading &sub-heading(Bembo
Bold)
Point size: body text (10pt), heading(30pt), word
'Bauhaus' (100pt), subheading(19pt)
Leading: body text (13pt), heading(33pt), word
'Bauhaus'(103pt), sub-heading(22pt),
Paragraph Spacing: Body text (13pt/
4.586mm)
Line Length: 45(body text)
Alignment: Justify with last line aligned left
Figure4.7: Layout blocked out 5/10
FINAL TASK 2: Typographic Exploration and Communication
Figure 5: Final Task 2//Typographic Exploration and Communication, Jpeg,
5/10/21
Figure 5.1: Final Task 2//Typographic Exploration and Communication, PDF, 5/10/21
<iframe src="https://drive.google.com/file/d/1Y-nRoPkEa0VDh9saOeo0JLu7mpeIsPGN/preview" width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 6(29/9):
General Feedback: we should first sketch out the word that we want to
express in the
headline then only do the layout.
headline then only do the layout.
Specific Feedback: Mr Vinod said that my word express on 'Bauhaus' is good
but the layout those graphic element is not really bring out the meaning and
he ask me to make sure to make every width of the lines to be same. He also
ask me to refer to senior's blog to explore more ideas.
REFLECTIONS
Experience
This task is quite interesting because it can train me working on details part. I also feel that I still have so much to learn in this module because I realized that I am not knowing much knowledge of typography.
This task is quite interesting because it can train me working on details part. I also feel that I still have so much to learn in this module because I realized that I am not knowing much knowledge of typography.
Observation
I observed that I will make some small mistakes while doing the
text formatting. For example I will forgot to check cross alignment.
I should take more care on it to make sure it is clear to read and
also create visual hierarchy. I will observe how the magazine layout and the flow. I observed that after added kerning could be a huge change and It can
let viewers look at the article more clearer and easier to read. Then
, I observed that cross-alignment is also important to increase the
readability and more neat.
Findings
I found that I couldn't come out much ideas if I
do not do research. Then, I should put more efforts on checking the
layout to make sure there's no big problem in the paragraph.
I
should also do more layout to compare and also to have more
choices.
FUTHER READING
Figure 5: Typographic Design: Form and Communication
Authors : Rob Carter , Philip B. Meggs , Ben Day , Sandra Maxa
, Mark SandersOriginally published: 1985
6th Edition
Legibility: achieved by controlling the qualities and attributes inherent
in typography that make type readable. Typographers and designers have a
definite responsibility to their readers to communicate as clearly and
appropriately as possible.
Figure 5.1: legibility comparison between uppercase and lowercase
from the book
Figure 5.2: text working with different colors background from the
book
Space is the common denominator for all typographic communication. When
typographic elements are introduced into space, they create subliminal
divisions, and these divisions create spatial structure.
Figure 5.3: creating various type of spaces from the book
Comments
Post a Comment