Advanced Typography: Task 2
13/04/25 - 17/06/25 (Week 4- Week 8)
Katherine Alexandra Sutanto / 0373585
Advanced Typography / Creative Media / School of Design
Task 2 / Typographic Systems & Type & Play
TABLE OF CONTENTS
1. Lectures
2. Instructions
3. Task
4. Feedback
5. Reflection
LECTURES
A wordmark is a carefully designed, typographic representation of a brand's name. Unlike logos that rely on icons or symbols, a wordmark centers around custom lettering to uniquely present the brand’s identity. It uses specially crafted or altered typography to ensure the name stands out in a visually distinctive and memorable way.
This differs from a monogram, which usually compresses a person’s or organization's initials into a graphic symbol — typically two or three letters. For example, the royal monogram of King Charles combines his initials with ornamental design elements like a crown. While decorations may accompany a monogram, they are not considered part of the monogram itself.
Creating a Wordmark
-
Use Unique or Customized Typography
Instead of relying on standard fonts available to everyone, develop or modify a typeface specifically for your brand. This ensures that your wordmark is harder to imitate and feels genuinely yours. Unique typography adds an extra layer of exclusivity and sophistication. -
Prioritize Readability and Brand Identity
The brand name should be easy to read at various sizes but also be distinctive enough to leave a lasting impression. Select a name and lettering style that reflects your values, voice, and personality. The best wordmarks strike a balance between uniqueness and accessibility. -
Explore Letterforms Visually
Don’t hesitate to experiment with the shapes and proportions of individual letters. Play around with alignment, spacing, curves, and angles. Sometimes, small visual tweaks can result in big aesthetic payoffs and deepen the emotional impact. -
Keep It Simple and Clean
Avoid overly complex details or decorative flourishes that can obscure clarity. A successful wordmark communicates effectively without visual clutter. Simplicity not only enhances legibility but also ensures it works across various applications—from websites to packaging. -
Create Emotional Resonance
A powerful wordmark does more than just name a brand—it creates a feeling. It should evoke trust, recognition, and connection. Over time, this symbol becomes the face of your brand, carrying its emotional weight and narrative. -
Timelessness Over Trendiness
An effective wordmark feels enduring, personal, and relevant even as design trends evolve. Strive for a visual identity that can grow with your brand rather than one that quickly becomes outdated.
Key Tips for Designing a Wordmark
-
Make Sure It Feels Right to You
You’ll be seeing your wordmark everywhere—on websites, business cards, signage—so it must feel authentic. If it doesn’t represent who you are, others will sense that disconnect too. -
Avoid Overly Decorative Styles (Unless It's Intentional)
Designs that are too flashy or ornate tend to appeal to niche audiences. Unless your brand's identity revolves around being bold or avant-garde, it's best to aim for broader accessibility. -
Stay True to Your Brand's Voice
Your visual identity should be a direct extension of your values, purpose, and tone. A wordmark isn’t just decoration—it’s communication in its most distilled form.
WEEK 4: DESIGNING TYPE
Purpose of Type Design
Typography isn't just about aesthetics; it serves both functional and expressive roles. From enhancing readability in low-visibility environments to embodying cultural values, type design carries a responsibility to communicate clearly and inclusively.
On a creative level, designing type is a form of personal expression. It allows designers to bring artistic vision into how language is perceived visually, shaping the way people engage with text.
Notable Type Designers & Typefaces
-
Adrian Frutiger
Known for designing the Frutiger typeface used at Charles de Gaulle Airport. It was created with legibility in mind, especially for signs viewed from a distance or in motion. He also contributed significantly to modernizing the Devanagari script, bridging cultural and functional design. -
Matthew Carter
A pioneer in digital typography, Carter developed Verdana and Georgia, specifically for on-screen use. Verdana, in particular, tackled the challenge of pixel clarity at small sizes—something essential in early digital environments. -
Edward Johnston
Creator of Johnston Sans, the official typeface of the London Underground. The design combined modern utility with classical influences, particularly from Roman calligraphy, achieving both elegance and practicality. -
Bell Centennial
Commissioned by AT&T, this typeface was designed to withstand the low-quality print conditions of telephone books. Its distinctive ink traps helped maintain clarity in small sizes and fast production. -
Gill Sans
Heavily inspired by Johnston’s work, this typeface introduced subtle refinements, making it more versatile while retaining the geometric and calligraphic balance of its predecessor.
Type Design Process
-
Research
Before designing, it’s essential to study type history, anatomy, and the intended usage. Understanding the context helps inform the decisions you make about form, function, and style. -
Sketching
Start by drawing letters manually or on a tablet. Traditional hand sketching gives more tactile control, while digital methods offer speed and iterative flexibility. -
Digitization
Use software like FontLab, Glyphs App, or Illustrator to refine your letterforms and turn your sketches into usable fonts. -
Testing and Refinement
Create prototypes to evaluate how your type performs under different conditions. Check for legibility at various sizes, consistency in style, and any potential readability issues. -
Deployment
Even after launch, typefaces should be monitored and adjusted. Small issues may only become apparent during real-world use, so ongoing refinement is key to long-term success.
Typeface Construction
-
Structural Grids and Geometry
Roman capitals often follow a geometric framework—like 8x8 grids with circles and rectangles to define proportions and consistency. -
Visual Adjustments
Optical corrections like overshoots (where round letters extend slightly above/below the baseline) and precise letter spacing ("fitting") are crucial. These subtleties ensure the type looks balanced and harmonious. -
Letterform Categories
Classifying letters by form (rounded, rectangular, diagonal, etc.) helps maintain structural logic and aesthetic flow during the design process.
WEEK 5: PERCEPTION & ORGANIZATION
Perception in Typography
Typography is not just what you read—it's how you see and interact with text. Visual perception affects how easily information is understood, how attention is directed, and what emotional cues are conveyed. Factors like alignment, spacing, and hierarchy influence how users navigate and engage with content.
Contrast in Typography: Carl Dair’s 7 Principles
-
Size – Larger elements capture attention and signal hierarchy (e.g., titles vs. body text).
-
Weight – Bold vs. light weights help emphasize or de-emphasize content.
-
Form – Variations like uppercase vs. lowercase, or condensed vs. wide forms, create visual interest.
-
Structure – Contrasting typeface categories (like serif vs. sans-serif) can help differentiate sections or moods.
-
Texture – How blocks of text appear visually—dense or airy—affects readability and tone.
-
Direction – Use of vertical, horizontal, or angled text creates dynamic movement.
-
Color – When applied thoughtfully, color highlights key points without sacrificing legibility.
Form in Typography
Typography’s form refers to its overall shape, style, and emotional impression. Good form should guide the eye, engage the reader, and enhance memory retention. Typography is both a tool for communication and a medium for creative expression. When executed well, it amplifies the message it carries.
Gestalt Principles in Typography
Gestalt theory helps explain how we visually group and interpret design elements. In typography, these principles are crucial for creating organized, intuitive layouts.
-
Similarity – Elements that look alike are seen as part of a group.
-
Proximity – Items placed close together are interpreted as related.
-
Closure – The mind fills in missing parts of a design to create a complete image.
-
Continuation – The eye follows paths, lines, or curves, aiding flow and readability.
-
Symmetry & Simplicity – Balanced, uncluttered arrangements are more appealing and easier to comprehend.
INSTRUCTIONS
TASK
[EXERCISE 1 - KEY ARTWORK]
In this task, we are assigned to design a wordmark that it's purpose to make a brand out of our identity. The design must be based on keywords we chose (ex: cute, futuristic, etc.) And as the first step, i came up with 3 ideas/keywords: Mecha, expressive, cartoonish.
- Research
To proceed, we are instructed to do a mind mapping of our identity to make a base understanding that eventually shapes the personality of our design later on. Later, I'd do some digging to the internet, specifically Pinterest to find some inspirations and references. JERONIMO, my pseydonym/nickname I referred to when it comes to communicating online.
Fig 3.1.1 Mind Mapping, Week 4
Fig 3.1.2 References, Week 4
- Sketch
After researching, I'd start sketching digitally with the three keywords i chose.
Fig 3.1.3 Sketches, Week 4 - Digitalization
After sketching and being approved by Mr. Vinod, I then go ahead to digitalize one of the designs.
Fig 3.1.4 Digitalization 1, Week 5
However, after revising and receiving feedback from Mr. Vinod. I was instructed to make the design more readable. (Fixed the word "J" and removed unnecessary graphics)
Fig 3.1.6 Revised Digitalization, Week 6
- Color Application
This is the first attempt of the color application. I tried to use retro-like colors but i ended up unsatisfied as it came off unfit.
Fig 3.1.7 First Colour attempt, Week 6
Fig 3.1.8 Revised Color Palette, Week 6
Fig 3.1.9 Main Color Application, Week 6
FINAL OUTCOME - EXERCISE 1
Fig 3.1.10 Black & White JPEG, Week 7
Fig 3.1.11 Black & White JPEG, Week 6
Fig 3.1.12 Color Palette JPEG, Week 6
Fig 3.1.13 Main color with Lightest shade Background JPEG, Week 6
Fig 3.1.14 Lightest and Darkest Shade Background JPEG, Week 6
Fig 3.1.15 Wordmark & Color Compilations PDF, Week 6
[EXERCISE 2 - COLLATERAL]
- ReferenceFig 3.2.1 Collateral References (Right by Mr.Vinod), Week 6
- Color Palette
Fig 3.2.2 Color Palette, Week 6
Fig 3.2.3 Color Palette Collateral, Week 6 - Wordmarks Chosen
Fig 3.2.4 Wordmark 1, Week 6
Fig 3.2.5 Wordmark 2, Week 6 - GraphicsAt first, I made this graphic as a part of the pattern I'll use for the collateral. However, it is commented as being too far from the wordmark itself as we were instructed to make the graphic based from the wordmark's design. So i made another one which was later revised and approved.
Fig 3.2.6 First Attempt, Week 7
Fig 3.2.7 Revised Graphic, Week 7 - Collateral ItemsFig 3.2.8 Collateral Items, Week 7
- Self-Portrait
I'd change the base to a grayscale then change a part of this portrait's RGB into leaning towards Red-ish colour resulting in change of colour in specific parts like hair and eyes.
Fig 3.2.9 Self Portrait, Week 7 - Instagram Collateral
After receiving feedback from Mr. Vinod, I was instructed to do more graphics to showcase and support more personality of my wordmark's aesthetic instead of relying on items collaterals. I then, removed the tote bag collateral and add a new graphic collateral i made.
Fig 3.2.10 First Attempt of Insta Feed, Week 7
Fig 3.2.11 2nd Graphic Collateral, Week 7 - Wordmark Animation
We were tasked to animate a simple entrance of our wordmarks through After Effects.
Importing Sequence:
To start, I'd import the graphics needed to be animated in which i have separated to the desired amount that is needed to be animated, total is 5.
Fig 3.2.13 Importing Sequence, Week 8Editing Sequence:
Proceeding to edit, I'd start by making the entrance of the letter "O" as it inflates across the screen, thus revealing the rest of the letters as it shrinks back to it's original size.Fig 3.2.14 Editing Sequence, Week 8
Fig 3.2.15 Key frames, Week 8Exporting Sequence:
After the editing process is done, I'd export my work and render it. At some point, I'd use Media Encoder to export while After Effects are bugging.Fig 3.2.16 Exporting Sequence, Week 8
Fig 3.2.17 Shirt Collateral JPEG, Week 8
Fig 3.2.18 Wordmark Collateral JPEG, Week 8
Fig 3.2.19 Palette Collateral JPEG, Week 8
Fig 3.2.20 Cap Collateral JPEG, Week 8
Fig 3.2.21 Portrait Collateral JPEG, Week 8
Fig 3.2.22 Pattern Collateral JPEG, Week 8
Fig 3.2.23 Pin Collateral JPEG, Week 8
Fig 3.2.24 Wordmark Collateral JPEG, Week 8
Fig 3.2.25 Graphic Collateral JPEG, Week 8
Fig 3.2.26 Collateral JPEG, Week 8
Fig 3.2.26 Animated Wordmark GIF, Week 8
FINAL OUTCOME COMPILATION
Fig 3.3.1 Black & White JPEG, Week 7
Fig 3.3.2 Black & White JPEG, Week 6
Fig 3.3.3 Color Palette JPEG, Week 6
Fig 3.3.4 Main color with Lightest shade Background JPEG, Week 6
Fig 3.3.5 Lightest and Darkest Shade Background JPEG, Week 6
Fig 3.3.6 Wordmark & Color Compilations PDF, Week 6
Fig 3.3.7 Shirt Collateral JPEG, Week 8
Fig 3.3.8 Wordmark Collateral JPEG, Week 8
Fig 3.3.9 Palette Collateral JPEG, Week 8
Fig 3.3.10 Cap Collateral JPEG, Week 8
Fig 3.3.11 Portrait Collateral JPEG, Week 8
Fig 3.3.12 Pattern Collateral JPEG, Week 8
Fig 3.3.13 Pin Collateral JPEG, Week 8
Fig 3.3.14 Wordmark Collateral JPEG, Week 8
Fig 3.3.15 Graphic Collateral JPEG, Week 8
Fig 3.3.16 Collateral JPEG, Week 8
Fig 3.3.17 Animated Wordmark GIF, Week 8
Fig 3.3.19 Collateral Compilation PDF, Week 8
Experience
Task 2 was definitely a bit tricky, but I actually enjoyed it. It was cool to mix my own design style with digging deeper into who I am, which is something I hadn’t really done before. The project pushed me to think about different sides of my personality. Making the main artwork and wordmark helped me see how different it feels to go for a clean, professional look versus something more personal and natural. At times, I had way too many ideas and wasn’t sure which way to go, so picking the best concept that really showed who I am was a bit tough. Using the wordmark on different brand stuff and figuring out how it’d work on Instagram was fun but also kind of stressful because the deadline was tight. I also liked getting to play with programs like Illustrator and After Effects — it was a good chance to learn some new skills.
Observations
While working on this, I spent a lot of time looking at different logos and wordmarks to understand how shapes and simple designs can show personality and identity. I realized it’s really important for wordmarks to have consistent letter shapes and colors that fit the vibe but still stand out, especially on Instagram. Getting feedback from others and giving feedback too was super helpful. Seeing how other people improved their designs made me think more about my own work and how small changes can make a big difference in making a wordmark clearer and more meaningful.
Findings
This project showed me that good branding isn’t just about looking cool — it’s about clear, meaningful communication. A wordmark or main design has to represent the brand’s identity in a way that’s simple but still meaningful, so people can easily connect with it. Since I come from a fine art background, it was hard to balance being creative with making things clear, but I now get how important that is. Picking the right typography, keeping things consistent, and choosing colors carefully all really help the design reflect the message and speak to the audience.
Fig 6.1 The Vignelli Canon Book (Week 8)
As designers, it’s important to find the best solutions by looking at every part of the problem. When creating a logo, we should respect its history and understand the values it stands for. Using differences in size on a page or contrasting fonts like mixing bold and light type can make a design more visually interesting and dynamic. This technique has been used successfully in graphic design for a long time.
Strong visuals are key to good design. To communicate a message clearly, a design needs the right concept, shapes, colors, or textures. Contrast is especially important because without it, a design can feel flat and lifeless. Good contrast helps grab attention and gives the design energy.
In simple terms, great design balances respect for tradition with fresh ideas, uses contrast to create excitement, and always keeps the message clear. This approach, as Massimo Vignelli highlights, helps create timeless and effective designs that really connect with people.
Komentar
Posting Komentar