Typography - Task 2: Typographic Exploration & Communication
21/10/2024 - 10/11/2024 (Week 5 - Week 7)
Chang Wing / 0367807
Typography / Bachelors of Design (Honours) in Creative Media / Taylor's University
Task 2: Typographic Exploration & Communication
TABLE OF CONTENTS
1. Lectures
1. Lectures
Week 5
Typo_5_Understanding
Understanding Letterforms
Some letterforms may appear symmetrical, but often are not. A closer examination reveals different stroke weights and Unique arcs in brackets of typefaces, such as Baskerville. In Univers, the left stroke is thinner than the right, creating an optical illusion of symmetry. Differences in stroke weight are intentional, contributing to the overall aesthetic and readability.
Figure 1.1 Baskerville and Univers' Letterform
Maintaining X-Height
Figure 1.2 Baskerville and Univers' Letterform
Counterform
Figure 1.3 Counterform
Contrast
Week 6
Typo_6_Screen&Print
Print Type Vs Screen Type
Good typefaces for print: Caslon, Garamond, Baskerville because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.
Figure 1.5 Type For Print
Figure 1.6 Typographical artworks for print purposes
Type For Screen
- 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
- More open spacing for typefaces intended for smaller sizes
Typefaces like Georgia and Verdana are designed specifically for screens.
Hyperlink: A word, phrase, or image that you can click on to jump to a new document or a new section. Text hyperlinks are normally blue and underlined by default. Cursor arrow should change to a small hand pointing when moved over a hyperlink.
Font Size for screen: 16-pixel screen text = size of printed text in a book/magazine (approximately); Books texts are usually set at about 10 pt, as we read them close-up. At arm's length, you'd want at least 12 pt, roughly 16 pixels on most screens
System Fonts for Screen/ Web Safe Fonts: Each device has its own pre-installed fonts, based on its operating system, which vary slightly. If a designer uses an uncommon font not installed on our device or from a web-friendly source, it defaults to a basic font like Times New Roman, which might look ugly. Web safe fonts, however, appear across all systems, ensuring consistency.
Example for web safe fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
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.
Figure 1.7 Pixel Differential Between Devices
Static Typography
Figure 1.8 Typography on Billboard
Motion Typography
Figure 1.9 Motion Typograophy
INSTRUCTIONS
Type Expression & Text Formatting
Required to express typographically the provided content in a 2-page editorial spread (200mm x 200mm per page). Utilising the knowledge gained in the exercises and from other modules in the same semester, students will use Adobe InDesign to typographically compose and express the text within the given size.
PROCESS WORK
Task 2: Typographic Exploration & Communication
Research
Figure 2.1 ChatGPT Answers (28/10/24)
I briefly sketched some compositions I had in mind on Procreate so I have a better vision about the compositions that I'm going to do.
Figure 2.2 Layout Sketches (28/10/24)
I also looked up for editorial layouts on Pinterest to draw inspiration from them.
Figure 2.3 Editorial layouts on Pinterest (28/10/24)
Digitisation of Sketches
I created type expressions in Adobe Illustrator because they have features like pathfinder and rotation tool that offers more flexibility for shaping and manipulating type.
Figure 2.4 Type Expression in Adobe Illustrator (28/10/24)
Process
I did text formatting in Adobe InDesign because it has more advanced layout features like the grid options so I could align my elements more precisely.
Figure 2.5 Process in Adobe InDesign (28/10/24)
To enhance readability, I ensure the headline has a consistent reading flow, from letter "A" downward, then moving diagonally upward to the right. I changed "and live by" to lowercase to create more space, fitting it neatly within the letter "O." Adding a period at the end to mark it as the end of the headline, minimising any potential confusion in the reading sequence.
The height of the body paragraphs also follows an upward diagonal flow, creating a sense of progression and elevation that reflects the content's message about personal development and the ethical responsibilities designers must uphold.
Figure 2.6 Reading Flow (28/10/24)
Mr. Vinod said the letter "O" need to have a smoother transition at its the curve point, so I overlapped the letter "D" on it, trimmed off the excessive parts of "D" and united them with pathfinder, same goes to another half of letter "O".
Figure 2.7 "D" (Grey part) overlap with "O" (Black part) (28/10/24)
Figure 2.8 Before and after of the form of "O" (28/10/24)
Layout Explorations
Figure 2.9 Layouts (Block) (28/10/24)
Final Layout
Figure 2.10 Final Layout (Without Grids) (4/11/24)
.png)
Figure 2.11 Final Layout (With Grids) (4/11/24)
Figure 2.12 Final Layout (PDF: With & Without Grids) (4/11/24)
The Concept
Headline Structure: The word "Code" is the central element, presented largest in size. This word sets the stage, making it clear that there is a foundational "code" or set of ethics the text will explore.
Letter "E" in "Code":
The crossbars of letter "E" in "Code" is elongated to be the support line under the phrase "To Build On" and the body texts, symbolising that stability and structure is the qualities that an ethical code offers.Phrase "To Build On":
The middle crossbar of the "E" and the body texts support the phrase "To Build On," with each word layered upward, visually mimicking the idea of "building" upward. Each layer expands in length, the ascending layout suggests growth and progression, reinforcing themes of personal development and ethical responsibility.
Phrase "and live by.":
The phrase "and live by." is placed within the elongated "O" in the word "On," visually contained to show the must of embracing these ethics as designers progresses through their creative journeys.Final Text Formatting Layout
Font : Universe LT Std (49 Light Ultra Condensed/93 Extra Black Extended)
Type size : 330 pt and 74 pt
Leading : 72 pt (Smaller than type size because I think it looks better)
Paragraph Spacing : 0 pt
Body
Font : Universe LT Std (65 Bold/55 Roman)
Type size : 8 pt
Leading : 12 pt
Paragraph Spacing : 12 pt
Characters per line : 42
Alignment : Flushed left
Margines : Top/Bottom/Left/Right (10 mm)
Columns : 3
Gutter : 5 mm
FEEDBACK
Task 2: Typographic Exploration & Communication
Week 6 (28/10/2024)
General Feedback: Maintain line length (If not, readers might think they have different contents), unify design (don't use too much different fonts), the way of compositing the headlines has to express the meaning of it,
Specific Feedback: Text formatting is fine. Headline looks interesting. The fonts look stretched, Mr. Vinod suggested to use typeface that look similiar, fix widow.
Specific Feedback: Text formatting is fine. Headline looks interesting. The fonts look stretched, Mr. Vinod suggested to use typeface that look similiar, fix widow.
Week 7 (4/11/2024)
General Feedback: Note widows and orphans. Start to work on Task 3. Choose a regular font from the typeface and do dissection. Can try different writing angle but need to maintain a same writing angle for all 4 letters "H, o, g, b". Digitise font on 1000pt x 1000pt art board.
Specific Feedback: Everything's fine.
REFLECTION
Experience
We combined the use of Adobe Illustrator and Adobe Indesign to make type expressions and text formatting. Our work involved kerning and alignment of body text to enhance readability, alongside crafting unique, expressive type designs that reflect their meaning and amplify the message within the body text.Observation
I've observed that this task encourages creative thinking to produce unique and dynamic layouts. It prompts us to carefully design headlines that not only stand out but also reflect or even enhance the content of the body texts, creating a stronger connection with readers.
Findings
I've found that using Adobe Illustrator and InDesign together allows us to create type expression and text formatting more efficiently. Adobe Illustrator is good for manipulating the form of typefaces because it has features like the pathfinder tool and curvature tool which aids in shape merging and form amendment while Adobe InDesign aids in text alignments and layouts because it has features like align text to baseline grids which is useful for cross alignment of text.
1. Typographic Design: Form and Communication by Carter et. al, 1985
Figure 3.1 Typographic Design: Form and Communication by Carter et. al, 1985. [Front Cover]
Typography in Time and Motion (pg155-pg170)
This chapter explores the relationship between typography and time-based media, focusing on how typographic elements evolve and convey meaning over time, such as those in movies, advertisements or documentary films.
Figure 3.2 Expressive typography in the 1920 silent film The Cabinet of Dr. Caligari
It explained how the sequence of frames in motion design impacts how a message is understood. Each frame builds on the last, and the arrangement of these frames helps the viewer make sense of the story. Designers can use a straightforward approach to communicate clearly or arrange images to suggest deeper, implied meanings. Techniques like montage, where different shots are put together to create a specific feeling, shows how the order of frames can add emotion and symbolism.
To keep viewers oriented, continuity is important. This can be done by keeping elements in similar positions from frame to frame, using a logical sequence, and linking visual elements like color or shape across shots. For example, zooming in on a yellow balloon and then cutting to a yellow "O" keeps a sense of flow and connection.
Figure 3.4 Transition from image to type
In animation, the sequence of entry of words gives importance; for instance, a word fading in while another fades out draws attention to the incoming text.
Figure 3.5 Typographic Animation
Music also plays an important role in establishing hierarchy in motion typography. Sound effects or music can draw attention to specific words as they appear on screen. For example, if the music intensifies or builds when a word enters the frame, that word becomes more prominent compared to others that appear without sound. This audio emphasis helps viewers recognise which elements are most important in the sequence.
Understanding these helps me in developing typographic design that suits the pace of time-based medias.By controlling entry timing, movement, and sound, I can guide viewer focus and communicate both direct and nuanced meanings. This approach enhances the overall impact of the message, making my typographic animation more engaging and effective.
-03.png)
Comments
Post a Comment