Typography Task 2 Typographic Exploration Communication

Typography / Task 2: Typographic Exploration Communication

23/5/2024-17/6/2024/week6-week8

ZHANGWANRU  /0368214

Bachelor of Design (Honours) of Creative Media
Typography 
Task2

TABLE OF CONTENTS

1.Lecture 

2.Instructions 

3.Task

4.Feedback

5.Reflection

6.Further Reading

LECTURES

Week6（understanding and letters)

YouTube link: Typo_5_Understanding

1.Letters / Understanding letterforms

-Uppercase letter forms might seem symmetrical at first glance, but they actually aren't. It's easy to notice the distinct stroke weights in the Baskerville stroke form. What's more, each bracket connecting the serif to the stem has its own unique arc.

Fig.5.1.Baskerville stroke

--Letters

-Although capital letters may seem symmetrical initially, closer inspection reveals that the left diagonal line is slightly narrower than the right stroke. Baskerville and Univers, as mentioned earlier, exemplify the meticulous attention to detail typographers employ, aiming to create typefaces that are both internally cohesive and uniquely expressive.

Fig.5.2.Univers typeface

-Comparing the lowercase 'a' in Helvetica and Univers, two seemingly similar sans-serif typefaces, highlights the intricacy of each letterform. Differences in how the stems finish and how the bowls meet the stems distinctly characterize each typeface.

                                                   Fig.5.3.Differentiation of the two 'a' letterforms.

2.Maintaining X-height

-the x-height generally describe the size of the lowercase letterforms. However, you should keep in mind that curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig.5.4 Curved lines going beyond lines.

3.  Form / Counterform

-Sensitivity - Space is usually described and contained by the strokes of a font. When letters are joined together to form words, the contrastive includes Spaces between them.

-The alphabetic form of the counter.

Fig. 5.5.Counterform

4.Contrast
-The basic principles of Graphic Design apply directly to typography.  The following are some examples of contrast--the most poweful  dynamic in design-as applied to type, based on a format devised by Rudi Ruegg.

-The simple contrasts produces numerous variations~small+organic/large+machined; small+dark/ large light 

Fig.5.6 .contrast

Fig5.7 Example of Contrast

week7（Screen and Print）

YouTube link:"Typo_6_Understanding"

I learn about this ：

1.Different Medium

Fig.6.1 example 

Typography exists on paper/a multitude of screens.It is subject to many unknown and fluctuating parameters (e.g operating system , system fonts, the device and screen itself ,the viewport and more).The typesetting  happens in the browser.

Print Typo VS Screen Type

Type for print:

~It‘s designer's job to ensure that the text is smooth, flowing, and pleasant to read.

~a good typeface for print -Caslon, Garamond, Baskerville are the most common typefaces that is used for print.The characteristic is elegant and intellectual ,when set at small font size is better readable. 

~versatile ,easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Fig. 6.2.Print type example 

Fig. 6.3.Print type example 

Type for screen

~typefaces intended for use on the web are optimised  and often modified to enhance readability and performance onscreen in a variety of digital environments. include a taller x-height (or reduced ascenders and descenders),wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast , modified curves and angles for some designs.    

~important adjustment -for typefaces intended for smaller sizes -more open spacing.The factors improve character recognition and overall readability in the non-print environment (e.g the web, e-books, e-readers, and mobile devices.)

Hyperactive Link/hyperlink 🔗 

~a word, phrase ,or image that you can click on to jump to a new document/a new section within the current document. Text hyperlinks are normally blue and underlined by default.

Font Size for screen

~in the books :they are typically set at about 10 points. 

~in the screen：set at 16-pixel

System Fonts for Screen /Web Safe Fonts

~ Open Sans ,Lato, Arial, Helvetica,Times New Roman,Times,Courier New, Courier, Verdana, Georgia, Palatino,Garamond.

 

Fig.6.4.Font size e.g

Static Vs Motion

static

~has minimal characteristic in expressing words.Traditional characteristic such as bold and italic offer only a fraction of expressive potential of dynamic properties. 

Fig.6.5.Static example 

Motion

~often bringing it to life through animation 

~type is often overlaid onto music videos and advertisements .

Instructions  

Task 2

I chose a word from the headline, "UNITE", which I think can clearly express the meaning of the theme of this article.(the Headline:Unite to visualise a better world ')

Task 2: Exercise 1 - Type Expression

1. sketches

Fig.2.1.draft sketch

Fig.2.2.draft sketch

Fig.2.3.draft sketch

2. Digitisation

This is based on my first draft design, but I think it does not reflect the sense of light and shadow, I have improved it.

Update :

Fig.2.1.digitisation

Fig.2.2.digitisation

Fig.2.3.digitisation

I also designed additional versions, which I got inspiration from looking at collage designs.Use some geometric shapes to form a word, the blank part is the expression of the word.

Fig.2.4.digitisation

Here are some notes for you:

Font size (12)

Line Length (55–65/50–60 characters)

Text Leading (14)

Paragraph spacing (follows the leading)

Ragging (left alignment) / Rivers (Left Justification)

Cross Alignment 

No Widows / Orphans

The fonts I use are ICT Garamond Std, Janson Text LT Std, Futura and Univers

Margins: 10 mm

Gutter: 5 mm

Initial Layouts:

Fig.layout#1

Fig.layout#2

Fig.layout#3

Fig.layout#4

Fig.layout#5

Fig.layout#6

Layout Progress:

Fig.layout progress #1

Fig.layout progress #2

Final layout：

Fig.final layout 

Final layout PDF:

                    Fig.Final layout #pdf 

Final layout with grid PDF:

                               Fig.Final layout with grid #PDF

FEEDBACK

WEEK 6:

General feedback：This week, we asked to choose a representative word from the title and design a sketch of six different fonts. I turned to Pinterest for inspiration and learned some typographic ways.

Specific feedback: I designed six kinds of sketches, but Teacher Max was not satisfied with them, and only one was satisfied with them. He suggested me to change the form of the draft, so that the links of words and letters could better show the meaning of words and be more urgent and relevant to the topic. Then I have been designing more satisfactory drafts.

WEEK 7:

General feedback:The teacher helped select the three types, and I need to design six different typesetting to show them.

Specific feedback:When I was brainstorming, I consulted other typesetting patterns to get some inspiration and make my typesetting more clear and easy to understand. Teacher Max also gave me some suggestions to make it look more clear and orderly.My typesetting skills have not been applied to the previous ones, so I need to review the previous knowledge and re-typesetting.

Reflection 

Experience 

Personally, I think editorial typography is rigid because everything, like font size and formatting, is already set up. Overall, it was still a valuable learning experience because I could learn from my mistakes and improve myself. I also learned that creating typographic designs is not easy. Through this process, I learned about the challenges of maintaining formatting consistency, such as font size and style, while also trying to inject creativity. This experience made me understand that typography is actually for beauty and better reading content, at a glance. But my typography didn't use the same typography techniques that task1 did, which taught me that old and new knowledge need to be used together, and that it's important to review it frequently.

Observation 

I have noticed that this discipline requires not only the use of our imagination and creativity, but also the adherence to assigned instructions. This balance between creativity and structural construction is very important for successful typographic design. In addition to this, I noticed that the work of other students in the class was particularly unique and interesting, showing different approaches and ideas. I also learn the works of other designers from Pinterest. Their designs inspire me and provide me with a new perspective on how to solve corresponding tasks. In general, to learn some good designer's works, take the essence, absorb the excellent.

Findings

When I deeply observe other people's typographic design works, I should not only get inspiration in technology and style, but also seek new perspectives in aesthetics and expression forms. By analyzing the works of different artists, we can find out their creative thinking and use them as reference objects in our own creative process. These are all skills that I need to learn and apply to my own design. In addition, it is very important for designers to master InDesign software. The software not only provides design tools and layout options, but also helps designers work more efficiently with text and image content. I need to devote extra time to study and practice, which can help me have a deeper understanding of the application of various functions of the software, better realize my personal design ideas and improve work efficiency. Through these discoveries, I can not only improve my aesthetics and design ability, but also create influential and creative design works in practical tasks.

FURTHER READING:

《A Type Primer, 2nd Edition》

《A Type Primer, 2nd Edition》 is a classic book focused on guiding readers to understand and apply the basic principles and techniques of typographic design. The following is A summary of the book:《 A Type Primer, 2nd Edition》 introduces the core concepts and techniques of typographic design in a clear and systematic manner. The book first discusses the origin, classification and basic terminology of typefaces, establishing the necessary basic knowledge for readers. The book then explains in detail the principles of typographic design, including font choice, line spacing, paragraph structure, etc., emphasising the important impact of these factors on text readability and visual appeal. In addition, the book also covers the basic concepts of digital typography and web typography, adapting to the new requirements of contemporary digital media for typographic designers. Through a wealth of cases and examples, the author shows the impact of different design choices on the final visual effect, and provides practical advice and tips to help readers apply what they have learned in their practical work. Overall, 《A Type Primer, 2nd Edition 》is a comprehensive and easy-to-understand book for both beginners and experienced designers to read and refer to. It not only helps readers to deeply understand the principles and techniques of typography design, but also inspires their passion and creativity for the art of design. It is a classic book worth collecting.

Upon comparing their vertical and circular connections, notable visual distinctions emerged. These design variances imbue each font with distinctive features and personality traits, influencing how text is visually communicated and perceived.

The layout design skillfully conveys the essence and nuances of words through subtle details. For instance, in the word 'missing,' the absence of quotation marks subtly underscores the concept of something being lost or absent. Similarly, the gradual addition of 'd' in 'added' visually illustrates the process of inclusion or augmentation. These meticulous design choices not only enhance visual aesthetics but also deepen the textual meaning, creating a cohesive and engaging reading experience.

Chinese and English differ fundamentally in essence, and the book employs examples to aid readers in comprehending these distinctions between the two languages.

This passage illustrates the characteristics of typesetting using examples. Large text facilitates easy reading from a distance, whereas small text is more suitable for close and detailed reading. Contrast inversion enhances the spatial relationship between foreground and background. Overlapping different elements further enriches the sense of depth within a primarily two-dimensional space.

On the whole，《A Type Primer, 2nd Edition》 is a classic book by John Kane that introduces the basic principles and techniques of typographic design. Through clear explanations and rich examples, this book helps readers understand the classification, selection and use of fonts, and how typographic design can improve the readability and visual appeal of text, as well as the beauty of text.