TYPOGRAPHY / TASK 1 : EXERCISE 1 & 2 (TYPE EXPRESSION & TEXT FORMATTING)

27.08.21 - 24.9.21 (Week 1 - Week 5)
Christie Angelica Bakhary / 0350655 
Typography / Bachelor of Design in Creative Media
Task 1 / Exercises

---

LECTURES

Week 1 / Introduction & Briefing
During our first class, we were briefed and introduced about this subject by Mr. Vinod and Mr. Charles. Step by step tutorial about how to create and what to post on the e-blog were given to us. We were then told about several ways and rules to post on our blog, such as using the jump break to separate the information and changing the font sizes to differentiate the headers. We also learned how to embed the Module Information Booklet to our blog post through the Youtube video that were given to us.

Week 2
This week we posted our progression sketch for the first exercise on Facebook. Both Mr. Vinod and Mr. Charles provided us with some helpful feedbacks. Then we were also divided into small groups to evaluate others works. 

Lecture notes - Development/Timeline
1. Early letterform Development: Phoenician to Roman
   • Using sharpened stick to scratch wet clay or using a chisel to carve stones.
   • Tools or instrument is important 
   • Latin alphabet can be derived from Phoenician alphabet

Week 3
On the third week we uploaded our final draft for type expression exercise. After that we were assigned to make an animation gif and were divided into few breakout rooms to watch the gif tutorial video together as well as asked each other questions if needed.

Lecture 3 Notes

Kerning: The automatic adjustment of space between letters

Letterspacing: To add space between the letters

Tracking: The addition and removal of space in a word or sentence (doing kerning & letterspacing at the same time)

Normal tracking: the normal letterspacing and kerning

Loose tracking: letters given letterspacing

Tight tracking: letters given kerning

uppercase letterforms → drawn to be able to stand on their own

lowercase letterforms → require the counter form created between letters to maintain the line of reading

*(student designers) not encouraged to add spacing to lowercase letterforms

Typography: Text / Formatting Text

1.Flush left:

• most closely mirrors the asymmetrical experience of handwriting
• each line starts at the same point, ends wherever the last word on the line ends ('align left')
• spaces between words are consistent → allowing the type to create an even *gray value
• ragged right (jagged edge of the end point of the left aligned text)

Gray value*: 

text on a white page. Half close your eyes, look at a text that has been formatted.

Grayness too dark → given kerning / not enough leading (space between each line of text)

Grayness too light → given too much letterspacing / leading

2. Centered:

• imposes symmetry upon the text
• assign equal value and weight to both ends of any line
• centered type creates strong shape on the page → line break →text does not appear too jagged
• not suitable for large amount of text

3. Flush right:

• emphasizes on the end of a line as opposed to its start
• can be useful in situations (like captions), where the relationship between text and image might be ambiguous without a strong orientation to the right
• ragged left axial layout

4. Justified:

• imposes a symmetrical shape on the text
• achieved by expanding / reducing spaces between words and letters (sometimes)
• can occasionally produce 'rivers' of white space running vertically through the text
• line breaks & hyphenation to avoid 'rivers'

 

When setting the field of type → clear, appropriate presentation of the author's message comes first

If you see the type before the words, change the type

Typography: Text / Texture

What we should learn:

• characteristics of each typeface
• a typeface's place in history
• how different typefaces feel as text
• the different textures of typefaces

Week 4 - Text : Kerning, Tracking, Letterspacing
In this week class, we posted our final gif for the typography expression exercise on Facebook. Some feedbacks were given by Mr. Vinod, Mr. Charles as well as the classmates on our gif. We learned how to criticize and properly gave feedback to each other works. Lastly, Mr. Vinod provided us with an example from the previous student blog regarding exercise 2 and how to arrange the blog nicely.

2. The font

- Uppercase and lowercase

- Small capitals

- Uppercase and lowercase numerals

- Italic

- Punctuation and miscellaneous characters

- Ornaments

Fig. 4.2 Small capitals

Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set. 

Fig. 4.3 Uppercase numerals/lining figures

Same height as uppercase letters and set to the same kerning width. They are most used with tabular material and uppercase letters.

Fig. 4.4 Lowercase numerals/old style figures or text figures

Set to x-height with ascenders and descenders. Best used when using upper and lowercase letterforms.

Fig. 4.5 Italic

Italics refer back to 15th century Italian cursive handwriting. Oblique is typically based on the roman form of the typeface.

Fig. 4.6 Italic vs roman

Fig. 4.7 Punctuation, miscellaneous characters

Miscellaneous characters can change from typeface to typeface. It’s important to ensure that all the characters are available in a typeface before choosing the appropriate type.

Fig. 4.8 Ornaments

Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

3. Describing typefaces

Fig. 4.9 Describing typefaces

Roman: Uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.

Italic: Named for 15th century Italian handwriting on which the forms are based. Oblique conversely is based on the roman form of typeface.

Boldface: Characterized by a thicker stroke than a roman form. It can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super.

Light: A lighter stroke than the roman form. Even lighter strokes are called ‘thin’.

Condense: A version of the roman form, and extremely condense styles are often called ‘compressed’.  

Extended: An extended variation of a roman font.

4. Comparing Typefaces

Fig. 4.10 Comparing typefaces

Differences in x-height, line weight, forms, stroke widths and in feeling. Feelings connote specific use and expression. Examining typefaces allows us to know how we feel about certain types, and also see the appropriateness in type choices.

Week 5

Typography: Letters

1. Understanding letterforms

Fig. 5.1 Baskerville 'A'

The uppercase letterforms suggest symmetry, but it is not symmetrical. Two different stroke weights of the Baskerville stroke form; more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig. 5.2 Univers 'A'

The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville (previous) and Univers (Fig. 4.2) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig. 5.3 Helvetica vs Univers

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

2. Maintaining x-height

Fig. 5.4 Median and baseline

X-height: The size of the lowercase letterforms. Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

3. Form / Counterform

Fig. 5.5 Form / Counterform

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together—how easily we can read what’s been set.

4. Contrast

Fig. 5.6 Contrast

WEEK 6 - LECTURE 6

Typography in Different Medium

1. Print Type Vs Screen Type

Fig. 6.1 Type for print

Type was designed for reading from print long before screen. It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read. Good typefaces for print: Caslon, Garamond, Baskerville. Because of their characteristics which are elegant and intellectual but also highly readable when set at small font size. 

Fig. 6.2 Type for screen

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Another important adjustment – especially for typefaces intended for smaller sizes – is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

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 in nearly all Web pages. Text hyperlinks are normally blue and underlined by default.

Font Size for screen: 16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close — often only a few inches away — they are typically set at about 10 points. If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Fig. 6.3 Pixel differences between devices

Pixel Differential Between Devices: The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

2. Static Vs Motion

Fig. 6.4 Billboard showing static typography

Static typography has minimal characteristics in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig. 6.5 "Seven" (1995) title credits - film by David Fincher, showing motion typography

Film title credits present typographic information over time, often bringing it to life through animation/motion graphics. Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of the music. It establishes the tone of associated content or expresses a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

---

INSTRUCTION

---

PRACTICAL

Exercise 1 : Expressive Typography 

Sketches :
Out of all the choices that were provided, I chose the word broken, bark and water, as well as the compulsory word which is terror. I do these sketches digitally with using Procreate app. I only manage to do a few of it because I kinda ran out of ideas, but I'm quite satisfied with the design that I made. Unfortunately based on the feedbacks that Mr. Vinod gave to other classmates, I do too much distortion and illustration on my sketches.

Fig 1.1 : Digital sketches

Digitization Process :

At first I downloaded all the materials given by Mr. Vinod. Next, for the Illustration attempt I followed and referred to the instructions in Mr. Vinod video, which is really helpful for this whole exercise.

Fig. x.x :  Downloaded borders on Adobe Illustration

Using the 10 typefaces that were given, I created these typefaces. However based on the feedback that Mr. Vinod, Mr. Charles and other classmates given, I did too much distortion on terror

Fig. x.x :  First draft for exercise 1

Final Submission :
Based on the feedbacks given, I changed some of the elements that're not needed like the skull on 'terror' word, droplets on 'water', etc. 

For the next exercise, we were instructed to chose 1 design that we've created to make it into an animation gif. I chose 'water' to proceed because it seems interesting to be animated. So, I started out by creating several artboard on Adobe Illustration.

Fig. x.x : 

Fig. x.x : Making the water splash with pen tool (15/09/21)

Then after finishing all the layers/artboard on AI, I started to animated it in Photoshop using Timeline. Then I adjusted some timing on a few frame so it will be more decent to look.

Fig. x.x : Animating in Photoshop (15/09/21)

Final Submission :

Fig. x.x : Final gif (15/09/21)

Exercise 2 : Type Formatting
Progression :
This week we were assigned to do type formatting on Adobe inDesign, which is new to me as I have never use the software before. To be able to do the final work nicely, there are some requirements to follow, which is shown below:

Fig. x.x : Type formatting exercise submission requirements (22/09/21)

With the guide from the lecture videos, I started by copying the text and image provided by Mr. Vinod on Facebook to inDesign. Then I adjusted some required things to apply, such as no widow orphans, etc. I noticed that some words have too much space with each other, so I deleted it to make it more neater.

Fig. x.x : Text formatting process (22/09/21)

inDesign Shortcuts :
Ctrl + Alt + I : To get hidden characters

To maintain cross alignments, make sure that the leading is always multiple of 2 (Example : 11 / 22 / 44)

Final Submission :

For this task I aim to achieve a very simple, clean and minimalist look for it. So, I created quite a big white space between the picture and the text.

Fig. x.x : Final submission on text formatting (23/09/21)

---

FEEDBACKS

Week 1 :
General feedback : We were told to resist customizing the e-blog until the middle of semester and just keep it simple with the main theme. Until then or further instructions given, we can customize it with caution.

Week 2 :
General feedback : Use less distortion and try not to used too much illustration.

Week 3 :
General feedback : Pay attention on how the artworks sit on the frame and how it sit together, make sure that it is place in the middle of the frame.
Personal feedback : Make the droplet on the 'water' word more longer, and the other droplet beside are not necessarily needed

Week 4 :
General feedback :
Personal feedback : Depend too much on the graphical elements and not the typeface itself. Try to make the wave on the water text moving so it will look more better. The water splash can be better with adding more splash and make it vanish in the end.

Week 5 :
General feedback :
Personal feedback :

---

REFLECTIONS

Experience
The exercises given in this typography class were really interesting yet challenging to me. I was having quite a hard time on coming up with ideas for the Expressive typography exercise. Using Adobe Illustrator and inDesign were also a challenge for me as I have never use them before. But other than that, I learned on how to research the meaning of each word and create a simple typography without too much distortion and graphic elements. Besides that, I also learned to complete my blog as fast as possible so I didn't get too overwhelmed on the tasks. For the lecture video itself, I found it easy to understand and very helpful on guiding me to do the whole exercises. 

Observation

Findings
I found that typography is much more complicated and broad than I know. 

---

FURTHER READING