Typography Task 2 Text Formatting & Expression

  


26/9/2023- 10/10/2023 (Week 5 - Week 7)
Ang Siu Boon (0345135)
Typography (Bachelor's Degree (Hons) in Computer Science)
Task 2 Text Formatting & Expression


CONTENTS

  1. Lectures
  2. Instructions
  3. Feedback
  4. Reflections
  5. Further Readings


LECTURES

Week 5 (26/9/2023): Lecture 5: Letters

Understanding Letterforms


Figure 1.0 Type Expression Application, Week 5 (28/9/2023)


Maintaining x-height

x-height - description of  the sizes of the lowercase letterforms

Figure 1.1 Type Expression Application, Week 5 (28/9/2023)


Form/Counterform (Counter)

The space which describes, often contained by the strokes of the form

Figure 1.2 Difference spaces between Forms (White) and Counters (Black), Week 5 (28/9/2023)


Figure 1.3 Analyzing forms and counters, Week 5 (28/9/2023)


Contrast

Basic principles of Graphic Design, which produces many variations :

-small + organic
-large + machined
-small + dark
-large light
Figure 1.4 Type Expression Application, Week 5 (28/9/2023)

Week 6 (3/10/2023): Lecture 6: Screen & Print

Print  Type vs Screen Type

Type for Print
-Intended for reading from print long before we read from screen
-Designer's job tot ensure that text is smooth, flowing, and pleasant tot read.
-Caslon, Garamond, Baskerville are most common typefaces used for print.

Type for Screen
-Intended for use on web.
-Optimized and modified to enhance readability and performance on screen in various digital environments.
-Include :
    • taller x-height (reduced ascender/descenders)
    • wider letterforms
    • more open counters
    • heavier thin strokes and serifs
    • reduced stroke contrast
    • modified curves and angles for some designs

Hyperactive Link/Hyperlink

-A word, phrase, or image that you can click on to jump to a new document or a new section within the current document.
-Found nearly in all Web Pages.
-Allowing users to click their wat from page to another.
- Normally blue and underlined by default.
-When moving the cursor over the hyperlink, arrow should change to a small hand pointing at the link.


Font Size for screen

-16-pixel text size. (same size as text printed in a book or magazine)
-Accounting for reading distance.

System Fonts for Screen/Web Safe Fonts

-Device comes with its own pre-installed font selection.
-Times New Roman are the most default basic typeface.

Pixel Differential Between Devices

Figure 1.5 Different Screen Sizes Between Device, Week 6 (5/10/2023)

Figure 1.6 Different Pixel and Resolution, Week 6 (5/10/2023)


-Screens used by PC, Tablets, Phones and TV have different sizes.
-Text you see on-screen differs in proportion too. (Different sized pixels)

Static vs Motion

Static Typography
-Has minimal characteristic in expressing words
-Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Motion Typography
-Offer Typographers opportunities to "dramatize" type.
-For letterforms to become "fluid" and "kinetic"  

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1joM7TpmzqN8mglFlvQX7jXn1bxYheB8c/preview" width="640" height="480" allow="autoplay"></iframe>

Task 2: Text Formatting & Expression

For our Task 2 : Text Formatting and Expression, we would require to compile our knowledge and basically combine all the exercise from Task 1 for the next task. Firstly, I tried recreating the Headline for Task 2 by utilizing the type expression that I learned during Task 1.

Figure 2.0 Type Expression Application, Week 5 (27/9/2023)

Next, I implemented my text formatting knowledge for the paragraphs such as kerning, leading, etc. I tried several layouts and placements.


Figure 2.1 Text Formatting Application, Week 5 (27/9/2023)

Figure 2.2 Text Formatting Draft 1, Week 5 (27/9/2023)


Figure 2.3 Text Formatting Draft 2, Week 5 (27/9/2023)


Figure 2.4 Text Formatting Draft 3, Week 5 (27/9/2023)

After listening to Mr. Vinod's opinion I tried trying different styles for the word 'BUILD'. 

Figure 2.5 Text Formatting Draft 4, Week 5 (27/9/2023)


I felt that the headline is not expressing any emotion of feeling. However, Mr. Vinod have me the freedom to choose my design. Thus, I revert back my word 'BUILD' and try some more experiments.

Figure 2.6 Text Formatting Draft 5, Week 6 (3/10/2023)

Figure 2.7 Text Formatting Draft 6, Week 6 (3/10/2023)

Figure 2.8 Text Formatting Draft 6, Week 6 (3/10/2023)

Draft 5 was an improvement for Draft 2. However, Mr. Vinod said that he'd prefer the paragraph placings of the other drafts. Hence, I chose Draft 6 and made the upper text more uniform and after seeing my peer's design, I felt my design is quite plain and I tried to add more elements. My seniors had also thought about QR code which ended up not being ideal, The second thoughts that crossed my mind when I think about the word 'CODE' is the barcode.

Figure 2.9 Barcode Visual Reference, Week 7 (10/10/2023)



I researched some barcodes and then I generated a barcode for the title and used it in my design. I then traced the barcode one by one in Adobe InDesign

Figure 2.10 Adding barcode Design, Week 7 (10/10/2023)


Figure 2.11 Placing Traced Barcode, Week 7 (10/10/2023)


EXTRAS!!
Figure 2.12 Secret Message, Week 7 (10/10/2023)

NOTE: THE ABOVE QR CODE HAS A SECRET MESSAGE

FINAL

Figure 2.13 Text Formatting Final JPEG (With Guides and Grids), Week 7 (10/10/2023)

Figure 2.13 Text Formatting Final JPEG, Week 7 (10/10/2023)




With Grids and Guides


<iframe src="https://drive.google.com/file/d/1Rkwinz3kpIuudLl5gkvfT7rGhGqINa_m/preview" width="640" height="480" allow="autoplay"></iframe>

Without Grids and Guides


<iframe src="https://drive.google.com/file/d/1mBk8kwimpq94AO_2LvSvpZ4-slTkimsq/preview" width="640" height="480" allow="autoplay"></iframe>



FEEDBACK

Week 5 (26/9/2023)
General Feedback
-Implement all knowledge from Task 1 into Task 2 -Not necessary need to use same font type. (Same typeface, but can different style)
Specific Feedback
-Try playing around the Headline.

Week 6 (3/10/2023)
General Feedback
-Focus one word in the headline to express. (Build)
-Do not express every single word for the headline.


REFLECTIONS

Experience
Mr. Vinod, my professor, has allowed me to delve deep into the intriguing area of typography and text formatting throughout the course. The experience has been nothing short of transforming and illuminating.

Mr. Vinod guided me on a journey that began with the fundamentals of typography and progressively progressed into a full understanding of how to properly express meaning through text. It was both tough and enjoyable to learn about type choice, size, leading, line-length, and all the other technical aspects that go into typography. Each course and project seemed like a step closer to understanding the art and science of text formatting and expression.


Observation
One of the most striking insights I noticed during this session was the great power of typography in changing our perception and interpretation of information. Every decision, from the typeface to the meticulous correction of leading and kerning, effects the readability, tone, and impact of the text. It was eye-opening to see how different typefaces and formatting options can convey whole different emotions and thoughts.

I also observed how important attention to detail is. Small but significant differences between amateur and professional design include avoiding widows and orphans, ensuring regular cross-alignment, and utilizing forced line breaks sparingly. Precision is required in typography, and these nuances are important.

Findings
The main takeaway from my research into typography and text formatting is that they are not just technical parts of design but also essential components of good communication and expression. Typography is an artistic medium that may elicit emotions, establish hierarchy, and improve readability. It is the visual language we use to convey meaning, tone, and intention.

Furthermore, I found that typography requires a careful mix of creativity and discipline. While it permits artistic expression, it also necessitates respect to standards that ensure clarity and functionality. It's all about striking a balance between beauty and practicality.

In conclusion, mastering typography and text formatting under Mr. Vinod's tutelage has been a journey of discovery and growth. My understanding for the intricacies and complexities of this discipline has grown as a result of my observations and discoveries. Typography is more than just arranging letters; it's about creating a visual narrative that connects with an audience, and it's a talent I'm eager to hone as a designer.

FURTHER READINGS

All further readings are at Task 1 Exercises

Comments

Popular Posts