Typography - Task 2: Typographic Exploration and Communication
26/9/2023- 10/10/2023 || Week 5 - Week 7
Ruchira Nowreen || 0347111
Bachelor of Software Engineering || Minor: Creative Media Design || Taylor's University
GCD60104 Typography
Task 2: Typographic Exploration and Communication (Text Formatting and Expression)
Table of Contents
1. Lectures
2. Instructions
LECTURES
Lecture 5: Typo_5_Understanding
In Lecture 5 on typography understanding, several key topics were explored.
1. Unsymmetrical Letter Case:
The discussion focused on the unique characteristics of unsymmetrical letter cases, particularly evident in Baskerville. The differing stroke weights and distinctive arcs connecting serifs to stems contribute to internal harmony and individual expressiveness in letterforms.
Figure 1.1: Unsymmetrical uppercase letterform 'A' || 26/09/23
2. Varied Curves in Similar Typefaces:
A comparison was made between Helvetica and Universe, highlighting the significant impact of varied curves in how stems finish and bowls meet. This underscores the nuanced differences between seemingly similar typefaces.
 |
| Figure 1.2: A comparison between stems & bowls of lowercase ‘a’ of Helvetica and Univers || 26/09/23 |
3. Maintaining X-Height:
The importance of maintaining x height, the size of lowercase letterforms, was emphasized. Considerations were made for curved strokes like 's,' ensuring they align appropriately above the median or descend below the baseline.
 |
| Figure 1.3: x-height || 26/09/23 |
4. Analysis of Letter Forms & Counters:
Appreciating counterforms is crucial in typography, particularly with letters such as 'r' that lack distinct counters. Proficiently handling counters in type setting enhances word coherence and readability. Close scrutiny of letterforms offers insight into the delicate balance between form and counter, fostering a tactile understanding of each letter's distinctive features and the letter-making process.
 |
| Figure 1.4: Difference in spaces between forms (white) & counters (black) || 26/09/23 |
5. Contrast in Typography:
The concept of contrast in typography was explored, with a focus on how simple contrasts can generate numerous variations. Examples included juxtapositions such as small+organic / large+machined and small+dark / large+light, illustrating the diverse effects achievable through contrast.
 |
| Figure 1.5: Different types of contrast || 26/09/23 |
In summary, Lecture 5 delved into the intricacies of typography, highlighting the importance of unsymmetrical letter cases, the impact of varied curves in similar typefaces, the maintenance of x height, the analysis of letter counters, and the creative potential inherent in contrast within typography design.
Lecture 6: Typo_6_Screen&Print
1. Typography in Different Medium
Typography is a crucial element in various mediums, persisting in both traditional print and modern screen-based designs. Despite the dominance of digital platforms, printed designs continue to maintain their significance.
Figure 1.6: Typography in different medium || 03/10/23
2. Type for Print
In print, certain typefaces, such as Caslon, Garamond, and Baskerville, are considered optimal. These typefaces, along with versatile and easily readable options, contribute to effective and aesthetically pleasing printed designs.
 |
| Figure 1.7: Print type || 03/10/23 |
3. Type for Screen
Screen-based typography introduces specific considerations, including taller x-heights, wider letterforms, more open counters, and reduced stroke contrast. Notable web-safe fonts for screens include Open Sans, Lato, Arial, Helvetica, and Times New Roman. However, the challenge lies in the variability of pixel rendering across different devices, necessitating adaptability.
4. Hyperactive Link/Hyperlink
A hyperlink, often blue and underlined, is a clickable element found on nearly all web pages. It allows users to easily navigate between documents or sections with a simple click, indicated by a cursor turning into a small hand when hovered over.
5. Font Size for Screen
Optimal text size for screens is 16 pixels, akin to print in books or magazines. Consideration given to reading distance enhances readability.
6. System Fonts for Screen/Web Safe Fonts
Devices come with pre-installed fonts, with Times New Roman being a common default.
These system fonts ensure uniform visibility and accessibility on screens. Commonly used system fonts include Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond.
7. Pixel Differential Between Devices
Screens across devices, including PCs, tablets, phones, and TVs, vary in size. Additionally, the text displayed on these screens differs in proportion due to variations in pixel sizes.
 |
| Figure 1.8: Pixel difference across different devices || 03/10/23 |
8. Static vs. Motion Typography
In the realm of design, a distinction exists between static and motion typography. Static typography, with minimal expressive characteristics like bold and italic, provides limited ways to convey words. In contrast, motion typography offers typographers opportunities to "dramatize" type, allowing letterforms to become "fluid" and "kinetic," unlocking a dynamic and expressive dimension. This approach enhances the visual impact, especially in dynamic media presentations or motion graphics.
Figure 1.9: Static Vs. Motion || 03/10/23
In summary, typography's evolution reflects its ability to adapt to the demands of different mediums and technologies. Whether in print or on screens, the art of typography remains a vital component in effective visual communication.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1-eBJpewe3DfMrMJqL1YLtcAc97J_ymgH/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 2: TEXT FORMATTING AND EXPRESSION (EXERCISES)
Task Overview
The assignment involves creating a typographic expression for a 2-page editorial spread (200 mm x 200 mm) using one of three provided text options. Key requirements include utilising 10 specified typefaces, incorporating sketches and digitised sketches in the composition process, and ensuring an engaging interaction between headlines and body text. Adobe Illustrator is employed for headline creation with minimal graphical elements, while Adobe InDesign is used for overall layout composition. No images are allowed, only minor graphical elements. The final submission comprises 2 JPEGs and 2 PDFs (with and without grids), emphasising a black and white colour scheme.
Research
I chose the topic 'Unite to visualise a better world' among the given editorial text options. Noticing that the majority of students were gravitating towards the topics 'The role of Bauhaus thought on modern culture' and 'A code to build on and live by,' I deliberately chose the less popular theme to provide a unique perspective. This decision was motivated by a desire to avoid aligning with mainstream choices, alleviating concerns about producing work with similarities to others in the class. This strategic selection allowed for an independent and distinct exploration of the chosen theme.
To begin, I initiated the process by conducting research on Pinterest and reviewing the work of senior students. It's always prudent to explore a variety of visual references before embarking on a task. This approach serves as a valuable wellspring of inspiration, facilitating the development and refinement of ideas for the upcoming project. I delved into a myriad of styles encompassing editorial spreads and layout designs, and below, I'll highlight some that particularly drew my attention.
 |
| Figure 2.1: Visual references for layout exploration, from Senior students || 03/10/23 |
 |
| Figure 2.2: Visual references for layout exploration, from Pinterest || 03/10/23 |
Sketch
Following the research stage, I implemented my insights by digitally sketching initial ideas, providing a clearer direction for the subsequent spread layout design. This preliminary sketching serves as a crucial step, offering a comprehensive understanding of the concept before transitioning to the actual execution using Illustrator and InDesign. I produced four sketches, each featuring varied expressions of headlines and layouts, as depicted below.
 |
| Figure 2.3: Layout sketches || 03/10/23 |
The presented sketches highlight a deliberate emphasis on the headline expression "Unite to visualise a better world" with a particular focus on visually emphasising the term "Unite" for a direct and impactful effect on the reader. The design concept aims to maintain a balance, avoiding an overly crowded overall layout.
Exploration
After completing the sketching stage, the process advanced to digitising the editorial text layout. The initial step involved digitising the headline in Illustrator for the easy trial and error process, and subsequently, the progression moved to InDesign for the development of the body and the comprehensive layout design. Firstly, I tried creating the headline by applying the skills in type expression that I acquired during Task 1.
 |
| Figure 2.4: First attempt of digitising the headline || 03/10/23 |
On my first attempt of digitising the headline, I created this version above. However, upon seeking feedback from Mr. Vinod, I recognized its shortcomings. Specifically, he advised removing the additional graphics from the letter 'O.' Subsequently, I proceeded to refine the type expression accordingly.
Figure 2.5: Second & third attempt of digitising the headline|| 03/10/23
During my second & third attempts at digitising the headline, I encountered another setback. Mr. Vinod pointed out that these type expressions placed more emphasis on the word 'WORLD' rather than 'UNITE,' which was the intended focus. In response to this feedback, I proceeded to a third attempt to rectify and emphasise the 'UNITE' aspect.
 |
| Figure 2.6: Fourth attempt of digitising the headline || 03/10/23 |
In my fourth attempt at digitising the headline, I followed Mr. Vinod's advice for a clean and simple presentation, with his assistance in creating this version. Following this, I proceeded to InDesign to complete the rest of the spread layout design.
Subsequently, I commenced working on InDesign, experimenting with the spread layout to determine the most visually pleasing arrangement. During this process, I realized that relying solely on Illustrator for the heading and pasting it as a non-editable image might not be the most convenient approach. As a solution, I integrated a combination of InDesign and Illustrator work for certain headings to enhance the overall appeal of the layout.
Initially, I focused on the body text, experimenting with various typefaces, kerning, tracking, and achieving cross-alignment. To provide myself with options and determine the most favorable outcome, I utilized multiple layouts. The following displays the 12 layouts I generated during this process.
 |
| Figure 2.7: Compilation of layouts (Draft #1) || 03/10/23 |
 |
| Figure 2.8: Compilation of layouts (Draft #2) || 03/10/23 |
 |
| Figure 2.9: Compilation of layouts (Draft #3) || 03/10/23 |
Short-listed
From the 12 layouts, I narrowed down my selection to 3 options (layout 2, 4 & 12) after receiving feedback from Mr. Vinod. To make a more informed decision on the final layout, I created a blocked-out layer for each, allowing for a better assessment of even distribution before finalizing my choice.
 |
| Figure 2.10: First short-listed layout (LAYOUT 2) || 04/10/23 |
 |
| Figure 2.11: Second short-listed layout (LAYOUT 4) || 04/10/23 |
 |
| Figure 2.12: Second short-listed layout (LAYOUT 12) || 04/10/23 |
 |
| Figure 2.13: Blocked-out layout of the 3 shortlisted layouts || 04/10/23 |
Final Outcome
Upon reviewing the blocked-out layout of the spreads, I selected Layout 4 as my final choice for this task. The flow in the body text of Layout 4 stood out significantly in comparison to Layouts 2 and 12.
HEAD
Font/s: Univers LT Std 39 Thin Ultra Condensed (UNITE TO VISUALISE), Univers LT Std 45 Light (A BETTER WORLD)
Type Size/s: 300 pt (UNITE TO VISUALISE), 60 pt (A BETTER WORLD)
BODY
Font/s: Univers LT Std 55 Roman (body text), Univers LT Std 65 Bold Oblique (subtext)
Type Size/s: 9 pt (body text), 16 pt (subtext)
Leading: 11 pt (body text), 18 pt (subtext)
Paragraph spacing: 11 pt (body text)
Characters per-line: 38 characters
Alignment: Left aligned
Margins: 10 mm (top, bottom, left, right)
Gutter: 5 mm
Columns: 3 (per page)
 |
| Figure 2.14: Final layout (without grids) || 06/10/23 |
 |
| Figure 2.15: Final layout (with grids) || 06/10/23 |
PDF of the final layout (without grids)
<iframe src="https://drive.google.com/file/d/1m83kBubfoteM8ztgl8ysv4b0uM6TPgBi/preview" width="640" height="480" allow="autoplay"></iframe>
PDF of the final layout (with grids)
<iframe src="https://drive.google.com/file/d/19-nLB9XjSVEBs9DSsQuQyH-9YFQUXfyi/preview" width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 5
Specific Feedback:
Try making the lines more evenly curved but not justified
Consider adding a hyphen when its oddly necessary
For task 2, experiment with the headline presentation, exploring different styles and approaches.
General Feedback:
Download PDF and JPEG with both grids and without grids for proper verification of the work, failure to do so shall deduct marks.
Apply the knowledge acquired from Task 1 to Task 2.
It is not mandatory to use the same font type; however, the same typeface can be employed with varying styles.
Week 6
Specific Feedback:
Do not use too much graphics in tittle
Make the title more congested to depict the impact of the word 'UNITE'
Emphasise on the word 'unite' more
Make the paragraphs aligned at one level
General Feedback:
Note down the work process as an evidence of your own work.
REFLECTION
Experience
In delving into typography, I found immense joy in expressing content typographically within an editorial spread. The process provided a unique experience akin to editing for a magazine. Under the guidance of Mr. Vinod, my professor, I have had the privilege to explore the nuanced realm of typography and text formatting throughout the course. This experience has proven to be both transformative and enlightening. Mr. Vinod steered me through a comprehensive journey, commencing with the fundamentals of typography and culminating in a profound comprehension of how to effectively convey meaning through text. The learning process, encompassing aspects such as type choice, size, leading, line-length, and other technical intricacies of typography, was simultaneously challenging and enjoyable. Each course and project represented a step towards a comprehensive understanding of the art and science of text formatting and expression.
Observations
Exploring fonts and point sizes revealed that typography extends beyond selecting visually pleasing letters. It resembles a puzzle, demanding precision in fitting elements together. The choice of fonts, sizes, and spacing significantly influences readability and emotional impact. Typography, I observed, functions as a subtle yet powerful language in design. One notable revelation during this educational endeavor was the significant influence typography wields in shaping our perception and interpretation of information. Every decision, ranging from the selection of typeface to meticulous adjustments in leading and kerning, impacts the readability, tone, and overall impact of the text. Witnessing how distinct typefaces and formatting choices can evoke varied emotions and thoughts underscored the profound impact of typography. Additionally, a keen observation was made regarding the critical importance of attention to detail. Notable distinctions between amateur and professional design involve avoiding widows and orphans, ensuring consistent cross-alignment, and exercising judicious use of forced line breaks. Precision emerges as a paramount requirement in typography, with these subtleties playing a pivotal role.
Findings
My exploration led me to recognize the profound importance of typography. It's not merely about aesthetics; rather, it plays a critical role in ensuring that people can comprehend and emotionally connect with the content. Tailoring fonts and styles to the audience is essential, as they can evoke different responses. The culmination of my research into typography and text formatting revealed that they transcend mere technical facets of design, constituting essential components of effective communication and expression. Typography, as an artistic medium, possesses the capacity to evoke emotions, establish hierarchy, and enhance readability. It serves as the visual language employed to convey meaning, tone, and intention. Furthermore, the investigation underscored that typography demands a delicate balance between creativity and discipline. While allowing for artistic expression, adherence to standards is imperative to ensure clarity and functionality. In essence, mastering typography and text formatting under Mr. Vinod's mentorship has been a journey marked by discovery and growth. The profound understanding gained regarding the intricacies and complexities of this discipline is a testament to both observations and findings. Typography transcends the mere arrangement of letters; it is about crafting a visual narrative that resonates with an audience—a skill I am eager to refine as a designer. In essence, I discovered that working with fonts is not just enjoyable but a potent means of effectively conveying a message.
FURTHER READINGS
Week 5
Typographic Design - Form and communication: The Typographic Grid
A typographic grid is a fundamental structure for designers, providing a balance between freedom and constraint. It organizes information in various mediums, ensuring clarity and accessibility amidst visual noise. The result is aesthetically pleasing and effectively communicated content.
Background
 |
| Figure 3.1: Typographic Design - Form and communication - Page-66 || 28/09/23 |
The modern typographic grid's evolution stems from diverse influences, including experimental designers and movements like Futurism and Bauhaus. It crystallized as a precise system in Switzerland during the 1950s, becoming a universally accepted organizational tool. Despite being ubiquitous in conveying information, grids often operate subconsciously, intricately woven into our daily experiences as the fundamental structure for organizing human thought, interactions, and events.
Structure and Space
 |
| Figure 3.2: Typographic Design - Form and communication - Page-67 || 28/09/23 |
Typography, when introduced into space, establishes subliminal divisions, creating spatial structure. As typographic elements vary in size, weight, and position, new structures emerge. Viewing letterforms as points in space, lines of text as extensions, and text blocks as planes suggests a kinetic nature—typographic elements are in perpetual motion. Centered letterforms seem static, but off-center placements create a sense of movement. Lines of type imply horizontal motion, and the kinetic possibilities of typographic elements are limitless. Grounded by gravity, our comfort with the horizontal contrasts with the challenge posed by the vertical dimension, reflecting our natural orientation to the Earth.
Proportion
 |
Figure 3.3: Typographic Design - Form and communication - Page-68 || 28/09/23 |
The Square
 |
Figure 3.4: Typographic Design - Form and communication - Page-70 || 28/09/23 |
The golden section's natural division, the basic square, has significantly influenced the development of the modern grid. Squares, especially when combined, offer a diverse range of visual patterns. In Japan, the tatami mat system, based on double square modules, creates asymmetrical spaces in traditional Japanese homes. Designers like Paul Rand have employed squares as metaphorical building blocks and organizational strategies, as exemplified in his timeless book cover from 1955. Modern applications, such as Martin Venezky's Appetite Engineers website homepage, showcase the continued relevance of squares, particularly in animated displays of type and image. A square subdivided into a 256-unit grid presents a vast array of proportional possibilities, exemplifying the influence of the de Stijl movement. Practitioners of de Stijl elevated the language of the horizontal and the vertical to spiritual significance. Piet Mondrian, in particular, sought perfect harmony in proportions, translating this quest into both his paintings and the designs of everyday living.
Week 6
Typographic Design - Form and communication: The Typographic Grid
Single Column Grids
 |
Figure 3.5: Typographic Design - Form and communication - Page-71 || 05/10/23 |
When text takes the form of a straightforward linear narrative, like in novels or exhibition panels, it's often preferable to present it as a single block. The choice of how to orient these text blocks on pages is typically influenced by practical factors such as budget constraints, standard paper sizes, and the intended typographic function. While some designers occasionally turn to the golden section for inspiration, alternative approaches to proportions are more common, shaped by the designer's intuitive sense honed through observation and practice. The essential challenge lies in treating the text block and page margins as a harmonious proportional system, where margins, whether dynamically asymmetrical or quietly symmetrical, not only set the stage but also accommodate additional typographic elements. The interplay of negative space in margins with the text allows for a nuanced balance of positive and negative space, offering designers the flexibility to size and adjust the text block to achieve varied proportional relationships within the page.
Multicolumn Grids
 |
Figure 3.6: Typographic Design - Form and communication - Page-74 || 05/10/23 |
An elemental grid, rooted in a Cartesian coordinate system, relies on intersecting horizontal and vertical lines to create rectangular modules. Constructing a typographic grid demands a comprehensive understanding of factors such as text volume, content, target audience, and delivery medium, with ongoing adjustments often necessary. Multicolumn grids possess distinctive elements, including margins, text columns, gutters, and flow lines, facilitating organized layouts across pages. The baseline grid aids in the horizontal alignment of text elements. Structuring type involves the organization of forms into a unified whole and the creation of visual pathways. The choice between two or many columns depends on the complexity of the content, allowing for the creation of clear and accessible layouts, particularly for multilevel information. Within the grid's type area, composed of vertical columns, the widths and intervals are selected to optimize legibility, with type size measured against the column width to achieve an ideal number of characters per line.
 |
Figure 3.7: Typographic Design - Form and communication - Page-75 || 05/10/23 |
When utilizing multicolumn grids, it is crucial to maintain a balance among three interdependent variables: type size, line length, and interline spacing (leading). Adjusting one of these aspects often necessitates adjustments to the others. As the typographic space is horizontally divided into columns of varying widths, it allows for control over these variables while creating a rhythmic visual field. Rhythm in typography is achieved through the repetition and contrast of columns and other visual elements, with white space playing a key role in rhythmically separating elements and infusing energy into the typographic field. While normative column intervals facilitate logical flow, exploring unconventional gutter intervals can lead to striking typographic rhythms and patterns.
Improvisational Structures
 |
Figure 3.8: Typographic Design - Form and communication - Page-84 || 05/10/23 |
Improvisational structures in typography develop responsively to specific information elements, contrasting with predetermined organizational devices like modular grids. Designers, akin to information architects, construct typographic environments by comprehending the visual material, establishing relationships, and creating hierarchies. Typographical materials act as building blocks for improvisational structures, translated into forms reflecting hierarchical importance. Designer David Colley exemplifies this approach in a poster, organizing information into distinct zones for clarity and dynamic visual impact through asymmetrical composition (Fig. 4-37). The flexible construction process involves intuitively arranging forms, substituting and omitting them as needed. Proficiency in asymmetrical composition, understanding positive and negative space dynamics, and recognizing the role of visual contrast are vital for effective work with improvisational structures.
Comments
Post a Comment