20.5.25 - 3.6.25 | Week 5 - 7
Haley Alexandra Gray | 0369029 | Bachelors of Design in Creative Media
Typography GCD60104
Task 2 | Typographic Exploration and Communication
Table of Content :
Lecture Material
Typography GCD60104
Week 5
1. Typo_5_Understanding
Letters -
Understanding Letterforms :
- Letterforms may appear symmetrical, but are not - meticulously designed too appear as though symmetrical.
Maintaining X-height :
- X height generally describes the size of lowercase letterforms
- Curved stroked (e.g. 's') must rise above the median / sink below baseline in order to appear to be the same size as the vertical / horizontal strokes they adjoin.
 |
| Fig. 1 Example of curved strokes exceeding the median | Typo_5_Understanding (19/5/25) |
Form / Counterform :
- Counter form / counter - The space describes, and often contained, by the strokes of the form.
- When letters are joined to form words, the counterform includes the spaces between them
Contrast :
- Basic principles of Graphic Design apply directly to typography.
- Contrast is one of the most powerful dynamic in design.
 |
| Fig. 2 Variation of Contrast | Typo_5_Understanding (19/5/25) |
|
Week 6
2. Typo_6_Screen & Print
Different Mediums -
- Typography exists in all forms and types of media
Print Type vs Screen Type
- Print Type :
- Was designed intended for reading from print long before we read from screen
- The designers job to ensure the text is smooth, flowing, pleasant to read
- Good typeface for print would be Caslon, Garamond, Baskerville (elegant, intellectual, highly readable)
- Screen Type :
- Intended for use on the web
- Modified to enhance readability / performance onscreen in a variety of digital environments
- An important adjustment (especially for typefaces intended for smaller sizes) is more open spacing.
- All factors that alter original fonts serve to improve recognition and overall readability in the non printed environment.
- Hyperlink : a word. phrase or image that you can click on to jump to a new document or a new section within the current doc.
- Normally blue / underlined by default
- Font Size for Screen
- 16 px text on screen is around the same size as text printed in a book.
- accounts the reading distance
- System Fonts for Screen / Web Sale fonts
- Each device comes with its own pre-installed font selection (based largely on its OS)
- If a user decides to use a font unbeknownst to you and your system, your computer will not be able to display it, and revert the text to a basic font you possess.
- Web-Safe ones however appear across all OS
- Pixel Differential Between Devices
- Screens used by PC's, Tablets, Phones, TV's are not only different sizes, but the text displayed on screen differs in proportion too.
 |
| Fig. 3 Pixel Differential Between Devices | Typo_6_Screen&Print (19/5/25) |
- 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.
- Motion typography offers typographers opportunities to dramatise type, for letterforms to become fluid and kinetic (Woolman and Bellantoni, 1999).
- Film title credits presents typographic information overtime, often bringing it to life through animation.
- Is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack.
- In title sequences, typography must prepare the audience for the film by evoking a certain mood.
MIB for Typography GCD60104 | The Design School at Taylor's University 2025
Task 2
Typographic Exploration and Communication
In this task, we must express (typographically) the content provided; out of 3 texts we choose 1, where we have to use the knowledge and experience gained from the first exercise and apply it here. The goal is to demonstrate the use of grids, layout, and page flow.
Chosen Text :
For this task, I have chosen Article 2; Punk's Design Revolution : Breaking The Rules. I chose this text because I found it the most interesting and familiar subject out of the 3.
Visual References :
Punk, like the text mentions, is a style in the spirit of rebellion and controversy, and utilises a lot of rugged DIY's with interesting backstories and holds a meaning for itself.
 |
| Fig. 4 Jamie Reid's designs for the Sex Pistols (1977) (23/5/25) |
 |
| Fig. 5 Punk-theme formats / lettering / design | Pinterest (23/5/25) |
|
I got more inspiration for textured lettering and punk-inspired stylisations. Fig. demonstrates a grunge texture I could utilise to amplify the
punk, and Fig. utilises manipulation to split the words, which can help me express 'breaking' better.
 |
| Fig. 7 Manipulated Typography (3/6/25) |
 |
| Fig. 6 Punk Typography with texture (3/6/25) |
Process / Development
Preliminary Sketches -
The idea behind those sketches for the titles are to apply the punk-ish, raw and thrifty aspect visually, where I used their technique of using multiple fonts / lettering from paperbacks.
 |
| Fig. 8 Preliminary sketches for composition (24/5/25) |
Digitisation -
After sketching some ideas and figuring out how I want to display the text with a punk effect, I began to digitise the compositions using Adobe Illustrator and InDesign.
 |
Fig. 9 Preliminary digitisation, Composition 1, 2, 3 | Adobe Illustrator & InDesign (27/5/25)
|
Chosen Composition / Progress :
Out of the 3 compositions I made, I chose the first one to develop further - by adding more punk features and formatting accordingly. My first attempt at doing so included adding the body text, and adding background bits to certain letters and words to replicate a punk design.
 |
| Fig. 10 First attempt at adding punk details (27/5/25) |
After Feedback, Ms. Vitiyaa suggested to follow the rules of formatting body text, and to make it more compelling and interesting by adding texture and additional elements to add to the composition, as well as align all the text to one side instead of having left and right aligned text.
- Improving letter design / formatting and body formatting
 |
Fig. 11 Progress digitisation | Adobe Illustrator (3/6/25)
|
- Adding texture to the text through Adobe Illustrator (masking effect)
 |
| Fig. 12 Metal scrape texture |
 |
| Fig. 13 Grunge texture |
 |
| Fig. 14 Adding texture through mask | Adobe Illustrator (7/6/25) |
 |
| Fig. 15 Adding texture through mask | Adobe Illustrator (7/6/25) |
 |
Fig. 16 Adding Texture to text (7/6/25)
|
- Final layout
 |
| Fig. 17 Final outcome after progress (7/6/25) |
Trial & Errors :
I tried different ways to express the title & body text, however after feedback it was addressed that it is a must to keep the character limit around and between 55-65 characters, which I had failed to remember and do in these compositions.
 |
| Fig. 18 Preliminary sketches for failed composition (27/5/25) |
 |
| Fig. 19 Failed attempt 1 (28/5/25) |
 |
| Fig. 20 Failed attempt 2 (28/5/25) |
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
Final Outcome
JPEG & PDF
 |
| Fig. 21 JPEG of Final Outcome (12/6/25) |
 |
| Fig. 22 JPEG of Final Outcome with Grids (12/6/25) |
Fig. 23 PDF of Final Outcome (12/6/25)
Fig. 24 PDF of Final Outcome with Grids (12/6/25)
Head Line 1 (Punk's Design Revolution):
Typeface: Bodoni Std
Font/s: Bodoni Std Poster Compressed, Bodoni Std Bold
Type Size/s: 80 pt, 44 pt
Leading: -
Paragraph spacing: 0
Head Line 2 (Breaking the Rules):
Typeface:
- Adobe Caslon Pro,
- Gill Sans Std,
- ITC Garamond Std,
- Serifa Std, Bembo Std,
- Univers LT Std,
- Janson Text LT Std,
- Bodoni Std
Font/s:
- Adobe Caslon Pro Semibold
- Gill Sans Std Regular / Condensed
- ITC Garamond Std Bold / Bold Condensed / Bold Narrow Italic
- Serifa Std Roman / Italic
- Bembo Std Regular / Bold / Semibold Italic
- Univers LT Std Roman
- Janson Text LT Std Bold
- Bodoni Std Poster Compressed
Type Size/s: 80 pt - 317 pt
Leading: -
Paragraph spacing: 0
Body :
Typeface: ITC New Baskerville STD
Font/s: ITC New Baskerville STD Regular
Type Size/s: 11 pt
Leading: 13 pt
Paragraph spacing: 13 pt
Characters per-line: 56
Alignment: Left-Align
Margins: Top = 9 mm, Bottom = 8 mm, Left = 10 mm, Right = 10 mm
Columns: 2
Gutter: 5 mm
Feedback
Week 6 (27/5/25)
Specific Feedback : For task 2, make the paragraphs retain character limit of 50-60/55-65 (split into 2 columns), and when you highlight letters make the letter inside smaller than the highlighted background. Also remove 2-lined paragraph from the first paragraph.
General Feedback : Make sure your task 1 is submitted properly - proper link is submitted, files are properly uploaded for viewing. Continue with task 2, and gather materials for task 3.
________
Week 7 (3/6/25)
Specific Feedback : For task 2, improve on the layout and make it more compelling; add abit of texture- alignment should be only one direction.
General Feedback : Create around 7 pages of fonts on graph paper and choose one font to work on for task 3.
________
Week 8 (10/6/25)
General Feedback : If you want feedback you can show it to her in class- besides that, submission is 15th June 2025.
Reflection
Experience :
This task was not as in-depth as the first task in my opinion, but it did allow me to get more creative with the expression of the text/heading, as well as the text format on the page. It was pretty shocking to see the rules of typography being applied in everyday things we see in reality, I have never noticed or realised the rules were so exact, which made me become more aware of the little details in my work which hopefully i will carry on for the future. Overall, this task was a good second task to work on, it showed me how to apply rules and use knowledge from the previous task to fulfill this one, and I got to design something quite freely, especially with the punk notion.
Observations :
I have observed that details are very important, and typography rules are applied to everything. As well as that, formatting text is harder than it looks, with a lot of things to keep in mind; like the rules, as well as making the heading and body cohesive and flow well with each other. It takes consideration of things we have learnt before, and I have noticed myself thinking back to the first task in order to think about how I can create an interesting design & layout.
Findings :
For the text I chose, it was hard for me to explore different and unique ways to display it because I have already had a distinct image in my head to what punk is and how I wanted it to look like, which was really taking the features of it and implementing it into my design. I feel as though I should learn to improve on that aspect of how I think and to branch out on other ideas; the first idea isn't always the best idea (but I hope it is in this case). I have also found out and understood more about the punk style, which gave me more appreciation for it, as well as allowing me to use that knowledge to apply it to the design to make it some-what homemade / scrappy.
References
Artyway. (n.d.). Dreamstime.com. Online URL : https://www.dreamstime.com/bold-displacment-alphabet-
Deryacelik. (n.d.). Vector illustration of the word punk written in grunge cutout style. Dreamstime.com.
Gagliardi. B. (2018, October 19). t-mag issue n.1 OUT NOW. Behance. Online URL :
Hans-Rudolf Lutz. V. (1979). A story in signs and pictures. [Brochure]. Verlag Hans-Rudolf Lutz. Online
Platypus UK. (n.d.). Punk / Dadaist Style Poster Design - An Exhibition on Word Interpretation and
Reid. J. (1977). God Save The Queen. [Album cover, Lithograph]. MoMA. Online URL :
Reid. J. (1977). Nevermind The Bollocks. [Album cover, Lithograph]. MoMA. Online URL :
Sticky Institute. (n.d.).
UK punk / post-punk fanzines 1980-1986. Tumblr. Online URL : https://sticky-
Comments
Post a Comment