Typography / Task1

September 26, 2023

2023.09.26 - 2023.10.24

Ryoma Kato / 0365874

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

---

Contents：

LECTURES

CLASS SUMMARY

INSTRUCTION

WORK

FEED BACKS

REFLECTION

FURTHER READING

LECTURES (TASK1)

Week 1:

At the document ( TYPO_0_INTRODUCTION )

・What is Typography? - Typography is a way of arranging words in a way that makes them more readable, aesthetically pleasing, and eye-catching. We used in movie titles, posters, label design, signage design, web/app design,  logotype, so you have to have good sense of typography to produce good websites and App Designs to communicate what it needs to communicate seamlessly.

・Calligraphy - It comes from a Greek word meaning "to write beautifully." It refers to the development and practice of stylized calligraphy.

・Font - Individual font/weight within typeface.(Ex. Georgia Regular, Georgia Italic, Georgia Bold)

・Typeface - Typeface refers to an entire family of fonts/weights that share similar characteristics/style, such as Georgia, Arial, Times New Roman, Didot, Futura, etc.

Week 2: 

At the video ( Typo_3_Text_P1 )

Typography: Text / Tracking: Kerning and Letter spacing.

・Kerning - Refers to automatically adjusting the space between characters. It is often incorrectly referred to as "letterspacing".

・Letterspacing - This means to add space between the letters.

・Tracking - Adding and removing spaces within words or sentences is called tracking.

(Example of kerning)

(Example of tacking)

Designers always use uppercase letter spacing. 

・Flush left -  It is the closest format of the handwriting.

(Sample of Flush left)

・Centered - The format imposes symmetry on the text, assigning the same value and weight to both ends of a line.

（Sample of Centered)

・Flush right - Emphasizes the end of a line rather than the beginning, which can be useful in some situations. (Example: Caption)

(Sample of Flush right)

・Justified - Similar to centering, it applies a symmetrical shape to text by expanding or contracting the space between words and letters.

(Sample of Justified)

・Text / Texture - The different textures of these typefaces are suitable for different messages.

(Sample of Text/Texture)

・Type size - Text type should be large enough to be read easily at arms length.

・Leading - Text should be set properly so that it does not get lost, misplaced, or distract the reader when reading.

・Line length - A good rule of thumb is to keep line lengths between 55 and 65 characters.

・Text / Type specimen book - Shows sample typefaces in various sizes to provide accurate reference.

(Sample of Type specimen book)

Week 3:

At the video ( Typo_3_Text P2 )

・Text / Indicating Paragraphs - Ensures intersection alignment across columns of text.

・Text / Windows and Orphans - Designer need to be careful to Windows and Orphans.

Windows - Short line type left alone at the end of a text column.

Orphans - A short line of type left alone at the beginning of a new column.

(Sample of Windows and Orphans)

・Text / Highlighting Text - Headings should clearly indicate to the reader their relative importance within the text and their relationship to each other.

・Text / Headline within Text - "A" head indicates a clear separation between topics within a section.

(A head)

The "B" head is subordinate to the "A" head. Headings "B" indicate new supporting arguments or examples for the topic at hand. "A" head should not interrupt the text as strongly as a heading.

（B head)

A "C" heading highlights a specific aspect of the content within the "B" heading text. Does not interrupt the flow of reading. The "C" head in this configuration is followed by at least an em space for visual separation.

(C head)

・Text / Cross Alignment - Placing headings and captions across text type enhances the structural feel of the page.

・Text / End - "Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability." by Herman Zapf.

Week 4:

At the video ( Typo_2_Basic )

・Basic / Describing letterforms - Typography is the best way to learn about the components of letterforms.

Baseline - The imaginary line the visual base of the letterforms.

Median - The imaginary line defining the x-height of letterforms.

X-heigh - The height in any typeface of the lowercase 'X'.

Stroke - Any line that defines the basic letterform.

Apex / Vertex - The point created by joining two diagonal stems (apex above and vertex below)

Arm - Short stroke off the stem of the letterform, either horizontal (E,F,L) or inclined upward (K,Y).

Ascender - The portion of the stem of a lowercase letterform that projects above the median.

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

Beak - The half-serif finish on some horizontal arms.

Bowl - The rounded form that describes a counter. The bowl may be either open or closed.

Bracket - The transition between the serif and the stem.

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

Cross Stroke - The horizontal stroke in a letterform that joins two stems together.

Crotch - The interior space where two strokes meet.

Descender - The portion of the stem of a lowercase letterform that projects below the baseline.

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

Em/en - Distance equal to the size of the typeface / half the size of em.

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

Leg - A short stroke off the stem of the letterform.

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.

Terminal - Self-contained finish of a stroke without a serif.

・Basic / The font

Uppercase - Capital letters.(A,B,C,D,E)

Lowercase - Lowercase letters include the same characters. (a,b,c,d,e)

Small Capitals - Mainly found in serif style fonts and are often renamed as "the Expert Set".

Uppercase Numerals - Called lining figures.Same height as uppercase letters and are all set to the same kerning width.

Lowercase Numerals - Known as old style figures or text figures. Set to x-height with ascenders and descenders.

Italic - Most current fonts are created with their italic counterparts.

Punctuation, miscellaneous characters - Contain in all fonts.

Ornaments - Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Casion Pro).

・Basic / Describing typefaces

Roman - The name comes from an inscription on a Roman monument.

Italic - Named after 15th century Italian handwriting.

Boldface - Characterized by being thicker than Roman letters.

Light - A lighter stroke than the roman form.

Condense - A version of the roman form, and extremely condense style are often called "compressed".

Extended - An extended variation of a roman font.

・Basic / Comparing typefaces - This module uses the following 10 typefaces: These 10 typefaces represent 500 years of type design. Each typeface gives a different impression. It is important to understand these typefaces well and choose the right one to convey the message of your work.

Class Summary

Week1

Offline class. We learn what is the e-portfolios is and made a e-portfolios by using "Blogger".

Week2

Offline class. We got feed backs about the assignments from teachers. Examples like, what we need to add to sketches and what we need to write to e-portfolios.

Week3

Offline class. Teacher went the e-portfolio one by one and giving comments to our word sketches. We were also start to making Animation by using our sketches.

Week4

Offline class. We got the feedbacks for our word animation assignment and take watch the video explaining the type formatting. And also how to export pdf including base line.

---

INSTRUCTIONS:

Work (Week 1)

Show the word meaning by using sketches. We can choose 4 words from "Chaos, Spring, Dive, Bounce, Float, Crush".

Sketches (Week 1)

(I don't have any idea note)

Line1: Bounce

I sketched out an image of "Bounce" jumping around.

Line2: Chaos

The chaos was expressed by aiming at the edge of readable or unreadable, or by returning to the arrangement of letters.

Line3: Crush

The crash was represented by crushing, breaking, cracking, breaking the arrangement of the letters, and altering the letters themselves.

Line4: Dive

I thought of dives for various situations and expressed them.

Work (Week 2)

Post the each word sketches that I wrote last week to the Illustrator file that teacher specified in the class.

Work (Week 3)

Chose one sketch that you made and make an Animation by using illustrator.

(Animation timeline)

And I chose "Bounce". Up side picture is a photo of the contents of the animation I made.

(Animation of word "BOUNCE")

I created an animation in which letters bounce out, hit a wall, bounce again, and return to their normal position. If the letters were just bouncing normally, the animation would end after 6 frames, so I added the idea of ​​bouncing off the walls as well.

Work (Week4)

(Ideas)

The image below is what I actually made.

(1)

(2)

(3)

I made (1) using the dictionary as a reference. 

(2) was created with the image of a magazine in mind. 

For (3), I didn't have any particular reference and created it based on my own feelings.

I choose No.2 to submit. No.2's T1 and Ex2 is below.

 

FEED BACKS

For Week1: 
I need to put the search where did I get Ideas from to the e-portfolio. I need to sketch it so I can read the letters. Like "Chaos" I need to change the color of font and should be more easy to read. And then about "Dive" it is better to change the color of the part that covers the background of a different color.

For Week2: 

General Feedback - Do not change the shape of font. Just use the font and create the design is Typography. Changing color, change the color of back ground, tilt the letters and change the size, like these ways is allowed. And also about e-portfolio, I need to put some pictures from the video and write the lecture to e-portfolio.

Specific Feedback - None. I forgot to take notes.

For Week3:

General - If you write the idea to real paper, and then you want to put in to the e-portfolio you must to scan and put that data to the e-portfolio.

Special - I can put Illustrator editing screen to e-potfolio.

For Week4:

Special - Place text above baseline. If the columns change in the middle of a sentence, use a line break to change the beginning of the sentence to the beginning of the column. Make sure the image you are using is also above the baseline.

REFLECTIONS

Experience：I was struggling to keep up with the class, and I am not sure if I was able to absorb 100% of the class, but through the class I learned how to arrange letters in English text and the importance of letters.

Observation : In the typography class, I realized that the placement of letters is very important, as I learned that the placement of letters can dramatically change the readability of a text and the ease with which the message is conveyed.

Findings : After taking the typography class, I am now able to give a clear reason why I placed the text/characters where I used to place them by feel.

FURTHER READING

This book written to show some of Vignelli's style and approach. I can learn to reduce everything in your design to a simple form.