Typography Task 1/ Exercises

28.03.2022-25.04.2022 (week1-week5)                

Chai HongHong/0354211/Creative Media Design.           

Typography/Task 1                                        

---

LECTURES

Week 1

28.03.2022

In our first week of class, Mr. Vinod gave us a detailed introduction to the module and how to create our electronic archives. Mr. Vinod taught us how to create our own blog and how to join groups and communicate with our classmates. 

The first lesson is a basic introduction to typography, we understanding a lot of different fonts, And suggest we read some reference books. Mr. Vinod organized offline students to play the game, which looked very interesting. Mr. Vinod asked us to list words and take a vote. We need to pick "cough" and three other words to practice.

Lecture 1: Development and Timeline of Typography

When talking about the development of typography, Mr. Vinod hoped that we could carry forward our own creation and told us  That we live in a world dominated by the West. The West often ignores Asia's message and just wants to convey what it wants us to know. when we receive some information and voices from the West, we should have our own ideas and doubt the authenticity of the information. We should also support our Asian creations and publicize it to let people know about it.

Early letterform development: Phoenician to Roman

In the first writing, people carved with sticks or stones. Had a great influence on the development of later writing. 

Fig.1.1: The development of the Phoenician letter.

The Phoenicians wrote from left to right, but later the Greeks changed to write from right to left. They developed a style of writing called Boustrophedon. Read alternately from right to left and left to right. Because they changed the direction of theirs reading. 

Fig.1.2: Boustrophedon.

Stones were expensive at the time. The Etruscan people would develop these strokes according to the tools they used.

Fig.1.3: The development of the letter A over a thousand years.

Hand script from 3rd - 10th century C.E

Square capital: Realized the diversity of strokes.

Fig.1.4: Square capital.

Rustic capitals: For pragmatic reasons, writing takes less time, but is harder to read.

Fig.1.5: Rustic capitals.

Roman cursive: The cursive form has been simplified for speed.

Fig.1.6: Roman cursive.

Uncials: It combines certain aspects of Roman writing, especially in the shape of the A, D, E, H, M, U and Q. There are no lowercase or uppercase letters.

Fig.1.7: Uncials.

Half Uncials: Lowercase letters began in earnest 2,000 years after the Phoenician alphabet appeared.

Fig.1.8: Half Uncials.

Caloline miniscule: Lowercase letters and punctuation were introduced, and writing began to be standardized.

Fig.1.9: Caloline miniscule.

Blackletter/Textura: There are regional changes due to the impact of tools on writing.

Fig.1.10: Blackletter/Textura.

42 line bible, Johann Gutenberg, Mainz: The type mold required a different brass matrix, or negative impression, for each letterform.

Fig.1.11: 42 line bible, Johann Gutenberg, Mainz.

There would be a group of monks doing a task in a monastery, writing codex or other religious text so that it could be passed on. Not many books can be created, so books are expensive. When printers came along, someone printed a lot of Bibles because religion was important to people.

Fig.1.12: Bibles.

Text type classification

Mr. Vinod introduced various text types to us, including: 1450 Blackletter; 1475 Oldstyle; 1500 Italic; 1500 Script; 1750 Transitional ; 1775 Modern; 1825 Square Serif / Slab Serif ; 1900 Sans Serif ; 1990 Serif / Sans Serif.

Fig.1.13.

We are witnesses to history, and we are also creators of history.

Fig.1.14.

Week 2

04.04.2022

Lecture 2: Basic

We knowing letterform's component parts in lecture 2.

-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 2 diagonal stems (apex above, vertex below)
-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 horizonal arms.

-Bowl: The rounded form that describes a counter (may be open / closed)
-Bracket: Transition between serif and stem.
-Cross bar: Horizontal stroke that joins two stems together.
-Cross stroke: In a letterform (lowercase) that joins 2 stems together.
-Crotch: Interior space where 2 strokes meet
-Descender: Portion of stem of a lowercase below baseline.
-Ear: Stroke extending out from main stem of body of letterform.

-Em/en: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

-Finial: The rounded non-serif terminal to a stroke.

-Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or -inclined downward (K, R).

-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.

-Loop: In some typefaces, the bowl created in the descender of the lowercase G.

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

-Shoulder: The curved stroke that is not part of a bowl.

-Spine: The curved stem of the S.

-Spur: The extension the articulates the junction of the curved and rectilinear stroke.

-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. (Don't use this type of font with capital letters together to form a word)

-Tail: The curved diagonal stroke at the finish of certain letterforms.

-Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. May be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop.

The font

To use fonts successfully, make sure you use a complete font and know how to use it. It's always good to select a type family.

Week 3

04.11.2022

In the third lesson, Mr. Vinod told us the history of printing and told us to be skeptical of everything. Mr. V told us this in the first class. Although I am not very good at English, this sentence impressed me deeply: Mr. Vinod said that he hoped that we should have our own ideas in learning everything, instead of completely believing what anyone gave us, even what he taught us. Mister Wants our ingenuity to look inside, to absorb some information from the outside with its own discrimination, rather than blindly follow blindly. Mr. Vinod's class. I benefited a lot from it. He not only teaches us professional knowledge, but also teaches us a lot of independent thinking ideas.

Week 4

Text

Indicating Paragraphs

Several options for indicating paragraphs

- pilcrow

Fig.1.15.Pilcrow, (15/04/2022) from wiki

- line spacing (leading) between the paragraphs; ensure there’s equal spacing

Fig.1.16. line spacing vs leading, (15/04/2022) from flickr (website) 

- indentation is the same size of the line spacing / point size of the texts

Fig.1.17.Indentation, (15/04/2022) taken from lecturer's notes

- extended paragraphs; creates unusually wide columns of text

Fig.1.18.Extended paragraphs, (15/04/2022) taken from lecturer's notes

Widows & Orphans

Widow - a 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 a new column

Fig.1.19. Widow & Orphan, (15/04/2022) from Cutting Edge PR Insights (website)

Highlighting Text
- italic

- bold

- change type family

- change colour (CMYK)

- placing a field of colour behind the text

- typographic elements Headline within Text
- a typographers task is to make sure these heads (subdivision) clearly signify to the reader the relative importance within the text to their relationship to each other (ex: A,B,C)

Fig.1.19. Headline within text, (15/04/2022) taken from lecturer's notes

Cross Alignment

- cross aligning headlines & captions with text type reinforces the architectural sense of the page (structure) while articulating the complimentary vertical rhythms

Fig.1.19. Cross alignment, (15/04/2022) taken from lecturer's notes

Week 5  Letters / Understanding letterforms - each letter may look symmetry but they might not & most likely aren't, it is easier to see 2 different stroke weights when zoom in - each bracket connecting the serif to the stem has a unique arc - both Baskerville & Univers show careful care a type designer takes to create letterforms that are both internally harmonious & individually expressive

Fig.1.20. Baskerville, (24/04/2022) taken from lecturer's notes

Fig.1.21. Univers, (24/04/2022) taken from lecturer's notes

Helvetica VS Univers - the upper curve goes in a bit VS the upper curve flares out - the bowl looks more flexible and curvy VS looks more rounded - has a curvy long tail VS short with it flaring out a bit

Fig.1.22. Helvetica (left) VS Univers (right), (24/04/2022) taken from lecturer's notes

- curved strokes (s,o,r, etc) must rise above the median/sink below the baseline so that it appears the same size as the vertical & horizontal strokes they adjoin Counterform (counter) - the space describes, & often contained, by the strokes of the form; determines how well words hang together (readability)

Week 6

Different Medium

- typography started with being seen through paper, now it’s on multitude of screens 

- subject to many unknown & fluctuating parameters (operating system, system fonts, the divide & screen itself, viewport, etc) - how the paper is rendered will affect the experience of typesetting

Print Type VS Screen Type - designer’s job to ensure that the text is smooth, flowing & pleasant to read

Print

- good typeface (Caslon, Baskerville) are the most common; their characteristics (elegant & intellectual) & highly readable when set at small font size is the reason; versatile, easy-to-digest classic typeface

Screen

- typefaces are optimised & often modified to enhance readability & performance onscreen in a variety of digital environment; ex: taller/shorter x-height, wider letterforms, more open counters, heavier thin strokes & serifs, reduced stroke contrast, modified curves & angles for some design; more open spaces (important) - Verdana, Georgia are common typefaces made for screens

- hyperlink : a word, phrase,/image that you can click on to jump to a new document/new section within the current document; normally blue & underlined by default - 16 pixels text on a screen is about the same size as text printed in a book/magazine; at least 12 points which is about 16 pixels on screen

- each device comes with its own pre-installed font selection, based largely on its operating system (although each differs a bit)

- pixel sizes are different between devices

Fig.1.23. Pixel difference between different devices, (26/04/2022) taken from lecturer's notes

Static VS Motion static : minimal characteristic in expressing words

- traditional characteristics (bold & italic) offer only a fraction of expressive potential of dynamic properties  - level of impression & impact they leave on the audience is closely knitted to their emotional connection with the viewers

Motion : temporal media offer typographers opportunities to “dramatise” type, for letterform to become “fluid” & “kinetic”

- is often overlaid onto music videos & advertisements, often set in motion following the rhythm of a soundtrack

- on-screen typography has developed to become expressive, helping to establish the tone of the content/express a set of brand values

---

INSTRUCTIONS

Exercises (Week 1-Week 3)

Week 1

In the first class,  Mr. Vinod gave us an exercise and gave us a few words.  The words i chose were COUGH, SQUEEZE, POP, GROW. I made some sketches and I devised three forms for each word. 

    Fig. 2.1: POP; Sketch 1 - I use explosions and musical notes to represent it.

    Fig. 2.2: GROW; Sketch 2 - Words seem to grow.

    Fig. 2.3: COUGH; Sketch 3 - Words look like coughing.

    Fig. 2.4: SQUEEZE; Sketch 4 -Use letters and external forces to make it feel squeezed

After watching Mr. Vinod's lecture, I tried to digitize my sketches. 

Fig. 2.5: SQUEEZE. 

Week 2

Mr. Vinod looked at my sketches and gave good advice. Mr. Vinod liked my "squeeze". Under the guidance of Mr. Vinod, I digitized the words.

Type Expressions

Fig. 2.6: POP; Draw an explosion with pen, fell the pop.

               GROW; Mr. Vinod suggested that I modify my "grow", and at Mr. Vinod's suggestion, I changed it to the present shape. The letters are growing, bigger and bigger.

                        COUGH; The letter O sneezes like a big mouth, shaking the letters next to it.

          SQUEEZE; Mr. Vinod was pleased with my sketch, and I digitized it into its current form.

Final Design

Final Outcome Type Expressions

Week 3:

After receiving two feedback from Mr. Vinod, I chose a font that Mr. V approved, and I needed to make the font dynamic. I watched Mr. Vinod's dynamic tutorial, and I completed my first GIF with Illustrator and Photoshop.

Fig. 2.7: Frames for the animation of the word 'SQUEEZE".

Fig. 2.78:Process during the animation of the GIF.

Final Design

Fig.2.7: SQUEEZE: The suddenly large letter "E" fell over and crushed the other letters.

Week 4

Text Formatting(1/4)

We were asked to edit our names in the ten fonts provided, we need to learn how to solve various text formatting problems, including kerning, letter spacing, alignment, leading, and paragraph spacing. 

Fig.2.8: Before Kerning and Tracking.

Fig.2.9: After Kerning and Tracking.

Text formatting(2/4)

I watched the lecture video to learn and made three versions of font formats with In Design.

Fig.2.10: Type Formatting Version 1

Text formatting(3/4)

Fig.2.11: Type Formatting Version 2

Text formatting(4/4)

Fig.2.12: Type Formatting Version 3

we must make sure that the leading is always multiples of two.

Final Design

Follow Mr. V's demonstration to complete each step, I made the final text format. 

Typeface : Univers LT Std

Font face : Roman & Oblique

Font size :  22 pt, 18 pt, 9 pt 

Margins : 12.7 mm (top, left, right), 100mm (bottom)

Columns : 4 

Gutter (for columns) : 5mm

Average characters per line : 50 ~ 56

---

FEEDBACK

Week 1

Specific Feedback：We were advised on how to create and manage content for our blogs.

General Feedback：-No specific feedback was given this week-

Week 2

General feedback:  Mr. Vinod gave us advice on our work and how to digitize it. 

Specific feedback：I came up with three forms, and Mr. Vinod told me that the third one was good. He wants me to to move on.

Week 3

General feedback: Mr. Vinod commented on our assignment and demonstrated digitizing Grow and Wink. 

Specific feedback：Mr. Vinod suggested that my ”pop” should be simple, and my “COUGH”, saying that my element dependence is a little too much, which makes the graphics look complicated, and the lines would be better if they were outside. 

 

Week 4

General feedback: Although the animation was successfully made, it was not perfect and still needed more practice.

Specific feedback：The E can grow more slowly, and the S can squeeze more.                          

                         

Week 5

General feedback: Mr. Vinod looked at our blog and told me that I should tag my blog. And hopefully we can explain the font and format we use for typography.                              

                         

Specific feedback: Mr. Vinod looked at my animation and told me there was no new progress, hoping to see my progress. 

                                          

---

REFLACTIONS

Week 1

Experiences: I started my own blog under the guidance of Mr. Vinod. This is my first time to use blog, I feel a little difficult to learn it.

Observations:  I felt that my classmates all spoke better English than I did, and Mr. Vinod organized a game that I couldn't participate in because I was online. I hope I can integrate into the group soon.

Findings: I find it a very interesting process to create words, but I can only draw on paper with a pencil because I don't know how to use software yet.

Week 2

Experiences: After learning, I had a preliminary understanding of the software and successfully digitized the sketches.

Observations:  When I saw my classmates' works, they were so vivid and interesting that I should learn from them.

Findings: I found digitization easy, not as hard as I thought, and creating is a fun process. I find it faster and more convenient to digitize on a computer than I do on paper.

Week 3

Experiences: I failed to make GIF twice, and each time I encountered different problems. First, when I exported it after making it in Illustrator, all my drawing boards were scattered, so I could not import Photoshop. I can't find out where is error, so I restart the Illustrator, made a again, this time can be successfully exported, but when I import the ps, cannot be inserted into the layer, I go online to check the reason, my version of the ps version is 2019, so I can't open, I have to uninstall reinstall, this time, I am done.

Observations:  Some students have been able to make GIF in this class, but I did not make it because of my poor operation. After class, I watched the video provided by Mr. Vinod repeatedly and finished it

Findings: I found being dynamic a little difficult for me as a novice. Probably because I haven't used Adobe software before. So it might be a little laborious at first.

Week4

Experiences:In the fourth period, a lot of people had already handed in their work, and I thought the work didn't start until after the fourth week. I felt that I had written the wrong homework, I was so scared, I made up the homework after class, and Mr. V told me how to write the feedback. Finally I caught up with the class progress. Mr. Vinod patiently told me how to export and upload my works, and I corrected it. 

Observations:I saw that the tape format designed by my classmates was very creative. I need to learn more  and refer to it to improve my creativity.

Findings:  I find that when formatting text, pay more attention to the layout of the text and adjust the font and have appropriate white space.

---

FURTHER READING

A Type Primer by John Kane.

 

                                                   Fig. 5.01:A Type Primer

I chose this book on the recommendation of Mr. Vinod. This is a good book for beginners and a very practical book. It  talks about the fundamentals of typography and the history of development. There are detailed explanations of letters, words and sentences. I know a little bit about the text in the book because Mr. Vinod explained it to us in the lecture. Finally, the importance of grid to text and how to use grid are discussed. This book is of great help to me as a beginner in typesetting.