Typographical -Task 1-Exercise1&2

Monday, April 22, 2024

Time Frame Week 1 22 /04/2024 - Week 6 28/05/2024

Deadline week 06

Huang Jiaqi/0371553

Bachelor of Typesetting/Creative Media Design

---

       

List

1. MIB

2.Lecture

Lecture 1-Typo_0: Introduction

Lecture 2 - Typo_1: Development

Lecture 3-Typo_3: Text_P1

Lecture 4: Text (Part 2)

Lecture 5: - Typo_4_Basic

Lecture 6: Typo-5 - Understanding

Lecture 7: Typoo-6-Screen&Print

3. Practice

Task 1: Practice - Font DesignAnimated fonts

Task 1: Practice - Text exercise

4. Feedback (Week 1-Week 6)

5. Repercussion

6. Further reading

---

       1. MIB

Module information manual

2. LECTURES

All lectures are completed here.

Lecture 1: Typo_0_Introduction

In Mr. Vinod's speech, he introduced us to the importance of typesetting. Typesetting is not only visible in our daily life, but also suitable for various fields such as animation, application design, web design and signage. It has been developing for about 500 years, transitioning from calligraphy and engraving to modern typesetting. It is the basic aspect of any design research, including the creation of fonts and font series, and the art and technology of arranging fonts to ensure the clarity, readability and attractiveness of the written language display. Typesetting involves a series of terms and conventions that are not written rules, which may vary according to the influence of our personality or style. This is not only about how we show ourselves and information, but also about effective communication. Anyone who participates in arranging words, letters, numbers and symbols for publication, display or distribution needs to practice typesetting skills. Before the digital era, typesetting was a professional field, but with the emergence of digital technology, more and more people are involved, which may lead to a decline in the quality of typesetting.

Lecture 2：Typo_1_Development/Timeline

1. Early letter form development: Phoenician to Roman

The development of early letterforms began with the Phoenicians. In the early days, writing involved scratching wet clay with pointed sticks or carving into stone with chisels. Uppercase letterforms were the only letterforms for nearly 2000 years. The forms of uppercase letters evolved from the tools and materials available, primarily consisting of straight lines and circular shapes. The Phoenicians wrote from right to left. Later, the Greeks developed a writing style called "boustrophedon" (meaning "as the ox plows"), where text lines were read alternately from right to left and left to right, without any inter-word spacing or punctuation. Eventually, the Greeks shifted to a strictly left-to-right writing direction.

Etruscan (and then Roman) carvers would paint letters on marble before carving them. Some qualities of their strokes—such as variations in weight from vertical to horizontal and the widening of strokes at the beginning and end—were carried over into the carved letterforms.

 FIG 1.1 Phoenicians dedicate stone monuments to Carthage

Modern Latin and early Arabic evolved from the Phoenician alphabet in different ways.

Evolution from the Phoenician alphabet

FIG 1.2 Greek writing style“boustrophedon

Changes in the direction of alphabet form

Etruscan and Roman sculptors painted letters on marble before engraving. However, their works may be unstable, so the weight of the strokes has changed from vertical to horizontal.

FIG 1.3 Evolution from Phoenicia to Rome

2. Hand script from 3rd - 10th century C.E.
Square Capitals can be found in Roman monuments. They have serif added at the end of the main stokes. 

Rustic Capitals are a compressed version of square capitals. These letterforms are easier and faster to write, but slightly difficult to read.

        

FIG 1.4 left: Square Capitals (4th or 5th century); right: Rustic Capitals (late 3rd - mid 4th century)

Development of lowercase letterforms
Cursive writing forms were developed when used in everyday transactions due to their simplicity and speed, unlike writing Square Capitals and Rustic Capitals which are time-consuming and typically reserved for important documents.

Uncials took in some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. Uncials are small letters, the broad forms of uncials are more readable at small sizes compared to Rustic Capitals.

Half-uncials are a further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, with the use of ascenders and descenders.

      

FIG 1.5 left: Uncials (4th-5th century); right: Half-uncials (C.500)

Standardization of calligraphy

  Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours, France. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century. 

Blackletter to Gutenberg's Type

Fig1.6  Blackletter Textura (C. 1300)

    With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern europe, a condense strongly vertical letterform know as Blackletter or textura gained popularity, called 'rotunda'. The romanistic script in Italy is based on Alcuin's miniscule.

Gutenberg marshalled them all to build pages that accurately mimicked the work of the scribe's hand - Blackletter of northern Europe. He invented the movable type, the technology of printing and typography, to produce his Bible widely in a highly productive way.

FIG 1.7 42 line bible, Johann Gutenberg, Mainz

4. Text type classification

FIG 1.8

Text type classification

Lecture 3: Typo_2_Text_P1

1. Tracking: Kerning and Letterspacing
Kerning
The automatic adjustment of space between individual letterforms. Kerning is usually adjusted in headlines.

FIG 1.9 Without kerning and with kerning

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

Normal tracking is easy to read and suitable to use in a large number of texts.

Loose tracking and tight tracking reduce the readability and recognizability of the pattern that formed the words. People tend to recognize the counterform of the space between the stokes when reading, thus they are not suitable to apply in a large number of texts.

fig 1.10 Normal tracking, tight tracking and loose tracking 

However, loose tracking can be used in headlines but in uppercase letterforms. Uppercase letterforms can stand on their own, while lowercase letterforms require the counterform created between letters to maintain the line of reading.

2. Formatting Text (Alignment)

Flush left is the most natural text formatting that closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word ends. The spaces between words are consistent, creating an even gray value in the type. However, this format creates ragging, a jagged shape formed by each end line on the right.

Centered imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms fields of text into shapes, thus it is important to amend the breaks so that the text does not appear too jagged. This format is suitable to apply to a small number of texts such as captions.

     

fig 1.11 Flush left and Centered

Flush right emphasises the end of a line as opposed to its start. It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Justified imposes a symmetrical shape on the text like centering. It is achieved by expanding or reducing spaces between words and letters. This format can occasionally produce 'rivers' of white space running vertically through the text, which are the gaps between the words. Careful attention to line breaks and hyphens is required to avoid this problem.

      

fig 1.12 Flush right and Justified

Textures

Fig 1.13  Anatomy of a Typeface

Fig1.14 Different typefaces with different gray value

Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type.

Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts.

In determining type sizes, text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

Fig. 1.15 Leading and Line Length

Leading is the space of each line of text. 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.

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 length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Lecture 4：Typo_3_Text_P2

There are several options for indicating paragraphs. In the first example, we see "pilcrow" (¶), which is a reservation for medieval manuscripts, which is rarely used today. The above example shows a "line space" (front*) between paragraphs. Therefore, if the row space is 12pt, then the paragraph space is 12pt. This ensures the cross-alignment of cross-text columns.

The above example shows the standard indentation. Usually, the indentation here is the same as the line spacing, or the same as the point size of the text.

The method of the above extended paragraph creates an unusually wide text column. Despite these problems, there may be strong composition or functional reasons for choosing.

2. Widows and Orphans

The unpardonable gaffes in formatting text are widows and orphans.

A widow is a short line of the type left alone at the end of a column of text. It can be avoided by creating a force line break before or adjusting the tracking of the line before to let the last word in the second last line moves down to the last line.

An orphan is a short line of the type left alone at the start of a new column. It could be avoided by adjusting the length of the column.

fig 1.16 Widow and orphan

3. Highlighting Text

Examples of highlighting text:

• Use the same typeface but different fonts (Italic, Bold) or colour

                                                                      fig 1.17

• Use bold sans serif
  Note that a sans serif font usually is slightly larger than a serif font in the same point size. In this example, the sans serif font (Univers) has been reduced by 0.5 pt to match the x-height of the serif typeface.

fig 1.18

• Place a field of colour

fig 1.19

• Place typographic elements (such as bullet points) 

fig 1.10

• Use quotation marks
  Note that prime is not a quote. The prime is an abbreviation for inches and feet. 

fig 1.21

4. Headline within Text

There are many subdivisions in the chapter text. In the following visual effects, these are marked (A, B and C) according to the level of importance. The task of the typesetographer is to ensure that these titles clearly show the reader the relative importance of the text and their relationship with each other.

The head indicates an obvious interruption between the topics in the part. In the following example, the "A" title is set to be larger than the text and displayed in lowercase and bold. The fourth example shows the A header of "extended" on the left side of the text.

Head B here belongs to head A. Head B indicates a new supporting argument or example of the topic at hand. Therefore, they should not interrupt the text as strongly as head A. Here, the B head is displayed in lowercase letters, italics, thick serifs and thick serifs.

Although the C-head is not common, it highlights the specific aspects of the material in the B-head text. They did not substantially interrupt the reading process. Like B-heads, these C-heads are displayed in lowercase letters, italics, serif bold and non-serif bold. There is at least one space for visual separation after the C head in this configuration.

Cross-ailignment

The cross-alignment of the title and title with the text type strengthens the sense of architecture - structure of the page - and clarifies the vertical rhythm of complementarity. In this example, the four-line title type (guided 9 points) is cross-aligned with the three-line text type (guided to 13.5 points).

Here, the one-line title type is cross-aligned with the two-line text type, and the four-line title type is cross-aligned with the five-line text type (right; lower left corner).

fig 1.22

Cross-ailignment

Lecture 5: Typo_4_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)

Typeface

Uppercase and lowercase

Small capital

Uppercase and lowercase numbers

Idari and Roman

Punctuation and miscellaneous characters

Decoration

Describe the font

Roman and Itar

Bold face and light

Concentration and expansion

Lecture 6: Typo_5_Understanding

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

2. Maintain x height

X-height usually describes the size of lowercase letters. Curved strokes, such as "s", must be higher than the median (or lower than the baseline) to look the same size as the vertical and horizontal strokes adjacent to them.

3. Formal and reverse form (counter)

The spatial description is often included in the brush strokes of the form.

4. Contrast

The design principle of contrast is also applied to typesetting. Simple comparison produces many changes: small + organic / large + machine; small + dark / large + light, etc.

fig 1.23

Lecture 7: Typo_6_Screen&Print

Typography used to be limited to paper, with no changes possible once a publication was edited, typeset, and printed. Today, typography extends beyond paper to various screens, making it subject to different parameters such as operating systems, system fonts, devices, and screens themselves.

1. Print Type:

Traditionally, typefaces were designed for reading from print. Designers focused on ensuring text was smooth, flowing, and pleasant to read.

Notable typefaces for print include Caslon, Garamond, Baskerville, and Univers, known for their elegance, intellectual appeal, and readability even at small font sizes.

fig 1.24

Type for print

2. Type for Screen

Typefaces for digital screens undergo optimization to enhance readability and performance in various digital environments. Adjustments include taller x-heights, wider letterforms, open counters, heavier strokes, reduced contrast, modified curves, and more open spacing, especially for smaller sizes. These adjustments aim to improve character recognition and overall readability on screens. Typefaces like Verdana and Georgia are specifically designed for screens to address historical issues with clarity and screen resolution, ensuring optimal legibility and aesthetics in digital contexts.

3. Hyperactive Link / Hyperlink

A hyperlink is a clickable word, phrase, or image that directs users to another document or section within the current document. They are commonly found on web pages and are typically displayed in blue and underlined text by default.

4  Screen font size

Screen font size - the 16-pixel text on the screen is roughly the same size as the text printed in books or magazines; this takes into account the reading distance.

5Network security fonts

 Network security fonts– Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

6. Pixel Differential between Devices

Text size and proportions vary across devices such as PCs, tablets, phones, and TVs due to differences in screen pixel sizes. Even within the same device class, there can be significant variations in text appearance.

Static and motion

1. Static typesetting

Static typesetting is not limited to minimum features such as bold and italics when expressing words. It can also create motion and movement in a dynamic way.

                                                         fig 1.25

2. Motion Typography

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

Refer to

---

3 TASK 1: Exercise 1 - Type Expression

 words: Balance, Jump, Roll, Crash, Flow, Spark, Time, Swim, Open, Spark, Swing, Dash, Kick

On Tuesday, the teacher gave us 13 words, and we asked us to choose four more words for draft design. Each word needs four drafts. I chose four words: crash, Flow, Balance and jump for design.

Sketch

Fig. 2.1 Type expression sketches, Week 2 (4/23/2024)

Fig. 2.2 Type expression sketches, Week 2 (4/23/2024)

Fig. 2.3 Type expression sketches, Week 2 (4/23/2024)

Fig. 2.4 Type expression sketches, Week 2 (4/23/2024)

Fig. 2.5 Type expression sketches, Week 2 (4/23/2024)

1Crash：

• Rough or broken font design.
• Fonts may have sharp edges or irregular shapes to imitate the visual effect of sudden cracking or crashing of things.

2 Flow

• This word may inspire smooth, elegant or continuous font design.
• Fonts may adopt streamlined curves and soft transitions to convey a sense of flow.

3 Balance

This word may inspire balanced, stable or symmetrical font design.

The font may use uniform line thickness and shape to convey a stable sense of balance.

4 Jump

This word may inspire lively, interesting or dynamic font design.

Fonts may use irregular shapes and bouncing lines to imitate jumping movements.

2. Digitisation

During the digitisation process, I have tried out several attempts to create the right expression for each word based on my sketches with the typefaces provided. 

The first digitalization

Fig. 2.6 Type expression sketches, Week 3 (5/7/2024)

Since this is the first time I have come into contact with this software and my own design, at the beginning of digitization, I first tried to digitize for the first time, using the ICT New Baskerville St Bold font as the design.

Carsh: According to the meaning of the word collision, this vision is like I designed it as a broken feeling, using the effect of feathering.

Flow: According to the consciousness of the word, I used the fish shape in the effect to imagine the fish swimming freely in the water.

Balance: I used the meaning of the air word. The upward convex in the effect deformation.

Jump: According to the meaning of the word, I used the texture of glass to design and deform the letters.

The second digitization

Fig.2.7 Type expression sketches, Week 3(5/7/2024)

The third digitalization

Fig. 2.8 Type expression sketches, Week 3 (5/7/2024)

The fourth time

Fig. 2. 9 Type expression sketches, Week 3 (5/7/2024)

                              FINAL Type Expressions

Because the teacher thought that my format was wrong, I modified my format and redesigned the flow

FINAL Type Expressions

                                    Fig. 2. 10 Type Final design, Week 4 (5/14/2024)

Fig. 2. 11  Type Final design pdf, Week 4 (5/14/2024)

3. Cartoon production

We must choose one of the four last type expressions to make an animated type expression. I chose the word JUMP for animation. Before we start making animation, we must watch the animation tutorial video made by Mr. Vinod. In the video, Mr. Vinod demonstrated how to use Illustrator and frame animation in Photoshop to make animation step by step. He suggested that we consider how the word will be animated in each frame.

Fig. 2. 12 Type expression sketches, flow GIF Week 4 (5/14/2024)

According to the video, I started my first attempt, and I animated flow.

Fig. 2. 13 Type expression sketches, flow GIF Process Week 4 (5/14/2024)

According to Mr. Vinod's tutorial, I will digitize flow. This is my first time to explore digitalization. I am not satisfied with this. After listening to the teacher's advice, I chose the following design jump as the final design.

Final design

Among all my explorations, I found that JUMP's exploration was the most complete, so I chose to digitize JUMP as the final design.

                      

                                          

Fig.  2.14 Final Animated Type Expression "jump" - GIF, Week 4 (5/14/2024) 

Week 4 (5/14/2024)

Fig.  2.15 Final Animated Type Expression "jump"Process- GIF, Week 4 (5/14/2024) 

Week 4 (5/14/2024)

 Animation Concept and Execution

I created a dynamic and engaging GIF animation where letters jump up and down, with the letters "u" and "p" specifically jumping up from an underground shadow. This concept adds a playful and surprising element to the visual experience.

 Production Process

To bring this concept to life, I used Adobe Photoshop (PS) to create the GIF animation, employing a total of 125 layers. Each layer was meticulously crafted to ensure the animation's smoothness and visual appeal.

 Detailed Steps

1. Initial Design:

  Conceptualization: I first solidified the overall concept of the animation, which involves letters jumping and "u" and "p" emerging from an underground shadow. Creating Basic Letter Layers: In Photoshop, I created all the necessary letters, each on a separate layer.

2. Adding Jumping Effect:

 Setting Keyframes: To simulate the jumping effect, I set keyframes across different layers, making the letters appear at various heights. Position Adjustments: I adjusted the vertical position of each letter frame by frame to mimic the motion of jumping up and landing down.

3. Special Effects:

 Underground Shadow: I added an underground shadow effect to the letters "u" and "p" to give the illusion that they are jumping out from below.Jumping Out Effect**: By carefully adjusting the height of "u" and "p" from underground to above ground frame by frame, I enhanced the dramatic effect of their emergence.

4. Animation Testing and Optimization:

   Previewing Animation: I continuously previewed the animation within Photoshop to ensure each frame transitioned smoothly.Fine-tuning: Based on the previews, I made fine adjustments to each frame to perfect the rhythm and visual impact of the animation.

5. Exporting the GIF:

   Setting Export Parameters: In Photoshop, I configured the export settings for the GIF, including frame rate and looping options.

   Final Export: I exported the final GIF file and performed a last check to ensure the animation was flawless.

 Animation Outcome

The resulting GIF animation is lively and visually captivating. The letters bounce up and down like playful little characters, and the "u" and "p" letters dramatically jump out from their underground shadows, providing a delightful surprise. This creative approach not only adds fun but also enhances the viewer's visual engagement.

Conclusion

By utilizing Adobe Photoshop and meticulously crafting 125 layers, I successfully brought this jumping letter animation to life. This project demonstrates my design and animation skills, as well as my attention to detail and dedication to creative expression. The final GIF animation achieves the desired visual effect and offers a unique and enjoyable experience for the audience.

Fig.  2.16 Final Animated Type Expression "jump" - GIF, pdf Week 4 (5/14/2024) 

Week 4 (5/14/2024)

---

3.Task 1 - Exercise 2: Text Formatting

After watching Vinod's teaching video, we need to typeset our name with ten fonts given by the lecturer.

                                Fig. 3.1 Text formatting with kerning, Week 5 (21/5/2024)

                                Fig. 3.2 Text formatting with kerning, Week 5 (21/5/2024)

Fig. 3.3  Practice Text Formatting (without grids) - JPEG, Week 5 (21/5/2024)

 

Fig. 3. 4 Practice Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)

I showed these two exercises to the teacher. The teacher pointed out that my format was wrong and asked me to modify the correct format.

Teacher's parameter reference diagram

Fig. 3. 5Teacher's parameter reference diagramJPEG, Week 5 (21/5/2024）

Final text Typesetting design works

Fig. 3. 6 Final Text Formatting ( grids) - JPEG, Week 5 (21/5/2024）

Fonts

Font: Bembo Std (Roman, Italic, and Bold)

Point Size

Body Text: 11 pt

 Heading: 

  Main Title: 60 pt

  Line spacing: 65 pt

  Secondary Subtitle: 11 pt

Leading

Body Text: 14.4 pt

Paragraph Spacing

-14.4 pt

 Alignment

Left align

Color: Light Blue

Start: 12.7 mm

ents

Relative To:Top of Page nt Every:13 pt

150

reshold:50%

Layout Analysis (Layout Analysis)

Title:

The main title "I AM HELVETICA" uses the Bembo Std Bold font of 60 pt.

The subtitle "by John Doe" uses the Bembo Std Italic font of 11 pt.

Text:

The text uses 11 pt Bembo Std Roman font.

The spacing is 14.4 pt, and the spacing between paragraphs is also 14.4 pt.

Photo description:

The picture description uses a 9 pt Bembo Std Italic font with a line spacing of 14.4 pt.

Alignment method:

The full text is aligned with the left, so that the text is neatly arranged on the left edge.

Fig. 3. 7 Final Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)

Fonts

Font: Bembo Std (Roman, Italic, and Bold)

Point Size

-Body Text: 11 pt

- Heading: 

  - Main Title: 60 pt

  - Line spacing: 65 pt

  - Secondary Subtitle: 11 pt

Leading

- Body Text: 14.4 pt

Paragraph Spacing

- 14.4 pt

 Alignment

- Left align

Layout Analysis (Layout Analysis)

Title:

The main title "I AM HELVETICA" uses the Bembo Std Bold font of 60 pt.

The subtitle "by John Doe" uses the Bembo Std Italic font of 11 pt.

Text:

The text uses 11 pt Bembo Std Roman font.

The spacing is 14.4 pt, and the spacing between paragraphs is also 14.4 pt.

Photo description:

The picture description uses a 9 pt Bembo Std Italic font with a line spacing of 14.4 pt.

Alignment method:

The full text is aligned with the left, so that the text is neatly arranged on the left edge.

                      Fig. 3. 8 Final Text Formatting (without grids) - pdf, Week 5 (21/5/2024)

                        Fig. 3. 9 Final Text Formatting ( grids) - JPEG, Week 5 (21/5/2024)

The layout ensures the clarity and readability of the content through appropriate font size, line spacing and paragraph spacing. At the same time, it enhances the hierarchy and visual attractiveness of the layout through left alignment and the use of different line widths. Using the Bembo Std font can add a classic and elegant feeling to the text.

---

4. Feedback (Week 1-Week 6)

week1: In the first week, the teacher asked us to set up a blog, tell us about the learning tasks of this semester and check our blog. Let us vote for the words for the homework and tell us the requirements of the homework. Choose four words from them to design 16 sketches.

Week 2:The teacher checked the draft design we submitted on Facebook and told us to choose fonts similar to our own to digitize according to the draft design.

Week 3:

The lecturer proposed that I need to continue to try. Miss mentioned that she can't see how the flow design expresses the flow. The other three font designs are acceptable, and the balance design can be modified.

Specific feedback: The lecturer said that my format must be square, and then this balance said that you are very creative mirror a, but this line is not necessary, and then the flow does not see the feeling of flow. Let's go to the draft and try again.

week 4:My teacher provided feedback on my design work. They praised my "jump" design, highlighting its excellence. However, they noted that the font in my "jump" design is different from the font used in the GIF. Additionally, they mentioned that my "flow" design needs improvement, and the format of my final design is not correct. I will focus on refining these aspects to enhance the overall quality of my work

Week 5：Task1 is generally good, and the text type typesetting needs to be improved. Follow the tutorials and requirements given by Mr. Vinod for reference.

Special feedback: Our typesetting grid board, the body content is a little floating, and it needs to be modified to put him on the horizontal line of the grid.

5. Repercussion

Week 1:When I first came into contact with font design, it was not as simple as I thought, but according to the video tutorial given by the teacher, he got started step by step, when the font design was full of a sense of accomplishment.

Week 2：Through the teacher's feedback, I understood that my design is not to pay attention to the appearance of fancy, but to pay attention to the connotation of words and more ideas and creativity, which makes me more aware of the essence of my design.

Week 3: I know a lot of shortcomings, and I understand more about the understanding of the word itself by font design, so there is no need to distort it too much. 

 

Week 4: I understand how to use ps to make GIFs. The creativity of font design is very important.

Week 5: For the first time, I followed Mr. Vinod's tutorial to complete the homework step by step, so that I learned how to use id for the first time in typesetting.

6. Further reading

 READING

The Vignelli Canon by Massimo Vignelli (2010) 

Further Reading The Vignelli Canon by Massimo Vignelli (2010) Massimo Vignelli's book, "The Vignelli Canon," is a seminal work in the field of design, providing an in-depth look into the core principles that underpin effective design practice. Vignelli's approach is rooted in the belief that design should be both functional and aesthetically pleasing, while also communicating its intended message with clarity and precision. Semantics in Design One of the crucial sections of "The Vignelli Canon" is dedicated to semantics, where Vignelli explores the significance of meaning in design choices. According to Vignelli, semantics is about understanding and leveraging the meaning behind each design element to ensure that the final product communicates effectively with its audience. This involves a deep comprehension of the cultural, social, and psychological contexts in which design operates. 1. Cultural Contexts: Vignelli emphasizes the importance of cultural awareness in design. Designers must consider how different cultures interpret various symbols, colors, and forms. For instance, colors can have different connotations across cultures—while white might signify purity in some cultures, it can represent mourning in others. Understanding these nuances helps designers create work that resonates appropriately with diverse audiences. 2. Social Contexts: Social factors, including societal norms and trends, also play a crucial role in design semantics. Designers need to be attuned to the current social climate and how it influences public perception. This understanding allows them to craft messages that are relevant and engaging to contemporary audiences. 3. Psychological Aspects: The psychological impact of design elements is another critical consideration. Vignelli discusses how shapes, colors, and typography can evoke specific emotions and reactions. For example, rounded shapes might be perceived as friendly and approachable, while sharp angles could be seen as aggressive or dynamic. Effective design leverages these psychological cues to create the desired emotional response from the audience. Application of Semantics in Design By applying the principles of semantics, designers can make informed decisions that enhance the communicative power of their work. Here are a few practical applications of these concepts: Color Choice: Selecting colors that align with the intended message and audience. For example, using green in eco-friendly product packaging to signify environmental consciousness. Typography: Choosing typefaces that complement the tone of the message. A sleek, modern typeface might be suitable for a tech company, whereas a more traditional serif font could be appropriate for a law firm. Imagery: Using images that support the message and resonate with the audience's experiences and expectations. For example, featuring real people in advertisements to create a sense of relatability and authenticity. Conclusion

The Vignelli Canon" serves as an essential guide for designers, providing a framework to create meaningful and effective designs. By understanding and applying the principles of semantics, designers can ensure that their work not only looks good but also communicates the intended message clearly and powerfully to the target audience. Vignelli's insights into the deeper meanings and functions of design elements remain relevant and influential, making "The Vignelli Canon" a must-read for anyone serious about mastering the art of design.