Typography Task 1 / Exercises 1&2

 4 . 4 . 2023 / Week 01 - Week 06

LI YANXI ( 0361436 )

Bachelor of Design In Creative Media

Task 1 / Exercises 1&2

                                                                                                                                                                      

LECTURES

• Week 1 - Lecture 1 (03.04.2023)

Mr Vinod introduce the Typography to us  and on the lecture 1, he briefed us with the modules that we need in this semester  . Also told us how to create a great blog . Mr Vinod let us to watch the Lecture video to understand better, so that we can start and doing our best work !

Typo_0_Introduction.

Typography is the creation of typefaces or type families, It is also animation, visible and prevalent in website designs, app disigns and so on. It's not just the text that you see.  Typography has evolved for about 500 years, from calligraphy to lettering and finally evolved to typography.

And i learnt the difference from font and typeface . 

• Font    refers to individual font or weight within a typeface. 

Eg -  Georgia Regular, Georgia Italic, Georgia Bold

• Typeface   refers to the various families that do not share characteristics. 

Eg -  Georgia, Arial, Helvetica, Times New Roman, Didot, Comic Sans, Futura

• Week 2 - Lecture 2 (11.04.2023)

In this week, Mr. Vinod checked our sketches and gave us feedback. He told us do not to use the graphical ways because we need to use the Typfaces, it's challenges but i like it . In this week , we should finish the final work of Exercise 1 for Type expression .

Typo_1_Development/Timeline

• Early letterform development: Phoenician to Roman

They use sharpened stick to scratching into wet clay or they type on the stone.

And they only use uppercase letterforms .Like this 👇

type on the stone

• Then the Greeks changed the direction of writing .

Greeks developed the style of writing called 'boustrophedon' (how the ox ploughs).

'boustrophedon'

• Blackletter to Gutenberg's type

With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. 

1. Textura is a condensed and strongly vertical letterform, popular in northern Europe.
2. Rotunda is a rounder and more open-handed letterform, popular in southern Europe.

blackletter

• Week 3 - Lecture 3 (18.04.2023)

This week Mr.Vinod introduced the Ture ways to use the E-portfolio and gave me feedback to my homework and need us to change the mistake.

Then let us to going to watching the animation reacording video and to keeping continue our new work.

Typo_3_Text_P1

• Tracking: Kerning and Letterspacing

The automatic adjustment of space between individual letterforms. Kerning is usually adjusted in headlines. 

                                                                                               Kerning

Without kerning and with kerning

The addition and removal of space in a word or a sentence. It is usually adjusted in large paragraphs of text.

Tracking

Normal tracking, tight tracking and loose tracking

loose tracking use in headlines but in uppercase letterforms .

• Formatting Text (Alignment)

Flush left is the most natural text formatting that closely mirrors the asymmetrical experience of handwriting. 

Centered imposes symmetry upon the text, assigning equal value and weight to both ends of any line.

Flush left

• Texture

It is important to consider the different textures of the typefaces.

The differences in gray values can be seen in different typefaces. A typeface with a middle gray value would be the best in a particular layout.

Different typefaces show the different gray values

• Type Specimen Book

A type specimen book shows samples of typefaces in various different sizes. 

It is often useful to enlarge the type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

• Week 4 - Lecture 4 (25.04.2023)

This week Mr vinod introduced the exercise 2 of formatting. And give us feedback of type expression.So in this week we need to doing the formatting.

Mr vinod let us to watch the Youtube videos of Text P1&Text P2 to doing the work.

Typo_2_Basic

• Describing letterforms

Baseline: the imaginary line at the 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 two diagonal stems
Arm: short strokes off the stem of the letterform (horizontal: E, F, L; 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 the same horizontal arms
Bowl: the rounded form that describes a counter
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 store extending out from the main stem or body of the 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 en is half the size of an em
Finial: the rounded non-serif terminal to a stroke
Leg: short stroke off the stem of the letterform (at the bottom: L; 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: the bowl created in the descender of the lowercase G (in some typefaces)
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 that articulated 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
Tail: the curved diagonal stroke at the finish of certain letterforms
Terminal: the self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop 

• The Font

Small Capitals  uppercase letterforms drawn to the x-height of the typeface
Uppercase and Lowercase

• Describing typefaces

Different typefaces and their relative stroke widths typefaces

Roman: an uppercase form that is derived from inscriptions of Roman monuments 
Book: lighter stroke in roman
Italic: based on the fifteenth century Italian handwriting 
Oblique: based on a roman form of a typeface
Boldface: thicker stroke than a roman form 
Semibold, Medium, Poster, Black
Light: lighter stroke than the roman form
Thin: even lighter strokes
Condense: a condensed version of the roman form
Compressed: extremely condense styles
Extended: extended variation of a roman form

Describing typefaces

Comparing typefaces

We need to use the 10 typefaces below throughout this module. 

These 10 typefaces represent 500 years of type design. Each typeface gives different feelings, it is important for us to understand these typefaces well and choose the right typeface for conveying messages in a particular work.

• Week 5 - Lecture 5 (02.05.2023)

 In this week , we need to compelte the final Task 1 and start to doing the Task 2 . I got the feedback for my Task 1 Fianl work.I need to change lots of things to make it better.

Typo_4_Text_Part 2

•  Indicating Paragraphs

A holdover from medieval manuscripts seldom use today. It is one of the hidden characters or blue indicators that helps in formatting large amounts of text.

• Line space

Paragraph space should be the same as the line space to ensure cross-alignment across columns of text.

It is the space from the baseline of a sentence to the descender of the next sentence.

• Indentation

Standard indentation is the indentation of the first line in a paragraph, the ident is the same size of the line spacing or the same as the point size of the text.

• Headline within Text

There are many kinds of subdivisions within the text of a chapter. The following visuals have been labelled (A, B and C) according to the level of importance.

A head indicates a clear break between the topics within a section. 

B heads are subordinate to A heads, they indicate a new supporting argument or example for the topic at hand.

C head highlights specific facets of material within B head text. C heads in this configuration are followed by at least an em space for visual separation. 

Cross Alignment

Cross-aligning headlines and captions with text type reinforce the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms. In some cases, cross-align can be maintained by doubling the leading space of the text type to be used as the leading of the headline type. 

Cross alignment

Typo_5_Understanding

• Understanding letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical. The asymmetrical letterforms below are both internally harmonious and individually expressive.

Baskerville stroke form: two different stroke weights can be easily seen

Univers stroke form: a close examination shows that the width of the left slope is thinner than the right stroke

left: Baskerville - right: Univers 

Maintaining x-height

X-height generally describes the size of the lowercase letterforms. Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Lowercase maintaining x-height

Contrast

Typo_6_Screen&Print  (16.05.2023) 

• Typography in different medium

In the past, typography was viewed as living only when it reached paper. No changes were made once a publication was edited, typeset and printed. Today, typography exists not only on paper but on a multitude of screens.

• Print Type - Screen Type

PRINT TYPE:

The type was designed intended for reading from print long before we read from a screen. Designers should ensure the text is smooth, flowing and pleasant to read.

Print type

SCREEN TYPE:

Typefaces intended for use on the web are optimized and often modifies to enhance readability and performance on-screen in a variety of digital environments. 

Screen type

• Static - Motion

Static Typography

Static typography is not limited to minimal characteristics such as bold and italic in expressing words. It can also create movements and motions in a dynamic way.

Static typography

Motion Typography

Motion typography is introduced around since the 1960s when feature films started using animated opening titles instead of static text. 

                                                                                                                                                                      

INSTRUCTIONS

TASK 1: Exercise 1 - Type Expression

- we need to Sketch a minimum of 4 word expression consisting of 3 ideas each in this week.  

So I choose 4 words from 7 words - Rain, Fire, Crush, Water, Dissipate, Freedom, Sick 

Here are the words that about what i choose :

• CRUSH
• FREEDOM
• DISSIPATE
• SICK 

1. Sketches:

    Type expression sketches-Week 2-11.4.2023

1.Crush : 

When i saw crush, i was thought two ways to express-one is about love and one it's the normal thing.

So i drawing some ways to express the CRUSH.

2.Freedom : 

Mr.Vinods taught me that i can't use the graphical ways, so no.2 can't be allow. And i use the break way because it's Freedom.

3.Sick : 

This is the normal way i use, to make it weak that look Sick.

4.Dissipate : 

I use the disappear way , to make it more "Dissipate".

                                                                  

 Task 1 - Exercise 1: Type Expressions

 Type expression sketch (JEPG)-Week 2-17.4.2023

Mr.Vinod said i need to change something, so i started to do something change in my 

final type expression.

One of sketch of SICK  -22.04.2023

Final Exercises 1 - Type expression . JPEG - 22.04.2023

Final Exercises 1 - Type expression . PDF

This is the final work of Type expression.👆

Final Exercise 1 Type expression animation 25.04.2023

The Exercises 1 include the Type expression Animation,this is the final of Freedom.😂😂😂

                                                                                             

TASK 1: Exercise 2 - Text Formatting

In week 4 , we need to doing the text formatting , and i started to doing it with InDesign.

sketch.02.05.2023

I asking Mr vinod , he said it's not good for the lightly and the topline. And  i changed a lot.

sketch of type formatting 05.02.2023

I move the head line make it more better-sketch 02.05.2023

-------

Final type formatting . JPEG 02.05.2023

Final type formatting . PDF 16.05.2023

Final type formatting line . JEPG 16.05.2023

Final type formatting  with line . PDF 16.05.2023

                                                                         

Feedback

👇

Week 2

Type Expression Sketches

General Feedback: Use too much graphical, try to use typefaces.

Specific Feedback: Sir taught me for "Sick" i can't use too twisted but focus on "I" it's ok. And the word "Dissipate" can use the way that i use . For "Freedom", I can just open one word it's ok.

Week 3

Type Expression

Specific Feedback:  For the 4 WORDS: The C with Crush it's too much,don't be too graphical.Freedom don't have to fly away with top,just 2 or 3 words fly it's ok.And the I with Sick it's wired,so need to change. Dissipate 's D should change to small size,and don't let them fly away too much,keep line.

Week 4

Type Expression Animation

General feedback: My final work doesn't work. Specific feedback: My work it's too simple and doesn't show what's the meaning.Have to change.And i doing a new work of freedom, it's nice

Week 5

Type formatting

General feedback: The final work have something problems. Specific feedback: Use 5mm/7mm,Don't easily use italics lightly.Healine can be on top and get more space for bottom.The image can be more big and don't need space for the right side.

Reflection

Experience

When I first came into contact with the course of typography, I found it difficult. I didn‘t know how to understand typography. From the first class to the fifth class, through the teacher's explanation and feedback, I got a better understanding of the use and meaning of typesetting.

Observation

After observing Mr.Vinod's classroom demonstrations, classroom exercises, feedback and recorded lessons, I saw more possibilities and rules of fonts.

Findings

Through Mr.Vinod's interpretation in class, the demonstration in recording class, and my exercises and sketches after class, I found that fonts can also follow the rules of elements and forms. Not consistent repetition, but each has its own form. Let me discover more ways to make fonts

FURTHER READINGS

Typographic design: Form and communication 

35pg.

This page introduces some types of fonts, which I find more interesting.

It lets me know the different classification of each English character and the expression of its elements.