Typography2-Typographic Exploration & Communication
25.10.2023 – 18.11.2023 ( Week 6 – Week 8)
QIAN GUOYI / 0369462
Typography / B' of Mass Comm (Hons) (Broadcasting)
Task 2: Typographic Exploration & Communication
INSTRUCTIONS
LECTURES
Week6:
Screen & Print
Typography in Different Medium
This video introduces the use of typography in various media at different times, focusing on printing and screen, and their continuous technological advancement and popularity.
1. In the past, printing existed only on paper. As long as it is edited, typeset and printed, it can appear in the public eye.
2. Nowadays, the communication methods of printing have become diverse. It can appear on paper or on the screen. People are also using more advanced technologies to use these printing techniques. For example, system operations, system fonts, devices, etc.
Fig1 week6
Fig2 week6
Print Type Vs Screen Type
·Type for Print
1. Before the advent of the screen, typefaces were widely used in print. Type designers need to ensure that text flows smoothly and is easy to read.
2. Caslon, Garamond, Baskerville are good fonts suitable for printing. They are characterized by elegance, execution, and small fonts are popular in the current era.
3. They are versatile, easy-to-read classic fonts with many functions.
·Type for Screen
1. Fonts used on the screen are somewhat different from the fonts that traditionally appear on paper. They are optimized and often modified.
2. Modifications could be, different sizes of fonts, more open counters, thicker font underlines, etc.
Hyperactive Link/ hyperlink
1. The concept of a hyperlink refers to a word, phrase or image that can be clicked to jump to another file. Hyperlinks are widely used, and almost no website does not use them. In the form of a hyperlink, the font is usually blue and underlined.
Font Size for screen
1. The size of text will vary on different media, but all take into account reading distance. Just like 16 pixels of text on a screen is actually the same size as 10 pixels of printed text in a book or magazine.
System Fonts for Screen/ Web Safe Fonts
Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Font Size for screen
Pixel Differential Between Devices
The main reason why the text we see on different devices has different font sizes, different proportions, and different pixels is because the screens used by our computers, tablets, mobile phones, and TVs are of different sizes.
Static Vs Motion
Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.
Static typography is widely used in advertisements, posters, magazines, and flyers. Their different functions leave different impressions and impacts on the audience, and they have a close emotional connection with the audience.
Fig6 Week6
Motion Typography
1. Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic” (Woolman and Bellantoni, 1999). More and more film and television companies’ brand labels gradually include animation types.
2. Fonts on music videos and advertisements often move to the beat of the music. Screen typography evolved to be imaginative and express some brand values.
Task 2：Text Formating & Expression
This assignment requires the use of Adobe Illustrator and InDesign to create a layout poster. We can only use the ten given fonts for design.
Fig7
I first designed the title font of the poster on Illustrator, using ten fonts given by the teacher.
Week7:
Ms Hsin introduced us to the new tasks and made requirements for the new tasks. Mr. Vinod introduces us the tools for drawing fonts and how to draw fonts. He recommends that we do a thorough research on fonts before constructing our own font sketches so that we can design our own fonts.
We need to select a preferred font from the ten provided fonts and use the letters "HOGB" to analyze the letter.
Fig10 Week7
Letter "H": The thickness of the lines on both sides remains the same, with a slight tapering of the lines on the inner crossbar.
Letter "o": The thickness of the line is exactly the same as perpendicular to the two axes, forming a perfect circle.
Week 8: rest week
FEEDBACK
Week6:
Pay attention to the alignment of the text and the article. Adjusting the kerning can make the article look neater. In addition, pay attention to the proportion between the article title and text to make it look more beautiful.
Week7:
The sketch of handwritten font design cannot be the same as the drawn font. In the normal writing process, people will not repeatedly blacken and bold the strokes of a letter, so it is necessary to write letters rather than draw.I showed Ms. Hsin the font sketch of my design. I expressed my wish to refer to the Gothic writing style. Ms. Hsin suggested that I use a marker pen with a wide flat tip to write the font and gave me a demonstration.
Week 8: rest week
REFLECTION
Experience
In Task 2, it was very interesting to learn how to do typography by learning Adobe Illustrator. During this process, I learned a lot about the evolution of font expression, the role of typography design, and the continuous improvement and widespread use of printing and screen technology. However, this knowledge was something I had never discovered before when I looked at posters, magazines, and screen layouts. Through this study, I learned the secrets.
In addition, I also found this assignment to be challenging as we could only use the prescribed ten fonts to create our own designs. During this period, I was often confused, but under the guidance of Mr. Vinod and Ms. Hsin, I continued to improve my works.
Observations
During this task, I observed that the weekly tasks are all related to each other, and in completing a task, we need to combine what we have learned before to complete this new task. In task 2, we need to use Adobe Illustrator to design the titles of our articles and design them into the style we need. During this process, I need to study and observe some poster layout works to learn the differences so that I can better create the title form I want first. Next, we need to import the article title we designed on Illustrator into Adobe InDesign, and then format the text of the article to make it more tidy, beautiful and easy to read.
Findings
In this task, I discovered the importance of typography. It is not only for beauty, but also for the convenience of readers, so that they can quickly capture the key points of the content. In daily life, we can see different fonts everywhere we go. We can see the use of words and typography in books, posters, magazines, packaging, and electronic posters on screens. They It has been integrated into our lives, and this mission also helped me discover the mystery. Each font has its own uniqueness and different functions. After this, I will pay more attention to different fonts and think about why designers design them this way.
FURTHER READING
This week I read the book Typography Systems of Design, which talks about some typographic elements of guidance system design and some excellent case demonstrations.
Everyday digital interfaces include a rich variety of images, visualizations, and other graphics. Most importantly, however, they are made of words. Oh so many words. As we engage teams using systems to design and code usable, consistent, and beautiful interfaces, it's critical that text relies on a strong typography foundation. As we engage teams using systems to design and code usable, consistent, and beautiful interfaces, it's critical that text relies on a strong typography foundation.
Typography starts with setting up the font family and weight and the basics of fallback. Then explore how to build hierarchy using other details like size, color, row height, and layered responsiveness. These models are then applied to components in the system library (such as articles and headers) as well as custom components made by other teams.
Fig13
Most design systems display typographic proportions as vertical stacks in documents. This is not enough. The typographic system should also establish structure such as body text, headings, colors, responsiveness, colors, and other fine-grained details. Printing systems should also establish structure such as body text, headings, color, responsiveness, colors and other fine-grained details
Fig14
Fig15
Headings are a key contributor to page hierarchy. Most systems offer at least four, although some offer more. Page titles are usually (but not always) aligned with the maximum title level. The remaining levels are woven throughout the component: a card title here, an alert message title there, and a modal two-level title.
Title tags assign semantic meaning to an element's role in the page hierarchy. However, a component's tags will not or cannot be consistent with the HTML of every page that uses the component, especially across pages or entire applications. Additionally, the largest headline on one screen (such as the product specs page title) may be the third largest headline on another page (such as the product homepage).
评论
发表评论