Typography Task 1 /Exercises

-September 26,2024

09/24/2024-10/29/2024(Week1-Week6)

PAN RUINING(0378138)

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

Typography-Task 1 Type Expression

Task 2 Text Formatting

JUMP LINKS

LECTURES

INSTRUCTIONS

-Task 1:Exercises-Type Expression

-Task 2:Exercises 2-Formatting Text

FEEDBACK

REFLECTION

FURTHER READING

LECTURES

Lecture 1: Typo_0_Introduction & Typo_1_Development

In the first lecture, Mr. Vinod introduced us to the typography module. He gave a comprehensive explanation of what typography is, its significance, and where typography skills are applied. Following that, he guided us on how to begin creating our blog for our portfolio in this module.

·Typography involves:

- Typefaces

- Point-size

- Line-length

- Line-spacing (leading)

- Letter-spacing (tracking)

- Kernings (space within letters pairs)

Font - Individual font/weight within the typeface, i.e.: Georgia Regular, Georgia Italic, and Georgia Bold

Typeface - entire family of fonts/weights that share similar characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Futura.. etc.

Fig 1.1 Font vs Typeface

Typography Development / Timeline

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

Fig 1.2 Different styles of serifs

Early letterform development: Phoenician to Roman

Fig 1.3 Phoenician to Roman

-Hand script (3-10th century C.E.)

- Blackletter (1450)

- Oldstyle (1475)

- Italic (1500)

- Script (1550)

- Transitional (1750)

- Modern (1775)

- Square Serif /Slab (1825)

- Sans Serif (1900)

- Serif/Sans Serif (1990)

Lecture 2: Typo_2_Basic

In this lecture, Mr. Vinod covered the fundamentals of typography and the details of letterforms. He encouraged us to read extensively and explore websites about typography to broaden our understanding and gain additional insights.

·Baseline - Imaginary line (visual base of letterforms)

·Median - Imaginary line defining the x-height of letterforms

·X-height - height in any typeface of the lowercase 'x'

Fig 2.1 Typography lines and guides names

·Stroke - Any line that defines the basic Letterform.

·Apex/Vertex - point created by joining two diagonal stems

·Arm - short strokes off the stem of letterform, either horizontal or inclined upward.

·Ascender height - portion of the stem of a lowercase letterform that projects above the median

·Barb - half-serif finish on some curved stroke.

·Bowl - the rounded form that describes a counter. It may be closed/open.

·Bracket - transition between serif & the stem.

·Cross Bar - horizontal stroke in letterform that joins two stems together.

·Cross-stroke - horizontal stroke in a letterform that joins 2 stems together

·Crotch - interior space where 2 strokes meet.

·Ear - stroke extending out from the main stem or body of the letterform.

·Ligature - character formed by the combination of 2 or more letterforms

·Stress - orientation of letterform, indicated by thin strokes in round forms.

·Swash - flourish that extends the stroke of the letterform

The Font

·Full font of a typeface contains more than 26 letters, numerals and few punctuation marks.

·Always good to select a type family that have good range of typefaces

small capitals - primarily found in serif fonts as part of 'expert set'

·Roman - derived from inscriptions of Roman monuments (lighter stroke is known as 'Book')

·Italics - sloping letters, Oblique - roman form but tilted

·Roman - upright and default font type.

·Condense - roman form but compressed version

Fig 2.2 Italic vs Roman

Fig 2.3 Fonts types

Fig 2.4 Uppercase vs Lowercase numerals difference

Lecture 3: Typo_3_Text_P1

In the third lecture, Mr. Vinod discussed various aspects of text, including tracking, kerning, spacing, texture, and formatting. He also demonstrated how these elements function in Adobe InDesign.

Tracking: Kerning & Letterspacing

·Kerning - Automatic adjustment of space between letters. (*Not the same as letterspacing)

·Letterspacing - Adds space between letters. used when there's large number of words/paragraphs.

·Tracking - Add / removal of space in a word/sentence.

·More spacing = less readable/recognized

·When you add letter spacing you are breaking counter form = breaking readability

·Not encourage to add spacing in Lowercase.

Fig 3.1 Normal tracking vs loose tracking

Fig 3.2 Before vs After kerning

Formatting Text

·Flush left - Each line starts at the same point but ENDS WHEREVER THE LAST WORD on the line ends. Spaces between words are consistent throughout text.

·Gray Value - Value

·Centered - Symmetrical: equal value & weight on both ends of any line.

·Flush Right/left - Useful for captions and when there's relationship between text & an image.

·Justified - Centering + symmetrical shape on text. Spaces in between words/letters may be different.

Texture

·Type with a relatively generous x-height/heavy stroke = darker mass compared to smaller x-height/lighter stroke.

·Sensitivity to these differences in colour is important to create good layouts.

Leading & Line Length

·Type size - Should be large enough to be read easily at arms-length.

·Leading - text that is set too lightly encourages VERTICAL EYE MOVEMENT (reader can easily loose place). text that is set too loosely creates STRIPED PATTERNS (distracts reader from material).

·Line Length - Shorter lines = less leading, Longer lines = more leading.

·Good rule = keep line length between 55-65 characters.

Lecture 4: Typo_4_Text_Part 2

This lecture4 built upon the previous one. Mr. Vinod delved deeper into topics such as Indicating Paragraphs', widows & orphans, Highlighting texts, Headline within text, cross alignment. During the session, he also demonstrated how these concepts are applied in Adobe InDesign.

Indicating paragraphs Keypoints

·Pilcrow - Used for indicating paragraphs. It's a symbol used to mark new paragraph or section of text.

·'Line-space' - space between paragraphs. eg: If line space is 12pt, then the paragraph space should be 12 pt. = ensures cross-alignment across columns of text.

Fig 4.1 Before vs After kerning

Widows & Orphans

·Widow - 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 new column.

Fig 4.2 Before vs After kerning

Highlighting text

-Types of highlighting:

·Italics

·change colour of text

·Bold

·Background colour behind text.

·Quotation marks - create clear indent, breaking the left reading axis.

Headline within text

·'A' head indicates a clear break between the topics within a section

·Hierarchy = putting together a sequence of subheads

·'B' head is a subordinate to A heads. B heads indicate a new supporting argument/example for the topic.

·'C' head highlights specific parts of material within B head text. They cannot materially interrupt the flow of reading.

Fig 4.3 Headline within text

Lecture 5: Typo_5_Understanding Letterform

Maintaining X-height

·Letterforms that have a curved stroke have to rise above the median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes stuck to it.

Fig 5.1 Curved strokes extending over lines

Form/Counterform

·Counterform is important for readability. We should look/analyze existing counterform to between understand how to design a letterform.

Fig 5.2 Counterform

Letter/Contrast

·Contrast is important to differentiate information in text.

Fig 5.3 Different types of contrast

INSTRUCTIONS

Task 1:Exercises-Type Expression

For the first task, we need to sketch the letters of the words 'SMOKE,SPICY, BLOOM, and FANCY 'based on their meanings.

Fig 2.1.1 Sketch of my type

Then I start digitized the type expression and add some minor tweaks to the design.

Fig 2.1.2 Sketch of my Type

After completing the sketches for the four words, Ms. Vitiyaa asked us to choose one sketch and create an animation using Photoshop. I chose the word "BLOOM" that I designed.

Fig 2.1.3 Sketch of my BLOOM

This is my animation artwork, My design concept is inspired by the original meaning of the word "bloom," which is "the process of a flower blooming." I combined each letter to form a flower, and the animation shows the process of the flower blooming.

Fig 2.1.3 Animation artwork of my BLOOM

I realized I didn't finish one artboard before copying it to the next, which made the animation messy, so I redid it.

Fig 2.1.4 Progress of animation

Fig 2.1.5 Progress of animation

Final animation:

Fig 2.1.6 Final animation

-Task 2:Exercises 2-Formatting Text

Kerning and Tracking

I practiced kerning and tracking my own name using the 10 typefaces provided in the video.

Fig 2.2.1 Process of my kerning and tracking

Fig 2.2.2 Final product of kerning and tracking

Layout

I followed the video shared by the professor, learning step by step how to create a layout and design my own work using the provided text and 10 typefaces.

Fig 2.2.3 First layouts

In class, Ms. Vitiyaa asked us to print out our work for her review. She pointed me out that some of the work did not follow the golden ratio and advised me that the last line of each paragraph should not be a single word. I then revised my work accordingly.

Fig 2.2.4 The suggestions Ms. Vitiyaa gave me and the mistakes I made

I corrected the issues and completed the work again.

Fig 2.2.5 Process of my redo

Fig 2.2.6 Final product

FINAL Text Formatting Layout

HEAD

Font/s: Bembo Std

Type Size/s: 58 pt

Leading: 84.4 pt

Paragraph spacing: 0

BODY

Font/s: Univers LT Std

Type Size/s: 11 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 48

Alignment: left justified

Margins: 50 mm top, 12.7 mm left + right + bottom

Columns: 4

Gutter: 5 mm

Fig 2.2.6 Final Text Formatting Layout

Final Text Formatting Layout(PDF)

Final Text Formatting Layout-Grids(PDF)

FEEDBACK

-Week 1

In the first typography class, Ms. Vitiyaa introduced us to some information and rules about the major, and had us establish a personal e-portfolio, as well as create a sketch of the four words: spicy, smoke, fancy, and bloom.

-Week 2

In this week, I submitted my sketch in the Facebook group and learned how to use AI to design fonts.

-Week 3

In this week, Ms. Vitiyaa taught us how to create outlines and grouping in AI. It gave me a deeper understanding of the skills required to use AI.

-Week 4

This week, Ms. Vitiyaa once again emphasized the details to pay attention to and demonstrated common mistakes when creating animations. I continued to work on completing my project during class.

-Week 5

In the fifth week, we continued working on the text formatting assignment in class. The teacher illustrated the importance of the golden ratio in layout design on paper and taught me techniques for proper text alignment.

REFLECTIONS

Experience

Over the past five weeks, I was introduced to typography and gradually became proficient in using software like InDesign and Adobe Illustrator, which were entirely new to me. The instructor thoughtfully recorded each lecture, allowing us to study and gain a deeper understanding of the subject. During this time, I learned to create digital files and practiced Type Expression and Formatting Text.

Observations

With the Ms. Vitiyaa's guidance and various suggestions, I gained a better understanding of design standards, such as applying the golden ratio and avoiding widow and orphan errors, which has been incredibly beneficial.

Findings

I found that creating good typography is challenging, with numerous details and guidelines to consider. The phrase 'details make or break success' is perfectly suited to typography. A well-crafted layout requires not only an eye-catching design but, more importantly, careful attention to detail and the avoidance of unnecessary errors to provide readers with a seamless reading experience.