Typography / Task 3: Type Design & Communication

 

17/June/2024- 15/July/2024-week 8-week 12

ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media

Typography/Taylors University

Task 3: Type Design & Communication

Introduction

LECTURES

Week 7:

This week in Teams, Mr. VINOD asked us to choose a favorite font from the ten provided. Using the following letters H, o, g, b, do a detailed anatomy of the letters, using the following 3 strokes of the letters ODHNG/ODHNG. Explore the three different writing styles with these three pens.

In class, Mr. Max introduced us to the guidelines for a new project and explained what to do in preparation for the next work. Mr. Max introduced us to the types of pens used to draw letters and provided some sample videos for us to watch after class to start drawing letters.

fig.7.1

fig.7.2

Research:

In Teams, Mr. Vinod posted a video to watch.

In class, Mac carefully taught us to use Adobe illustration software to analyze the letters T, y, d and m in detail.

fig.7.3

fig.7.4

In the team, Vinod sir asked us to analyze the letters in detail for H, o, g and b using one of the 10 fonts provided and write down the observations.

I used Adobe illustration software to dissect the letters H,o,g, and b in detail.

fig.7.5

fig.7.6

fig.7.7

sketch：

I chose three different types of fonts from the 10 fonts given by the teacher, and three different font styles were selected in each of the three fonts. Among them, I used flat pen, soft brush and round pen, and the strokes of the three pens were different.

Draft 1.fig.7.8

Draft 2.fig.7.9

Draft 3.fig.7.10

Week 9:

Text digitization:

During class, Max looked at the sketches I made with three different brushes and chose three fonts he thought looked more stylish from Draft 3 for later type design. I personally prefer the soft tip brush and continued to write the rest of the words (o, l, e, d, s, n, c, h, t, I, g, and #) in this style and digitized them.

fig.9.1

I chose a font I liked more for the later font design.

fig.9.2

I modified the letter step by step. The design of this letter didn't quite fit in with the rest of the letterform. I made some changes.

I don't want to make it too complicated, I want to make it trendy and simple. The fonts and symbols are gradually simplified, showing the design process from complex to simple.

fig.9.3

fig.9.4

Based on Mr. Max's suggestions, I made some modifications and completed the final digital font design.

fig.9.5

fig.9.6

Letter draft design：

fig.9.7

fig.9.8

Week 11:

Development of fonts in FontLab 7

When I finished pasting the letters, I found that the proportions of the design I had made were not adjusted properly, so I went back to the illustration to fine-tune the width and height.

fig.11.1

fig.11.2

fig.11.3

fig.11.4

fig.11.5

After completing the digital font, we need to import the font from Adobe Illustrator into FontLab 7 to process its kerning and spacing. At the beginning I aligned the spacing of my draft.

fig.11.6

fig.11.7

At first, I did it wrong, so Mr. Max asked me to change it according to the example chart of letter lateral values ​​sent by Mr. Vinod.

fig.11.8 Example table of horizontal values

After the change：

Teacher Max asked me to change the size of the period.

fig.11.10First revision

fig.11.11Second revision

Week 12:

FINAL Task 3: Type Design & Communication

Download font here:

'Hanz' font link:

https://drive.google.com/drive/folders/13SN80jrtIgRUGMFtX75C7T9gg1uE7I_4

fig.12.1  Screen Grab of FontLab process (side-bearings)

Fig.12.2 "HanZ" (JPEG) The Final font

Fig.12.3 "HanZ" (PDF) The Final font

week 13:
Final black and white poster

fig.13.1 Final Poster (JPG) Black

fig.13.2 Final Poster (JPG) White

fig.13.3 Final Poster (PDF) Black

fig.13.4 Final Poster (PDF) White

Feedback:

Week 7:

General feedback: Considerations when drawing fonts, how to draw sample strokes.

Week 8: Review week

Week 9:

General feedback: Remember to divide the letters into 3 art boards when digitizing them, keeping the original strokes so that you can easily change the letters if needed.

Week 10:

General feedback: Keep all letters and strokes consistent.

Specific feedback: Start digitizing my font and make changes to my font in class as instructed by the teacher

Week 11:

General feedback: Pay attention to the trace points imported into Fontlab 7 letters to reflect the main trace curve.

Specific feedback: During the break, the teacher saw that we could not use Fontlab 7 software, and taught another student in person. We watched and learned.

Week 12:

General feedback: Use the kerning standard given by the letters O and H, compare the spacing of other letters, adjust to the appropriate spacing, it will look more beautiful.

Specific feedback: In this week's exercise, I learned more about fontlab software through font creation, which gave me knowledge and understanding of font orientation measurement.

REFLECTIONS:

Experience: in my assignment for this module, I learned how to write English fonts using soft brushes, and the process of making fonts gave me a whole new perspective on font making and its difficulty. This was the first time I made my own font, and it was imperfect but rewarding!

OBSERVATION: In this assignment, I looked at a large number of font frames to find my own font characteristics in order to design the ideal font. I also found a lot of key points during the observation process, such as the different positions of different letters.

Discovery: After this exercise, I gained a better understanding of the process of creating fonts and I learned that it is not the uniqueness of each letter that creates the perfect font, but the harmony and connection between the letters. I also explored more illustration tools and learned about the nuances between letters. I realized that making fonts is actually much more difficult than I thought it would be. The precision required to make one is astounding. Honestly, I think I could have done better, but it's too late. I may try to create a new one in my free time, though.

Further reading:

From the 7 books recommended, I chose Typography reference as my reading material for my further reading.

Precise visual communication requires first-rate typography skills

Typographic Design: Form and Communication, Sixth Edition is the latest update to the classic typography text that covers all aspects of designing with type. Revised to reflect the shift in graphic design conception and understanding, the book contains a brand-new exploration of typography in media versus typography in motion, and provides the latest information on emerging trends and technology in the design process. Full-color images showcase recent design examples and a companion website features a robust collection of resources for students and instructors. Striking a balance between fundamental information and pivotal new knowledge and ideas, the book provides the perfect basis for engaging new learners as well as seasoned professionals.

Typography is the comprehensive design of type, encompassing selection, placement, manipulation, and communication. An integral element of the graphic designer's arsenal, typography skills translate across industry boundaries into print, video, film, television, packaging, advertising, digital design, and more. Typographic Design provides insight, information, and practical instruction for every step in the process, from concept to execution. Topics include:

• Letterforms, syntax, and legibility
• Communication and the typographic message
• Evolution and technology of typography
• Typographic design processes, and using the grid

The book also contains case studies that illustrate the successful use of typography, demonstrating the impact of good type on the overall design, and a listing of type specimens that exhibit good communication through good design. Words are an important part of the human condition, and presentation can have a major impact on the message. Graphic designers must be able to manipulate type to convey precisely what's intended, and Typographic Design is a comprehensive guide to mastery.

Format

Before creating a design, a designer should always start by taking note of the  size and proportion of the page / screen that they are going to work with.

The Evolution of Typography

Typography is an evolution of the written word, and as such it participates in a history of visual communication extending thousands of years. That evolution is presented here in the form of a timeline that traces a development from hand, to mechanical, to digital practice, in the context of world-historical and art-historical events.

The history treated in the first section of the timeline predates) typography. It begins with the invention of writing over five thousand years ago and ends with the invention of movable type in Europe during the middle of the fifteenth century. The second section covers the long era of the handpress and hand-set metal types. This period, from Gutenberg's invention of movable type to the end of the eighteenth century, lasted about 350 years. In the third section, the Industrial Revolution and nineteenth century are revealed as an era of technological innovation and an outpouring of new typographic forms. The fourth section begins with the year 1900 and covers the twentieth century, a time when type was shaped by the aesthetic concerns of modernism, the need for functional communication, technological progress, and the digital revolution in typography.

The final section showcases typographic design in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.

The Evolution of Typography

Typography is an evolution of the written word, and as such it participates in a history of visual communication extending thousands of years. That evolution is presented here in the form of a timeline that traces a development from hand, to mechanical, to digital practice, in the context of world-historical and art-historical events.

The history treated in the first section of the timeline predates) typography. It begins with the invention of writing over five thousand years ago and ends with the invention of movable type in Europe during the middle of the fifteenth century. The second section covers the long era of the handpress and hand-set metal types. This period, from Gutenberg's invention of movable type to the end of the eighteenth century, lasted about 350 years. In the third section, the Industrial Revolution and nineteenth century are revealed as an era of technological innovation and an outpouring of new typographic forms. The fourth section begins with the year 1900 and covers the twentieth century, a time when type was shaped by the aesthetic concerns of modernism, the need for functional communication, technological progress, and the digital revolution in typography.

The final section showcases typographic design in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.

The Typographic Grid

A grid is a skeletal framework used by designers to organize information within a spatial field. It is a system characterized by the dualities of freedom and constraint, simplicity and complexity.

It provides a strategy for composing text and other visual information in two- and three-dimensional space, including those of printed materials, film, computer screens, built environments, and typographic installations. Grid systems aid designers in making information clear and optimally accessible highly desirable traits in a world increasingly inundated by visual noise.

When used effectively, typographic grids provide form and space with proportional harmony and aesthetic beauty. The final result is clearer and more accessible communication.

Syntax and Communication

Like typographic anatomy, typographic syntax has a language that must be learned if one is to understand typographic design. Syntax is the connecting of typographic signs to form words and sentences on the page. The elements of design-letter, word, line, column, and margin—are made into a cohesive whole through the use of typographic space, visual hierarchy, ABA form, and grid systems.

Typographic Design Education

The rapid advance of technology and the expanding role of visual and media-based communication in contemporary society have created new challenges for typographic education. Faced with a complex communications environment, and the changes that are occurring and are anticipated, how can a designer nurture sensitivity to typographic form and communication? An appreciation of our typographic heritage, an ability to meet the standards of contemporary design practice, and an innovative spirit in facing the future are required.

Typographic Design Education

The rapid advance of technology and the expanding role of visual and media-based communication in contemporary society have created new challenges for typographic education. Faced with a complex communications environment, and the changes that are occurring and are anticipated, how can a designer nurture sensitivity to typographic form and communication? An appreciation of our typographic heritage, an ability to meet the standards of contemporary design practice, and an innovative spirit in facing the future are required.

The way graphic designers use typographic specimens has changed dramatically in the age of digital typography. Earlier generations of designers used specimens to determine which fonts and sizes to specify and order from typesetting companies, and for reference or tracing purposes when drawing layouts. A limited range of sizes were manufactured, and specimen sheets or books showed all available sizes.

Recommend yourself

By Kimberly Elam

Original title: Typographic Systems of Design

The content of this book is not too much, explaining a total of 8 different layout systems, each system has a separate introduction and some trial design cases. It is interesting to note that the eight test cases of typography systems all use the same text content, text size, font weight as much as possible, and sometimes add some abstract graphics or color changes. On the premise of maintaining the rich format, it simply shows the characteristics of different formats and the delicate differences between the text arrangement. This arrangement is like a pure visual experiment, which can stimulate a lot of theoretical thinking and is well worth studying. Relatively speaking, it is not so friendly to new designers, and it is not "practical".

The design cases in the book are all English texts. Due to the differences in reading between Chinese and English, some theories may not be applicable to Chinese typesetting.

It is mentioned in the book that the radiation system and the ripple system will have the phenomenon of inverted text, which will affect the reading. The degree of influence of this on Chinese and English is different, English is to read letters to words and then form sentences, the graphic structure of letters is simple and fixed, reading backwards will affect the understanding speed of letters, and then affect the understanding of words and sentences. Chinese reading directly extracts single words or even the graphics of the whole word. The structure of Chinese characters and graphics is complex and varies a lot. Chinese reading will have a much higher tolerance for graphics, and the discomfort of reading backwards is far less than that of English. Therefore, compared with English, Chinese is more suitable for radiation and ripple typography system.