Typography - Task 1 Exercises

Typography - Task 1: Exercise 1 & 2

 29.09.2023 - 27.10.2023  / Week (1)- Week (5)

Chai Wei Yi (0369561) 

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

---

LECTURES

Week 1：Summary of my lecture here

What is TYPOGRAPHY???

• Typography is all around us in our daily lives. It's about creating words in a creative way, not just with text but also with visual elements and how they're used in things like apps and websites. The way words look affects how we understand them. Good typography helps us find information easily. Typography has changed a lot over 500 years, going from fancy handwriting to modern text design, reflecting the transformation from mere communication to artistic expression. In order to be good in typography, it requires a process of trial and error. Typography has also changed with the times, following current trends and styles. Learning about typography helps us understand it better. So, be patient, because typography is a big part of our lives.
• Typography involves choosing fonts, font size, line length, spacing, and how letters, numbers, and symbols are styled and arranged in a design. It's about how the text looks and how it's created.
• Learning about typography makes it easier to share information in a way that’s easy to understand and interesting, In my past coursework, I discovered that creating typography needs to be very careful with small details. It has improved my ability to be precise and skilled in both design and writing.

Phoenician Letters

Week 1 31/9/23

Figure1.0

Phoenician Letters

Week 1 31/9/23

• Phoenician letters: Phoenician letters is the most original version of the  "Latin" and "Arabic" letters, its also an early developed writing system. Its early developed writing system and its direction of writing is from right to left. 

The Greeks

Week 1 31/9/23

Figure1.1

The Greeks

Week 1 31/9/23

• The appear of Greeks had successfully change the direction of writing, its totally different with Phoenician Letters. In generation of Phoenician letters, all the details of this writing system is from right to left but the Greeks had create a new mental of reading which is from left to right and right to left. This is how Boustrophedon become a important character in history  

Etruscan

Week 1 31/9/23

Figure 1.2

Etruscan

Week 1 31/9/23

• Before inscribing letterforms, carvesrs will working in marble painted is known as Etruscan. The carved letterforms retained some characteristicks and style of their strokes, as an example there will a shirt in weight from vertical line to horizontal line

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

Different Types of Hand Scripts

Square Capitals 

Week 2 2/10/23

Figure 2.0

Square Capitals 

Week 2 2/10/23

• This capitals is the most common capitals that can found in Roman monuments, the special point of this capitals was added serifs to the finish of main strokes.

Rustic Capitals 

Week 2 2/10/23

Figure 2.1

Rustic Capitals 

                                    Week 2 2/10/23

• This capitals is the compressed version of older version which is square capitals, the special point of this capitals was it allow twice as many words on a sheet of parchement and its will save a lot of time to write .As view of reader, its looks more smooth and easier to read.

Roman cursive

Week 2 2/10/23

Figure 2.2

Roman cursive

Week 2 2/10/23

• Its also called as Lowercase letterform, its was utilised for everyday transaction and result of fast writing.

Uncials 

Week 2 2/10/23

Figure 2.2

Uncials 

Week 2 2/10/23

• Uncials incorporated some aspects of the Roman Cursive hand, espcially the shape of the letter A,D,E,H,M,U and Q.

Text type classification 

Figure 2.3

• This picture had clearly showing the progression of letterforms from Blackletters to Sans Serif from top to buttom 

Week 2：Summary of my lecture here

WEEK2 

13/10/23

Figure 3.0

Defination

• Kerning -Autmotic adjustment of space betweern the letters that we type
• Letter spacing- Space will be added between letters
• Tracking- The addition and removal of space in a word or sentence 

Figure 3.1
13/13/23

Types of tracking

• normal
• loose
• tight

Uppercase letters are drawn to be able to stand on their own, in comparison to lowercase letters which will need counterforms to be able to maintain a proper line of reading.

Typography:Text/Formatting Text

Figure 3.2
Flushed Left 
13/10/23

Flushed left 

• Most similiar with the mirrors the asymmetrical experience of handwritting. All the line starts at the same point but ends wherever the word in the last line ends

Figure 3.3
Flushed Right
13/10/23

Flushed right

• Its emphasis on the fnish of a line rather than the begining.

Figure 3.4
Justified 
13/10/23

Justified

• similar to centering where it imposes a symmetrical shape on the text by expanding or reducing space between words/letters.

Week 3：Summary of my lecture here

20/10/2023 

1.Indicating Paragraphs

Pilcrow

Figure 4.0
Pilcrow
20.10.23

• a holdover from manuscripts

Line space

Figure 4.1

Line space

20.10.23

• Ensures that the text is aligned across all columns

Standard Indentation

Figure 4.2

Standard Indentation

20.10.23

•  The indent is the same size as the letters point size 

Extended Paragraphs

Figure 4.3
Extended Paragraphs
20.10.23

• It produces very huge amount of text columns

Widows&Orphans

Figure 4.4
Widow&Orphans
20/10/23

Widow- A single short line of type at the end of a column of text 

Orphan- A single short line of type at the start of a column of text 

Cross Alignment

Figure 4.4
Cross Alignment
20.10.23

• Cross-aligning headings and captions with text type strengthens the page's architectural sense — its structure — while articulating the complementary vertical  rhythms

Week 4: Basic/Describing Letterforms

• Baseline: Imaginary line defining the visual base of letterforms
• Median: Imaginary line defining the x-height of letterforms. 

• Stroke: Line that defines the basic letterforms 

Figure 5.1

• Apex/Vertex: Point created when two diagonal stems join (Apex above / Apex below) 

Figure 5.2

• Arm: Short strokes off the stem of the letterform (horizontal / inclined upwards) 

Figure 5.3

• Ascender: Portion of the stem of a lower case letterform that projects above the median. 

Figure 5.4

• Barb: Half serif finish on some curved strokes. 

Figure 5.5

• X-height: Height in any typeface of the lowercase 'x'.

Figure 5.6

• Beak: Half serif finish on some horizontal arms

Figure 5.7

• Cross bar: horizontal stroke in a letterform that joins two stem together 

Figure 5.8

• Bracket" transition between serif and stem 

Figure 5.9

• Crotch: interior space where two strokes meet 

Figure 5.10

• Finial: rounded non-serif terminal to a stroke 

Figure 5.11

• Ear: stroke extended from the main stem 

Figure 5.12

• Bowl: rounded form that describes a counter 

Figure 5.13

• Stress: Orientation of the letterform

Figure 5.14

• Link: Strokes that connect the bowl and the loop

Figure 5.15

• Spine: curved stem of S

Figure 5.16

• Swash: flourish that extend the stroke 

Figure 5.17

• Loop: Bowl created in the descender of

Figure 5.18

• Cross stroke: Horizontal stroke intersecting the stem in letterforms 

Figure 5.19

• Em/en: refer to the width of an uppercase M. Em= size of typeface. En = half the size of em. 

Figure 5.20

• Descender: portion of the stem that projects below the baseline (typically lowercase) 

Figure 5.21

• Leg: Short strokes stem of letterforms. 

Figure 5.22

• Ligature: character formed by the combination of two letterforms

Figure 5.23

• Shoulder: curved strokes that is not part of the bowl

Figure 5.24

• Spur: Extension that articulates the junction of a curved and rectilinear stroke. 

Figure 5.25

• Tail: Curved or diagonal stroke at the finish of a certain letterform

Figure 5.26

• Serif: Oblique foot at the end of the stroke

Figure 5.27

• Stem: Significant vertical or oblique stroke

Figure 5.28

• Terminal: Self contained finish of a stroke without serif 

Figure 5.29

---

INSTRUCTIONS

 

Task 1: Exercises- Type Expression

Explain briefly what you have been asked to do and how you went about it   

Research

Figure 5.0
Research of sketching

We were given four words to work with when creating a type expression for this exercise, and I chose the terms inebriated, eerie, impact, and smoke. I looked for ideas online before I started drawing. I chose these in particular because of how they were able to modify text, distort it, chop it out, and place it in precise places to effectively portray the words. There were only a few permitted graphical components and 10 available fonts.

Sketch

Figure 6.1
Sketching of 8 words
20/10/23

These are the sketches I came up with; I hand-drew a total of 16 distinct concepts. these sketch design is what i wanna show and bring the feel to reader.

Final Outcome of Sketch 

Figure 6.2
Final Sketching 

Task 2 .Type Expression

Figure 6.3 

Figure 6.4

Figure 6.5 
12 Digitalization of Sketch  

These are the digital sketches I created after drawing a total of 16 distinct sketches by hand. These will serve as the foundation for my selection of the greatest images for digital conversion in Adobe Illustrator.

Final Digitalization  Design

Figure 6.5
Final  Digitalization of Sketch  

Figure 6.6
Final Digitalization of Sketch ( JPG)

After i design 12 type of digitalization design with Adobe Illustrator, i had submitted it to lecture and hope to get some feedback. when i received it i try to redo the digitalization according the comment that given by lecture and finally i got this 4 design of each words

Task 3. Type Expression 

Figure 6.6
Process of Animation

Since I wanted the text to slide down and shatter into fragments, I chose the word "SOUP" to be animated. I was able to build a falling animation by using illustrator to move the text around frame by frame. It will looks like people putting a lot of seasoning into a bowl. I had to painstakingly twist and separate the words' fragments for the final breaking step. I had produced 11 frames. 

Figure 6.7
Process of Animation In Photoshop 

To build the frame animation, I then imported the files into Photoshop. In order to adjust the "seasoning falling" angle, I went through a process of trial and error, switching back and forth between Illustrator and Photoshop. Since I was initially unhappy with the speed of falling, I drastically altered the arrangement of the characters between frames to provide a more gradual descent. I successfully exported the animation as a gif.

Figure 6.8
Final Outcome of Animation

Task 4. Text Formatting

During week 4 of this module, all of us were tasked with using Adobe InDesign to practice text formatting. This task consisted of three parts that we needed to learn. The first part involved kerning and tracking. We used our names as examples to practice, making sure to use the 10 provided fonts. The second exercise we learned was the techniques for adjusting hyphenation, kerning, and column interval space. In addition, the third exercise involved combining the skills we had learned in exercises 1 and 2. In this latest task, we needed to learn how to use baseline grids, margins, and columns to adjust our content. We also employed cross-alignment to make our output look more organized and user-friendly

Exercise 1

Exercise 2

Exercise 3

Final Submission of Layout Exercise

Final submission of layout exercise (without grid) 

Final submission of layout exercise (with grid) 

Final submission of layout exercise (without grid)

Final submission of layout exercise (with grid)

HEAD
Font/s: ITC GARAMOND STD
Type Size/s: 48 pt
Leading: 14.4pt
Paragraph spacing: -

BODY
Font/s: Serifa 45 light Italian
Type Size/s: 10.5 pt
Leading:13.2 pt
Paragraph spacing: 
Characters per-line: 50-58
Alignment: Align Left

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm bottom
Columns: 4
Gutter: 5 mm

Feedback 

Week 2: Summary of my lecture

General Feedback:
When i finish my first batch of sketch design as can refer back to figure 5.3 i received comment from my lecture was my sketching design is included too many of graphic element. It doesn't looks bad but if the design include too many of these element it will cause me hard to make it out or digitalize it out in Adobe Illustrator


Specific Feedback:
I received another bad review from my lecture, i using wrong font to finish my first batch of sketching. After the class i had download the font that i supposed to use from the Google Classroom and try to get more idea according those font to finish my next sketching
 

Week 3: Summary of my lecture

General Feedback: 

I had downloaded all the files which is needed and put it all into Adobe Illustrator and starting my digitalization. After i finish my sketching design , i going to digitalize all of it into Adobe Illustrator, then i success did it. I come out totally 12 design with Adobe Illustrator and the fame which given by lecture.

Specific Feedback: 

The review that given by my lecture is my design is full of distortion, and i need to improve my ability of structure imagination As an example according the feedback that given by lecture , he found that i lack of this ability when i doing my digitalization, i need to imagine more how it going and how it going more logic and smooth. After i received these review i try to understand it and keep remind myself once again when i redo the digitalization. In the end i had finish 4 design which is good enough and i had minimal the distortion.

Week 4: Summary of my lecture

General Feedback: 

According the digitalization design, we had be asked to choose 1 of them and make it to GIF (animation) .The task is quite interesting and it can practice our skill of using Adobe Photoshop. We going to finish all the digital sketching in Adobe Illustrator and import to Adobe Photoshop to make the sketch to animation. I had choose the word "soup". My animation idea is someone is pouring some seasoning to a bowl. Then the seasoning is group by a lots of letters which is S,O,U,P. letters

Specific Feedback: 

Try to add more interesting element into animation to attract viewer

Week 5: Summary of my lecture

General Feedback:

Majority of us didn't use the font that provided , we had asked to correct it as soon as possible

Specific Feedback: 

According to the video presented by Mr. Vinod in Typo Ex Text Formatting 2:4, it is clearly explained that the number of characters in each sentence should fall within the range of 45-60. Therefore, I have been tasked with making this correction

---

REFLECTION 

Experience

At the start of the semester i had feel very excited to accept all the challenges during my university life. In my expectation, i though beginning of the semester will very chill and relax, but the fact is not like that we facing a lot of homework and have to done a lot of e-portfolio. It had make all of us very stressful and no idea to go through with this because I am new to design and drawing at anything. But i feel fortunate ,because i feel like practice make perfect i started to used to it. 

Observation

 Throughout the lecture class of typography i had clearly realized that typography can really show out the author characteristics. It really need a lot of idea, patient ,creative and also ability to use all of the application of tools

Findings 

This word has caught my attention while choosing the font in working on typographic. In the progress of working this project, it challenges beyond my imagination on how it should be presented in a creative and logically manner. It was difficult to reconcile one's logical and unconventional ways of thinking. It also requires a lot of patience since if one portion is not properly aligned with the other layers, the whole thing will appear off. However, with the feedback from lecturer and ultimate outcome have pushes my motivation to work better in every projects. 

Further reading 

As in a new student who didn't have any background of design, as my own opinion further reading is quite important to me . It can help me to get more idea, understand more details about design and expand more professional knowledge about typography the further reading i had choose A TYPE PRIMER which is recommend by Mr. Vinod.

Describing Letterform

A clear description of letterforms is provided. According to this reference, the first and most fundamental aspect is the proper use of terminologies. In my opinion, this is extremely beneficial for me, not only for expanding my knowledge but also for facilitating communication with others in the field of design. The use of proper terminology can make communication more efficient and boost our confidence. As I delved deeper into the basics, I discovered that I could manipulate various elements to create more unique designs in line with my personal style.