TYPOGRAPHY TASK 2 - EXPRESSION AND COMMUNICATION
April 2024 - July 2024
Wang Zilong 0361141
GCD60104 Typography / Bachelor of Design (Honours) in Creative Media / Taylors University
Task 2 | Typographic Expression and Communication
LECTURES
Week 5:
Typo_5_Understanding
1. Letters / Understanding Letterforms
The uppercase letters are suggested to be symmetry, but in fact it is not all symmetry. The letterforms below both have their own expressions and both are internally harmonious.
Baskerville stroke form : Easy to identify two different stroke weights
Univers stroke form : The left width is thinner than the right width.
Fig 1.1.1 Baskerville "A", Univers "A"
These are lowercase letter "a" of Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
Fig 1.1.2 Helvetica "a", Univers "a"
2) Letters ? Maintaining x-height
X-height generally describe the size of the lowercase letterforms. There is some additional points, curved strokes, such as in ‘s’, must rise above the median or sink below the baseline. This make the letters appear to be the same size as the vertical and horizontal strokes they adjoin.
Fig 1.1.3 X-heights for lowercase letter
Just as important as recognizing specific letterforms is developing a sensitivity to the counterform (negative space) —the space describes, and often contained, by the strokes of the form. The spaces between letters make up the counterform when they are combined to form words. The determine the readability of a word.
Fig 1.1.4 Form and counterforms
One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. The examinations also provide a good feel for how the balance between form and counter is achieved and a palpable sense of letterform’s unique characteristics. It also gives you a glimpse into the process of letter-making.
Its worth noting here that the sense of the ‘S’ holds at each stage of enlargement, while the ‘g’ tends to loose its identity, as individual elements are examined without the context of the entire letterform.
Fig 1.1.5 Form and counterforms
Contrast is a crucial component of design that is used in typography as well.
Variation for contrast in typography
- Small + Organic
- Small + Dark
- Large + light
- Negative + Positive
Fig 1.1.6 Combination of contrast in Typography
Week 6:
Typo_6_Screen & Print
1) Typography/ Different Medium
In the past, typography was viewed as living on paper. Good typography and readability were the result of skilled typesetters and designers. Today, typography exists not only on paper but on a multitude of screens and devices. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more.
2) Print v.s. Screen Type
Primarily, type was designed intended for reading from print. A good typeface for print such as Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their elegant characteristic and highly readability. They are versatile and easy to digest for viewers.
Fig 1.2.1 Example of Print Type
Fig 1.2.2 Example of Print Type
On the other hand, typefaces used on the web are modified to enhance readability and performance on digital screen.
For example:
- Taller x-height
- Reduction of ascenders and descenders
- Wider letterforms
- More open counters
- Heavier thin strokes and serifs
- Reduction of stroke contrast
- Modification of curves and angles
- More open spacing (especially for smaller sized typrface)
All these are aiming to improve letterforms recognition and readability in the screen medium like web, e-books, e-readers, and mobile devices.
Hyperlink
Hyperlink is existed in web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default. When the cursor is moved over a hyperlink, the arrow should change to a small hand pointing at the link.
Font Size for Screen
16-pixel text on a screen is about the same size as text printed in a book or magazine.
System Fonts for Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection, different operating system might have different selection.
Thus ‘Web safe’ typefaces are important to know. They’re the small collection of fonts that overlap from Windows to Mac to Google. These are the example:
- Open Sans
- Lato
- Arial
- Helvetica
- Times New Roman
- Times
- Courier New
- Courier
- Verdana
- Georgia
- Palatino
- Garamond
The text displayed on PCs, tablets, phones and TVs are in different proportion too because of different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
Fig 1.2.3 Size of type in displayed in different screen
3) Static v.s. Motion
Static Typography
Static typography expresses words with little characteristics. Dynamic features have much more expressive possibilities than traditional attributes like bold and italics.
Fig 1.2.4 Static Typography
Motion Typography
Typographers have the chance to "dramatize" type through temporal media, making letterforms more "fluid" and "kinetic". Typographic information is presented in film title credits, frequently animated to bring the text to life. Animated text is a common feature of motion graphics, especially in the branding of film, television production films, music video and advitisement.
Fig 1.2.5 Motion Typography
INSTRUCTIONS
This is the Module Information Booklet for this module:
FEEDBACK
week 6
I have gained a lot from learning text formatting. First, by mastering Markdown syntax, I learned how to edit and beautify documents quickly and effectively. The simplicity of Markdown allows me to focus more on the content itself rather than adjusting the format. Secondly, knowing the basic knowledge of HTML and CSS allows me to further customise and control the appearance and layout of the document. This in-depth learning makes me more comfortable when handling documents at work and improves my work efficiency. Overall, learning text formatting not only helps me improve my technical ability, but also gives me a deeper understanding and application of document processing.
week 7
By learning and applying text formatting skills, I find that it is very important to improve the readability and professionalism of documents. Mastering basic fonts, colors, and paragraph formatting makes my documents look clearer and more organized. In addition, learning how to use typesetting tools (such as LaTeX) allows me to produce beautiful academic papers and reports, which improves my performance in academia and professional fields. In the field of programming, proficient use of regular expressions to process text data enables me to extract and process information more efficiently. In short, learning text formatting not only expands my skill range, but also provides me with a deeper understanding of my work in different fields.
Task 2: Editorial Text Formatting
In this task, we need to design an editorial layout based on the texts provided, which are "The role of Bauhaus thought in modern culture", "United to look forward to a better world" and "Principles of building and living". Choose one of these three, I picked the "United to see a better world", responding to the current era and the same ideas as mine.
1. research
First of all, for this theme, I first found some relevant news reports and some related posters, looking for some inspiration. Among them, some anti-war themes calling for social peace and harmony are consistent with the theme.
poster 1.1
poster 1.2
I think the main elements are as follows:
1.Peace symbols: such as peace doves, olive branches, peace signs, etc., these symbols are often regarded as symbols of peace and reconciliation.
2.Diversity and unity: images showing people of different races, cultures, and religious backgrounds united in unity, emphasising the importance of peace and tolerance.
3.Peace slogans: concise but powerful slogans, such as "peaceful coexistence" and "peace and love", directly express the call for peace.
4.Positive expression: showing people's life scenes in a peaceful environment, such as pictures of mutual help and friendly interaction, emphasising the beauty of peaceful life.
5.Environmental protection and sustainable development: emphasising the close relationship between environmental protection and sustainable development and peace, advocating the protection of earth resources to achieve long-term peace.
6.Symbolic buildings of peace: images of international peace symbolic buildings such as the United Nations headquarters and the Peace Museum, representing the efforts and symbols of global peace.
7.Artistic expression: using artistic methods to express the concept of peace, and enhancing visual impact and appeal through colour matching, artistic style, etc.
8.Children's peace: using children's images or children's smiles to express the desire and commitment to the peaceful future of the next generation.
so, I mainly found some logos stand for uniting and peace showing my aim to do the design of the text formatting.
logo 2.1
logo 2.2
I combined the results of previous research, such as the peace symbol combined with letters, and symbolises the unity of all nations, mutual understanding, and mutual assistance, which is consistent with the theme.
Further Reading
Typo Graphic Design
Typographic Design is an important book that explores the art of typographic design. This book introduces the core principles and techniques of typographic design in an easy-to-understand way. The following is my understanding and summary of several key points in the book:
First, the book emphasises the importance of typographic design in conveying information and emotions. Words are not only a carrier of information, but also a way of expressing emotions and style. By choosing the right font, size, line spacing and layout, designers can effectively enhance the expressiveness and readability of words. For example, the use of bold and italics can highlight key information or emphasize specific emotional colors.
Second, the book mentions the basic principles of typographic design, such as alignment, contrast, balance and rhythm. These principles are not only applicable to traditional print media, but also to digital platforms and multimedia design. For example, in web design, good typography can not only enhance user experience, but also increase the comprehensibility and attractiveness of information.
In addition, the book also introduces the characteristics of different fonts and their application in design. The choice of font directly affects the visual effect of the work and the information conveyed. By understanding the style, structure and historical background of the font, designers can better use fonts to achieve the intention and effect of the design.
In summary, "Typographic Design" provides readers with systematic typographic design knowledge through detailed case analysis and practical technical guidance. This book is not only suitable for beginners to get started quickly, but also provides new inspiration and ideas for experienced designers. It emphasises the purposefulness and expressiveness of design, helping readers to create more excellent and professional works in their daily design work.
Comments
Post a Comment