Typography / Task 1: Typographic Exploration & Communication

09/24/2024 - 10/29/2024 (Week 1 - Week 6)

WANGJIHENG(0378904)

Bachelor of Design (Honours) in Creative Media / Taylor's University

Task

---

LECTURES

Week 1:

I. Definition of Typography
Typography refers to the process of arranging and organizing text, images, and other elements in a design. It involves composition, information presentation and expression, as well as the arrangement of textual information.

II. Importance of Typography in Design

1. It affects the readability and understandability of information.
2. It influences the overall visual aesthetics.

III. Professionals Involved with Typography
In the field of design, typography is a daily task for professionals like typesetters, typographers, graphic designers, art directors, and comic artists.

IV. Special Status of Typography in Website Design
Especially in website design, typography is extremely important as it is directly related to user experience and the efficiency of information transmission.

I. Development of Phonetic Alphabet

As the phonetic alphabet continues to develop, people begin to use sounds to create more

accurate words, enabling more accurate communication.

II. Importance in Design
In the field of design, it is very important to figure out the difference between fonts and 

letterforms.

I. Definition of Font
Font refers to an entire font family with similar characteristics or styles, such as Georgia, Arial, Times New Roman, etc.

What are the characteristics and differences between fonts and typefaces?

How to choose the right font and typeface for different design projects?

Are there any free font and typeface resources avai

I. Readability and Usage of Different Letter Forms

In terms of readability, square and rusty capital letters are usually used for documents with specific performance. Cursive writing is mostly used for daily transactions, with speed as a priority.

II. Origin of Lowercase Letters
The development of lowercase letter forms stems from the need to write capital letters quickly. Kaifeng Kaifeng combines certain characteristics of Roman cursive hands. Scholars have different interpretations of "unseal", but it may be more accurate to regard it as a lowercase letter. Lowercase letter forms are more readable in small sizes.

III. Evolution of Capital Letter C
The capital letter C underwent reform. It developed compressed plain capital letters and script forms, and finally formed lowercase letter forms. This happened 2000 years after the origin of Phoenician letters.

IV. Standardization by Charlemagne
Charlemagne issued a decree in 789 AD to standardize the writing system. The monks of Martin of Tours rewrote the text and set calligraphy standards.

V. Regional Differences after Empire Disintegration
With the disintegration of the Carolingian Empire, regional differences emerged in Europe. Black letter or quadrangular forms developed in the north, while round fonts were popular in the south.

VI. Influence of Geography and Tools
Humanistic writing is based on small molecular olefins. Geography and tool types affect writing styles.

VII. Recent Developments in Font Families
Recent developments have expanded the concept of font families to include serif and sans-serif letters, as well as semi-sans-serif or semi-serif fonts in between.

week2

I. Evolution from Gutenberg Era

Starting from the Gutenberg era, it has gone through different stages including humanistic writing, Roman fonts, Venetian fonts, and modern sans-serif fonts. II. Important Designers and Fonts In each period, there are significant designers and fonts like Nicolas Jenson, Francesco Griffo, William Caslon, etc. III. Inheritance in Digital Age These fonts have been inherited and paid tribute to in the digital age.

I. Miller Brockmann's Modernist Typography in 1959
In 1959, Müller Brockmann's modernist typography reflected the evolution of typographic history and emphasized the importance of historical background.

II. Font Classification over Time

• Old Style Fonts: Based on the hand-copying style of Nordic books.
• Italic Fonts: Initially Italian handwriting, used to complement Roman fonts.
• Script Fonts: Decorative and not suitable for large amounts of text.
• Modern Classifications: Represent a further rationalization of old style fonts, emphasizing the contrast between thick and thin strokes.

"The Evolution and Origins of Font Types: From Black Letter to Modern Classification"

I. Blackletter

• The earliest printing type, the form is based on the hand-copying style of Nordic books at that time.
• There are many blackberry examples, which is a form of text or font.

II. Old Style Classification

• In the form used by Italian humanist scholars for book copying, the old style classification based on lowercase letters can be found. The uppercase letter form can be found in scribes and Roman ruins and is called the bamboo castle andante.
• Fonts such as Garamond, Jensen, and Palatino belong to the old style category.

III. Italic

• Contemporary Italian handwriting. The first italic is compressed and closely arranged, allowing more words per page.
• Initially considered an independent category, it was soon used to supplement Roman forms. Since the sixteenth century, straight forms have been supplemented by italics. Almost all text fonts are designed with italic forms.
• A set of letters is called "I can be italic", and Roman letters without serifs are called slanted.

IV. Script Category

• Trying to copy engraved calligraphy forms, including formal and traditional, casual and modern scripts such as Mistral, snail round, etc.
• Decorative and not suitable for large amounts of text. Commonly seen in name signs on occasions such as weddings.

V. Modern Classification

• Fonts such as Bodoni Giambattista belong to the modern classification.
• Represents the further rationalization of old-style letter forms. The contrast between thick and thin strokes is extreme. Versions like Belle are called Scottish Romans and are closer to transitional forms. The early versions are relatively primitive.

Week3

I. Difference between kerning and letter spacing

1. Kerning is the automatic adjustment of the spacing between letters to optimize the reading experience.
2. Letter spacing is adding spaces between letters.

II. Precautions when handling headings

1. More space is needed to highlight the headings.
2. Pay attention to the kerning and letter spacing of individual words.

III. Spacing adjustment of capital letters
Designers tend to increase the spacing of capital letters to improve readability.

IV. Factors to consider in typesetting

1. The negative and positive spaces between letters.
2. The maintenance of counter forms.

V. Suggestions for spacing adjustment of lowercase letters
Avoid over-adjusting the spacing of lowercase letters and pay more attention to adjusting the spacing of capital letters.

I. Layout of facing pages and columns 1. Keep facing pages when designing a book. 2. Usually have three to four columns. II. Importance of margin space Margin space is crucial. III. Letter spacing and kerning adjustments 1. Pay attention to letter spacing and kerning adjustments. 2. Avoid excessive paragraph and letter spacing that affects readability. IV. Avoiding text islands and ensuring layout 1. Avoid text islands when designing. 2. Ensure a reasonable layout of images and text. V. Key factors affecting readability Font size, line spacing, and line length are key factors affecting readability. VI. Design process 1. First determine the font size. 2. Fill the page with dummy text. 3. Check readability after printing. 4. Adjust leading and space.

In typesetting, the choice of font size and line spacing is crucial for the reading experience.

1. Generally, the line spacing should be 3.5 points larger than the font size. For example, when the font size is 10 points, the line spacing should be 13.5 points.

2. In addition, a good typesetting rule of thumb is to ensure that each line does not exceed 55 to 65 characters to maintain reading comfort and clarity.

WEEK 4

Paper and Printing

• The paper is of A4 or letter size, suitable for large letter-sized paper and for printing.
• When it is difficult to judge, it should be printed first to judge the influence of color on leading, kerning and line length.

Font Enlargement

• Enlarging the font to 4% of the actual size on the screen allows one to see the relationship between the descenders of a line and the sender.
• The difference in leading can be seen in a slide, and a little leading can make a noticeable difference on most monitors.

Printing and Screen

• There is no substitute for the actual printout. The screen is an electronic approximation of the printed page.
• If the printed page is the final output, it is used for evaluation. If the screen is the final output for the text, then the screen is used for evaluation (when designing for the screen, the judgment of the content on the screen is accurate).

Effects of Font Enlargement

• It is important to enlarge to about 400%. There are differences in the same text after enlargement.
• The top and bottom are different. If you look carefully, there are differences in weighting, and you can see the relationship between the ascenders and the descenders.

WEEK5

• The text in the body has the same font size and is placed beneath the title, being related to it. The reading order is title, subtitle, and body text, and the image in the bottom right corner is optional to view.
• The visual hierarchical structure, layout balance, and space utilization create an aesthetic appearance.
• After setting the margins, the text information is within a fixed space, with the body text and title being the main parts, and sometimes elements like headlights are outside the body text.
• In a grid system, two columns are used for the body text, and the positions of the title and visual image can be adjusted.

• The author discusses how to adjust the position and alignment of information through baseline grids and cross-alignment in design layout.
• Firstly, the author ensures that the text is aligned with the baseline grid by adjusting the title size and line spacing and explains why 22 points is chosen as the line spacing.
• Then, the author shows how to adjust the baseline grid in InDesign to match the line spacing of the body text and emphasizes the importance of maintaining alignment.

This article discusses the use of italic type, especially in the description of

sensitive facial types, and the application of project dimensions in the serif font stage. The author also mentions checking the baseline grid and visual effects.

1. After completing the task, select two text boxes.

2. Use a key or right-click to enter text box options and adjust text alignment.

3. By default, the text alignment is usually “Rise,” but it should be changed to “Leading.”

4. Ensure the text aligns with the top and not the bottom.

5. After achieving cross-alignment, each line of text should align with the baseline.

6. To align the right-side text with the bottom, ensure it is positioned correctly at the edge and adjust the line position.

7. In text frame options, adjust the baseline leading to ensure each line of text aligns properly with the baseline.

8. Adjust the text to follow the leading, achieving the correct cross-alignment for the text.

1. After adjusting the photo position to align with the baseline, use shortcut commands to enlarge the image to the desired size.

2.The current layout is tidy, achieving cross-alignment, although it may be hard to visually demonstrate due to the lack of text.

3.In text formatting exercises, the focus is on achieving cross-alignment.

4.The summary highlights the neatness of the layout and the alignment effect.

---

INSTRUCTIONS

Task 1: Exercises -Type Expression

Task 1:Exercises 2-Formatting Text

                      NO.1

---

FEEDBACK

Week 1

In the first week, I learned about sketching and text layout as well as how it has evolved.

Week 2

In the second week, I learned how to use fonts. In Adobe Illustrator, I learned how to use text distortion and transform letters into many elements.

Week 3

I have learned a lot in this class. Various different characters can be combined in different ways. I have learned that the designed fonts should have their own creativity and should not be too similar. They should be more creative.

Week 4

In this week, I learned a lot. Regarding how to create font animations, I chose to create new layers in the Ai software, save the psd file, import it into ps, and completed the animation of the letter "JUMP". In the fourth week's class, I learned about kerning. It can make the text look more beautiful and harmonious. And when adjusting kerning, it is necessary to observe the awkward shapes or unnatural spaces between letters and make fine adjustments through the direction keys on the keyboard.

Week 5

In the fifth week, I learned how to do typesetting. The teacher gave us many classes, and from these courses, I learned a lot. I learned how to choose the size of the text when typesetting, and also learned how to use different fonts. This knowledge has enabled me to make great progress in typesetting and has also given me more knowledge and understanding of design.

WEEK6

In this week I completed Submission Task 2 (consisting of a total of 4 files). For the JPEG files (with a resolution of 300 ppi and in grayscale), there were two types: those with grids and those without grids. Regarding the PDF files, there were also two types of content: with grids and without grids. I watched the lectures and, by using the design file I had made before, I completed the homework for this week. I exported the files from Adobe Illustrator software and imported them into Adobe InDesign software for typesetting design.

Week7

In this week, I analyzed the letters H, O, G, and B respectively in Adobe Illustrator software. Then I selected my favorite font from the ten fonts and completed the design work in the software. After finishing the design in the software, I drew them all out on the pen and paper that I bought from the store.

Week 9

This week's course focused on font design, integrating theoretical and practical work to learn the process and techniques. We started by choosing three specific types of letters and sketching from "o", "h", "t", "a". Then, we selected a reference font like Bodoni, deconstructed it, and used software tools to create letters, focusing on stroke and spacing. In Illustrator, we set up a 1000x1000 pixel workspace and used auxiliary lines to define letter height and structure. We also learned about the visual differences between circular and linear shapes and the importance of controlling size and details precisely. Through operations like adjusting shapes and paths, we achieved a more compact and stylish design and understood the significance of shape consistency and unit points for font editing. 

Week 10