Typography Task 1

22.04.2024 - 20.05.2024 (Week 1 - Week 6)
Chengrui Lau / 0370930/ Bachelor of Creative Media
Typography
Design (Honours) Task 1 : Practice

LIST

1. Lectures

2. Instructions

3. Tasks

4. Feedback

5. Reflections

6. Further reading

---

Lectures

Week 1 / Introduction & Briefing

Typo_0_Eportfolio briefing

In the first week of the lecture, the teacher mainly taught us how to create our own blog, and the requirements and methods of uploading homework

Type_0_Introduction

After the class in the morning, I watched the video sent by the teacher and searched the information about typesetting on the Internet. Typography is the process of laying out and organizing text, images, and other elements when designing or editing documents, books, websites, and more. Good typography can enhance the readability and attractiveness of content, improve user experience and information delivery effect.In my opinion, a good layout should conform to the characteristics of the content and the needs of the target audience, so that the information can be clearly and accurately conveyed, and a good visual effect can be presented, so as to enhance the user experience and the attractiveness of the content.

Week 2 / Development

In this class, Mr. Vinod introduced us to printing. It began with the development of writing and recording methods, from engraving to handwriting, and finally to printing.

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

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

Later, the development of writing style is explained.

Finally, there is the classification of text types. 

Typo_3_Text P1

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

1.Kerning and letter spacing

· Letterspacing means to add space better lettrs.

 Kerning refers to the spacing between each character when printing text, used to adjust the spacing between characters and visual presentation. Line spacing refers to the vertical distance between each line of text. By adjusting the line spacing, you can control the tightness and overall beauty of the text.

2.Formatting text

· Flush left:

· Centerting

· Justified: Like centering , Centering refers to placing text or elements directly in the middle of a container or page, horizontally or vertically, to make it more visually balanced and beautiful. Careful attention to line breaks and hyphenation is required to amend this problem.

· Flush right: it's hard to read.

3.Texture

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: The text setting should pay attention to a certain gap, otherwise too tight will prompt vertical eye movement, typesetting too loose will create a bar pattern, distracting readers from the material at hand.

· Line Length: The right line length can affect the compactness and beauty of the text. Generally speaking, too long a line will make reading difficult, while too short a line may make the layout look intermittent. 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

· 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.

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

· 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

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）

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.

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 Numerals: Uppercase numerals refer to numbers or figures that are represented in a style similar to uppercase letters. This means that the numerals are displayed as larger, uppercase characters rather than the traditional, smaller figures.

· Lowercase Numerals: set to x-height with ascenders and descenders.
· Italic: refer back to fifteenth century Italian cursive handwriting.

· Punctuation, miscellaneous characters: miscellaneous characters can change from typeface to typeface.

· Ornaments: used as flourishes in invitations and certificates.

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

4. Comparing typefaces

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

In addition, there are many different places worth looking at. In addition to the obvious differences in x height, these forms also show a rich diversity in line thickness, etc.

 Typo_5_Understanding

1. Understanding letterforms

The uppercase letterforms below suggest symmetry, but in fact, it is not symmetrical.

The slope on the left looks thinner than the one on the right

2. Maintaining x-height

Curved strokes also have certain requirements, such as having to be above the median (or below the baseline) in order to appear the same size as their adjacent vertical and horizontal strokes.

3. Letters/Form/Counter

· Counterform4. Contrast

The design principle of contrast also applies to typography

instructions

Task1

Exercise1: Type expression
Lorem ipsum dolor sit amet， consectetur adipiscing elit. Curabitur in tortor lorem. Fusce blandit risus eros， aliquam suscipit tellus blandit nec. Vestibulum ut erat diam.

1.Sketches

                                        

                                         

2. Digitisation

 Animate Type Expression

I used DASH as my GIF design

The final effect exhibits an impact effect, expressed by the progression of the letters as a whole from near to far, and the progression of individual letters from large to small.

Exercise2:Text Formatting

Name design

I designed my name according to the teacher's requirements in class. After the first time, the teacher suggested that I could use different styles to make the design more unique, such as Roman font. After that, I followed the teacher's teaching and tried to adjust the distance between each word, and finally got this design draft.

Text Formatting




The first time I used id to design the text format, I first found some pictures from the Internet and learned them, and then tried them myself. During the design process, I often confused the values of kerning and line spacing, which made my text look not beautiful and neat. Fortunately, after repeated experiments, I finally finished the sketch

 Final layout

HEAD LINE

Font/s: Bembo Std
Type Size/s: 72 pt
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: 57
Alignment: left justified Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm

---

feedback

week1
General feedback: When I first came into contact with blogging, I felt to each other, such as centering or intersecting, and secondly, it was necessary to pay attention to distinguishing the color and size of images and text.
Week 2
General feedback
This week, we first reviewed the homework of last class. I also saw many other study realized my shortcomings and shortcomings. Then the teacher explained the usage of some AI software and asked us to practice it after class.
Week 3
General feedback
This week, the teacher told us more about the use of AI software, such as how to separate letters, how to make letters line up along curves and so on. At
the same time, it also made a new task requirement for us, that is, the AI design of the sketch, which I think is not easy, but also makes me more motivated to complete.
Week 4
General feedback
In the fourth week of study, the teacher first pointed shortcomings in last week's homework and helped me to revise it. Then, she introduced the process of making GIFs in detail. After class, I carried out video self-study and independent practice on
my own, and successfully completed the design of GIFs DASH. It is also full of challenges for me. I think the two softwares have certain similarities, so I can refer to them in the process of using.
Week 5
General feedback
In class this week, I came into contact with a new software id. For me, id is not so difficult to understand compared with the first time I came into contact with ai, perhaps because there are similarities between the two. However, it is still difficult to learn many tools when using id to complete homework, and homework is also full of challenges.

 Reflection

Experience

During this period of course learning, the course of typesetting taught me a lot, such as paying attention to the basic spacing of typesetting. Before that, I almost never thought that typesetting could be integrated into the design. In addition, I realized that besides the content in the teacher's class, extracurricular reading is also an important way to acquire more knowledge of typesetting

Observations

In these weeks of preliminary study, I found that there are actually many ways to typeset, but they cannot be separated from the key factor of beauty. For example, the teacher said in the lecture about the size of letters typesetting, as well as the thickness and so on, which serve our typesetting interface and make it more beautiful.

Secondly, in my homework over the past few weeks, I have found that small differences will also affect the integrity of the overall layout. What is different from others is that I seem to be more inclined to achieve uniqueness by adjusting the arrangement of each element.

Findings
As far as I'm concerned, typography is a process of exploration and creation. I can constantly experiment with new typography schemes by adjusting elements such as fonts, spacing, alignment, etc., and discover different visuals and expressions. The application of typography is not only a single letter or a paragraph of text. I prefer to use different typography techniques to adapt to the aesthetics of different people. The most important thing is that I can also share my design works with others, listen to their feedback and exchange experience with them.

 

Further reading

After reading Vignelli Canon on Design, I was deeply inspired. This book is not just a design manual, but more like a handbook of design philosophy. 

 

I was impressed by the book's emphasis on basic design principles such as simplicity, clarity, and consistency. By exploring these principles in depth, the book reveals the essence of design: solving problems, communicating information, and guiding users. These principles apply not only to graphic design, but also to product design, space design, and other areas of design.

 

Overall, the Vignelli Canon on Design is a very valuable design read. It not only provided me with valuable design guidance, but also inspired me to think deeply about design, and I believe that this book will have a profound impact on my design path.