Typography - Task 1: Exercise 1&2

April 03, 2023

Typography - Task 1: Exercise 1&2

4/4/2023 -11/7/2023 / Week1- Week6
Zhao Guan Mei /0363166
Typography / Bachelor of Design (Hons) in Creative Media
Task 1: Exercise 1 & 2

TYPOGRAPHY-TASK 1

Title:

LECTURE

Week 1:Introduction and Briefing

Typography: Typography is applied in animation, application design, web design and signs. It involves choose typefaces, point sizes, line lengths, line-spacing, and letter-spacing, and adjusting the space between pairs of letters.

Font: Font is a specific style of a typeface, weight within a typeface.

Ex. Arial Bold , Arial Italic, Arial regular.

Typeface: A typeface is a collection of fonts, Each typeface have different characteristics and styles.

Ex. Arial , Futura , Georgia

Fig. 1.1-1.2 Example of Font and Typeface (W1:05-04-2023)

Week 2:Development

1.Early letterform development

Phoenician: Uppercase letterforms are a combination of straight lines and pieces of circles .Initially writing on wet clay ,tool is sharpened stick.

Greek: developed a style of writing-‘boustrophedon’(how the ox ploughs) and changed the orientation of the letterforms:

Fig. 2.1 example of “Greek letterforms”(W2:09-04-2023)

Roman: marble painted letterforms before inscribing them.

Fig. 2.2timeline graphic of letterforms(W2:09-04-2023)

Hand script from 3rd – 10th century C.E.

Square capitals : composed of serifs added to the finish of main strokes.(reed pen angle 60°)
Rustic capitals: compressed version of square capitals , allowed for twice as many words on a sheet of parchment, took far less time to write. (pen or brush angle 30°)
Both square and rustic capitals, written in a cursive hand, simplified for speed.
Unicials: Small letters that are one inch high.
Further formalization of the cursive hand.
Charlemagne (the first unifier of Europe since the Romans)

Week 2: Text Part 1

Kerning: The adjustment of space between the letters.

Letter spacing: Adding of spaces between the letters.

Tracking: The addition and red uce of space in a word or sentence.

Normal tracking(stranded space), loose tracking(excessive), and light tracking(minimal space).

Formatting Text

Flush Left
Flush Right
Centered
Justified
Texture

-Different typefaces allow different texture on a page which aids in the overall presentation layout.
-Typefaces with heavy strokes give a darker mass on a page

Leading and Line Length

Type size : The size of a typeface must be larger to be readable at an arms length. readable at an arms length.

Leading : The space between lines in a paragraph.
Loose leading: Create striped patterns that distract the reader from material. Tight leading: vertical eye movement text set too loosely

Line Length : The length of each line in a paragraph. Excessive or minimal line length impairs the readability of a page. Rule of thumb: 35-65 characters

Week 3:Taxt Part 2

Indicating paragraphs

Fig. 3.1-3.4 examples for indicate paragraphs (W2:10-0402023)

Window and Orphans

A widow is a short line of type left alone at the end of a column of text.

-To solve: rebreaking line endings throughout the paragraph.

An orphan is a short line of type left alone at the start of new column.

Highlighting Text

Ways to highlight text:

-change text Color

-change text background

-Placement of a field of colour at the back of text

Headline within Text

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

B head: Indicates a new supporting argument and does not interrupt a head.

C head: Highlight specific facets of material within B head text.

Fig.3.5 types of headlines (W2:10-0402023)

Week 4: Basic

Describing Letterforms

Baseline: The visual base of the letterforms.
Median: 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. (apex above and vertex below)
Arm: Short strokes 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.
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 form that projects below the baseline.
Ear: The stroke extending out from the main stem or body of the letter form.
Em: Refering to the width of an uppercase M. Distance equal to the size of the typeface.
En: Half the size of an em. Describe em/en spaces and dashes.
Finial: The rounded non-serif terminal to a stroke.
Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K, R).
Ligature: The character formed by the combination of two or more letterforms.
Loop: In some typefaces, the bowl is created in the descender of the lowercase G.
Serif: 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.
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 stroke without a serif.

The Font

Uppercase & Lowercase
Small Capitals
Uppercase & Lowercase Numerals
Italic & Roman
Punctuation & Miscellaneous Characters
Ornaments

Describing Typefaces

Roman
Italic
Boldface
Light
Condense
Extended

Comparing 10 Typefaces

Week 5: C Letters / Understanding letterforms

The uppercase letter forms not symmetrical.each bracket connecting the serif to the stem has a unique arc （Baskerville）the width of the left slope is thinner than the right stroke.

Fig. 5.1 example of two different stroke weights of the Baskerville stroke form (W4:18-06-2023)

To examining the lowercase ‘a’ of two seemingly similar typefaces—Helvetica and Univers . A comparison of how the stems of the letterforms finish and how the bowls meet the stems reveals the difference in character between the two:

Fig. 5.2 example of letter "a" (W4:18-06-2023)

x-height: the size of the lowercase letterforms. The letter ‘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.

counter form (or counter):the space describes, and often contained,m by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them.

Fig. 5.3 Median and Baseline (W4:18-06-2023)

Fig. 5.4 Contrast (W4:18-06-2023)

Week 6 :Text Formatting-step

1. Margins and Columns

Fig. 6.1 Margins and Columns (W5:30-04-2023)

2.paste the text and choose font "Bodoni Std Book"

Fig. 6.2 font choose (W5:30-04-2023)

3.change the font size to ensure the number of characters between 55-65

Fig. 6.3 font size (W5:30-04-2023)

4. leading& space between the line

Fig.6.4leading (W5:30-04-2023)

Fig. 6.5 space after (W5:30-04-2023)

5.place image, change margin

6. use plus sign move the exceed text to right

Fig. 6.6 process of changing (W5:30-04-2023)

7. kerning

Fig. 6.7 kerning (W5:30-04-2023)

8.Baseline:

Fig. 6.8 -adjust baseline grids (W5:30-04-2023)

INSTRUCTIONS

.

Task 1: Exercises - Type Expression

In task 1 ,we I have to choose four words out of six to make expression: shatter, dance, throw and melt. We have to create3-4 sketches for each word.

-Sketches:

Fig6.1 -Fig6.4 Type expression sketches(W2:10-04-2023)

- Digital sketches

SHATTER:

Fig. 6.5-6.6 The Design process for the word "SHATTER",（W2:13-04-2023)

In the word "shatter" I used font Futura Std. Extra Blod ,then I used the Line tool to split the letters to create "shatter" effect. DANCE:

Fig. 6.7-6.8The Design process for the word "DANCE",（W2:13-04-2023)

In the word "dance" I used font Bodini Std. Poster and slightly move the perspective of the words and place.

THROW:

Fig. 6.9-7.0 The Design process for the word "THROW",（W2:13-04-2023)

In the word "throw" I used font" Univers LT Std. 55 Roman" and adjust size and angle of each letter, then used the curvature tool to adjust the outline of each letter.

MELT:

Fig. 7.1-7.2 The Design process for the word "MELT",（W2:13-04-2023)

In the word "melt" I used font "Bodoni Std. Blod",I rearranged the letters and used the curvature tool to adjust the outline of each letter.

-Final outcome:

Fig. 7.3 Final design of type expression- JPEG.（W2:15-04-2023)

Final design of type expression- PDF.（W2:15-04-2023)

-Animation

Turning the type expression into an animation use AI&PS

In this assignment we have to choose one of the digitalized words and animate it, The word I choose "dance"

Fig 8.1 Process of animation animation in AI, Week 3(20/4/2023)

Fig. 8.2 font animation in photoshop, Week 3(20/4/2023)

Fig. 8.3 first attempt of the animation "dance" in gif. form , Week 3(20/4/2023)

The animation was too fast, needed a few more frames to make it look smoother, and needed to make the animation feel a little more "dance".

Final design of animation "dance"-gif

TASK 2:

FORMATTING TEXT

Fig. 9.0 Process of formatting text (W5:29-04-2023)

Based on the lecture video, I have learned tracking and kerning and adjusted my name using Adobe Indesign.

Fig. 9.1 tracking and kerning exercise (W5:29-04-2023)

Layout Exercise:

In this task I following the instructional video, paste text, select fonts, adjust the page margin and columns, and change the font size and column size

Fig. 9.2-9.4 process of layout exercise (W5:30-04-2023)

Then use plus sign move the exceed text to right, adjust the baseline and let the text align on the baseline

Fig. 9.5-9.6 process of layout exercise (W5:30-04-2023)

I have create 2 different layout design, I used align left on the body paragraph as well as adjusted the kerning and tracking to reduce hyphenation.

Fig. 9.5-9.6 sketches of layout exercise (W5:30-04-2023)

Final out come:

Font: Bodoni Std Book and Poster

Font size :36(heading),10(body)

Leading:22(heading),11(body)

Characters per-line:61

Alignment: align left

Fig. 9.7 Final Text Formatting of layout exercise (W5:30-04-2023)

Final Text Formatting of layout exercise-PDF (W5:30-04-2023)

Fig. 9.7Final Text Formatting of layout exercise -with baseline(W5:30-04-2023)

Final Text Formatting of layout exercise-PDF with baseline (W5:30-04-2023)

FEEDBACK

Week 2:
General Feedback: Mr. Vinod gave some feedbacks according to our sketches: We should express the characteristics of each word more directly without adding too much painting. Encourage us come up with more ideals and make different sketches ,minimize graphic elements to highlight the character of the font.

Specific Feedback: For my sketches ,it need to be related to the words to express the characteristics of these words, like the word "shatter" need to avoid design like "break".

Week 3:

General Feedback: Mr. Vinod demonstrated what tools we can use and how to use it better(use shortcut keys),and give some suggestions let us to adjust our sketches.

Specific Feedback: Everyone's drafts are good, but there are some words in the design will have a common idea ,such as the word "MELT" ,we have to find our own characteristics in concise design.

Week 4:

General Feedback: In the end of GIF can have some pause can make it smoother .

Specific Feedback: Can make more frame and let the word changes are more obvious and smooth,try to let the word "dance" more active.

Week 5:

General Feedback: The ideal font size for handheld reading is between 8-12pt,and the pictures can find something more suitable.

Specific Feedback: font siar too small will degrate the readability of the text, cline length can be shorten.

Week 6:

general feedback :focus on the expression then layout, don't make too much elements.

specific feedback: headline design should focus on the meaning andreduce the use of graphic elements ,choose a suitable font.

REFLECTIONS

Experience: I thought it was very difficult to understand font typesetting for the first time. I felt that there would be no variety of changes without color, and I did not have the habit of drawing drafts. Moreover, it would be slower for me to draw with Adobe illustrator, so I had to spend a lot of time on drawing drafts and finishing them.

Observations: We all start with drawing on the computer and then we get more and more familiar with it and we learn to use more elements and more tools, and we have to learn to distinguish what is good looking, and check our own work.

Findings: Drawing sketches and recording ideas are important, we can exchange our works with friends and discuss what can we improve, more practice can let us use the design platform more effective.

Search This Blog

ZHAO GUANMEI (0363166)