Typography Task 2: Typographic Exploration & Communication
Chai Yi Xuan / 0346645 / B' Creative Media
Typography
Task 2 / Typographic Exploration & Communication
LECTURES
Week 1 - 4
Previous lectures can be found in Typography Task 1: Exercise 1 & 2
Week 5 (Understanding Letterforms)
 |
| Figure 1.1: Analyzing the Baskerville font |
Observations: Asymmetrical, different stroke weights, brackets are different from each other
 |
| Figure 1.2: Analyzing the Univers font |
Observations: Left stroke is thinner than right stroke
 |
| Figure 1.3: Differences between Helvetica and Univers |
 |
| Figure 1.4: Two letterforms overlayed to show difference in structure |
 |
| Figure 1.5: The x-height of lowercases |
Curved strokes such as 's' should rise above the median to achieve the same size visually.
 |
| Figure 1.6: Positive and negative space of letterforms |
Developing a sensitivity to counterform is vital to understand in Typography. Lowercases like 'r' has no counters, and as result relies heavily on the counterform— which means we have to handle the counters carefully to achieve maximum readability.
 |
| Figure 1.7: Closeup observation of form and counter |
 |
| Figure 1.8: Contrast in letterform |
Possible Contrast in Typography:
- small+organic / large+machined
- small+dark / large+light
 |
| Figure 1.9: A diagram of contrast in letterform |
Week 6 (Different Medium)
In the past, good typography and readability are achieved through skilled typesetters and designers. With the progression to technology, typography starts appearing on multiple screens. The experience of typography now is different as typesetting happens in browser.
Print Type
Type was designed for reading from print (paper). The main concern is to ensure the smooth flow of text and make it pleasant to read. Caslon, Garamond, and Baskerville are common typefaces that are used in print (elegant look and high readability).
 |
| Figure 2.1: An example of typeface on print |
Screen Type
Web-based typeface are optimized and modified to enhance readability and performance onscreen. Changes include taller x-height (reducing ascenders/descenders), wider letterforms, more open counters, heavier strokes, and lesser stroke contrast.
Smaller typefaces would have adjustments like open spacing to improve character recognition and overall readability.
Hyperlink allows user to jump to a new document/section of a document when clicked on. Usually highlighted in blue and underlined.
The standard font size for screen type would be 16-pixels (which appears as 10 points to 12 points on print type).
System fonts for screen/Web safe fonts include:
Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier, Courier New, Verdana, Georgia, Palatino, Garamond
 |
| Figure 2.2: Comparison of screen type vs print type |
 |
| Figure 2.3: Differences of pixels between different devices |
Motion typography makes letterforms fluid and kinetic. These are often used in music videos and advertisements— its animation often set to match the rhythm of the song/soundtrack. Typeface has been developed to be more expressive, to establish the tone of content or show brand values. In movies, typography is used to prepare the audience for the film by evoking the right mood.
INSTRUCTIONS
Task 2: Typographic Exploration & Communication
To-Do List:
Express the content given typographically in 2-page editorial spread
Week 5
Before starting on the work, we were prompted to search up on layouts and observe how elements are arranged. I looked through Pinterest for inspiration and pinned some of the ones that I find interesting.
 |
| Figure 1.1: Layout Research #1 (Link) |
Notes: One page of body text, and one page of graphical elements. Body text is adjusted to follow the flow of the graphical element. Usage of one column on one page. (Has a dynamic look overall, due to the bolded line that runs across the spreads, furthur emphasized by the alignment of text)
 |
| Figure 1.2: Layout Research #2 (Link) |
Notes: Graphical element sits in the middle of the spread. Headline is large and visible, followed by the subheadings which are larger than the body text, but smaller than the headline. Body text is manipulated according to the graphical element outline. (Messy at first glance, due to lack of negative space. Can appear quite chaotic)
 |
| Figure 1.3: Layout Research #3 (Link) |
Notes: Very large headline, with graphical elements in the words. Body text is placed at another page. (A neat look. A good use of negative space, which allows "breathing room" in layout)
 |
| Figure 1.4: Layout Research #4 (Link) |
After doing some research on layouts, I chose the editorial text (Visual Communicators, Unite! Manifesto 2000) and sketched the headline first.
 |
| Figure 1.5: Sketches for headline (25/09/21) |
I chose to combine the 2nd idea (Top Right) and the 4th idea (Bottom Right) for the headline. I, then, digitized it in Illustrator.
 |
| Figure 1.6: First headline for editorial text (25/09/21) |
Once it's done, I moved on into Adobe InDesign to create the layout for the editorial text. I prefer to experiment my composition in InDesign because I get to see the actual look of my layout.
 |
| Figure 1.7: Cross alignment and kerning (27/09/21) |
 |
| Figure 1.8.1: Text errors (27/09/21) |
 |
| Figure 1.8.2: Text errors, fixed (27/09/21) |
 |
| Figure 1.9: Layout #1 (27/09/21) |
 |
| Figure 1.10: Layout #1, greyed out (27/09/21) |
 |
| Figure 1.11: Layout #2 (27/09/21) |
 |
| Figure 1.12: Layout #2, greyed out (27/09/21) |
I showed the two layouts in class and received feedback from my peers and Mr Vinod. After hearing the response, I decided to create more layout designs to explore further.
Week 7
 |
| Figure 1.13: Layout #3 (02/10/21) |
 |
| Figure 1.14: Layout #3, greyed out (02/10/21) |
I took a different approach in the headline for this layout. I wanted to experiment with the headline blending into the background. However, I felt the word UNITE became too distracting.
 |
| Figure 1.15: Layout #4 (02/10/21) |
 |
| Figure 1.16: Layout #4, greyed out (02/10/21) |
 |
| Figure 1.17: Layout #5 (02/10/21) |
 |
| Figure 1.18: Layout #5, greyed out (02/10/21) |
Inspired by Mr Vinod's demonstration in class, I tried to use lines to guide the flow of direction. In Layout #4, I find the lines to be quite useful, as not only did it create a flow, it also framed the body text. I further explored by creating Layout #5, which in essence, the title is tilted, along with the subheading. I find the composition to be more dynamic due to the change of angle. In the end, I prefer Layout #5 out of all the layouts.
 |
| Figure 1.19: Cross alignment for Layout #5 |
Final Layout/Text Formatting
Font Choice: Futura Std (Heading), Serifa Std (Subheading), ITC Garamond Std (Body Text)
Point Size: Body text (9 pt), Subheading (18 pt)
Leading: Body text (11 pt), Subheading (22 pt)
Paragraph Spacing: 11 pt
Line Length: Average 60 characters
Alignment: Left alignment
 |
| Figure 1.20: Final outcome of text formatting (04/10/21) |
PDF File for Task 2: Typographic Exploration & Communication
FEEDBACK
Week 6
The headline needs reworking, because of its general outline. There is too much going on at the heading, so try to simplify and avoid making the general shape of the heading complicated. The extra elements in the first layout is not needed. Also try to relate the heading, subheading, and body text together.
REFLECTIONS
Experience
Thanks to Task 1: Exercise 2, I had a grasp of Adobe InDesign, and I noticed that I work more efficiently because I knew what to do.
I had confidence in my type expression, so I managed to think of various ways to design my headings. That was the easier part of the task.
My challenge was actually creating an interesting layout for the editorial text. I wanted to make a design that stands out, which gave me more pressure to do well. Due to my limited knowledge of layouts, I had a hard time thinking about various compositions for my texts.
Observations
I observed that font choices are important in editorial text as well. Choosing the "wrong" pair of fonts can lead to a clash of design/monotonous design, which makes the text look unappealing to readers.
I noticed that columns are essential in layouts— as they arranged your texts in an evenly spaced box which makes the layout look appealing. It creates a sense of harmony when each text with the same information are evenly spaced.
Findings
I found that different type of layouts can leave a different kind of impression on the readers. As I have found during my layout research, the more white space there is in a layout, the more neater it looks. It gives off a serious and professional feeling. On the other hand, if a layout is filled to the maximum, it would look messy. It gives off a feeling of casual and chaotic.
FURTHER READINGS
 |
| Figure 1: A Type Primer: Second Edition (2003) |
Reference:
Kane, J. (2003). A Type Primer: Second Edition. Pearson Education, Inc., Prentice Hall, 1 Lake St, Upper Saddle River, NJ 07458.
Columnar Organization
Page 137 - 162
 |
| Figure 2.1: Layout with different number of columns |
Dividing text in columns can be useful as it helps to manage the line length of a text and allows white spaces in the layout (excluding margins).
 |
| Figure 2.2: Layouts with different number of columns |
 |
| Figure 2.3: Horizontal layouts |
Horizontal layouts provides more space in width, which allows for more text fields. It provides comfort in reading than narrow text fields.
 |
| Figure 2.4: Differences in horizontal layout vs vertical layout |
 |
| Figure 2.5: Elements of a layout |
To create a layout that effectively communicates its message one should consider: establishing a format, establishing hierarchy, typeface choices, and ligatures.
 |
| Figure 2.6: Titles and subheadings |
Visual hierarchy in layouts are important, and therefore needs to have an order. Typically, a title would be larger than the overall text. It creates a starting point for the readers, to know where they should start reading. Subheadings among body texts are spaced out by one line to create visual hierarchy, which can be further reinforced by either italicizing or bolding the text.
Comments
Post a Comment