TYPOGRAPHY TASK 1

22/4/2024-17/5/2024 (Week 1-6)

Liu Yitong/0370907

TASK 1 /Type Expression

Typography / Bachelor of Creative Media Design / Taylors University

LIST

1. Lectures

2. Instructions

3. Tasks

4. Feedback

5. Reflection

6. Further reading

LECTURES

Week 1 :

Typo_0_Eportfolio briefing

In this lecture, the instructor showed us how to create an electron A portfolio and how to use it to complete and submit our homework. at In addition, we learned some HTML skills, such as how to draw division lines and insert files.

Type_0_Introduction

After the typography class in the morning, I watched the lecture video (Type 0 Intro), which gave me a deep understanding of typography. Typography is It is basically the creation of fonts, which are widely used in animation, Software applications, websites, product labels, signage systems, etc. As a result, typography plays an important role in many aspects of life. font is a design of a set of characters. Font refers to: Font family. For example, Georgia is a font and Georgia Bold is one Font.

Typo_1_Development

In this lecture, after the briefing, Mr. Vinod gave us an introduction Typography. Start with the development of writing and recording methods From engraving to handwriting and finally to printing. typography After about 500 years of evolution, it has been readable, aesthetically pleasing, Simplicity evolves over time. This also hints at the importance of typography In many ways.

Before the advent of printing, initially, used Words are just sharp sticks and clay, or chisels and stones. this The letters are also simple.

Figure 1.0 Development of early letter forms

Later, the Greeks changed the direction of their writing and invented a style Writing is called an "ox plow".

Figure 1.1 "Ox Plow"

Etruscan carvers wrote in marble, adding weight variations Vertical to horizontal.

figure1.2 Etruscan carves working in marble

Later, the development of writing style is explained. Between the 3rd-10th centuries AD. Then, Mr. Vinod also explained to us the development of bold characters.

Finally, there is the classification of text types. From 1450 Blackletter to 1990 Serif/Sans Serif.

figure1.3 Text type classification

Typo_3_Text P1

In this lecture, Mr. Vinod explained to us some tips on how to use Id

1.Kerning and letter spacing

Figure. 1.4 Kerning and letterspacing

· Letterspacing means to add space better lettrs.

Figure. 1.5 Normal tracking

The assition and removal of space in a world or sentence is referred to as "tracking".

· Kerning is to automatically adjust the spacing between letters, The space of + or - is called a trace.

2.Formatting text

Figure.1.6 Flush left

· Flush left: Each line starts at the same point and ends accordingly in its last sentence. Spaces are consistent throughout the text, allowing typing to create uniform gray values.

Figure.1.7Centerting

· Centerting: Giving equal weight and values to both ends of any line.It's important to amend line breaks so that the text does not appear too jagged.

Figure.1.8Justified

· Justified: Like centering , it applies symmetry , Imposes symmetrical shape on the text, achieved by expanding or reducing spaces between words and, sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenation is required to amend this problem.

Figure.1.9Flush right

· Flush right: it's hard to read.

3.Texture

Figure. 1.10 Anatomy of a typeface

If the ascender and descender height is smaller than x-height, there is higher readability.

4.Leading and line length

· Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

· Leading: Text that is set too tightly encourages vertical eye movement;a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

· Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading;longer lines more. A good rule of thumb is to keep line iength between 55-65 characters. Extremely long or short lines lengths impairs reading.

Typo_3_Text P2

1. Indicating Paragraphs

· Pilcrow: A holdover from the medieval manuscripts.

Figure. 1.11 line space

· Line space: The image above shows the "line space". The line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.

Figure. 1.12 line space vs leading

There is a difference between line space and leading, and don't confuse it.

Figure. 1.13 standard indentation

· Indentation: the example here displays the standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text.

2. Widows & Orphans

Figure. 1.14 Widow and Orphan

Widows are acceptable in exceptional cases , for example in flush left, but orphans are unpardonable.

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

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

*If this is the case, you can adjust the letter spacing or kerning. But not more than three times.

3. Highlighting Text

If you want to highlight a portion of a large amount of text, you can make it italics, bold, bold + changing the typeface.Changing the font color is also an option.（However, yellow is not recommended）

Figure .1.15 Highlighting text

note: san-serifs often look larger than serifs.

Other ways of highlighting the text is by placing a field of colour at the back of the text.(Also take note, when highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis(right example) of the text ensures readability is at its best.)

4. Headline within Text

There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled(A, B and C) according to the level of importance.

Figure. 1.16 Headline within Text

5.Cross Alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.

Typo_2_Basic

1.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 (see finial)

2. The font

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

· Uppercase and Lowercase

· Small capitals: uppercase letterforms drawn to the x-height of the typeface.

Figure. 1.17 Small capitals（Top）

· Uppercase Numerals: same height as uppercase letters and are all set to the same kerning width.(note: used with tabular material or calls for uppercase letters.)

· Lowercase Numerals: set to x-height with ascenders and descenders.(note: used with upper and lowercase letterforms.)

Figure. 1.18 Uppercase(top) and Lowercase

· Italic: refer back to fifteenth century Italian cursive handwriting.(note: oblique are typically based on the roman form of the typeface.)

· Punctuation, miscellaneous characters: miscellaneous characters can change from typeface to typeface.(It is important to ensure that all the characters are available in a typeface before choosing the appropriate type.)

Figure. 1.19 Punctuation, miscellaneous characters

· Ornaments: used as flourishes in invitations and certificates.

Figure. 1.20 Ornaments

3. Describing typefaces

· Roman: The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments.

· Italic: Named for fifteenth century Italian handwriting on which the forms are based.

Oblique conversely are based on roman form of typeface.

· Boldface: thicker stroke than a roman form.

It can be called Semibold, Medium,Black,extra bold,or super(Depending upon the relitive stroke widths within the typeface)

· Light: lighter stroke than the roman form

· Condense: a condensed version of the roman form

· Compressed: extremely condense styles

· Extended: extended variation of a roman form

Figure. 1.21 Describing typefaces

4. Comparing typefaces

10 most essential typefaces that represent 500 years of type design:

Figure. 1.22 10 most essential typefaces

What is worth noting isn't the similarities but rather the differencesthe.Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling.

Typo_5_Understanding

1. Understanding letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical.(more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc).

Fig.1.23 Baskerville 'A'

A close examination shows that the width of the left slope is thinner than the right stroke.

Fig.1.24 Univers 'A'

The intricacies of each individual letter form are neatly demonstrated by examining two seemingly lowercase "a" similar sans-serif fonts – Helvetica and Univers.

2. Maintaining x-height

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.

Fig.1.26 Maintaining x-height

3. Letters/Form/Counter

· Counterform (or counter)—the space describes, and often contained, by the strokes of the form.How well you handle the counters when you set type determines how easily we can read what's been set.

Fig.1.27 Form and Counter

4. Contrast

The design principle of Contrast is also applied in typography. The simple contrasts produces numerous variations: small+organic/large+machined;small+dark/large light.

Fig.1.28 Contrast

INSTRUCTIONS

TASK

Exercise1: Type Expression

For the first task, we were asked to choose 4 words to compose and express. Come up with a sketch of these 4 words.

We were given 7 words to pick form and the words I choose are open，swing，time and spark.

1. Sketches

Before using Adobe Illustrator, we needed to sketch it out and put it on paper.

Figure 2.0 Sketches

DASH: Based on the original meaning of Dash, I made some designs to try to make it look like it could move.

OPEN: Open's design relies on its original meaning, wanting to make it feel like an object is pouring out of an open box.

TIME: The word Time reminds me of clocks, line charts, and calendars, so I designed the font with these three elements.

SWING: The word Swing reminds me of swings and curves, so the first two designs were created, and the third was meant to express its wobbly dynamics.

SPARK: Spark reminded me of fireworks sticks, so I used them as a prototype font.

2. Digitisation

Figure 2.1 Progress screenshot

During the digitization process, I tried to find the most suitable font for each word.

For DASH, I gave both A and S a dynamic image to represent the rush out of D, and H was used as the finish line.

I had a hard time figuring out how to make the Spark sketch look more readable, so I ended up changing the direction of the fireworks stick and using the small Spark as a spark.

Figure 2.2 Final Type Expression - JPEG

The two open shapes in the sketch are with design, so I changed one of them to an open one Door.

Figure 2.4 Final Type Expression (PDF)

3. Animate Type Expression

The task 2 given was to animate one of the type expression.I deside to use the OPEN.

Fig 2.5 Process in AI

Fig.2.6 Process in PS

I tried my best to make it look smooth, but it still looked a little stuttery in the end.

The final product is down below.

Fig.2.7 GIF OPEN

Exercise 2: Text Formatting

1. Kerning and Tracking

We were assigned to write our names in In Design using the preovided 10 fonts.We are allowed to use different fonts and type sizes in a typeface.

Fig.2.8 Text formatting with kerning

Fig.2.9 Text formatting without kerning

2.Layouts
Then, following the tutorials and text provided, I started working on InDesign.

Fig.2.10 Process in Id

After adjusting the technicalities, I explored different layouts:

Fig.2.11 Layouts

Final Text Formatting Layout

Finally, Mr. Max Goh Wei Lok suggested that I choose the first layout.

Fig.2.12 Final Text Formatting

Fig.2.13 Final Text Formatting

Fig.2.14 Final Text Formatting (PDF)

HEAD LINE

Font/s: Bembo Std

Type Size/s: 72 pt/30pt

Leading: 36 pt

Paragraph spacing: 0

BODY

Font/s: Bembo Std

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 55

Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

FEEDBACK

Week 1:

· General feedback: We set up a new blog and know how to use it to get it done Task. And be able to tag articles and copy links to fill in Feedback form

Week 2:

· General feedback: To refine the form of personal information, Download the font and learn the basic operation of AI. this Some of the sketches were sifted and commented on by the instructor.

· Specific feedback: There is a sketch in DASH, very creative, But TIME contains too much GRAPHIC CONTENT. SPARK creativity is good, but find a way to make it more readable, The meaning of the word OPEN is not well reflected, and the meaning of SWING's . The sketch design is not accurate enough, except for one sketch.

Week3:

· General feedback:In this class, I learned a lot about the use of AI skills for completing vocabulary design.For example, how to use two different selection tools and create outlines to turn fonts into graphic formats.This helped me a lot in next design.

· Specific feedback:It is a nice design to turn the OPEN into the shape of a door with minimal distortion.As for DASH, I changed the direction of the letters A and S at the teacher's request to make it look neater and more readable.The word spark is well designed, and the reflection was removed to make it neater as suggested by the instructor.Swing removes the extra horizontal lines.

Week 4:

· General feedback:In this lesson, we learned a lot of techniques for animating font design,I briefly learned some knowledge of PS doing frame-by-frame animation.

· Specific feedback:The word OPEN was chosen for the animation, and I intended it to give the effect of a door gradually opening.

Week 5:

· General feedback:This lesson, We following the tutorials and text provided, started working on InDesign.This week we briefly learned a lot of tips about using In Design and will be using different fonts for simple typography!

· Specific feedback:Finally, Mr. Max Goh Wei Lok suggested that I could choose the first layout, and made a submission request.

REFLECTION

Experience

Overall, I would say that my experience throughout Task 1 was enjoyable and enlightening.In the first exercise, I learned how to digitize and animate words using Ai and Ps, which I found very interesting! Although there were some limitations, we were still able to exercise a great deal of freedom to use our own interpretations to express the word in a myriad of ways. However, it was challenging to come up with distinctive and unique designs because we were all expressing the same word.The second exercise is more restrictive than the first but quite a bit simpler, which helped me a lot for my first time using In Design!

Observations

My observation is that text formatting is slightly more difficult for me, and it took me longer to understand the rules of typography and how to use the software for the first time with Id, but the good thing is that I overcame this challenge to make the work!

Findings

Adoption of Task 1，I found typography to be a very enlightening course that gave me the ability to better express the meaning of words visually. Before this I was also unaware of the technical details of typography and just followed my personal feelings, now I realize that there are many rules to follow in typography as well, and the second task in particular has been a great experience for me. This has helped me a lot in understanding typography.

LIUYITONG(0370907)

Search This Blog

TYPOGRAPHY TASK 1

Comments

Post a Comment