ADVANCED TYPOGRAPHY,TASK 1

ADVANCED TYPOGRAPHY

Monday,April 22 .2024

2024.05.13/Week 1-Week 4

Jia Wenbing /0365436/

Design principles/Bachelor of Design in Creative Media

Task 1 / Exercises: Typographic Systems & Type & Play

INSTRUCTIONS

LECTURES

Week 1-LECTURE 1
Week 2 -LECTURE 2
Week 3-LECTURE 3
Week 4-LECTURE 4

Task 1: Exercise 1 - Typographic Systems

Task 2: Exercise 2 - Type & Play

Feedback

Reflection
Further reading

INSTRUCTIONS

LECTURES

Week 1-LECTURE 1

Advanced Typography: Typographic Systems

All designs are based on structural systems, resulting in eight main variations based on an unlimited number of permutations or variations.

Fig. 1.1 Typographic system Week 1 (24/04/2024)

Typographic systems provide a solid framework and a sense of purpose that guides decision-making. Especially when dealing with complex information, it's best to have a degree of focus or direction for different levels of information, as it helps you understand the nuances of typography, layout making and composition.

Fig. 1.2 Typographic system Week 1 (24/04/2024)

Axial System: All elements are organized to the left or right of a single axis, so information is grouped and placed at different angles at different locations on the axis.

The axis can be straight or curved, and information can be placed on either side of the axis.

Fig. 1.3 Axial system Week 1 (24/04/2024)

This diagram illustrates how information is placed on a single axis, with the axis running diagonally to the right through

Fig. 1.4 Axial system Week 1 (24/04/2024)

Radial System: All elements extend from a focus and then expand according to the specific focus, and all content basically points to the focus

Fig. 1.5 Radial system Week 1 (24/04/2024)

Dilational System: All systems expand in a circular fashion from a central point so that there are rings with information, sideways or aligned with these circles, it can be placed in a layered manner or different levels of structure or reading rhythms can be placed on different rings

Fig. 1.6 Dilational system Week 1 (24/04/2024)

Random System: There is no specific pattern or relationship, but amidst the chaos of creation there is also a way within the page.

Fig. 1.7 Random system Week 1 (24/04/2024)

Grid System: Very common and great system, information can be of different sizes and have different weights, these are all meant to create focus and hierarchy.

Fig. 1.8 Grid system Week 1 (24/04/2024)

Transitional System: An information system that is layered in ribbons, essentially isolating information within certain ribbons, with different information in different ribbons.

Fig. 1.9 Transitional system Week 1 (24/04/2024)

Modular System: Cells are standardized, have the same size, and can flexibly replace position and content.

Fig. 1.10 Modular system Week 1 (24/04/2024)

Bilateral System: All text is arranged symmetrically around an axis, typically used on invitation cards or formal occasions, which means it can get a bit boring at times, but it depends on how it is used.

Fig. 1.11 Bilateral system Week 1 (24/04/2024)

This is a very interesting layout of a two-sided system, using a two-sided system in the middle, with two axes on either side, an axis in the middle, and another horizontal axis. The whole thing is very simple, but there are many details worthy of discussion and study.

Fig. 1.12 Bilateral system Week 1 (24/04/2024)

An understanding of the systematic organization process can allow designers to break free from strict horizontal and vertical systems or platter press constraints, but these systems often have their limitations, for example, when there is a large amount of text, it needs to be read in a long-term manner, otherwise it may Will hinder the readability of information.

Fig. 1.13 Typographic system Week 1 (24/04/2024)

Typography plays a visual role, not just a reading role.

Fig. 1.14 Typographic system Week 1 (24/04/2024)

Week 2-LECTURE 2

Advanced Typography: Typographic Composition

Typographic composition is concerned with design principles that can be emphasized or displayed in two dimensions within a given space, the principles of which are often developed for two-dimensional design.

Fig. 2.1 Typographic composition Week 2 (04/05/2024)

Abstract concepts such as emphasis, isolation, and repetition are ambiguous when translated into board layout and composition.

Fig. 2.2 For example Week 2 (04/05/2024)

The rule of thirds is a guide to photographic composition and dividing space into three columns or rows within a frame. Place your subject at the intersection of intersecting lines.

Fig. 2.3 The rule of thirds Week 2 (04/05/2024)

But in text styles, the rule of thirds is rarely used because there are better ways to lay it out.

Fig. 2.4 For example Week 2 (04/05/2024)

The typographic system is derived from the grid composition structure of letterpress printing. Among the eight systems, the most practical and commonly used system is the grid system.

Fig. 2.5 Typographic Systems Week 2 (04/05/2024)

Under modernism, the exploration and innovation of a group of young designers gave birth to printing systems such as asymmetry, randomness, repetitive expansion systems and radial systems.

Fig. 2.6 Typographic Systems Week 2 (04/05/2024)

The versatility and modular nature of grid systems often allows for an unlimited number of adaptations, which is why it continues to be popular.

Fig. 2.7 Systems example Week 2 (04/05/2024)

Other systems:

Environmental Grids,are based on the exploration of existing structures or multiple structures grouped together, where designers extract key lines of curves and straight lines from the structure and then organize other information around the superstructure to create additional and visually stimulating Unique and exciting blend.

Fig. 2.8 Environmental Grid Week 2 (04/05/2024)

Form and Movement :An Exploration Based on an Existing Grid System Mr. Vinod wanted students to explore the many options a grid system offers and create something unique out of it.

Fig. 2.9 Form and Movement Week 2 (04/05/2024)

When everything you place on the page has visual connections and surprises, the leap of the book mimics the frame-by-frame nature of mobile screens.

Fig. 2.10 Form and Movement Week 2 (04/05/2024)

When you think of positive and negative space as images and text content, this can create a unique layout structure for the entire book. Whether it is used in page or web page structure, this method is incredibly exciting. It can be replaced with different elements but must Pay attention to reducing the decorative nature of elements.

Fig. 2.11 Form and Movement Week 2 (04/05/2024)

Typographic composition plays an important role in the readability and memorability of books.

Fig. 2.13 Typographic composition Week 2 (04/05/2024)

Week 3-LECTURE 3

Advanced Typography: Context and Creativety

Handwriting is studied because the first mechanically generated letter forms were designed in direct imitation of handwriting. Handwriting would become the basis or standard for the forms, spacing, and conventions that mechanical type would try to imitate.

The shapes and lines of hand-drawn letter forms were influenced by the tools and materials used to make them. Sharpened bones, charcoal sticks, plant stems, brushes, feathers, and pens all contributed to the unique characteristics of letter forms.

Fig. 3.1 Evolution of the Latin Alphabet Week 3 (06/05/2024)

Cuneiform, the earliest system of actual writing, was used in a number of languages between the 34C.B.C.E. through the 1st century C.E.

Hieroglyphic images have the potential to be used in three different ways:

1.As ideograms, to represent the things they actually depict

2.As determinatives to show that the signs preceding are meant as phonoqrams and to indicate the general idea of the word.

3. As phonograms to represent sounds that "spell out" individual words.

Fig. 3.2 Cuneiform Week 3 (06/05/2024)

After the fall of the Roman Empire, many texts could only be preserved in remote areas. The Court School was established under York's guidance. Under Chalmans' support, book production increased, and the language, pronunciation and spelling, and writing conventions were standardized. The new text appeared in the Carolina lowercase script, which became a humanistic writing model in the 15th century and was the basis for our later lowercase Roman script.

Fig. 3.3 The emergence of new fonts Week 3 (06/05/2024)

Printing (wood block) had already been practiced in China, Korea and Japan (Dharani Sutra, AD 750).Earliest known printed book (AD868)is the Diamond Sutra: 16'scroll with the world's first printed illustration.

Fig. 3.4 Movable type Week 3 (06/05/2024)

Evolution of Middle Eastern Alphabets: It is also important to note that while the Phoenician letter marks a turning point in written language-use of sound represented in letters the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts

The Evolution of the Chinese script: From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.

Fig. 3.5 The evolution of the Middle Eastern alphabet Week 3 (06/05/2024)

The Brahmi script (450-350 BCE) is the earliest writing system developed in India after the Indus script. lt is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

Fig. 3.6 The Brahmi script Week 3 (06/05/2024)

The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava (or Pallawa in Malay), a South Indian script originally used for writing Sanskrit and Tamil.

Fig. 3.7 Handwriting Week 3 (06/05/2024)

Ancient Hindu societies in both South and Southeast Asia were classist and often caste-based. The lower classes were generally illiterate.Obviously lslam didn't change this completely, but it did encourage teaching for the sake of proselytization.

Fig. 3.8 Handwriting Week 3 (06/05/2024)

Fig. 3.9 Handwriting Week 3 (06/05/2024)

More vernacular scripts are being produced by software giants(Google): in their employment a great many Asian programmers and designers. More and more vernacular and “multi-script" typefaces -a term coined by Muthu Nedumaran are being produced to cater to situations where the written matter is communicated in the vernaculal script or vernacular and Latin scripts.

Fig. 3.10 Programmers and Type Design Week 3 (06/05/2024)

Week 4-LECTURE 4

Advanced Typography: Designing Type

Fig. 4.1 Designing Type Week 4 (13/05/2024)

Because font design carries social responsibility, it must improve the readability of text.

Font designer is a form of artistic expression.

Fig. 4.2 Designing Type Week 4 (13/05/2024)

Frutiger is a sans serif typeface designed in 1968 by Swiss type designer Adrian Frutiger specifically for the new Charles de Gaulle International Airport in France. He conducted tests with unfocused letters to determine which letter forms could still be recognized in poor lighting or when readers moved quickly past the logo.

Fig. 4.3 Designing Type Week 4 (13/05/2024)

Verdana is a typeface designed specifically for the screen by the famous type designer Matthew Carter, commissioned by Microsoft. This design was originally designed to provide better readability and clarity on computer screens. Taking into account the peculiarities of screen displays such as low resolution, small font sizes and varying viewing distances, Verdana's design focuses on the clarity and legibility of letters.

Fig. 4.4 Designing Type Week 4 (13/05/2024)

, Bell Centennial is a special font commissioned by AT&T for use in its phone books. The goal of this design was to solve the ink spreading problem that occurs when printing at high speeds on low-quality paper, which is particularly common in the printing process of phone books.

To combat this, designers introduced ink traps in the Bell Centennial font. Ink trapping is a design technique designed to leave tiny gaps or depressions at the junctions or corners of glyphs to hold more ink when printing, thereby preventing the ink from spreading.

Fig. 4.5 Designing Type Week 4 (13/05/2024)

Johnston Sans was designed by Edward Johnston for posters and signage on the London Underground. When he designed this typeface, he tried to blend the proportions of a classical Roman typeface with the warmth of a humanistic touch.

Johnston Sans was originally called the Underground font because it was designed for the London Underground system. This typeface is known for its simplicity, clarity and legibility, making it particularly suitable for use in places such as posters, signage and subway wayfinding systems.

Fig. 4.6 Designing Type Week 4 (13/05/2024)

Fig. 4.7 Designing Type Week 4 (13/05/2024)

The general process of type design is as follows:

1. Research:

Learn about typeface history, structure, conventions, terminology, sideways, metrics, tips, and more.
Determine the purpose of the font.
Check existing fonts/ETC currently used for inspiration/ideas/reference/context/usage patterns.

2. Sketch:

Sketch using traditional or digital toolsets, depending on the designer's choice.

3. Digitalization:

Digitize using software such as Adobe Illustrator, FontLab, Glyphs App, etc.
Check letter forms and inverse forms to ensure the font is readable.

4.Test:

Refine and correct various aspects of the font.
Prototyping is part of this and provides important feedback.

5. Deployment:

Deploy the font and be aware of the possibility of revisions, as unforeseen issues may arise after the prototyping and testing phases.

The following considerations are also important when designing font structures:

The use of a grid (with circular forms) can facilitate the construction of letter forms.
The construction and arrangement of letters should follow the principles of vision correction, such as uniformity of overshoot and character spacing.
The 26 characters of the alphabet can be divided into groups based on form and structure, with a distinction between uppercase and lowercase groups.
Circles and triangles tend to appear slightly larger than squares of the same height.

Fig. 4.8 Designing Type Week 4 (13/05/2024)

Vision correction in type design, classified by form and structure:

Overshoot: The curved or raised shape of a letter extends beyond the baseline and cap lines of the letter.
Character spacing: The distance between letters should be the same to ensure visual balance and consistency throughout the word.
Circles and triangles tend to appear slightly larger than squares of the same height.

Fig. 4.9 Designing Type Week 4 (13/05/2024)

Fig. 4.10 Designing Type Week 4 (13/05/2024)

Most fonts are created due to demand, which can be internal or external. Designers can only make successful designs if they have enough love and interest.

Task 1: Exercise 1 - Typographic Systems

This exercise requires us to practice typesetting and layout based on 8 systems. I read a lot of references and made a design draft before making a design and typesetting layout.

Fig. 1.1 Axial system Week 1 (27/04/2024)

Fig. 1.2 Radial system Week 1 (27/04/2024)

Fig. 1.3 Dilational system Week 1 (28/04/2024)

Fig. 1.4 Random system Week 1 (24/04/2024)

Fig. 1.5 Grid system Week 1 (28/04/2024)

Fig. 1.6 Modular system Week 1 (28/04/2024)

Fig. 1.7 Transitional system Week 1 (28/04/2024)

Fig. 1.8 Bilateral system Week 1 (28/04/2024)

Later, I asked Mr. Vinod and found out that there is only one color, so I added more colors and completed my own exercise.

Choose the one you are most satisfied with from each system you have made and complete the work.

Final Submission

Fig. 1.9 Collection of works Week 2 (29/04/2024)

Fig. 1.10 Final Axial Layout Week 2 (29/04/2024)

Fig. 1.11 Final Radial Layout Week 2 (29/04/2024)

Fig. 1.12 Final Dilational Layout Week 2 (29/04/2024)

Fig. 1.13 Final Transitional Layout Week 2 (29/04/2024)

Fig. 1.14 Final Grid Layout Week 2 (29/04/2024)

Fig. 1.15 Final Modular Layout Week 2 (29/04/2024)

Fig. 1.16 Final Transitional Layout Week 2 (29/04/2024)

Fig. 1.17 Final Bilateral Layout Week 2 (29/04/2024)

Fig. 1.10 PDF without guides Week 1 (28/04/2024)

Fig. 1.11 PDF with guides Week 1 (28/04/2024)

Task 2: Exercise 2 - Type & Play

This exercise requires us to extract letters from the pictures we are looking for, and then combine them with reference mature fonts to make them more complete.

I started this task by searching for nature related images and I found an image of ripples in the water that I thought would be suitable for this task.

Fig. 2.1 https://www.pinterest.com/pin/656329345715555122/

Fig. 2.2 Extracting letters Week 2 (03/05/2024)

Fig. 2.3 Extracting letters Week 2 (03/05/2024)

Fig. 2.2 Letterforms extracted Week 2 (03/05/2024)

Reference font： ITC Garamond Std；Ultra Condensed.

Fig. 2.3 Modify font Week 2 (03/05/2024)

Fig. 2.4 Measuring the size of the letters Week 2 (03/05/2024)

Fig. 2.5 Final letterforms Week 2 (03/05/2024)

Fig. 2.6 Final letterforms Week 2 (03/05/2024)

Mr. Vinod said that my final font was very good, but I could add some detailed texture to increase the water ripple characteristics of the font and showed me how to make it. I made the final modification to the font based on Mr. Vinod’s suggestion.

Fig. 2.7 Final modification Week 3 (06/05/2024)

In the end our fonts were going to be used in a poster. At the beginning I showed it to Mr. Vinod and he suggested that I blur the background a little bit because it was too clear and that my fonts should be bigger so that The entire poster will not look very blank, leaving too much space.And it must be made with illustration, not Photoshop.

Fig. 2.7 illustration poster making process Week 3 (06/05/2024)

I used Photoshop to process the movie logo material and change the color.

Fig. 2.7 Movie logo material Week 3 (06/05/2024)

Fig. 2.7 change the color Week 3 (06/05/2024)

I use reference lines to unify the visual size of all movie logos, and arrange them neatly with consistent spacing.

Fig. 2.8 Arrange movie logos Week 3 (06/05/2024)

Fig. 2.9 Finding Type poster Week 3 (06/05/2024)

After Mr. Vinod's suggestions and modifications, I integrated the font with the background. I first used Photoshop to create a water ripple effect, and used a filter to create a water ripple effect, but I didn't think the final product looked very good. Later, I used replacement water ripples, but it didn't look very good either.

Fig. 2.10 Photoshop Water Ripple Week 4 (13/05/2024)

Fig. 2.11 Photoshop Replacement Week 4 (13/05/2024)

Finally, I used Illustration's wrinkle tool and color gradient clipping mask to make the poster. I like this poster better.

Fig. 2.12 illustration fold tool Week 4 (13/05/2024)

Finding Type poster size: 1024px X 1024px, 300ppi

Fig. 2.13 Finding Type poster Week 4 (13/05/2024)

Feedback

WEEK 2：Mr. Vinod saw my design work, in which he praised my transitional system, expansion system and random system design. But my grid system has too much space, so I may need to make some adjustments to the content layout.

WEEK 3：The original design process of the font should show the steps. The elements of the font should be very obvious during the design. It can be seen that the characteristics of all letters in the font style should be consistent.

Mr. Vinod commented that the overall process of my font design and the final design were not too problematic. In terms of details, it would be better to have some water wave texture in my fonts to increase the visual effect.

WEEK 4：The font of my poster is too big and has become the main visual. It should be more integrated with the background of the picture. There are too many words at the bottom and the top is too empty. The poster space needs to be balanced. I can use Photoshop to make water ripples, which will give a better effect.

Reflection

In this assignment, I learned about the system and diversity of typesetting grids. The eight categories can be used to make many different text layouts. The most important thing is to analyze the text level information clearly, and the text information also pays attention to details. In font design, I learned how to make unique fonts, and at the same time, the fonts should be beautiful and interesting. Finally, the poster production also made me review the importance of my professional ability many times. I am also very grateful to Mr. Viand for his patience in giving me advice and helping me modify my work, which made me realize that I still have a long way to go.

Rules can both organize and emphasize a message. Single-weight rules of equal length function primarily as elements of organization. When there is a change in weight, the rules also create a rhythm and guide the eye downward.Altering the length of the rules creates a strong diagonal. Changes in rule weight create a hierarchy by guiding the eye to the largest volume of black.

Circle Series

The circle can act as a nonobjective pivot point or as an element that creates hierarchy. The examples show ways in which the circle draws the eye to a single word, making that word the first read in the composition.

Tone Series

The simple use of tone can dramatically alter the hierarchy of a message.The eye is drawn to the largest volume of black on a white background or the largest volume of white on a black background. Words or portions of words can be emphasized, giving the message a sense of visual punctuation.

Fig 1.9 Typographic Systems Week 1 (27/04/2024)

Simple color changes can control the hierarchical structure of messages and combine textures. So it is important to carefully consider using non objective factors and avoid using too many information elements, whether due to color volume or complex shapes.

WEEK 2 Reading

In animation, film and game design, there is an increasing use of novel fonts, which are custom fonts designed specifically for game interfaces, movies or game titles. In an era of increasing content creation, differentiated and customized fonts have become is crucial.

Fig. 2.1 Further reading Week 2 (05/05/2024)

Font design for movie posters，Mr.Vinod began to design this learning task, and practiced from the very beginning to let students learn to create their own font design and apply it to movie posters.

Fig. 2.2 Further reading Week 2 (05/05/2024)

First, letters are extracted from pictures, and then combined with reference mature fonts to make them more perfect.

Fig. 2.3 Further reading Week 2 (05/05/2024)

Combine the final font design with the movie poster to get a complete poster work.

Fig. 2.4 Further reading Week 2 (05/05/2024)

WEEK 3 Reading

Follow the books read in the first week, then further reading.

The content here was briefly introduced by Mr. Vinod in Lecture 1, and now it is more detailed.

At the very beginning is the axial system. The axis can be straight or curved like a tree branch, which will increase the interest of the layout.

Fig. 3.1 Further reading Week 3 (010/05/2024)

This poster uses a central composition, using text and a simple white line to create a horizontal line and focus the viewer's eye on the image.

Fig. 3.2 Further reading Week 3 (010/05/2024)

Fig. 3.3 Further reading Week 3 (010/05/2024)

The entire poster uses an axial system and uses gravity contrast, using vertical pressure to guide readers' sight, making the layout more pleasant.

Fig. 3.4 Further reading Week 3 (010/05/2024)

The use of a single axis for the two-color poster makes the work measurable. The poster benefits from the asymmetry of the axis, placed two thirds from the left. This change is very pleasant. The vertical arrangement of the axis diagonally makes the work more dynamic.

Fig. 3.5 Further reading Week 3 (010/05/2024)

The axis system can help designers strengthen space, line spacing and composition at the beginning of work, cultivate designers' keen awareness of grouping, and encourage designers to break conventions and conduct wireless exploration.

Fig. 3.6 Further reading Week 4 (16/05/2024)

Designers should judge whether the composition is full of beauty appreciation through changes in texture and positive and negative rows, and become creative in shaping the axis and organizing space.

Fig. 3.7 Further reading Week 4 (16/05/2024)

Short lines of narrow columns provide maximum variability in position for changes in axis, and narrow gray rectangles close to the text create tension. Asymmetric compositions can be achieved by moving the axis and text to the left or right.

Fig. 3.8 Further reading Week 4 (16/05/2024)

The line length is not very flexible, but it increases the interest of the component potential. There are many spatial changes and attracts attention.

Fig. 3.9 Further reading Week 4 (16/05/2024)

The transparent base emphasizes the presence of the axis through overlapping planes of transparent elements.

Fig. 3.10 Further reading Week 4 (16/05/2024)

搜索此博客

Jia W en bing 0365436