Typography - Task 2
22/10/2024 - 05/11/2024 / Week 5 - Week 7
SOFIA CHEW / 0377902
Typography / Bachelor of Design (Hons) in Creative Media
Task 2
Typography / Bachelor of Design (Hons) in Creative Media
Task 2
.png)
Table of Content
1. Lecture
2. Instruction
3. Task 2
4. Feedback
5. Reflection
1. Lecture
Week 5
- Typo_5_Understanding
- Understanding Letterform
Uppercase LetterformThe uppercase letter forms appear symmetrical at first glance, but closer inspection reveals that the left slope is thinner than the right stroke. The Baskerville typeface features two distinct stroke weights, and each bracket connecting the serif to the stem has a unique arc, highlighting the lack of true symmetry.
Both Baskerville and Univers showcase the careful attention type designers give to achieving a balance between internal harmony and individual expression in letterforms.
Fig 1.1 A from Univers and Baskerville typeface
Lowercase LetterformThe lowercase "a" in Helvetica and Univers illustrates the complexity of letterforms. A comparison of how the stems finish and how the bowls connect to the stems highlights the distinct characteristics of each typeface.
Fig 1.2 a from Helvetica and Univers typeface
Maintaining x-heightX-height refers to the size of lowercase letters, but curved strokes, like those in "s," must extend above the median or below the baseline to visually match the size of vertical and horizontal strokes.
Fig 1.3 curve in the letter r is above the x-height
CounterformIn addition to recognizing letterforms, it's crucial to understand counterforms—the spaces defined by the strokes of letters. When letters combine into words, these spaces affect readability, especially for letters like lowercase "r," which lack counters. Effective management of counters influences how well words fit together and how easily they can be read.
Fig 1.4 Counterform
ContrastThe concept of contrast is a key dynamic in design.
Fig 1.5 Contrast
Fig 1.1 A from Univers and Baskerville typeface
Fig 1.2 a from Helvetica and Univers typeface
Maintaining x-height
X-height refers to the size of lowercase letters, but curved strokes, like those in "s," must extend above the median or below the baseline to visually match the size of vertical and horizontal strokes.
Fig 1.4 Counterform
Contrast
Fig 1.5 Contrast
Week 6
- Typo_6_Screen&Print
Different MediumTypography appears on many different screens, and its appearance can change depending on things like the device, operating system, and screen size. Because typesetting now happens in web browsers, our experience of typography can vary based on how the page is displayed.
Print Type vs Type Screen
Print type: This came first, with designers focusing on making the text easy to read and look good on paper. Classic fonts like Caslon, Garamond, and Baskerville are known for their elegance and readability in print. Print uses smaller sizes, like 10px, because text is viewed up close.
Screen type: Is often adjusted to work better on digital devices. Fonts for screens are designed with features like taller letters, wider spacing, and more open shapes to improve readability on screens. For hyperlinks, when clicked, they take you to another webpage or a different section of the same page. 16px is commonly used because it’s easier to read from a distance
Some fonts that work well on both print and the web include Open Sans, Lato, Arial, Helvetica, Times New Roman, Courier New, Verdana, Georgia, Palatino, and Garamond.
Fig 1.6 Example of Print Type
Motion vs Static
Static typography: has limited ways of expressing meaning, with only simple styles like bold and italic offering a small range of expression.
Motion typography: typographers can "bring type to life," making it more dynamic and fluid. For example, in film title sequences, text is often animated, creating a sense of movement and energy. Motion graphics, especially in the branding of film and TV companies, are increasingly using animated text to make the typography more engaging and expressive.
- Typo_6_Screen&Print
Print type: This came first, with designers focusing on making the text easy to read and look good on paper. Classic fonts like Caslon, Garamond, and Baskerville are known for their elegance and readability in print. Print uses smaller sizes, like 10px, because text is viewed up close.
Screen type: Is often adjusted to work better on digital devices. Fonts for screens are designed with features like taller letters, wider spacing, and more open shapes to improve readability on screens. For hyperlinks, when clicked, they take you to another webpage or a different section of the same page. 16px is commonly used because it’s easier to read from a distance
Some fonts that work well on both print and the web include Open Sans, Lato, Arial, Helvetica, Times New Roman, Courier New, Verdana, Georgia, Palatino, and Garamond.
Fig 1.6 Example of Print Type
Static typography: has limited ways of expressing meaning, with only simple styles like bold and italic offering a small range of expression.
Motion typography: typographers can "bring type to life," making it more dynamic and fluid. For example, in film title sequences, text is often animated, creating a sense of movement and energy. Motion graphics, especially in the branding of film and TV companies, are increasingly using animated text to make the typography more engaging and expressive.
2. Instruction
Task 2
For this task, we were given 3 text to choose and we will need to express the chosen content typographically. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed.
Document 2.1 Module Information Booklet (MIB) of Typography
3. Task 2
Inspiration
For the given text, I ended up choosing the first one which was " The Role Of Bauhaus Thought On Modern Legacy." I went to search up for element bauhaus design uses. In conclusion, this design encourage "less is more", so the color they used are primary colors and also geometry shapes. I also went to search for layout inspiration for this task. .png)
.png)
Fig 3.1 Inspiration and reference
Sketches and draft
After having a concept on what I was going, I started sketching out my draft. I wanted to try using radial grid for one of my sketch. I ended up having two sketch for that grid. For the other one, I tried playing with the headline.
.png)
Fig 3.2 Sketch
Headline DesignI tried designing the headline on Adobe Illustrator. I think for most of the time I was playing around to see which typefaces suits better. As for the design I used back knowledge from the type expression task and tried my best not to distort the words. .png)
Fig 3.3 Headline design
Layout
.png)
Fig 3.4 Layout
Adjustment
After showing my composition to Ms V. she pointed out some thing I will need to adjust for my work. One of it is that the a paragraph of my text looks a bit off as the last sentence was in a new paragraph. Another one she pointed out is that my text is not aligned with my grid line. The last was that my lead in text looks a bit childish.
I adjusted the paragraph and also the heading design. I choose to use the same lead in text design of composition 1 into it. After the editing, the upper left part looks a bit empty. Hence, I choose to add in another bauhaus element shape which was triangle.
Fig 3.5 After Adjustment
Finalization
LayoutMargins: 12.7 mmGutter: 5 mm
HeadingFont : Gill Sans Std
BodyFont : Bondoni StdType size: 10 ptLeading : 12 ptParagraph spacing : 4mmCharacters per line : 59Alignment : Left-align
.png)
.png)
Fig 3.3 Headline design
Layout
.png)
Fig 3.4 Layout
Fig 3.5 After Adjustment
Margins: 12.7 mm
Gutter: 5 mm
Heading
Font : Gill Sans Std
Body
Font : Bondoni Std
Type size: 10 pt
Leading : 12 pt
Paragraph spacing : 4mm
Characters per line : 59
Alignment : Left-align
Fig 3.6 The Role of Bauhaus Though on Modern Culture (Final)
Fig 3.7 The Role of Bauhaus Though on Modern Culture (Final with Grid)
Fig 3.8 The Role of Bauhaus Though on Modern Culture (PDF)
Fig 3.9 The Role of Bauhaus Though on Modern Culture (PDF with grid)
Feedback
Week 7:
General Feedback: For this week, we were told to carry out our task 3 exercise. For this task, we were asked to prepared graph paper and pens. We also have to let Ms V. checked the printed task 2 work.
Specific Feedback: Ms V said that some of my text are not aligned to the grid. I was also told that the one of the lead in text looks childish. One of my paragraph also happen to have an orphan. Ms, V said that the the composition that uses radical grid looks ok.
Specific Feedback: Ms V said that some of my text are not aligned to the grid. I was also told that the one of the lead in text looks childish. One of my paragraph also happen to have an orphan. Ms, V said that the the composition that uses radical grid looks ok.
Week 6
I was unable to attend class this week as I have urgent situation happening.
I was unable to attend class this week as I have urgent situation happening.
Reflection
Experience
For the overall experience, I will say it's pretty smooth. I tried using different grids to do my composition. The most interesting grids I used will probably be the radical grid but at the same time I also worried that this grid will not be approved. For the other two, I will say I picked a safer choice in case the radical grid design was not approved.
Observation
For this task, I find that typography is important in linking the theme of something together. Another words, the heading plays a key role in catching the attention of the audience and also something that bring the theme out to the audience straight away. For this task, I have to put in element and essential of bauhaus into the heading design.
Finding
As the same, I find that the basic skills is very very important. In formatting text, we have to always keep in mind to not have widow or orphans appearing. At first, I almost forgot to check up on it. Besides that, I find that the overall harmony is also very important. I learned that leaving white space is very essential to it. The more element we put in it. The more easy people get visual lethargic.
Further Readings
1. Typography Design Form and Communication
.png)
Fig 6.1 Front Cover of Typography Design Form and Communication
CASE STUDY Buenos Aires Underground (Subte) (pg 199-201)
The typography design of the Buenos Aires underground (Subte) system is a good example to illustrate how effective communication can be achieved through visual elements.
Background
The Subte, one of the world's oldest underground rail systems was in need of both a redesign that honours it roots and modern needs for its users.
Fig 6.2 A subway entrance before the Subte system was implemented.
Color Scheme: The colors are not just chosen for aesthetic but to serve functional purposes in helping the lines and stations standout better.
Fig 6.3 Coloured Subway line
Signage system: the layout of signs establishes a hierarchy that allows for stations to be navigated through effectively. For example, directional arrows and noticeable station names to make the entire navigating experience clear.
Fig 6.4 Noticeable exit signs.
Cultural Integration: Typography exhibits the origin and history of local culture, integrating native elements for users to resonate and build a sense of community through heritage.
User-centered Design: The typeface is easy to read under low-light and small sizes conditions that are very common on the subway system, so this design focus improves the travel experience for passengers.
CASE STUDY Information design: Metropolitan World Atlas (pg 202 - 205)
The Metropolitan World Atlas is also a good case study for typographic design and information communication.
Background
The atlas is designed for urban planners, researchers and public. The aim of it is to present complex data into an accessible and engaging format.
Font: There is a mix of serif and sans-serif to ensure visual hierarchy. Therefore increases the reading efficiency by presenting different data types/stage of information.
Visual Hierarchy: The Right Font Size, Weight and Spacing help to guide the reader´s eye leading toward critical information which allows for a better overall comprehension.
Fig 6.5 Sample Spreads
Incorporate Graphics into Text: Typography should strive to create a balance between maps, diagrams and any other visual displays that are included alongside the written materials. The main benefit of this synergy is that communications for geographically and demographic information are clearer.
Fig 6.6 Graphics inside the atlas
Cultural Integration: The design is created with an inspiration deriving from the culture of big cities, making its information more applicable and meaningful to a wider range of audiences
User Interaction: The way users interact with the atlas will impact typographic decisions that are made, such as readability and navigation for information.
2. Vignelli Canon on Design
Fig 6.2 Front Cover of Vignelli Canon on Design
In this book, Massimo Vignelli guides us through his design philosophy and working style He is a famous designer who strongly believes in simplicity, timeless design and clarity. The canon exists in two parts: the Intangibles and The Tangibles.
Intangibles:
In this part, Vignelli focus on the fundamental rules of his design thinking.
Semantics: The design must have the right meaning and context. Designers should be aware of what they are communicating to have a powerful and efficient message.
Syntactics: This means design structure and the discipline. Vignelli recommends using the grid to build structured, ordered and coherent designs.
Pragmatics: Instead of making the design visually appealing only, It must serve it's practical purpose and also be functional.
Tangibles:
Part of this is on the technical and material side:
Typography :Vignelli supports a limited palette of timeless fonts, such as Helvetica and Bodoni; as they aid in establishing uniformity while keeping the design free from extra dimensions.
Grid Systems: The first thing on his list is how to get the order of a site.
Color: Vignelli recommend using limited range of color, black/white colors and primary for a timeless design modern beauty.
Discipline in Design: The designer needs to act with discipline and be simple, straightforward and consistent within a design; so that it will no longer look like patch work but as one whole theme.
.png)
Comments
Post a Comment