TYPOGRAPHY - Task 1 [Exercises]

on

29.3.2022 - 26.4.2022 (Week 1 - Week 5)
Loh Qiao Yin/ 0348923
Typography / Bachelor of Design in Creative Media / Taylor's University
Task 1/ Exercises
[Exercise 1- Type Expression]
[Exercise 2- Text Formatting]

LECTURES

Week 1

Typography: Introduction/ Development and Timeline

Introduction

Mr. Vinod mainly focused on taking us through the Typography Facebook group to show us where the important announcement and useful learning materials are at. It is good to know that the group content is well-organised. It is also great that the recorded lectures are posted on the same day. Afterwards, all of us were asked to set up our e-portfolio, download 10 typefaces and choose our word prompts for task 1.

Typography is the fundamental skill set that is applicable to anything related to design. Teaching us attention to detail is one of the knowledge in this module.

  • Font- individual font or weight within the typeface

Fig 1.1 Examples of font, 4 April 2022

  • Typeface- Entire family of fonts that shares same characteristic

Fig 1.2 Examples of typefaces, 4 April 2022


Development and Timeline

What interested me the most is how the Greeks altered the direction of writing in left to right alternatively. The writing style is named as 'boustrophedon'.

Fig 2.1 Boustrophedon writing style, 5 April 2022



This quote came at the right time as I was getting bored of the history lectures. It's like a slap to my face to wake me up from my arrogance.

Fig 2.2 Quote by Michael Crichton, 5 April 2022


Week 2
Typography: Basic

This lecture is about the technical terms of the letterform's component parts.

  • Baseline- The imaginary line the visual base of the letterforms.
  • Median- The imaginary line defining the x-height of letterforms.
  • X-height- The height in any typeface of the lowercase ‘x’.
  • Stroke- Any line that defines the basic letterform
  • Apex / Vertex- The point created by joining two diagonal stems (apex above and vertex below)
  • Arm- Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
  • Ascender- The portion of the stem of a lowercase letterform that projects above the median.
  • Barb- The half-serif finish on some curved stroke.
  • Beak- The half-serif finish on some horizontal arms.
  • Bowl- The rounded form that describes a counter. The bowl may be either open or closed.
  • Bracket- The transition between the serif and the stem.
  • Cross Bar- The horizontal stroke in a letterform that joins two stems together


Fig 2.3 Anatomy of a Typeface, 12 April 2022

  • Stress- The orientation of the letterform, indicated by the thin stroke in round forms.

Fig 2.4 Example of stress, 12 April 2022

Week 3
Typography: Text [Part 1]

Kerning and Letterspacing
Kerning- automatic adjustment of space between letters
Letterspacing- add space between the letters



Fig 2.5 Kerning and Letterspacing, 12 April 2022

Formatting Text
If you see the type before you see the words, change the type.

Leading and Line Length

Type size- Large enough to be read easily at arm's length.
Leading- Text set too tightly causes vertical eye movement; Type set too loosely creates striped patterns; Both are bad and distract the reader from the material at hand.
Line Length- Shorter lines need less leading; longer lines more. Keep line length between 55-65 characters. 


Week 4
Typography: Text [Part 2]

Indicating Paragraphs

Pilcrow (¶)- holdover from medieval manuscripts seldom use today.
Line space (leading*)- between the paragraphs. Hence if the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Fig 2.6 Line space vs leading, 12 April 2022


Widows and Orphans

Widow- short line of type left alone at the end of a column of text.
Orphan- short line of type left alone at the start of new column.
Solution to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.


Fig 2.7 Widows and Orphans, 12 April 2022

Headline within Text

A heads- clear break between the topics within a section.

Fig 2.8 A heads, 16 April 2022


B heads- subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. As such they should not interrupt the text as strongly as A heads do. Here the B heads are shown in small caps, italic, bold serif, and bold san serif.

Fig 2.9 B heads, 16 April 2022


C heads- shows specific facets of material within B head text. They do not interrupt the flow of reading and are shown in small caps, italics, serif bold and san serif bold. C heads in this configuration are followed by at least an empty space for visual separation.

Fig 2.10 C heads, 16 April 2022


Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page.

Fig 2.11 Cross alignment, 16 April 2022 


Week 5
Typography: Letters

Understanding letterforms
The letter form below represents symmetry but on a cloer-look it is not symmetrical. The designer puts meticulous effort in maintaining a harmonious look but not losing its expresiveness. 
Fig 2.12 Small details in letter forms, 16 April 2022

Maintaining x-height
Curved strokes such as 's' must rise above median line or sink below base line to be same size as the vertical and horizontal strokes they adjoin.

Fig 2.13 Median and baseline, 16 April 2022


Contrast

Fig 2.14 Contrast, 16 April 2022

Week 6
Typography: Screen & Print

Typography in different medium
Type for print prioritizes readability despite being in a small font size. Typeface for print are usually Caslon, Garamond and Baskerville as they are versatile and easy-to-digest.

Type for screen usually has modified characteristics to increase readability on different digital environment such as a taller X-height or modified curves and angles.

Font size for book are encouraged to be at 12 pt for good readability at arm's length which is the same for 16 pixels on most screens.

INSTRUCTIONS


< />

Exercise 1: Type Expression
Choose 4 words from a list of word prompts prepared by Mr Vinod. "Cough" is mandatory and I chose "Explode", "Pop" and "Grow" for the other 3 words. We are limited to the 10 typefaces available and design the word prompts in a way the meaning of the words is expressed.

i. SKETCHES
  • Top left- COUGH
  • Top right- EXPLODE
  • Bottom left- GROW
  • Bottom right- POP

Fig 3.1 Sketches for 4 chosen words, 4 April 2022

The exploration of design for 'Cough' and 'Explode' were not enough as they were too similar to each other. Thus, I have reworked most of them.

Fig 3.2 Reworked sketches for 'Explode' and 'Cough' , 6 April 2022

ii. DIGITALISATION
I tried my best to make obvious variations for each of them. Wouldn't say I am totally satisfied but at least it is slightly better than the previous ones.

Fig 3.3 Six chosen digitalized words, 7 April 2022

I realised it is easier for me to add more creative ideas when I discover the effects available to transform the texts into interesting visuals. It was difficult to grasp the tools at first but after a few attempts, I manage to get the hang of it.

iii. FINAL SUBMISSION- TYPE EXPRESSION

Fig 3.4 Final submission for type expression exercise in JPEG, 16 April 2022

/>
Fig 3.5 Final submission for type expression exercise in PDF, 16 April 2022

Type Expression Animation:
Next up for animation, I chose 'grow' to be animated as I have ideas for the spiral movement enlarging gradually. There were tons of trial and error involved before achieving the result I am satisfied with.

i. ANIMATION ATTEMPTS
Fig 4.1 (Progress) First attempt of animation, 16 April 2022

The axis of the animation did not stay in the middle as I forgot to align my text in the centre. Besides, the spiral movement was not obvious, so I tried to fix those in the next attempt.

Fig 4.2 (Progress) Second attempt of animation, 16 April 2022

I have slowed down the growing animation a bit but it looked choppy and the top layer of words are not spinning.

Fig 4.3 (Progress) Third attempt of animation, 16 April 2022

In the third attempt, the top layer is spinning too but overall the animation can be smoother, so I made another attempt and settled down on the fourth attempt.

Fig 4.4 Artboard of still images in Illustrator, 16 April 2022

Fig 4.5 Frames of animation in Photoshop, 16 April 2022

ii. FINAL SUBMISSION- ANIMATION

Fig 4.4 Final submission for 'Grow' Animation, 16 April 2022

Exercise 2: Text Formatting
Students have to create one final layout dealing with various aspects of text formatting such as kerning and tracking, leading, paragraph spacing, alignment etc. Adobe InDesign is used for this exercise.

i. KERNING EXERCISE 

Fig 5.1 Text formatting with kerning, 18 April 2022

After learning to kern by practising it on our names with 10 of the previously downloaded fonts, we were taught to format a paragraph of text.

Fig 5.2 Progress of Text Formatting 2:4, 21 April 2022

I was careful in making sure that there are no words separated in half with a hyphen and reducing the presence of widows.
Fig 5.3 Example of the word 'compete' separated in half with a hyphen, 21 April 2022

Fig 5.3 Outcome of Text Formatting 2:4, 21 April 2022

ii. RAGGING EXERCISE

For Text Formatting 3:4, we were introduced to ragging and how to connect text fields through letter spacing and kerning. A reminder when having two different text columns is to have them at the same width to show they belong to the same information.
Fig 5.4 Progress for ragging, 21 April 2022

Fig 5.5 Progress for left justified alignment, 21 April 2022

In Text Formatting 4:4, we were taught baseline grids and cross-alignment to facilitate the process of coming up with a few of our own layouts and experimenting with them.

Fig 5.6  Baseline grids, 21 April 2022

iii. TEXT FORMATTING LAYOUTS

After that, I went on to find inspiration of layouts on Pinterest and tried to create some of my own.

Fig 5.7 (Progress) Text formatting layout #1, 21 April 2022


Fig 5.8 (Progress) Text formatting layout #2, 21 April 2022

Fig 5.9 (Progress) Text formatting layout #3, 21 April 2022

Fig 5.10 (Progress) Text formatting layout #4, 21 April 2022


iv. FINAL SUBMISSION- TEXT FORMATTING
I went with layout #3 as I think the flow is the smoothest and I like the arrangement of text columns. I changed the image to something related to Helvetica as well as adjusted the kerning according to Mr Vinod's feedback. 

Fig 5.11 Baseline grid for final chosen layout, 26 April 2022

Fig 5.12 Final submission for text formatting in JPEG, 26 April 2022

/>
Fig 5.13 Final submission for text formatting in PDF, 26 April 2022

Font: Adobe Caslon Pro
Typeface: Adobe Caslon Pro regular, bold and bold italic
Font size: 10 pt, 20 pt
Leading: 12 pt, 24 pt
Paragraph spacing: 12 pt
Average characters per line: 53-63
Alignment: Left justified
Margins: 12.7mm (top, left, right, bottom)
Columns: 2
Gutter (for columns): 5mm
FEEDBACK

Week 5
General feedback 
- Overall no major problem.
Specific feedback - Screengrab for animation progress and redo the kerning for the chosen layout of type formatting exercise.

Week 4
General feedback 
- N/A
Specific feedback - N/A

Week 3
General feedback 
- When designing the expression for a font, ask yourself is this effect necessary? Does it help with the expression? Sometimes things have to be kept minimal to be effective.
Specific feedback
- (Cough) Make 'C' the same size as each other; Word can be in a horizontal manner; Just motion blur would be enough.
- (Explode) Proceed with the bottom one, for the top one, avoid
distorting the O.
- (Grow) Good, but remove the gradient.
- (Pop) Okay, but avoid distorting the letters.

Week 2
General feedback 
- Each idea is too similar to each other and needs more obvious variation and ideation.
Specific feedback
- (Cough) Ideas are too similar to each other, make more variation. - (Explode) Too similar to each other, also the O looks too bouncy. - (Grow) Go with 4th one, the spiral characteristic is good.
- (Pop) Go with 3rd one.
REFLECTION

Experience
At first, I have always rejected understanding more about typography despite it being around me -- in my favourite video games, in those eye-catching posters etc. I still felt uneasy when I have to create text designs but I believe it will get better when I learn more about typography. 

Observations
My peers who plan to specialise in graphic design really have creative and interesting ideas that I look forward to every time. Their brains are really wired for this. It does motivate me to pour more effort into my own design. I lack a lot of imagination as I have not seen all the possibilities of typography designs and did not expand my horizon of creativity in text design enough.

Findings
Before getting involved in any knowledge of typography, I am really not so observant about the details in a text design. It is also a humbling experience as everyone has the areas of design that they are strong at, and no one can be the best at every single aspect so it is crucial to learn from each other.

FURTHER READING


Fig 6.1 'A type primer' by John Kane, 5 April 2022 

It is a quite practical book, presenting a good introduction to basics slowly before entering more complex content such as book printing. This book provides good insight and information on that. It trains my eyes to be more sensitive toward small details in texts. For example, the spaces between each alphabet, between each line and between each paragraph can affect the reading experience.

Recap: I manage to know how technical typography actually is and a lot of measurement is involved in organizing the layout and composition in typography.


Fig 6.2 'Computer Typography Basics- I.D.E.A.S ' by David Creamer, 11 April 2022

The prime goal of typography is readability. No matter how pretty we want a text design to be, readability should not be compromised. The book shows ample visual examples of comparison when explaining the different spacings or kernings between words.

Recap: The book covers more in-depth basics of typography using computer tools. 


Comments

Post a Comment