Typography- Task 1: Exercises

24/09/2024 – 29/10/2024(WEEK 1 – WEEK 6) 

SHIMANLIN,（0375858)

TYPOGRAPHY || BACHELOR OF DESIGN(HONOURS)IN CREATIVE MEDIA || TAYLOR'S UNIVERSITY

Task 1 ：Exercise 1 & 2

---

TABLE OF CONTENTS

Lectures

Instructions 

Task

Feedback

Reflections

Further Reading

---

LECTURES

Week 1: Typo_0_Introduction & Typo_1_Development

（Fig.1.Introduction)

In the first class, Mr.Vinood introduced plate templates, what typography is and its importance. He also taught us how to make a blog.

（Fig.1.1.Typography）

In this class, I learned about the beginning of typography, which was the change of writing direction of the Greeks, the reading of the text from right to left became left to right, and thus changed the direction of the letter form.     

The Etruscans painted on marble to form the first typefaces.

Early letterform development : Phoenician to Roman.

• Timeline : Humanist script to roman type

1460: Lucius Lactantius, Venice.

1472: Cardinal Jonannes Bessarion,Conrad Sweynheym and Arnold Pannartz, Subiaco press, Rome.

1471: Quintillian.Nicholas Jenson, Venice.

Venetian type from 1500.

1499: Colona.type by Farncesco Griffo

1515: Lucretius,type by Francesco Grifo The Golden Age of French printing.

1531: Illustrissimae Galliaru reginae Helianorae,printed by Robert Estianne Paris Tvne-cast hv Claude Garamond.

Dutch printing,c.1600

1572:Polygot Bible(Preface).Printed by Christophe Plantin, Antwerp

English type from the eighteen century.

1734: William Caslon. Type specimen sheet, London.

Baskerville's innovations.

1761: William Congreve, typeset and printed by John Baskerville, Birmingham.

1818 Giambatista Bodoni,Manuale Tipografico,Parma.

19th century types→The first square serifs →Early twentieth-century sans serif (1923 Bauhaus,Moholy-Nagy,1959 Muller-Brockman)

 

（Fig.1.2.Century types）

Week 2 ：Typo_3_Text_P1

There needs to be a certain distance between the words, that is, the sense of breathing, so that it can be more beautiful.

（Fig.1.3.Step）

Designers always letterspace uppercase letters, but there has long been strong resistance within the type community to letterspace lowercase letters within text.The reasons for this becomes clear in the next slide.Uppercase letterforms are drawn to be able to stand on their own. whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

A good typographer has to know which typeface best suits the message at hand.

（Fig.1.4.Bembo std）

The goal in setting text type is to allow for easy, prolonged reading. At the same time a field of type should occupy the page as much as photograph does.

Week 3 ：Typo_4_Test_Part 2

Typically here the indent is the same size of the line spacing or the same as the point size of your text.

Text needs to have a visual cohesiveness.

Sometimes it is necessary to place certain typographic elements outside the left margin of a colomn of type (extending as opposed to indenting) to maintain a strong reading axis.

（Fig.1.5.Typically）

Quotation marks, like bullets. can create a clear indent, breaking the left reading axis. Compare the indented quote at the top with the extended quote at the bottom.

A head indicates a clear break between the topics within a section.In the following examples 'A' heads are set larger than the text, in small caps and in bold. The fourth example shows an A head 'extended' to the left of the text.

Week 4 ：Typo_2_Basic

Typography uses a lot of technical terms.
To identify a particular font more easily, you need to first understand the components of a letter.

（Fig.1.6.Identify）

• Baseline ：The visual basis of fonts.

• Median ：An imaginary line that defines the font height.

• X-height ： Height in any font.

Should I make sure I'm using a full font and know how to use it.

（Fig.1.7.Font）

The capital letters correspond to the X-height of the font.

Most font software includes a style command that generates lowercase based on uppercase form.

Uppercase numbers are also called serif numbers.

Lowercase numbers are also called old-fashioned numbers or text numbers.

The difference in typefaces makes each typeface unique.

You can't be a good typographer, if you aren't a good reader. ——Stephen Cole

Week 5 ：Typo_5_Understanding

The letters below do not match. The Baskerville stroke form has two different stroke weights, and the brackets connecting the serifs and stems have different arcs.

The capital letters look symmetrical, but a closer look will find that the width of the left bevel is smaller than that of the right, reflecting the designer's creativity.

（Fig.1.8.Arcs）

The 'a' in two different fonts will be clearly different.

X-height is often used to describe the size of lowercase letters. The curved strokes must be above the median or below the baseline.

It is important to develop sensitivity to the opposite or opposite version. When letters are joined into words, the alignment includes Spaces between them.

One of the most meaningful ways to understand the form and content of a letter.

The basic principles of graphic design apply directly to typography.

Example:

(Fig.1.9.Design)

On the streets, you look at girls [or boys]. l look at type.——Hannes von Dohren

Week 6 ：Typo_6_Screen&Print

In the past, printing was considered alive only when it appeared on paper, but now typography exists more on the screen. Typesetting is done in the browser.

（Fig.1.10.Typesetting）

• Print Type Vs Screen Type

Type for Print :
Fonts were designed to be read from a very early time.

Caslon, Garamond, and Baskerville are the most commonly used typography. Because they are elegant, intelligent and easy to read.

(Fig.1.11.Type for print)

Type for Screen :

Fonts on the web can be optimized to enhance the readability and performance of the on-screen environment.

Factors such as smaller fonts and more open spacing can improve character recognition and readability in non-print environments.

Hyperlinks, which take you to another website, are very common and can be seen on almost all web pages. The text is usually blue with an underscore underneath the font.

Each device has its own selection of pre-installed fonts, windows devices may only have one category, and Mac OS comes from another group. Google and Android both use their own.

• Static Vs Motion

Static Typography :

Static typography has traditional characteristics in the expression of text, which can only provide a small part of the expression potential, and the impression it leaves on people is closely related to people's emotions.

Motion Typography :

Motion typography makes fonts fluid and adds drama to them.

This type of typography is often overlaid on music videos and advertisements to better capture the mood of the audience.

---

INSTRUCTIONS

---

TASK

Exercises 1-Type Expression

In task 1, Ms.Vitiiyaa walked us through the main tasks of typography in the first class, took us through typefaces,then we voted for four words :

• fancy

• spicy

• bloom

• smoke

I looked for some pictures on the Internet and got the inspiration.

Fig.2.1.Creative inspiration(26/09/2024)

Ms. Vitiiyaa asked us to interpret these four words and express them through pictures, which sounded very interesting and difficult, and I was very willing to try.

Fig.2.2.sketches(27/09/2024)

Spicy : I added a flame effect to the letters to bring out the spicy feeling.

Bloom : I sketched out the shapes of the flowers and used flower-like fonts to look like beautiful flowers.

Smoke : I tried to draw the smoke slowly dissipating, some of which I also added flames, after all, fire is what makes smoke.

Fancy ：I used some lines to try to create the feeling of "fancy".

Ms.Vittiya taught us to create Outlines and cancel grouping,so that we could better digitizr the fonts.

Fig.2.3. Four designs(01/10/2024)

Fig. 2.4.Four designs-PDF(01/10/2024)

In the fourth week, Ms.Vittiya taught us how to make the font into the animation form, and she guided us patiently in the class.

I follow the teacher teaching content step by step production.

I started using ‘Adobe Illustrator ’to make the animation I wanted frame by frame.

Fig.2.5.The effect is shown in the figure(05/10/2024)

Then I used ‘Photoshop’ to link the pictures together into an animation form.

Fig.2.5.The effect is shown in the figure(05/10/2024)

Finally I exported it and I was done.

Fig.2.6. Animation of bloom(15/10/2024)

Fig. 2.7.Animation of bloom-GIF(15/10/2024)

Exercise 2-Text Formatting

I followed Mr. Vinod's instructional videos.

• Kerning and Tracking

Fig.2.8.Creative process(18/10/2024)

Fig.2.9.Final product(18/10/2024)

Fig.2.10.Final product-PDF(18/10/2024)

• Layouts

Fig.2.11.Creative process(19/10/2024)

• HEAD LINE

Typeface: Bembo Std

Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0

 

• BODY

Typeface: Bembo Std

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

I made six different layouts ：

Fig.2.12.six layouts(22/10/2024)

I finally chose this one ：

Fig.2.13.Final Text Formatting Layout(22/10/2024)

Fig.2.14.Final Text Formatting Layout -PDF(22/10/2024)

Fig.2.15.Final Text Formatting Layout - Grids(22/10/2024)

Fig.2.16.Final Text Formatting Layout - Grids-PDF(22/10/2024)

---

FEEDBACK

Week 1：

• General feedback : This is the first class, Ms. Vitiyaa explained to us the typography class to learn the content.

• Specific feedback : We created a blog, and we knew what we were going to learn and what we were going to do in this course.We downloaded 10 fonts 'smoke, spicy, fancy, bloom.'

Week 2 : 

• General feedback : Ms. Vitiyaa saw the sketch of our design and gave a very useful comment.

• Specific feedback : After Ms. Vitiyaa's advice, I carefully revised my sketch and posted it on 'Facebook'.

Week 3 :

• General feedback : Ms. Vitiyaa teach us how to use 'Adobe Illustrator' to make the design sketches.

• Specific feedback : I digitized fonts for this class.Ms. Vitiyaa raised my problem, and I revised it.

 

Week 4 ：

• General feedback : Ms. Vitiyaa taught us to animate fonts.

• Specific feedback : I made the last digitized font into an animated form.I made a total of two versions, the first version I made 'smoke', showed Ms. Vitiyaa, she said that the font can not be changed, and then I used 'bloom' to make the final version.

There is the error version I made 'smoke'.

Week 5 ：

• General feedback : Ms. Vitiyaa gave us feedback on the typesetting exercise we had done.

• Specific feedback : I followed the composition exercise in Mr. Vinod's video to modify it. After modification, there were still some problems. Under the patient guidance of Ms. Vitiyaa, I finally successfully corrected the mistake.

Week 6 ：

• General feedback : Ms. Vitiyaa continued to help us adjust the layout practice.

• Specific feedback :Ms. Vitiyaa first asked us to print out the six layouts, and then she helped us read them one by one. Ms. Vitiyaa told me that the picture and the title should be aligned with the text, and I changed it under her guidance.

---

REFLECTIONS

Experience

The practice of Task 1 has inspired me a lot. Typography is closely related to our daily life, so it is very important to learn this course well. Exercise 1 also makes me more and more proficient in the application of InDesign and Illustrator.

Observation

Everyone's Eportfolio is public, so I can see other people's work, and I find that even the same assignment, everyone's ideas are different, and everyone can create a unique work.

Findings

Typography is a really interesting course.The practice of Task 1 makes me have more understanding of typesetting. Excellent typesetting improves people's reading efficiency and makes me understand the significance of typesetting better.

---

FURTHER READING

Fig.3.1.Typographic-Systems

I began to read 《Typographic-Systems》 on the recommendation of Ms. Vitiiyaa.

I decided to read one chapter a week.

Fig.3.2Typographic-Systems(5pp.)

I started with the introduction to understand what a typesetting system is. The book says that all design is based on a system that should be structured. The typesetting system is similar to what architects call shape syntax.

Fig.3.3Typographic-Systems(17pp.)

The first part is to introduce the shaft system, the left and right design of the single axis.

Fig.3.4.Typographic-Systems(35pp.)

The second part introduces the design of radial system from the center point.

Fig.3.5.Typographic-Systems(53pp.)

The third part introduces the expansion system, designed along the circular path.

Fig.3.6.Typographic-Systems(71pp.)

The fourth part is the introduction of random systems, spontaneous design.

Fig.3.7.Typographic-Systems(87pp.)

The fifth part introduces the network system, using the design of vertical and horizontal division.

Fig.3.8.Typographic-Systems(105pp.)

The sixth part introduces the design of transition system, tape and layer shift.