Typography | Task 2: Typographic Exploration & Communication
27.10.2023 - 17.11.2023 / Week 5 - Week 8
Khu Ying Ying / 0357306
Typography / GCD60104 / Bachelor of Design (Honours) in Creative Media
Task 2: Typographic Exploration & Communication
Khu Ying Ying / 0357306
Typography / GCD60104 / Bachelor of Design (Honours) in Creative Media
Task 2: Typographic Exploration & Communication
TABLE OF CONTENTS
LECTURES
Week 6 (03/11/2023) Screen & Print
INSTRUCTIONS
EXERCISE - TEXT FORMATTING & EXPRESSION
Week 5 (27/10/2023) Research
Week 6 (03/11/2023) Sketches
Week 7 (10/11/2023) Digitalisation
Week 8 (17/11/2023) Finalisation
FEEDBACKS
REFLECTIONS
FURTHER READING
QUICK LINKS
LECTURES
Week 6 (03/11/2023)
Screen & Print
All lectures 1 to 5 are completed.
Print Type vs Screen Type
- Print Type
- common typefaces are Caslon, Garamond, and Baskerville
- elegant, intellectual, highly readable when set as a small font size, versatile, easy-to-digest
- font size is 10 points (when reading books pretty close); 12 points (when reading books at arm's length)
Figure L6.1: Print Type
- Screen Type
- typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen
- 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
- font size is 16 pixels
Figure L6.2: Screen Type
- Hyperactive link/ hyperlink
- hyperactive link/ hyperlink a word, phrase, or image that the viewer can click on to a new document or a new section within the current document on Web pages
- allow users to click their way from one page to another
- text hyperlinks are normally blue and underlined
- when you move the cursor over a hyperlink, the arrow should change to a small hand pointing at the link
- Systems Fonts for Screen/ Web Safe Fonts
- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
- Pixel Differential Between Devices
Figure L6.3: Pixel Differential Between Devices
Static vs Motion
- Static Typography
- has a minimal characteristics in expressing words
- traditional characteristics like bold and italic offer only a fraction of the expressive potential of dynamic properties
- Motion Typography
- temporal media offer to "dramatize" type fore letterforms to become "fluid" and "kinetic"
- film title credits present typographic information over time, often bringing it to life through animation
Figure L6.4: Static vs Motion
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1nJqq6k5uG5rPZGX0lsx-vlYqpSs3B0SE/preview" width="640" height="480" allow="autoplay"></iframe>
EXERCISE - TEXT FORMATTING & EXPRESSION
Week 5 (27/10/2023)
Research
In this task you will be asked to express typographically the content in this link in a 2-page editorial spread (200mm x 200mm per page). Choose 1 from the 3 text options provided. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed. You may use Adobe Illustrator to create the headline expression should you feel the need to do so. However, the final layout (text formatting and 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.Software: Adobe Illustrator and Adobe InDesign.
Pinterest Board (Typography)
Before I started to do the assignment, I did some research on the 3 options because I couldn't decide which one I wanted to start with.
The role of Bauhaus thought on modern culture
Figure E5.1: Research of The Role of Bauhaus Thought on Modern Culture, Week 5 (27/10/2023)
Figure E5.2: Sketch of The Role of Bauhaus Thought on Modern Culture, Week 5 (27/10/2023)
A code to build on and live by
Figure E5.3: Research of A Code to Build On and Live By, Week 5 (27/10/2023)
Figure E5.4: Sketch of A Code to Build On and Live By, Week 5 (27/10/2023)
Unite to visualise a better world
Figure E7.5: Research of Unite to Visualise A Better World, Week 5 (27/10/2023)
Figure E5.6: Sketch of Unite to Visualise A Better World, Week 5 (27/10/2023)
After doing the research, I thought the 3rd topic, which was "Unite to visualise a better world" would be the best start for my assignment.
Week 6 (03/11/2023)
Sketches
As I mentioned in week 5, I chose "Unite to visualise a better world", I started to sketch out the rough ideas on the layout and headline sketch. The concept of this topic was unite, so the thing that came to my mind was stairs. In my point of view, stairs can represent the steps taken towards coming together. Each step can represent a progression toward a shared objective as a group that contribute their works together.
Figure E6.1: Headline Sketch, Week 6 (03/11/2023)
Figure E6.2: Sketch 1, Week 6 (03/11/2023)
Figure E6.3: Sketch 2, Week 6 (03/11/2023)
Figure E6.4: Sketch 3, Week 6 (03/11/2023)
After sketching out the layout design, I chose Sketch 2 as my final idea to proceed with the assignment.
Week 7 (10/11/2023)
Digitalisation
In the previous exercise (sketches), I chose Sketch 2 as my final idea for the assignment. I started to do with the head type by using Adobe Illustrator.
Figure E7.1: Head Type Expression (Before), Week 7 (10/11/2023)
Figure E7.2: Layout (Before), Week 7 (10/11/2023)
Week 8 (17/11/2023)
Finalisation
After receiving the feedback from Mr Vinod, the head type (type expression) wasn't acceptable because it was irrelevant, and there were loose lines in the 3rd and 4th paragraphs. Besides that, that was too much of typefaces at once, Mr Vinod didn't suggest doing so since I was still a beginner on this. I started to redo the head type by looking at the other's outcome so I would get some rough ideas on it.
For the head type, I was thinking of using the same idea as the previous one (the concept of stairs), but I mainly focused on the word UNITE. I tried to make them connect together to look like a staircase, it defined the people working together to achieve the same objective. I also rearranged the loose lines.
Figure E8.1: Head Type Expression (After), Week 8 (17/11/2023)
Head
- Font/s: Adobe Caslan Pro Semibold ("UNITE TO VISUALISE A BETTER WORLD")
- Type Size/s: 154 pt ("UNITE"); 30 pt ("TO VISUALISE A BETTER WORLD")
- Leading: -
- Paragraph spacing: -
Body
- Font/s: Univers LT Std 55 Roman (text); Univers LT Std 45 Light Oblique (lead-in text)
- Type Size/s: 9 pt (text); 14 pt (lead-in text)
- Leading: 12 pt (text); 14 pt (lead-line text)
- Paragraph spacing: 4.233 mm (space after - text); 5.997 mm (space after - lead-in text)
- Characters per-line: 48 - 60
- Alignment: Top
Columns: 2
Gutter: 7 mm
Final Submission of Text Formatting & Expression.
Figure E8.2: Final Submission of Layout without Grid JPEG, Week 8 (17/11/2023)
Figure E8.3: Final Submission of Layout with Grid JPEG, Week 8 (17/11/2023)
Figure E8.4: Final Submission of Layout without Grid PDF, Week 8 (17/11/2023)
Figure E8.5: Final Submission of Layout with Grid PDF, Week 8 (17/11/2023)
Figure E8.6: Final Submission of Blocked Out Layout, Week 8 (17/11/2023)
FEEDBACKS
Week 7
- Cannot have a white spot, bad formatting, try to use left align, DON'T USE FULL JUSTIFY.
- Bold only used for head type, book for text (reading).
- Some loose lines on 3rd and 4th paragraph.
- Redo the head type (type expression), don't use too much of typefaces at once.
General Feedback:
- No long line lengths, it will cause readers to lost while reading back and forth).
- The gutter can't be bigger than 10mm (5mm - 10mm).
- Cannot have high-contrast text (like Bodoni).
REFLECTIONS
Experience
After receiving feedback from Mr Vinod, I did realise that I made mistakes in the title expression. I shouldn't use too much of typefaces at once because it was hard to make them look harmonious, it can be a simple design. For the text formatting, I did too much of loose lines so it had a lot of white spaces, need to avoid this in the future.
Observation
I have a better understanding of how to avoid loose lines while arranging the text. For the type expression, I didn't manage to do it better due to misleading the definition of the title.
Findings
While doing the research, I found out that most of the layouts were quite easy to read and simple, I should always remind myself that simplicity as its best.
FURTHER READING
Week 6 - Week 8
Figure FR.1: Typography Referenced (2012)
Reference:
Haley, A., Poulin, R., Tselentis, J., Seddon, T., Leonidas, G., Saltz, I., Henderson, K., & Alterman, T., (2012). Typography Referenced. Beverly, Massachusetts: Rockport Publishers Inc.
QUICK LINKS
Tasks
Task 2: Typography Exploration & Communication
Comments
Post a Comment