Typography - Task 1: Exercises

-
23/9/2024 - 21/10/2024 (Week 1 - Week 5)
Lim Yeng San (0366316)
Typography / Bachelor of Design (Hons) in Creative Media / Taylors University
Task 1


TABLE OF CONTENTS

1. Lectures
  • Week 1
  • Week 2
  • Week 3
  • Week 4
  • Week 5
2. Instruction
3. Process Work
  • Type Expression
    • Research
    • Sketches
    • Digitalization
    • Final Outcome
  • Animation
    • Making The Animation Frames
    • Final Outcome
  • Text Formatting
    • Kerning and Tracking Exercise
    • Final Outcome
4. Feedback
5. Reflection
6. Further Reading


1. LECTURES

Week 1: Introduction
The lecturer gave an introduction to the world of typography by explaining the terms involved in typography, the important uses of typography and careers involved with typography.

Typography: The art and technique of arranging type to make written language readable and appealing when displayed. It involves selecting typefaces, point size, line length, line-spacing (leading), letter-spacing (tracking) and adjusting the space between the letters (kerning). 
Calligraphy: To write out letters.
Lettering: To draw out letters.
Font: The individual font or weight within the typeface.
Typeface: The entire family of fonts or weights that share similar characteristics.


Week 2: Development
The lecturer explained the history of the development of typography.

Early Letterform Development
Phoenician to Roman
- Writing meant scratching into wet clay with a sharpened stick / carving into stone with a chisel
- Uppercase letterforms evolved out oof these tools and materials
- Uppercase letterforms are simple combinations of straight lines and pieces of circles as the tools of early writing required

Fig 1.2.1: Writing from 4th century B.C.E

Fig 1.2.2: The evolution of writing from Phoenician letters

- The Greeks changed the direction of writing
- Phoenicians, like other Semitic people, wrote from right to left 

Boustrophedon
- The lines of text read alternatively from right to left to left to right 
- As the direction of reading changes, the orientation of letterforms also changed
- Developed by the Greeks

Fig 1.2.3: The direction of boustrophedon reading

Fig 1.2.4: A stone engraving from Greece

 - Etruscan (and then Roman) carvers working with marble painted letterforms before inscribing them
- Certain qualities of their strokes carried over into the carved letterforms 

Fig 1.2.5: An Augustan inscription from the late 1st century B.C.E

Fig 1.2.6: The development of letterforms from Phoenician to Greek to Roman


Hand Script From 3rd - 10th Century B.C.E
Square Capitals
- Have serifs added to the finish of the main strokes
- Variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular
- Were the written version that can be found in Roman monuments

Fig 1.2.7: 4th or 5th century square capitals

Rustic Capitals
- Compressed version of square capitals
- Allowed for twice as many words on a sheet of parchment
- Took far less time to write
- Slightly harder to read due to the compressed nature
- The pen or brush was held at an angle of approximately 30° off the perpendicular

Fig 1.2.8: Late 3rd - mid 4th century rustic capitals

Uncials
- Letters that are one inch high
- Incorporated some aspects of the Roman cursive hand

Fig 1.2.9: 4th to 5th century uncials


Blackletter to Guttenberg's Type
Blackletter
- Condense strongly vertical letterform
- Also known as Textura

Fig 1.2.10: Blackletter from the year 1300

Gutenberg's Type
- Required a different brass matrix or negative impression for each letterform

Fig 1.2.11: 42 line Bible from 1455


Timeline

Fig 1.2.12 and 1.2.13: The timeline of the development of typography


Typeforms
- Developed in response to prevailing technology, commercial needs and esthetic trends
- Certain models have endured well past the cultures that have spawned them 

Text Type Classification
1450 Blackletter
- The earliest printing type
- Its forms were based upon the hand-copying styles that were then used for books in northern England
- Ex: Cloister Black, Goudy Text

Fig 1.2.14: An example of 1450 Blackletter

1500 Italic
- The first italics were closed-set and condensed, allowing more words per page
- Originally considered their own class of type but was cast to complement Roman forms 
- Virtually all text typefaces have been designed with accompanying italic forms

Fig 1.2.15: An example of 1500 Italic

1550 Script
- Originally an attempt to replicate engraved calligraphic forms
- Not entirely appropriate in lengthy text settings
- Suitable for shorter applications
- Ex: Kuenstler Script, Mistral, Snell Roundhand

Fig 1.2.16: An example of 1550 Script

1750 Transitional
- A refinement of oldstyle forms
- Thick to thin relationships were exaggerated 
- Brackets were lightened
- Ex: Baskervile, Bulmer, Century, Time Roman

Fig 1.2.17: An example of 1750 Transitional

1775 Modern
- Represents a further rationalization of oldstyle letterforms
- Serifs were unbracketed
- Contrast between thick and thin strokes were extreme 
- Ex: Bell, Bodoni, Caledonia, Didot, Walbaum

Fig 1.2.18: An example of 1775 Modern

1825 Square Serif / Slab Serif
- Originally heavily bracketed serif with little variation between thick and thin strokes
- The brackets were dropped as they evolved
- Ex: Clarendon, Memphis, Rockwell, Serifa

Fig 1.2.19: An example of 1825 Square Serif / Slab Serif

1900 Sans Serif
- Eliminated serifs altogether
- Ex: Akidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetic, Meta, News Gothic, Optima, Synthax, Trade Gothic, Univers 

1990 Serif / Sans-Serif
- Enlarges the notion of a family of typefaces to include both serif and sans-serif alphabets (often stages between the two)
- Ex: Rotis, Scala, Stone

Fig 1.2.20: An example of 1990 Serif / Sans-Serif


Week 3: Text Pt.1
The lecturer taught us various terms related to letterspacing and text alignment in typography.

Kerning: The automatic adjustment of space between letters.
Tracking: The addition and removal of space in a word or sentence.

Fig 1.3.1: A comparison between letters without kerning applied and letters with kerning applied

Fig 1.3.2: The various levels of tracking

- The higher the letter spacing, the lower the readability of the text
- Uppercased letters are able to stand on their own without letterspacing
- Letterspacing lowercased letters is not encouraged


Flush Left
- Each line starts at the same point but ends wherever the last word on the line ends. 
- Space between words are consistent throughout the text, allowing the type to create an even gray value (the white space in between the letters)
- Causes rags on the right of the text

Fig 1.3.3: A text with flush left alignment


Centered
- Imposes symmetry upon the text assigning equal value and weight to both ends of any line
- Transforms fields of text into shapes, thereby adding pictorial quality to material that is non-pictorial by nature
- Line breaks required amendment to avoid the text from appearing too jagged
- Can be difficult to read

Fig 1.3.4: A text with centered alignment


Flushed Right
- Places emphasis on the end of the line as opposed to its start 
- Useful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right (ex: captions)
- Causes rags on the left

Fig 1.3.5: A text with flushed right alignment


Justified
- Imposes a symmetrical shape on the text
- Expands or reduces shapes between words and sometimes between letters
- Causes rivers of white space that runs vertically through the text
- Attention to line breaks and hyphenation is required

Fig 1.3.6: A text with justified alignment


Textures
- Different typefaces suit different messages
- Type with a generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke
- Sensitivity to differences in colour is fundamental for creating successful layouts


Fig 1.3.7: All of the various terms in text formatting 


Type Size
- Text type should be large enough to be read easily at arms length

Leading
- Text that is set too tightly encourages vertical eye movement which can cause the reader to lose their place on the text
- Type that is set too loosely creates striped patterns that distract the reader from the material at hand

Line Length
- Shorter lines require less leading, longer require more leading
- Keep line length between 55-65 characters
- Extremely short or long line length impairs reading

Compositional Requirement
- Text should create a field that can occupy a page or a screen
- Think of the ideal text as having a middle gray value not a series of stripes

Fig 1.3.8: A comparison between two texts with different compositions


Week 4: Text Pt.2
The lecturer continued on the terms from the previous lecture

Widow: A short line of type left alone at the end of a column of text
Orphan: A short line of type left alone at the start of a new column

Fig 1.4.1: An example of widows and orphans

- Widows and orphans should be avoided
- Use kerning and letterspacing to avoid widows [ALT + right/left arrow key] (Ideally should only be pressed 1-3 times)


How to Highlight Text
- Use italics
- Increase the boldness/weight of the text
- Change the colour of the text
- Change to another type-family (When changing from serif to sans-serif, reduce the point size by 0.5 to ensure cohesion in the text)
- Placing a field of colour at the back of the text
- Place typographic elements outside the left margin of a column of type (ex: bulleted list)
- Add quotation marks


Headline Within a Text
A Head
- Indicates a clear break between the topics within a section
- Set larger than the text (even in small caps and in bold)

Fig 1.4.2: Examples of A head in use


B Head
- Indicate a new supporting argument or example for the topic at hand
- Subordinate to A heads
- Should not interrupt the text as strongly as A heads
- Shown in small caps, italic, bold serif and bold san-serif

Fig 1.4.3: Examples of B heads in use


C Heads
- Highlights specific facets of material within B head text
- They don't materially interrupt the flow of reading
- Shown in small caps, italic, bold serif and bold sans-serif
- Followed by at least an em space for visual separation

Fig 1.4.4: Examples of C heads in use

Hierarchy
- Putting together a sequence of subheads
- No single way to express hierarchy within text

Cross-alignment
- Reinforces the architectural sense of the page (the structure) while articulating the complimentary vertical rhythms


Week 5: Understanding
The lecturer talked about letterforms, X-height and contrast in letterforms.

Understanding Letterforms


Fig 1.5.1 and 1.5.2: A comparison between two uppercased letters with different letterforms

Fig 1.5.3:A comparison between two lowercased letters with different letterforms


X-Height
- Describes the size of lowercase letterforms
- Curved strokes (c, s, etc) must rise above the median or sink below the baseline in order to be the same size as the vertical and horizontal strokes they adjoin

Fig 1.5.4: An example of maintaining x-height


Contrast
- Produces multiple variations (ex: small + organic / large + machined / small + dark / large + light) 

Fig 1.5.5: Examples of contrast



2. INSTRUCTIONS

Fig 2.1: The module information for Typography


3. PROCESS WORK

Type Expression
a) Research
Through a class poll, we ended with the words "cry", "swirl", "sleep" and "climb". To help come up with ideas, I researched the meanings of the meanings of the words and typography designs for them on Pinterest. 

Fig 3.1: References used for the word "cry" from Pinterest

Cry 
- To produce tears as a result of strong emotions
- To call out loudly


Fig 3.2: References used for the word "swirl" from Pinterest

Swirl
- To move quickly with a twisting circular movement
(from Cambridge Dictionary: https://dictionary.cambridge.org/dictionary/english/swirl)


Fig 3.3: References used for the word "sleep" from Pinterest

Sleep
- the resting state in which the body is not active and the mind is unconscious


Fig 3.4: References used for the word "climb" from Pinterest

Climb
- to go up or to go towards something

b) Sketches
From those references I drew up several sketches.

Fig 3.5: All of the sketches

After consulting Mr. Max, these sketches were approved to be made into digital designs.




Fig 3.6, 3.7, 3.8, 3.9: The four chosen sketches to be made into digital type expression


c) Digitalization
I started designing the type expression for the four words on Adobe Illustrator. 

Fig 3.10: The type expression design for "climb" using Univers Lt Std

From the sketch for "climb", I wanted to make the letters look like stairs and arranged them in an order from shortest to tallest to make an incline.


Fig 3.11: The type expression design for "cry" using Gill Sans MT

For "cry", I made the letters slightly slanted to make it look like tears being shed from an eye. 


Fig 3.12: The early type expression design for "sleep" using Gill Sans MT

At first, I designed "sleep" just like the other designs. I found that this design didn't fit with the meaning of sleep.

Fig 3.13: The final type expression design for "sleep" using Gill Sans MT

I changed the colour of the background and the words to look like a night sky. I thought that this change made the design fit the meaning of "sleep" better. 


Fig 3.14: The type expression design for "swirl" using Futura Std

Compared to the sketch for "swirl", I reduced the number of words in the design and made the colour of the alternate words lighter. I felt that it made the design simpler much easier for the viewer's eyes.


d) Final Outcome

Fig 3.15: The final type expression compilation (JPEG)


Fig 3.16: The final type expression compilation (PDF)

Animation
a) Making The Animation
We were tasked to choose one of our type expression designs to be made into an animation. I chose to animate my "sleep" design.

For the animation, I had the idea of using my early design for sleep then changing to my final design to simulate lights turning off. I also wanted the words to fall over just like in the final design to mimic people falling asleep.

Fig 3.17: The animation frames

I made the animation frames on Adobe Illustrator then imported them over to Adobe Photoshop. I tried my best to keep the letters still and kept them from shaking.


b) Final Outcome

Fig 3.18: The final animation (GIF)


Text Formatting
a) Kerning and Tracking Exercise
We did an exercise in class using Adobe InDesign. We had to type our names into the 10 given fonts and format them with kerning and leading.

Fig 3.19: The text formatting exercise I did in class

We then had to edit a given text based on the given requirements.

HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0
 
BODY
Typeface: Bembo Std
Font/s: Bembo Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins:123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm

Following this formatting requirement, I formatted the given text accordingly in class.

Fig 3.20: The text formatting exercise I did in class

We were then tasked to create six more designs with this text, but by using our own creativity to tweak the layout. I experimented with the text boxes and different alignments.

Fig 3.21: The 6 text layouts

After consulting Mr. Max, he felt that this layout was the best out of the six.

Fig 3.22: The chosen layout design

For this layout, I went on to edit the text further to enhance its look and cohesion. 


b) Final Outcome
Fig 3.23: The final layout design (JPEG)

Fig 3.24: The final layout design (PDF)

Fig 3.25: The final layout design with grids (JPEG)


Fig 3.26: The final layout design with grids (PDF)

HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0
 
BODY
Typeface: Bembo Std
Font/s: Bembo Std
Type Size/s: 8 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 55 - 65 characters
Alignment: left justified
Margins:123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm

4. FEEDBACK

Week 1
General feedback: We were given an introduction to the module and chose our four words 'cry', 'swirl', 'sleep' and 'climb' through a poll. We also set up our e-portfolio blog.
Specific feedback: (none given since the first week is the introduction to the module)

Week 2
General feedback: We prepared our sketches and showed to our tutor for consultation.
Specific feedback: The sketch for 'climb' was accepted while the others needed improvement.

Week 3
General feedback: We digitalized the sketches in Adobe Illustrator.
Specific feedback: The design for 'climb' needed modifications to make the letters look more cohesive and uniform. The other sketches were approved to be digitalized.

Week 4
General feedback: We started working on our animation.
Specific feedback: The letters were shaky at first but the animation was later approved after adjustments were made. The animation was approved to be uploaded to the blog.

Week 5
General feedback: We did an exercise in class with kerning, leading and tracking on Adobe InDesign.
Specific feedback: (none given)


5. REFLECTION

Experience
The typography module certainly wasn't what I expected. I had to learn and understand Adobe programs especially those that I didn't like using. It was an eye-opening and informative learning experience.

Observation
I'm quite unfamiliar with many tools and terms in the Adobe programs but I'm able to learn with the demonstrations given by the lecturers. My friends have also been a huge help with tools and feedbacks. 

Findings
Translating the words into visual designs was a bit difficult for me. It was often difficult to come up with creative designs in a limited field. Editing the text was also a big challenge as I found it frustrating to make the entire text balanced. I had to learn to accept the best possible result and not stress myself by trying to make everything perfect.


6. FURTHER READING



Fig 6.1: Thinking With Type by Ellen Lupton

Thinking With Type is a guide to designing with typography that goes over the basic terms and tools. This book teaches all there is to know about typography condensed into one book. I learned a lot from the notes in this page while doing the text formatting.

Fig 6.2: Page 166 from Thinking With Type by Ellen Lupton


Comments

Post a Comment

Popular posts from this blog