Typography Task 2 / Typographic Exploration & Communication (Text Formatting and Expression)
3.5.2022 - 17.5.2022 (Week 6 - Week 8)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Typography
Task 2 / Typographic Exploration & Communication (Text Formatting and Expression)
LECTURES
Lectures 1 to 5 are completed in Task 1 / Exercises.
6-1.Typography: Different Medium
Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.
Fig.1-1: Image of Typography as Print / Screen
6-2.Typography: Print Type Vs Screen Type
- Type for Print
Fig.1-2: Typography in Print Media
- Type for Screen
Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.
Fig.1-3: Typography in WEBsite
Fig.1-4: Screen vs Print
6-3.Typography: System Fonts for Screen / Web Safe Fonts
Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit.
Windows-based devices might have one group. While MacOS ones pull from another. Then Google's own Android system uses their own as well.
Let's say the designer picked some obscure, paid font family for this site's design. If you don't have that font already installed and it's not pulling from a web-friendly place - more on that later - the font you see would default back to some basic variation like Times New Roman. You, as the visitor, wouldn't necessarily know that's what happened, though. To you, it would just look plain ugly,
'Web safe' ones, however, appear across all operating systems. They're the small collection of fonts that overlap from Windows to Mac to Google.
6-4.Typography: Pixel Differential Between Devices
The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too. because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
Even within a single device class there will be a lot of variation.
6-5.Typography: Static vs Motion
Fig.1-5: Static and Motion Typography
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.
From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
INSTRUCTION
Editorial Layout
Main purpose of the assignment
In this task you will be asked to express typographically the content in the link provided in a 2-page editorial spread. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed.
Utilizing the knowledge gained in the exercises and other modules from the same semester, you will use Adobe InDesign to typographically compose and express the text within a given size (200 x 200 per page).
You may use Adobe Illustrator to create the headline expression should you feel the need to do so. However the final layout is to be completed in Adobe InDesign. Explore several options in expression and layout (sketches). Execute a good layout, with an expressive and appropriate headline in line with the spirit/message of the text.
Type families permitted for use include;
- Univers LT Std
- Serifa Std
- Janson Text LT Std
- ITC New Baskerville Std
- ITC Garamond Std
- Gill Sans Std
- Futura Std
- Bembo Std
- Adobe Caslon Pro
Process of Work
First, prepare the text to be formatted. From several sample texts, I selected the following one.
Visualise for A Better World
Visual communicators renew their call for a change of priorities!
We, the undersigned, are UIUX designers, entertainment designers, graphic designers, animators and visual communicators who have been raised in a world in which the techniques and apparatus of marketing have persistently been presented to us as the most lucrative, effective and desirable use of our talents. Many design teachers and mentors promote this belief; the market rewards it; a tide of books and publications reinforces it.
Encouraged in this direction, designers then apply their skill and imagination to sell dog biscuits, designer coffee, blood diamonds, cigarettes, movies, apparel brand, light beer, education, political ideologies and even even wars. Commercial work has always paid the bills, but many creatives have now let it become, in large measure, what creatives do. This, in turn, is how the world perceives design. The time and energy is used up manufacturing demand for things that are inessential at best or promoting half-truths and propaganda through influencers and persuasive communications.
Many of us have grown increasingly uncomfortable with this view of creativity. Creative people who devote their efforts to this kind of development are supporting, and implicitly endorsing, a mental environment so saturated with commercial messages that it is changing the very way citizen-consumers speak, think, feel, respond and interact. To some extent we are all helping draft a reductive and immeasurably harmful code of public discourse.
There are pursuits more worthy of our problem-solving skills. Unprecedented environmental, social and cultural crises demand our attention. Many cultural interventions, social marketing campaigns, books, magazines, exhibitions, educational tools, television programmes, films, charitable causes and other information design projects urgently require our expertise and help.
We propose a reversal of priorities in favour of more useful, lasting and democratic forms of communication, infotainment and entertainment – a mindshift away from consumer marketing and toward the exploration and production of a new kind of meaning. The scope of debate is shrinking; it must expand. Consumerism is running uncontested; it must be challenged by other perspectives expressed, in part, through the visual languages and resources of creativity.
With the explosive growth of global commercial culture, this message is more urgent today more than ever.
Then, create a canvas for the heading design in Illustrator.
Fig.2-1: Creating Title Design in Illustrator
My first design, created in Illustrator, is in Fig.3. From here, moved on to InDesign process, creating a 200 x 200 mm (spread) art board.
Fig.2-2: First Design and Pouring the Text in InDesign
Follow the same procedure as in "Task 1 / Exercise 2 Text Formatting" to organize the text design.
Fig.2-3: First Design and Pouring the Text in InDesign
Fig.2-4: First Format (9/5/2022)
Referring to the feedback on Week 7, the title design did not represent the contents much. I learned about the problems with this design and how to come up with design ideas in class, then redesigned the entire project. (More details on feedback can be found in the Feedback section below.)
Fig.2-5: 2nd Format (11/5/2022)
This idea was based on the association of world -> earth -> circle. However, after thinking about it, I decided to reject this one.
Fig.2-6: Final Format (11/5/2022)
This design utilizes gradients to represent the gradual process of an invisible object becoming visible. Since it is not visible on the screen in just white, the outline is created with dotted lines, and a little color is also added to the lower part of the background.
Final Outcome
Fig.2-7: Final Outcome PDF(16/5/2022)
Fig.2-8: Final Outcome PDF with Guide & Grid(16/5/2022)
Fig.2-9: Final Outcome JPEG(16/5/2022)
Settings;
- Font: Futura Std
- Typeface: (Book, Bold)
- Font size: 9 pt (Text), 19 pt (Sub-heading), 100 pt (Headline)
- Leading: 11.5 pt
- Paragraph spacing: 11.5 pt
- Average characters per line: 55-62
- Alignment: Left justified (Text), Left aligned (Sub-heading)
- Margins: 10 mm (Top, Left, Right, Bottom)
- Columns: 2
- Gutter (for columns): 5 mm
FEEDBACK
Week 7
General feedback: For imaginative ideas, mind-mapping may be a good tip. Visualize many ideas by writing them down first. For example, when using the letter "i", you can deform the top dot. Try different things that are associated with the appearance of the alphabet, change the shape, etc.
Good design is not about adding too much. Only design that is linked to the content.
Specific feedback: As part of the headline design, a visual image should be created that represents the content of the title. The design in this case is just a row of letters and does not express the content very well. It needs to be improved.
Week 8
General feedback: The idea exp is acceptable, interesting even. However there is still room for improvement (in terms of idea exploration). That said, it is relatively well layed out.
REFLECTIONS
ExperiencesFollowing the previous exercise, we studied the design of magazine. We followed the basic rules and designed the surface, but for me there was a lot to remember and that was very difficult.
Observation
During the course of the project, I was lost for design ideas. I referred to the ideas I learned from professor and the work of other students, but I am still aware that my designs still had not reached the level of a professional. I need to do further research through the learnings.
Findings
I learned a lot of rules, but on top of that, I think personal taste is also important. Some of the other students' work was attractive as an overall concept, even when, for example, the design rules taught were not followed exactly. My weakness is a lack of originality. To overcome this, I intend to supplement this by reading various good design magazines and accumulating knowledge about good design patterns.
FURTHER READING
Magazines as Reference Materials
Vogue Australia
Graphic Design USA
We thought that a well-known design magazines (art, fashion, architecture, etc.) would be an excellent typographic design for each page of content inside. While it does not provide specific knowledge or techniques on typography, it does provide a collection of practical design samples. As aforementioned in the reflection, I will continue to refer to various media for my idea.
Comments
Post a Comment