(TYPOGRAPHY) Task 1: Exercises

22/4/2024 - 24/5/2024 (Week 1 - 5)
SUNG J XIN/ 0370139/ Bachelor of Design (Hons) in Creative Media
GCD 60104 TYPOGRAPHY

Task 1 - Exercises

___________________________________________________________________________

Lectures

Week 1: DEVELOPMENT (Timeline)

Writing used to be done by scratching into wet clay with a sharpened stick or a chisel to carve on stones. The letterforms used were just a combination of straight lines and pieces of circles. The Greeks developed a new writing style called 'boustrophedon' so that the text can be read alternately from right to left and left to right. 

Fig. 1.0, Boustrophedon

The Etruscan and Roman carvers working in marble painted the letterforms before inscribing them. Some qualities of their strokes would be carried over into the carved letterforms. 

Square capitals have serifs that is added to the finish of the main strokes and they can be found in Roman monuments. Rustic capitals are compressed versions of square capitals and they take less time to write. However due to their compressed nature they can be difficult to decipher.

Uncia is Latin for a twelfth of anything so uncials can be referred to as small letters. Half-uncials mark the beginning of lowercase letterforms 2000 years after the origin of the Phoenician alphabet.

Under the request of the first unifier of Europe since the Romans, Charlemagne, the texts were rewritten using both majuscules (uppercase), miniscule, capitalization, and punctuation. This will set the standard for calligraphy for a century.

Week 2:  TEXT P1

KERNING AND LETTERSPACING 

Kerning refers to the automatic adjustment of the space between letters. It is always mistaken as 'letterspacing' because it means to add a space between letters. When both of these are applied at the same time,  it is referred to as 'tracking'. This formatting is often used in any form of media to give them a more prominent presence, such as how uppercase letters in newspaper headlines will require kerning.

Fig. 1.1 and 1.2, Kerning and Tracking

When letter spacing is applied to a body of text or word, it becomes less readable. We read text by looking at its shape and patterns which represents certain words that our mind can automatically detect. Therefore, when letter spacing is applied to a large body of text, our brain is unable to recognize these shapes and patterns because there is no shape or pattern to be seen. 

Letterspacing uppercase letters is acceptable, but not lowercase letters. Uppercase letters are can stand on their own while lowercase letters need the counterform created between letters to maintain the line of reading. By adding letterspacing to the text, we are breaking the counterform which would make it harder to read that body of text. 

FORMATTING TEXT

Flush Left: Each line starts at the same point but ends at where the last word of the line ends, so it is similar to normal handwriting.

Centered: This format forces the body of text to be symmetrical by turning it into a shape, where it is important to so line breaks so the text does not look messy.

Flush Right: The complete opposite of Flush Left. This format is used when the text and image don't have a strong preference to the right side of the page of the written media it's used in.

Justified: Similar to Centered when it comes to having a symmetrical body of text, it is achieved by reducing the spaces between words and letters. Having these very open lines can produce 'rivers' of white space that can be shown vertically in the body of text.

Typographers set type based on personal preference, prevailing culture and the need to express their work. In a typographer's first job, they should provide a clear and appropriate presentation in their work. 

TEXTURE

It is important to know how each typeface would feel as text as each typeface can provide a different message depending on the contents of the text. Each typefaces can suit different messages.

Fig. 1.3, Texture

LEADING AND LINE LENGTH

Type size: Text type should be large enough to easily read at arms length.

Leading: When the text is set too tightly, is makes the reader lose focus. When the text is set too loosely, it creates a striped pattern that distracts the reader from the actual body of text.

Line length: Shorter lines require less reading while longer lines require more reading. It is a rule to keep the line length in between 55-65 characters. Lines that are too long or short discourages reading.

TYPE SPECIMEN BOOK

It shows samples of typefaces in different sizes. It provides an accurate reference for type, type size, type leading, type line length and more.

Week 3: TEXT P2

WIDOWS AND ORPHANS

Widow: A short line of type that is left alone at the end of a column of text.

Orphan: A short line of type that is left alone at the start of a new column.

To help widow lines, rebreak the line endings throughout the paragraph so that the last line of any paragraph is not very short.

To help orphan lines, the only way is to make sure that no column of text starts with the last line of the previous paragraph.

HIGHLIGHTING TEXT

Different kinds of emphasis require different kinds of contrast. When highlighting text, maintaining the left reading axis of the text makes it easier to read. 

HEADLINE WITHIN TEXT

There are many sections within a text of chapters, so typographers must make sure the headline is clear to the reader.

Putting together a sequence of subheads is hierarchy. 

CROSS ALIGNMENT

Cross-aligning headlines reinforces the structure of the page while complimenting the vertical patterns.

Week 4: BASIC

DESCRIBING LETTERFORMS

Baseline: The imaginary line at 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 and vertex.

Arm: Short strokes off the stem of the letterform, either horizontal or inclined upwards

Ascender: The portion of the stem of a lowercase letterform that projects above the median.

Barb: The half-serif finish on some curved strokes.

Bowl: The rounded form that describes a counter and can be opened or closed.

Bracket: The transition between the serif and stem.

Cross Stroke/Bar: The horizontal stroke in a letterform that joins two stems together.

Crotch: The interior space where two strokes meet.

Ear: The stroke extending out from the main stem or body of the letterform. 

Em/En: Em is the distance equal to the size of the typeface. En is half the size of an em. 

Ligature: The character formed by the combination of two or more letterforms.

Link: The stroke that connects the bowl and the loop of a lowercase G.

Serif: The right-angled or oblique foot at the end of the stroke.

Spine: The cursed stem of S.

Stem: The significant vertical or oblique stroke.

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

Swash: The flourish that extends the stroke of the letterform.

Terminal: The self-contained finish of a stroke without a serif.

THE FONT

Uppercase, Lowercase, Small Capitals, Uppercase Numerals, Lowercase Numerals, Italic, Punctuation and Miscellaneous Characters, Ornaments

DESCRIBING TYPEFACES

Roman, Italic, Oblique, Boldface, Light, Condense, Extended

___________________________________________________________________________

Instructions

Fig. 2.0, Typography MIB

___________________________________________________________________________

TASK 1 EXERCISE 1: TYPE EXPRESSIONS

Process Work

Sketches

The words I decided to do this exercise on are Jump, Flow, Dash and Crash.

Fig. 2.1, Sketches (7/5/2024)

JUMP: The general idea for this word is simple, which is to make the word look like it's jumping. By thinking about how the action of jumping would look like, I came up with these designs. 1 and 3 are basically the same, with the only difference being the letters being rotated. 2 is supposed to show the action of preparing to jump, which is why I made the letters U and M look squished, to indicate the bending of the knees before initiating the jump, as shown by the letter P. 

FLOW: When I think of the word 'flow', I would think about waves and water, which is usually associated with water. I tried showing the movement of water in 1 and 2, with the wavy shape shown in different ways. For 1, I wanted to give it a very bold font so that you can see the flowy and wavy moments on the top and bottom of the text. For 2, I arranged the shapes in a wavy line. I had the idea of water flowing from a tap, so I sketched out that idea in 4, where I made the letter L the longest to indicate the flow of water from a tap, which in this case would be represented by the letter F.

DASH: Dash is a word that is associated with speed, so I used that idea in my sketches. 1and 2 share the same visual elements which would be the lines to indicate that the word is moving at a fast pace, especially with 2 where I made the word look like it is dashing towards the right. The idea for 4 is the same as 1 and 2, but instead of lines, I made the word itself look like it is moving at a fast pace. 

CRASH: I experimented with this word the most, because there are so many ways to interpret this word. For 1, I made the letter A the biggest to show the loud sound that would occur when a crash happens. 3 and 4 have a similar idea where the words are hit upon impact so each letter would be separated from each other, and I used tiny letters from the word as particles.

If I had to pick a personal favourite from each word, I would pick Jump 2, Flow 4, Dash 2 and Crash 4.

Digitisation

I picked out some of the designs from each work that I liked from my sketches and created a digitised version of them.

Fig. 2.2, Final Type Expressions (14/5/2024)

I made a different variation of CRASH from the sketches to represent the impact of 'crashing', where things would usually shake afterwards.

 

Fig. 2.3, Final Type Expressions PDF (15/5/2024)

Type Expression Animation

I decided to try a simple animation for FLOW. The idea was to have it move like waves in a flowy manner. I chose to animate this word because the typeface was easier to work with.

Fig. 2.4, Final Type Expression Animation (18/5/2024)

I used 7 frames for this animation, with some frames having a different length.

Fig. 2.5, Type Expression Animation Process (18/5/2024)

TASK 1 EXERCISE 2: TEXT FORMATTING

Fig. 3.0, Before and After Kerning (20/5/2024)

I watched the tutorial videos about text formatting in Adobe InDesign and started working on a text formatting layout. It took a while to get used to the program since it is my first time using it. I found a picture I thought matched the content of the text and continued working.

Fig. 3.1 and 3.2, Text Formatting Process (20/5/2024)

After adjusting the text size, leading and paragraph spacing, I came up with this result in the end.

Fig. 3.3, Final Text Formatting (20/5/2024)

Fig. 3.4, Final Text Formatting with Grids (22/5/2024)

Fig. 3.5, Final Text Formatting With and W/o Grids PDF (22/5/2024)

HEADLINE

Font: Futura Std

Type Size: 48 pt

Leading: 57.6 pt

Paragraph Spacing: 0

BODY

Font: Univers LT Std

Type Size: 9 pt

Leading: 11 pt

Paragraph Spacing: 11 pt

Characters per line: 55

Alignment: Left Justified

Margins: 12.7 mm (Top, Left, Right, Bottom)

Columns: 2

Gutter: 10mm

___________________________________________________________________________

Feedback

Week 2: 

(Personal Feedback) 

Need more exploration.

Evaluate your sketch before proceeding to digitisation by asking yourself these questions:

• Are the explorations sufficient?
• Does the expression match the meaning of the word?
• On a scale of 1–5, how strong is the idea?
• How can the work be improved?

Week 3: 

(General Feedback)

Evaluate your digitisation by asking yourself these questions:

• Is the digital exploration sufficient?
• Does the expression match the meaning of the word?
• Is the expression well crafted (crafting/lines/shapes)?
• Does it sit well on the square art-board
• Is the composition engaging? Impactful?
• How can the work be improved?

Week 4: 

(General Feedback) 

Be more familiar with the 10 fonts given to us.

Understand how to appropriately apply them to the text.

Experiment more with the animations to accurately depict the word.

e.g. The word JUMP actually jumping instead of just slowly rising up.

Week 5: 

(General Feedback) 

Don't go over the limit of characters per line.

___________________________________________________________________________________

Reflections

Exercise 1

Experience

I found this exercise to be very tough since it requires a lot of work, especially since I received my Adobe license very late. We were introduced to the basics of typography and immediately jumped straight into doing the exercise, which was to create some type expressions. I had a lot of fun sketching out the different types of type expressions I can do before bringing them to Illustrator.

Once I finished playing around with the provided fonts and getting familiar with them, I began working on digitising my type expressions based on the sketches I did, in which I chose some options to digitise. I spent a long time in the .ai document moving around the letters to my desired position and adding some small details to some of them to really give them the expression I want them to show.

Finally came the part where we have to animate the type expression by combining the use of Illustrator and Photoshop. It was my first time hearing about animating in Photoshop since it is mainly an application for creating images, so I was interested to learn about the process.

Observations

There are some rules that needs to be applied when making our type expressions. I saw how some of my classmates' initial designs had them distorting the fonts to make them beyond unrecognisable from the original font, and Mr. Vinod was not pleased about it. So definitely keep some of the typography rules in mind.

I even applied this rule to my own designs by making them simple, but not too simple.

Findings

Some of the general feedback provided by Mr. Vinod helped me understand what I needed to do for this exercise, and especially how to do it well. Even if some of those feedbacks were meant for certain students, it can be applied to everyone as well.

Exercise 2

Experience

This exercise is a nice break from exercise 1 for me, because this exercise is mostly about typing and creating cool-looking layouts. We learnt about leading and kerning and how to apply this knowledge in formatting a body of text. It was my first time using InDesign so I was also interested to learn about using a new program.

I followed the tutorial from the pre-recorded lectures and started working on Exercise 2. I had fun with this exercise because it's very satisfying when you finish your layout design and turn off the grid view to a satisfying result.

Observations

Even after finishing the initial layout, I still needed to fix the details such as leading and kerning of the text, as well as paragraph space. Even from afar, these small details can be noticeable because if there is any sort difficulty reading the text, then there is a problem. Sometimes I had to readjust the margin and column layout to fit my layout.

Findings

After some general feedbacks, I finished this exercise with a layout I was happy with. I realised that once you get used to using an app like InDesign, your tasks will become much easier for you.

___________________________________________________________________________

Further Readings

Fig. 4.0, Typographic Design: Form and Communication

• Typography has evolved from way back in 3150 BCE - 1450 CE, when typography started off as writings on rocks and statues, to the 2010s, where typography is now being used in books and posters.

• Typographic measurement begins with Metal Type Measurement, which is a measuring system with extremely fine increments.

• Interword Spacing (Wordspacing): The interval between words.
• Interletter Spacing (Letterspacing): The interval between letters.

• A whole series of alphabets can be produced by changing the stroke width to the height of the letters.

• Changing the proportion of a letterform by making it wider is one method to add a type to the family and they have terms to define these changes, namely ultraexpanded, extraexpanded, expanded, regular, condensed, extracondensed, and ultracondensed.

• The italic fonts created by slanting the stroke angle are called obliques.

• Elaboration is an added complexity, fullness of detail, or ornamentation, and while they can be gaudy and interfere with the integrity and legibility of the letterforms, they can be used to add new typefaces to a type family.