31/10/2023- 7/11/2023 (Week 06 - Week 08)
Nadhrah Binti Abdul Razak / 0359620
Typography / Bachelor of Design (Hons) in Creative Media
Task 2 - Typographic Exploration & Communication
A. LECTURES
Week 05: Typo_5_Understanding
Week 06: Typo_6_Screen & Print / Typography in Different Medium
Week 5
Understanding letterforms /
fig 1.1a
- The uppercase above suggest symmetry, however it is actually asymmetrical.
- Each bracket connecting the serif to the stem has a unique arc.
fig 1.2a
- The letterform is asymmetrical since the width of the left slope is thinner than the right stroke.
fig 1.3a, helvetica and univers font
- Each bracket connecting the serif to the stem has a unique arc.
fig 1.2a
- The letterform is asymmetrical since the width of the left slope is thinner than the right stroke.
- The comparison of how the stems of the letterforms finish and how the bowls meet the stems reveals the palpable difference.
fig 1.4a, comparison
fig 1.4a, comparison
Maintaining x- height /
fig 1.5a
- curved strokes such as 's', must rise above median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes they adjoin.
fig 1.6a, median and baseline
fig 1.7a
- sensitivity to counterform or counter -- the space describe and cotained by the strokes of the form.
fig 1.8a
- examining the letters in close detail helps understand them better.
Contrast /
fig 1.9, example of contrast 1
fig 1.10, example of contrast 2
- A good typeface for printing is Caslon, Garamond and Baskerville.
- Type for Screen; To enhance readability and performance onscreen in a variety of digital environments.
fig 1.5a
- curved strokes such as 's', must rise above median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes they adjoin.
fig 1.6a, median and baseline
Counterform /
fig 1.7a
- sensitivity to counterform or counter -- the space describe and cotained by the strokes of the form.
fig 1.8a
- examining the letters in close detail helps understand them better.
Contrast /
fig 1.9, example of contrast 1
fig 1.10, example of contrast 2
Week 06
Typography in Different Medium /
- Typography was treated as a living only when the paper was reached; no additional changes were made after publication was printed. Whereas, typography in modern days, not only on paper but exists on a multitude of screens. As changes in typesetting are made on the browser, our experiences of typography today have also changed depending on the page rendering.
- Typography is now subject to browser's variability; operating system, system fonts, the device, screen, and the viewport.
Print type vs screen type /
- Type for Print; Originally, type design focused on readability in print, predating screen reading. The responsibility of designers is to ensure that the text is seamless, fluid, and enjoyable to read.
- Typography was treated as a living only when the paper was reached; no additional changes were made after publication was printed. Whereas, typography in modern days, not only on paper but exists on a multitude of screens. As changes in typesetting are made on the browser, our experiences of typography today have also changed depending on the page rendering.
- Typography is now subject to browser's variability; operating system, system fonts, the device, screen, and the viewport.
Print type vs screen type /
- Type for Print; Originally, type design focused on readability in print, predating screen reading. The responsibility of designers is to ensure that the text is seamless, fluid, and enjoyable to read.
- A good typeface for printing is Caslon, Garamond and Baskerville.
- Type for Screen; To enhance readability and performance onscreen in a variety of digital environments.
- More open spacing is necessary for typefaces intended for smaller sizes.
- Hyperactive Link/hyperlink; word, phrase, or image that can be clicked. Found in almost all web pages.
- Font Size for screen; 16 px text on screen is abt the same size as text printed in a book or magazine. Font sizes between 20-24 are good for screen reading.
- System Fonts for Screen/Web Safe Fonts; Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond
- Hyperactive Link/hyperlink; word, phrase, or image that can be clicked. Found in almost all web pages.
- Font Size for screen; 16 px text on screen is abt the same size as text printed in a book or magazine. Font sizes between 20-24 are good for screen reading.
- System Fonts for Screen/Web Safe Fonts; Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond
B. INSTRUCTIONS
Task 2: Typographic Expression and Communication
For our second assignment, we have to choose an editorial layout based on the 3 layouts given which the headlines are; The role of Bauhaus thought on modern culture, A code to build on and live by, Unite to visualise a better world.
After looking through the headlines, I have decided to work with the headline "A code to build on and live by." This is because the minute I saw the headlines, a few design layouts popped in my mind which I would like to further explore on.
Sketches
Figure 1.1b
Figure 1.2b
Figure 1.3b
Headline Illustration Drafts
Figure 2.1b
Figure 2.2b
Figure 2.3b
fig 2.5b, task 2 final outcome (JPEG)
fig 2.7b, final outcome with grids (JPEG)
fig 2.8b, final outcome with grids (PDF)
Figure 2.1b
Figure 2.2b
Figure 2.3b
Finalised outcome
fig 2.4b, finalised heading
- After doing multiple sketches, I decided to base it off from the heading fig 2.2b.
- I made some adjustments by rotating the word "To Build" to give it a sense of hierarchy.
- I also decided to change the background of the word "code" since leaving it white would feel too plain.
fig 2.4b, finalised heading
- After doing multiple sketches, I decided to base it off from the heading fig 2.2b.
- I made some adjustments by rotating the word "To Build" to give it a sense of hierarchy.
- I also decided to change the background of the word "code" since leaving it white would feel too plain.
fig 2.5b, task 2 final outcome (JPEG)
fig 2.6b, task 2 final outcome (PDF)
fig 2.7b, final outcome with grids (JPEG)
fig 2.8b, final outcome with grids (PDF)
HEAD
Font/s: Adobe Caslon Pro
Type Size/s: "A code" 124 pts, "To Build" 107 pts, "And Live By" 90 pts (Headline), 17 pts (By line)
Leading: -
Paragraph spacing: -
Font/s: Adobe Caslon Pro
Type Size/s: "A code" 124 pts, "To Build" 107 pts, "And Live By" 90 pts (Headline), 17 pts (By line)
Leading: -
Paragraph spacing: -
BODY
Font/s: Univers Lt Std 65 Bold (Subheading), Gill Sans Std Regular (Body Text)
Type Size/s: 10 pts (Subheading), 9 pts (Body Text)
Leading: 12pt Subheading, 11 pts Body Text
Paragraph spacing: 11 pts
Characters per-line: 47 characters
Alignment: Justified left aligned
Font/s: Univers Lt Std 65 Bold (Subheading), Gill Sans Std Regular (Body Text)
Type Size/s: 10 pts (Subheading), 9 pts (Body Text)
Leading: 12pt Subheading, 11 pts Body Text
Paragraph spacing: 11 pts
Characters per-line: 47 characters
Alignment: Justified left aligned
Margins: 10 mm top, 10 mm left + 10 mm right + 10 mm bottom
Columns: 3
Gutter: 5 mm
Columns: 3
Gutter: 5 mm
C. FEEDBACKS
General feedback: Widows and orphans must be avoided. Make sure to do kerning on your texts.
D. REFLECTION
Experience
In my opinion, this project is quite simple as it requires the knowledge from project 1 which I have done the exercise from. Since it is a combination of both task 1 and 2 from project 1, I feel as if I have gained a good number of experience to be able to accomplish this project.
Observation
It teaches me the importance of kerning when editing and designing your text layout. It also shows how crucial it is to make your heading design look attractive yet easy to read.
Findings
When making your text layout, it is important to know what you are dealing with. For example, it is important to make sure that the design of your heading expresses the body paragraph itself while not making it too complicated to read.
E. FURTHER READINGS
- This time, I've decided to read the book "A type primer" by John Kane.
fig 1.2e
fig 1.3e
fig 1.4e
fig 1.1e, A Type Primer
- This time, I've decided to read the book "A type primer" by John Kane.
fig 1.2e
fig 1.3e
fig 1.4e
- The first chapter I read was the "Basics". It describes the letterforms and shows the principles of the fonts.
fig 1.5e
fig 1.5e
- The figure above teaches us the importance of studying the 10 typefaces shown in the figure. It is said that learning these typefaces help those who are just starting to learn typography.
Comments
Post a Comment