Typography - Task 2: Typographic exploration and communication

on

28/10/2024 - 11/11/2024 (Week 6 - Week 8)

Gabriella Grace Christyanti / 0371915
Typography / Bachelor of Design (Honours) in Creative Media / Taylors
Task 2: Typographic exploration and communication

TABLE OF CONTENTS   
1. Lectures
2. Instructions
3. Process Work
    3.1 Research  
    3.2 Sketches and Ideation
    3.3 Digitization
    3.4 Final Text Format
4. Feedback
5. Reflection
6. Further Reading 

1. LECTURES

WEEK 5: TYPO_5_UNDERSTANDING

Understanding Letterforms:
  • While uppercase letterforms often suggest symmetry, a closer examination reveals they are not truly symmetrical. This is a deliberate choice by type designers to create balance and visual appeal.
  • For instance, in the Univers typeface, the letter "A" appears balanced at first glance, but the left stroke is slightly thinner than the right. This subtle difference ensures harmony in the overall design.
  • The complexity of individual letterforms becomes more apparent when comparing similar sans-serif typefaces like Helvetica and Univers. In these typefaces, differences can be seen in how the stems of the lowercase 'a' meet the bowl, illustrating the unique characteristics and expressive qualities of each design.

Maintaining X-Height:

  • X-height refers to the height of the lowercase letters without ascenders or descenders (like 'x'). It plays a crucial role in defining the legibility and visual balance of a typeface.
  • When designing or choosing a typeface, it is important to ensure that curved strokes, such as those in the letter 's', rise slightly above the median line (the top of the lowercase letters) or dip below the baseline (the bottom of the letters). This adjustment compensates for the visual difference in size between curved and straight lines.
  • Without these adjustments, curved strokes can appear smaller than their straight counterparts, leading to uneven text appearance. Proper handling of x-height ensures a more consistent and harmonious line of text.

Form and Counterform:

  • Form refers to the actual shape of a letter, while counterform (or counter) describes the space inside and around the letterforms. Understanding both is vital for effective typography.
  • Counterform is especially important when letters are joined together to form words, as it includes the spaces between the characters. These spaces help determine the overall readability of the text.
  • For example, when working with letters like 'o' or 'p', the counter (the enclosed space within the loop of the letter) can significantly influence the appearance of the typeface. In contrast, letters like 'r' have open counters, which affect how they interact with other characters.
  • Analyzing the form and counterform of letters in detail can provide insight into the nuances of letter-making, helping typographers achieve balance between positive (form) and negative (counter) space.

Contrast:

  • Contrast is one of the most powerful elements in typography and plays a critical role in creating visual hierarchy. It helps distinguish different types of information within a design.
  • In typography, contrast can be achieved in multiple ways, such as through variations in size (small vs. large), weight (light vs. bold), or style (serif vs. sans-serif).
  • For example, using a bold typeface for headlines and a lighter weight for body text can help guide the reader's eye and make a design more readable. This approach also contributes to the tone and feel of the design, from formal to casual.
  • Contrast not only enhances the clarity of the information but also adds visual interest, allowing designers to convey a specific message or mood through their choice of type

2. INSTRUCTIONS



3. PROCESS WORK FOR TYPE EXPRESSION 

3.1 Research

When we were first given the assignment, I went through the three texts Mr. Vinod provided. After reviewing them, I decided to choose"A Code to Build on and Live By." I found the title intriguing and wanted to explore it further. To start, I tried to visualize the concept of a "code." I looked for inspiration on Pinterest, where I explored various images and ideas that helped me better understand and interpret the theme.

3.2 Sketches and ideation

I started by drawing rough sketches in Procreate, focusing on the word "code." I experimented with shapes, lines, and symbols to show structure and meaning. Procreate made it easy to quickly try different ideas and adjust the design.

After finalizing my sketches, I recreated a cleaner version in Adobe Illustrator. I used its precise tools to sharpen the lines, improve symmetry, and create a more polished design. This made the final version look more appealing and clear.


3.3 Digitization

When I moved the design to InDesign, I realized the layout looked too messy and cluttered. To fix this, I simplified the arrangement by reducing unnecessary elements and spacing things out more evenly. I focused on creating a cleaner, more organized look to make the design easier to read and visually appealing. This helped the overall composition feel more balanced and professional.


3.4 Final Text Format

Here's my final outcome that Mr.Max choose



HEAD LINE

Typeface: Univers LT Std

Font/s: Univers LT Std 65 Bold, Univers LT Std 55 Roman

Type Size/s: 68,421pt

Leading: 0 pt 

Paragraph spacing: 0


BODY 

Typeface: Bembo Std

Font/s: Bembo Std Regular 

Type Size/s: 10 pt 

Leading: 11 pt 

Paragraph spacing: 11 pt 

Characters per-line: 50-60 

Alignment: Left Justified 

Margins: 12,7 mm top + left + right + bottom

4. FEEDBACK

Week 6 General Feedback: Mr. Max taught us how to create an editorial text template and move pages in InDesign. We also started sketching ideas for the title design before we need to digitize it.

Specific Feedback: My biggest challenge during the sketching phase was figuring out how to place the "A" at the beginning of the sentence without making it look out of place. Mr. Max advised me to use the same font for consistency.

Week 7 General Feedback: Once our sketches were approved, we started turning the titles into digital versions and arranged the text to make the layout look good. We focused on balancing everything to make it interesting but still easy to read.

Specific Feedback: My composition was still very messy at first, but Mr. Max helped me arrange it to make it much neater. He showed me how to use rulers to ensure the title and text were properly aligned.

Week 8 General feedback: No class (independent learning week)

Specific feedback: Mr.Max like no.4, the last one as the layout and design looks the best

5. REFLECTIONS

Experience

This week, I gained valuable insights into the design process of the editorial text, from initial ideation to final execution. Working with Adobe Illustrator and InDesign, I explored different aspects of digital design. At first, I struggled with balancing my layout and simplifying my composition, but with practice and feedback from Mr. Max, I was able to refine my work. His guidance on using tools for alignment in InDesign helped me improve my layout. It was satisfying to see how the project evolved from messy sketches to a polished final design.

Observation

I noticed that small adjustments in design, like spacing and alignment, can significantly affect how neat and visually appealing a layout appears. During the transition from one adobe to the other, I observed how rough sketches can transform into polished designs with clearer structure. In InDesign, I realized that cluttered layouts make it harder to focus on the content, and simplifying the composition greatly improves readability and balance.

Findings

I discovered that working in stages helps in refining a design and ensures that each step adds value. Each tool—Procreate, Illustrator, and InDesign—offered unique strengths, from initial experimentation to precise adjustments and final layout. Simplifying a complex design isn’t always easy, but it’s essential for creating a clean and effective final product. Additionally, feedback plays a vital role in highlighting areas that need improvement and guiding the design toward a stronger, more cohesive result.

6. FURTHER READING


Historical Origins of the Grid

  • Grids date back to early written forms, including Mesopotamian cuneiform tablets (3000 BCE) and Egyptian hieroglyphics on papyrus.
  • Mechanized printing in 15th-century Europe established rectilinear text structures in typographic design, exemplified by Gutenberg’s Bible.

Evolution of the Modern Grid

  • Developed through various design movements: Futurism, Dadaism, Constructivism, de Stijl, and the Bauhaus.
  • Jan Tschichold and Swiss designers in the 1950s refined the grid into a precise, mathematical system.
  • The grid became a universal tool for organizing information visually.

Grids in Everyday Use

  • Grids are omnipresent, often unnoticed, shaping how information is modeled and archived.
  • Space and typographic elements interact to create structural divisions and movement within layouts.

Typographic Kinetics

  • Typography is perceived as dynamic:Centered elements feel static, while off-center elements imply motion.
  • Horizontal and vertical orientations evoke stability and challenge, respectively.
  • Typographic movement stems from directional qualities of elements, influencing visual flow.

Proportional Systems in Grids

  • Effective grid use relies on proportional relationships, often guided by mathematical ratios.
  • The golden section (1:1.618) is a historical proportional model, prevalent in nature, art, and design.
  • The Fibonacci sequence, related to the golden section, appears in natural patterns and design structures.

Square as a Fundamental Form

  • The square is a foundational proportional unit influencing modern grids.
  • Examples include traditional Japanese tatami mats and modern design strategies by Paul Rand and Martin Venezky

    Comments

    Post a Comment