Typography / Exercises Task 1

Typography | Task 1: Exercise

|| 23/09/2024 - 28/10/2024 (week 1 - week 6)

|| Leong Hui Xuan / 0365793 / Bachelor of design (Honours) in creative media

|| Typography

|| Task 1 : Exercises

_______________________________________________________

TABLE OF CONTENTS

1. Lectures

2. Instructions

3. Process Work

4. Feedback

5. Reflection

6. Further Reading

_______________________________________________________

LECTURES

Lecture 0 : Briefing

💫This video introduces the concept of e-portfolios and serves as a guide for creating our first post on Blogger. It explains the differences between HTML views and composite views, and demonstrates how to create jump links using specific code. Interestingly, applying code for jump links and lines feels more like working with IT techniques rather than just design. In additionaly, the video also helps us clearly understand the next steps in our project, allowing us to immediately implement what we've learned. 

Lecture 1 : Introducton

💫 In this video, Mr Vinod was explaining the important of typography to us. 

Typography has evolved over 500 years, starting from calligraphy, progressing through lettering, and finally developing into typography as we know it today. It plays a critical role in ensuring different levels of engagement, comprehension, and effective communication.

Figure 1.0, Typeface and Font

Calligraphy: The art of beautiful writing.

Lettering: Drawing words and letters with careful detail.

Typography: The broader art and technique of arranging type to enhance its readability and appearance.

Font: The individual design within a typeface, such as Georgia Regular or Georgia Bold.

Typeface: A collection or family of fonts sharing similar characteristics, such as Arial or Times New Roman.

Type Family: Variations within a basic style of alphabet, differentiating by weight or style, such as bold, italic, or condensed versions of the same typeface.

Lecture 2 : Development

💫 This lecture is about the development of typography, its history and timeline.

Figure 1.1, Boustrophedon

The development of typography is starting with early letterforms created by ancient civilizations. The Phoenicians first wrote from right to left using simple uppercase forms made of straight lines and pieces of circles. Later, the Greeks introduced a writing style known as boustrophedon, where lines alternated between right to left and left to right, resembling the motion of an ox plowing a field.

Figure 1.2, Roman Square Capitals

The Romans further advanced the development of letter forms by drawing the letters before carving them. Roman square capitals is the written form found on monuments, were angled at 60 degrees to create thicker and thinner strokes.

Figure 1.3, Gutenberg's printing press

Figure 1.4, Blackletter 

Printing developed further with the advent of printing technology, especially the invention of Gutenberg's printing press. Blackletter is a simple, vertical font that became popular in Northern Europe. 

TIMELINE:

1450 Blackletter →1475 Oldstyle →1500 Italic → 1550 Script →1750 Transitional → 1775 Modern → → 1825 Square Serif/Slab Serif → 1900 Sans Serif → 1990 Serif/Sans Serif 

Lecture 3 : Basic/ Describing letterforms

💫 The basics of typography involve the art and technique of arranging type to make the written language more readable and legible. Moreover, Sir Vinod provided us with a detailed explanation of the various components of the letterforms, particularly the impressive ligature that combines the letters f and i. In addition, the differentiating between roman, italic, boldface, light, condensed, and extended fonts will help to achieve variation and emphasis. Proper use of punctuation, miscellaneous characters, and ornaments adds clarity and enhances the visual impact. 

 

Figure 1.5, Describing Letterforms

Here were some of the various components of the letterforms:

Stroke: Any line that defines the basic letterform.

Apex/ Vertex: The point above and below created by joining two diagonal stems.

Arm: Short strokes off the stem of the letterform, can be horizontal like E/F/L or inclined upward K/Y.

Ascender: The portion of the stem of a lowercase letterform that projects above the median like b/d/h/k.

Barb: The half-serif finish on some curved stroke such as C/G/S.

Beak: The half-serif finish on some horizontal arms such as E/T/L.

Bowl: The rounded form that describes a counter and the bowl may be either open or closed like b/d/p/q.

Bracket: The transition between the serif and the stem such as T/l.

Cross Stroke/ Cross Bar : The horizontal stroke in a letterform in a letterform that joins two stems together like f/t for cross stroke and  A/H for cross bar.

Crotch: The interior space where two strokes meet example, K/V.

Descender: The portion of the stem of a lowercase letterform that projects below the baseline like p/q/y.

Ear: The stroke extending out from the main stem or body of the letterform such as g/r.

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

Ligature: The character formed by the combination of two or more letterforms example, when the letter fl and fi type together it has some space between the letters, but the ligature is to combined the finial  of the letter f and the dot of the letter i togather.

Swash: The flourish that extends the stroke of the letterform. (Should not use swashes in capital letters together! )

Lecture 4 : Typo_3_Text_P1

💫 This video is about text information or X textual formatting and emphasizing the importance of proper presentation in design.

Key Typography Terms:

Figure 1.6, Kerning

•  Kerning - The automatic adjustment of space between letters. It is often confused with letter spacing, which involves adding space between letters.

Adjusting kerning can be done using shortcut keys in InDesign, allowing for precise control over letter spacing

• Tracking - The addition and removal of space in a word or sentence, which can be applied to entire bodies of text.
• Flush Left - Mirrors handwriting and is the most natural format for reading. It creates a ragged right edge.
• Centered - Creates symmetry but can be difficult to read for long passages.
• Flush Right - Emphasizes the end of the line but is not suitable for large amounts of text.
• Justified - Justified text can lead to uneven spacing and is often not preferred in design due to readability issues.

Concept and Important Principles:

• Whitespace and Rivers - Whitespace refers to the spaces in text that can create visual "rivers" when justified. Attention to line breaks and hyphenation is crucial to avoid this issue.
• Text Alignment - Different alignments affect readability. Centered text may be suitable for invitations, but clarity is essential for larger bodies of text.
• Typefaces and Readability - The choice of typeface impacts the message's clarity. Script typefaces should not use capital letters as they can hinder readability.
• X-height and Stroke Width - The x-height is the height of lowercase letters and affects readability. A larger x-height generally improves legibility.
• Gray Value - The "gray value" refers to the visual weight of text on the page. A well-balanced gray value enhances readability.

• Leading and Line Length - Leading (space between lines) should be 2-3 points larger than the font size for optimal readability. Line length should ideally contain 55-65 characters.

Lecture 5 : Typo_4_Text_P2

Figure 1.7, Leading and Line Spacing

Leading vs. Line Spacing: 

• Leading: Space between lines of text.
• Line Spacing: Space from the baseline of one line to the ascender/descender of another.

 Indentation and Alignment: 

• Indentation should match the point size of the text, typically used in justified text to avoid ragged edges. (Avoid using indentation with left-aligned text to prevent ragging on both sides)

• Widows: A short line left alone at the end of a column.
• Orphans: A short line at the start of a new column.

(Both should be avoided in design for better readability.)

Figure 1.8, Typerface changes

Typography Techinique and Guidelines

• False Line Breaks: Use（ Shift + Enter) to create a false line break, which helps in formatting text without creating a new paragraph.
• Kerning and Letter Spacing: Adjust letter spacing and kerning carefully, with a maximum adjustment of three units to maintain consistency across text lines.
• Italics and Bold: Use italics to highlight important information within a text. (Bold text can also be used to emphasize key points.)
• Typeface Changes: Changing the typeface of highlighted text can enhance visibility. For example, switching from serif to sans-serif may require reducing the point size by 0.5
• Headings: Establish a clear hierarchy with headings (A, B, C) to indicate the importance of sections. (A heads are larger and bolder, while B and C heads are subordinate. )
• Spacing for Subheads: Use leading spaces to separate subheads from the body text effectively.
• Cross Alignment: Ensure that subheads and body text are cross-aligned for a cohesive layout. 
• Quotataion marks : Distinguish between quotation marks and primes. Primes indicate feet and inches, while quotation marks are used for dialogue.

INSTURCTIONS

_______________________________________________________

PROCESS WORK

Task 1- Typo Expression:

For task 1, we were asked to have 10 words, then each student voted 4 words as our task to compose and express. The words that were final voted out were melt, burn, grow, and fade.  After that, we needed to use the 10 fonts given to create our sketches, and each word needed to have a minimum 4 sketches. 

Figure 2.0, Chosen words with the given 10 fonts

Figure 2.1, 1st Try Sketches without the given Fonts

Figure 2.2, Final Sketches with the given Fonts

MELT 

• For the word "MELT", I want to let the word have a melting look, so I melt the letter T for the first sketche of "Melt" and sort fonts from large to small.
• For the last sketch fo r"MELT", I designed it with the liquify tool to make the word concave and have the melt effect.

FADE 

• The second sketch word "FADE" I designed it deep above and shallow below through gradient and show the effect of fade.
• The third sketch of "FADE" beside the design deep left and shallow right, I used liquify tool to make it have a little wave effect.

GROW 

• The word "GROW" for the first sketch, I chose the letter R and W to elongate the straight line of letter R and the 2 stroke of the letter W to represent the grow effect.
• For the second sketch, I used the crystal effect on the letter to make it looks like covered with grass.

BURN 

• The forst aketch of "BURN" I inspired from a lighter, so I made the letter B separate into two halves to use as a lighter and sort the letter URN from small to large as the fire. 
• For the second sketch of  "BURN", I create a black background word white and used liquify to to make the effect of fire.

Typo Digitalize :

Based on the 16 sketches, we choose 4 to digitalize in Adobe Illustrator (AI). In AI we need to type out the words with the font and edit it until same with our sketches, example we can use shape on the typo base and drag with the white arrow tool to form a melt effect or we can just use wrap tool drag on the words to make th effect.

Figure 2.3 Final Type Expression

Typo Animation:

We were required to choose one from the four type expressions to make an animation and I chose the word "MELT" for my animation. I want the animation to look like each letter is melting and falling to the base. I use about 13 frame and edjusted the fps to make the gif animation.

Figure 2.4, First animation

The first animation I created, the words got bigger and smaller, and moved a little faster. Then, I came out with second animation to improved it.

Figure 2.5, Second animation

The second animation more stable and lower than the first animation.

Final Animated Type Expression

Figure 2.6, Final Animation

Type Formatting:

First, we need to practiced the kerning and tracking with our name using the 10 typefaces provided, then place them in neat view.

Figure 2.7, with kerning 

Layouts

Then, we need to create our text formatting by the text provided and following the steps in InDesign.

Figure 2.8 Layouts

Overall, the big and bold title "I AM HELVETICA" stands out in most of my designs and grabs people's attention immediately. In this exercise, I noticed that a balanced composition that combines text and images in a harmonious way is very important for formatting. The layouts in #1 and #3 exemplify a well-proportioned balance between visual and textual elements and I like them more. 

Finally, I chose the first one as my final outcome for this exercise.

Final Outcome:

Figure 2.9, Final Digitalise

Figure 2.10, Final Animation

FINAL TEXT FORMATTING LAYOUT

HEAD LINE

Typeface: Bembo Std

Font/s: Bembo Std Bold

Type Size/s: 73 pt

Leading: 71.6 pt

Paragraph spacing: 0

 

BODY

Typeface: Bembo Std

Font/s: Bembo Std Regular

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 50-60

Alignment: left justified

Margins: 12.7 mm

Column: 1

Gutter: 4.233 mm

FEEDBACK 

Week 1 

General Feedback: In week 1, Mr Vinod was introduce Typography to us through video and it show us how to create a e- portfolio in Blogspot, then Mr Max was guided us in the correct way. My blog was done set-up this week. Besides, we had done chosen 4 words for task 1.

Week 2 

General Feedback: The 4 words sketches from me was accepted by Mr Max and I can start deigitalize it at Adobe Illustrator already. Additionaly, the lecture video was watched. 

Specific Feedback:  For the 4th sketch of the word "Melt", Mr. Max suggested that I make the upper part of the word straight and only have a melting effect at the bottom.

Week 3 

General Feedback: Done digitalize the 4 words were accepted by Mr Max and watched the lecture video. Can progress animation.

Specific Feedback: For the word "Grow" in digitalize, Mr Max adviced me to elongate the letter R and W until the frame.

Week 4 

General Feedback: Animation done! We use AI and PS to create our gif animation.

Specific Feedback: Reduce the speed slightly and make the words more stable.

Week 5 

General Feedback: Almost finish the 6 design for text formatting, need to chose the final design in next week.

Specific Feedback: Can play with the opacity of photos but remember to place it at the same line to create a tidy view.

REFLECTION 

Experiences: 

Throughout the 5 weeks, I had a lot of fun with Task 1 and definitely learned a lot of tips and shortcut to reduce the time it took to complete my Photoshop and Adobe Illustrator coursework. In task 1, we have type expression, animations and text formatting exercises, I like the text formatting exercises more as it helps me in many ways, not just in the area of ​​Typography. Text formatting is mainly about designing the overall layout, combining pictures and text in a clever and balanced way to create a unified and harmonious visual experience. Although this activity was about typography, we can also use this technique in various aspects, such as the layout of cover illustrations.

Observation:

Since we need to show our work to Mr Max every week, I will get Mr Max's comments and learn about the comments of other works. Therefore, I can infer what Mr. Max wants the work to feel like through the comments made to me and other students, and then create in that direction.

Findings:

Overall Task 1, I learned that typography requires strict adherence to rules for creating fonts, text, and formatting, which is not easy to create. Sometimes you're expected to pay attention to details if something seems simple but takes more time. However, I believe that Task 1 will be of great help to my future exercise, and I am grateful to Mr Max and Mr Vinod for their guidance.

FURTHER READING 

Figure 3.0, Typographic Design: Form and Communication.

Book: Typographic Design: Form and Communication.

• Typography's Evolution: Typography has evolved through various stages, from the early forms of writing in ancient civilizations to the movable type invention by Gutenberg, and from the industrial revolution to digital typography. Each era contributed to new styles and technologies.
• Anatomy of Typography: Typography is a complex field that involves understanding the structure of letterforms. Concepts like x-height, baseline, capline, and serifs are essential to crafting well-designed type.
• Legibility and Readability: Legibility is the cornerstone of typographic design. The way letters are shaped, aligned, and spaced affects how easily text can be read, both in print and on screens. Attention to factors like stroke contrast, letter spacing, and proportion is crucial.
• Typographic Grid: Grid systems, such as single-column and modular grids, are used in typographic layouts to provide structure and coherence. These grids help in organizing content visually.
• Typography in Motion and Digital Media: With the rise of digital typesetting and motion graphics, typography now extends into time-based media, such as film titles and screen-based designs. This shift requires a new understanding of how type moves and interacts in dynamic contexts.
• Typographic Design Process: The design process involves traditional and experimental methods of creating visual communication using type. Designers explore typographic variations and transformations to solve visual problems effectively.