Task 2 - Typography

 

27th May 2024 (Week 6)  - 17th June 2024 (Week 9)

Insha Thahirah Rajab - 0360671

Typography - Section 01

Bachelor's Degree  in Creative Media (Honors) - Taylors University

Task 2

CONTENTS

Lectures

Instructions

Task 2

        Exercise 1

Feedback

Reflection

Further Reading

LECTURES

Lecture playlist: https://www.youtube.com/playlist?list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR

Week 6: Understanding letterforms pt2 

(Typo_5_Understanding)

Uppercase letterforms are sometimes asymmetrical. In some, they may vary in different stroke weights, with the width of one slope thinner/ thicker than the other. For lowercase letters, there may be differences in how the stems of the letterforms finish and how the bowls meet the stems.

Maintaining x-height

Curved strokes, such as "S" must rise above the median (or sink below the baseline) to appear the same size as the vertical and horizontal strokes they adjourn.

Figure 1.0 Example of curved strokes in "a" exceeding the mean line

Form & Counter forms

Counter forms: The transparent (negative or white) space enclosed inside a letterform. 

Figure 1.1 Letters and their Counter Forms

Figure 1.2 Typographic Composition using Counter Forms

It is important to note that certain letters, like lowercase "r", have no counters per se. How well you handle the counters when you set type determines how well the words can be read when displayed. u.

Contrast

Contrast with typefaces creates strong powerful dynamics in design.

Figure 1.3 Contrast in Typography

Figure 1.4 Using contrast to create typographic variations

❗takeaways:

- Type designers have to take great care in creating internally harmonious and individually expressive letterforms.

- Using observations and understanding existing typeface Counter Forms can help with letter-making.

- The basic principles of Graphic Design apply directly to typography, namely through the use of contrast

Week 7: Typography in Different Medium

(Typo_6_Understanding)

Typography exists on both paper and a multitude of screens. It is subject to a variety of parameters, such as, operating system, system fonts, the device and screen itself, the viewpoint, and more.

Type for Print - smooth, flowing, and pleasant to read (Caslon, Garamond, Baskerville as common examples) Highly readable when set to a small size. Versatile, easy-to-digest classic typefaces have a neutrality and versatility that makes typesetting a breeze.

Type for Screen - These are often optimized and modified to enhance readability and performance onscreen in a variety of digital environments.

❗takeaways:

- Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

INSTRUCTIONS

TASK

Task 2 - Exercise 1: Typographic Exploration & Communication

Create a two-page editorial spread using only type & minor graphical elements, containing the heading, subheading, & body content provided from 3 options. No images are allowed. However, some minor graphical elements, i.e. line, shade, etc. might be allowed.

tutorial: https://www.youtube.com/watch?v=rPwYO3ff4e0&ab_channel=VinodNair

: research

To start this off, I decided to gather some editorial inspiration from Pinterest. I focused on different styles for each editorial option.

Figure 1.5 Inspiration #1 for "UNITE..." article

Figure 1.6 Inspiration #2 for "UNITE..." article

Figure 1.7 Inspiration #1 for
"...BAUHAUS" article

Figure 1.8 Inspiration #1 for "...BAUHAUS" article

Figure 1.9 Inspiration #1 for "CODE..." article

Figure 2.0 Inspiration #1 for "CODE..." article

I made sure to implement each of these onto my sketches/ final work. Through lecture recordings and my own findings, I took great inspiration from connecting letters to create unique letterforms, as well as the use of counter forms, white space, and dark space, and immediately knew I needed these in my work.

: sketches

To begin my design process, I sketched out as many concepts as I could, as I found dumping every idea could help me select the best design, rather than limiting myself to a single editorial passage.

I created mini idea boards of things elements, and styles I could work with depending on the passage chosen, research done, and exploring through pinterest and past student works.

Figure 2.1 Sketch #1

Figure 2.2 Sketch #2

Figure 2.3 Sketch #3

After establishing the mood/ theme, I moved onto actually scribble sketching layout spreads. 

From these sketches, i handpicked a few that seem suitable to digitize and create and sent over these concepts to Mr Max. He picked three sketches he liked:

Figure 2.4 Final Sketch #1

Figure 2.5 Final Sketch #2

Figure 2.6 Final Sketch #3

: drafts

 I began drafting more clear layouts through Illustrator to experiment ideas and fonts i could use.

Figure 2.7 Digitized Draft #1 

Figure 2.8 Digitized Draft #2

Two designs I created really stood out to me and I decided to select them for the final two choices:

Figure 2.9 Digitized Draft #3

Figure 3.0 Digitized Draft #4

: digitization

With more confidence, I was able to finalize my spreads with InDesign. I watched the video tutorial to understand the use of pages, and copied the designs of Illustrator onto InDesign, taking into careful consideration the layout and spacing between two pages.

Figure 3.2 Digitization #2

Figure 3.1 Digitization #1

:shortlisted layouts

After feeling more comfortable with InDesign, I made other designs, some of which did not make it to the final cut. The first two had more adjustments made as they were my final designs, whereas the last two were more experimental and weren't as refined.

Figure 3.3 Final Shortlisted layouts (PDF)

Figure 3.4 Final Shortlisted layouts (PDF with Grids)

:blocking 

To understand the use of white and black space, colour blocking is important for editorial spreads. It controls balance within each spread.

Figure 3.5 Colour blocking (PDF)

: final editorial spread

After some feedback and major alterations, I was able to select a refined, polished editiorial spread ready for print and screen. I adjusted alignment, layout, paragraph and letter spacing, justification and readability. 

Figure 3.6 Final Editorial Spread

 I used ITC New Baskerville Bold for the headings and Roman for the body text. The subheadings and other titles were in Bold Italics, to stand out and establish hierachy accordingly. The use of lines reflect steps, leading the viewers eye from the title. to the body, to the end of passage. I liked my first design where the title is completely black, but after Mr Max's feedback on readability, I decided to make the alternate lines have a thin stroke to establish difference.

Figure 3.7 Final Editorial Spread (PDF with Grids)

HEAD LINE
Font/s: ITC New Baskerville Std
Type Size/s: 160 pt
Leading: 192 pt
Paragraph spacing: 0 

BODY
Font/s: ITC New Baskerville Std
Type Size/s: 10 pt
Leading: 12 pt
Paragraph spacing: 5 pt
Characters per-line: 57
Alignment: left/ right justified Margins: 10 mm top + left + right + bottom
Columns: 2
Gutter: 5 mm

FEEDBACK

Week 6

Specific Feedback: Please work on the sketches I have selected and start digitizing immediately.

General Feedback: This Monday is an online class, please attend an online session for advice on improving your drafts and to select the best design. Try to make use of Illustrator's perspective tools to build dimension. 

Week 7

Specific Feedback: The first design you have made is nice and can be used for the final. However, the paragraph layout is a bit messy. Can we keep the alignment and paragraph column to be more neat?

General Feedback: The date of submission for task 2 has been released. Start working on your sketches for task 3 during your independent learning week.

Week 8

Specific Feedback: I prefer the second as this is easier to comprehend and read. The first has a nice design but it is quite difficult to put them into sentences or words. You need to adjust your layout. Make them neat and align them first. Then work on paragraph spacing, rags, and rivers.

General Feedback: Upload the fully completed task 2 with relevant notes and recordings watched. Start on Task 3 as it is to be uploaded soon. 

REFLECTIONS

Experience: Task 2 helped me explore my creativity when creating editorial spreads. I enjoyed this task due to our freedom when designing and the time we had to do so. Due to this, I paid the most attention to the final layout, making sure everything was up to standard. Many classes were online due to public holidays and a midsemester break. I found this to have equal pros and cons. I had more free time to work on my designs, however getting immediate feedback, and motivation proved to be difficult. At first, I did not understand the use of colour blocking, but after doing so, I learned that colour blocking helps balance out white space and black space as it maps out where the ink runs.

Observations: Through observation, I deduced that I had to pay attention to basic text formatting rules. I struggled greatly with paragraph spacing, rags, and rivers, as well as ensuring every layout was correctly aligned. By looking at others' work, I paid attention to their use of perspective and used this to pay closer attention to the way I lay things out. Halfway through the assignment, I understood that a majority made 3 drafts of the same text paragraph, but with consultation, I made 4 different drafts.

Findings: I found that using 4 completely different drafts makes it easier to explore my ideas. I am then better able to select the best design as my final. I was quite interested in the use of negative & positive space (white and black space), and so I explored further on this through my work, using Pinterest, and various other sites as references. I need to work on my time management, as I spend a lot of time making adjustments and tweaks to the final product. I also need to set some more time aside to do some further reading.

FURTHER READING

Figure 3.4 A Type Primer

Chapter 1: What Is Typography?

This chapter introduces typography, discussing its role in visual communication and its importance in everyday life. It explains the basics of type, such as the difference between typefaces and fonts, and the impact of type on readability and aesthetics. Key terms like serif, sans-serif, kerning, and leading are introduced, providing a foundational understanding of typographic terminology.

Chapter 2: Letterforms

The focus shifts to the anatomy of letterforms. This chapter breaks down the individual parts of letters, such as the ascender, descender, x-height, and baseline. It explores the historical evolution of letterforms and how different styles of typefaces (e.g., Roman, Blackletter, Italic) have developed over time. The chapter emphasizes the importance of understanding the structure of letterforms for effective typography.

Chapter 3: Type Classifications

This chapter delves into the classification of typefaces. It covers the major categories, including Old Style, Transitional, Modern, and Slab Serif, explaining their historical contexts and distinctive features. The chapter also touches on sans-serif classifications like Grotesque, Neo-Grotesque, Humanist, and Geometric. Understanding these classifications helps designers choose appropriate typefaces for various projects.

Chapter 4: Type Measurement

The technical aspects of measuring type are discussed in this chapter. It explains units of measurement in typography, such as points and picas, and how to measure type size, line length, and spacing. The chapter covers the concepts of leading (line spacing), tracking (letter spacing), and kerning (space between individual characters), and provides practical  guidelines for using these measurements effectively to improve readability and visual harmony in text.

❗takeaway:

- This book aims to provide a concise yet comprehensive overview of the information, vocabulary, tools, and methods used in effective typographic design practice.