Advanced Typography / Task 3
Abigail Kartika Darmowinoto / 0350525 / Bachelor of Design in Creative Media
Advanced Typography / Taylor's University
Task 3: Design Exploration and Application
Perception -> what we see and understand.
Perception in typography -> deals with visual navigation and interpretation of readers via contrast, form and organisation of the content (textual / visual / graphical / colour).
CONTRAST
CONTRAST
Introduced by Rudi Ruegg
1. CONTRAST OF SIZE
fig 1.1, contrast by Rudi Ruegg
Introduced by Carl Dair
fig 1.2, contrast by Carl Dair
- Carl Dair added 2 more principles; texture and direction.
- To create the work and meaning pop out clearly and unambiguously.
- Carl Dair mentioned 7 different types of contrast:
fig 1.3, contrast of size
- Point which reader eye perceived first
- Common use: Header bigger than body text
2. CONTRAST OF WEIGHT
fig 1.4, contrast of weight
- Describes on how bold type can stand out in the middle of lighter type of the same style.
3. CONTRAST OF FORM
fig 1.5, contrast of form
- Distinction between capital letter and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded versions of typeface are also included under the contrast of form.
4. CONTRAST OF STRUCTURE
fig 1.6, contrast of structure
- Different letterforms of different kinds of typefaces
5. CONTRAST OF TEXTURE
fig 1.7, contrast of texture
- Combination of size, weight, form, and structure, and applying them to a block of text on a page
6. CONTRAST OF COLOR
fig 1.8, contrast of color
- Second color is often less emphatic in values than plain black on white.
- Important to give thought to which elements needs to be emphasized.
- Too many colors: contradictive
7. CONTRAST OF DIRECTION
fig 1.9, contrast of direction
- Opposition between vertical and horizontal, and all the angles in between
fig 1.10, form
- to represent a concept
- to do so in a visual form
ORGANISATION (GESTALT)
fig 1.11, variation of gestalt
Gestalt means "put together". This law is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.
Similar to each other tend to be perceived as a unified group.
2. Law of Proximity
Close together tend to be perceived as a unified group.
3. Law of Closure
fig 1.12, closure
4. Law of Continuation
fig 1.13, continuation
Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect.
5. Law of Symmetry
6. Law of Simplicity
etc.
fig 2.2, Advanced Typography Class Timeline
INSTRUCTIONS
<back to top>
fig 2.1, Module Information Booklet of Advanced Typography
fig 2.2, Advanced Typography Class Timeline
EXERCISES
IDEATION
So first, I decided on the ideas that I want to do for my final task. I want to make something that have very clear characteristic, so I came up with these ideas:
(I also put my sketch on it)
fig 3.1 idea proposal, Week 9 (02/06/2022)
I need to think more like about the application, purpose.
I found these images on Google:
fig 3.2, Malioboro Street sign, source; https://tourjogja.com/read/18/jalan-malioboro-the-24-hours-street.html
So, it's a road sign in one of the city in Central Java, Jogjakarta, which shows a sign of the popular street, Jalan Malioboro.
I noticed that the sign use a same stroked typeface for the script but the sign doesn't have a suitable latin typeface for it. So, I'm designing for a purpose and also a little bit of experimental (no same-stroked latin forms that are inspired from Javanese Script, as embeded on fig 3.1, slide 1).
EXECUTION
Since my #1 idea, the Javanese Script one were my favorite and Mr. Vinod's already approve the idea, I started to develop it.
So first, I came out with this:
fig 3.3, base stroke, Week 10 (09/06/2022)
Then, I continue to do that kind of style.
fig 3.4, same corner, Week 10 (09/06/2022)
fig 3.5, right corner, Week 10 (09/06/2022)
Then, I was thinking of "what if the curved corner one in the right?" so I came up with making these:
fig 3.6, left corner, Week 10 (09/06/2022)
The 3B one is actually a developed version of 3A.
I tried to put it on the sign, to check whether they fit or no:
fig 3.7, tried on collateral, Week 10 (09/06/2022)
I start to brainstorm more. "How to make the characteristic shown while also having typeface that is less decorative like what I found. I started back from the zero point, playing with some curves, and I try lot of different styles.
fig 3.7, new ideation 1, Week 11 (16/06/2022)
Then, I came out with this idea:
fig 3.8, new ideation 2, Week 11 (16/06/2022)
fig 3.9, new ideation 2, Week 11 (16/06/2022)
OH. It's good. So I continue to develop it more until letter Z (uppercase)
fig 3.10, new ideation 2 a-z uppercase, Week 11 (16/06/2022)
I kinda like it. I hope Mr. Vinod also :"(
So, I try to finish the lowercase too:
fig 3.11, new ideation 2 a-z lowercase, Week 11 (16/06/2022)
And for the numbers and characters:
fig 3.12, new ideation 2 a-z numbers and punctuation, Week 11 (16/06/2022)
fig 3.13, new ideation 2 full version, Week 11 (16/06/2022)
fig 3.14, new ideation 2 ctrl-y, Week 11 (16/06/2022)
TYPE FORGE
After I finish everything, I made them into one shaped path, which later I export it to Type Forge by using Export Asset - move the shapes into the export asset window - export into SVG.
fig 3.15, exporting from AI, Week 12 (23/06/2022)
I began to add each letter I exported to the TypeForge's window:
fig 3.16, exporting in TypeForge, Week 12 (23/06/2022)
fig 3.17, editing, Week 12 (23/06/2022)
fig 3.18, Uppercase preview, Week 12 (23/06/2022)
But I found out that the height isn't maintained for some letters (except the uppercase letters), which are very frustrating, because some is just like the strokes become different, etc. I tried to edit them using scale but it made the stroke become inconsistent.
I want to cool my brain first so I find way to figure it out, so in the meantime doing another subject task is way more better since all of the deadlines are coming.
fig 3.19, exporting to FontForge Tutorial, Source:https://youtu.be/M3SnmN5RVqg, Week 13 (28/06/2022)
fig 3.20, Creating the artboards and measurement, Week 13 (28/06/2022)
fig 3.21, Moving to the FontForge following the YouTube tutorial, Week 13 (28/06/2022)
After that, I adjusted the kerning of each letter.
And here's my Jawa Raga font:
Uppercase & Lowercase : A-z
Numbers: 0 1 2 3 4 5 6 7 8 9
Punctuations: (.) (,) (?) (!) (:) (;)
fig 3.23, fontplay, Week 13 (28/06/2022)
APPLICATION
1. STREET SIGNS
Mr. Vinod tasked us to make the application and ask for feedback. First, my idea is too make some street name signs. So here're what I'm doing in class:
fig 3.24, Street Name Sign Ideation, Week 11 (16/06/2022)
But then Mr. Vinod recommended me to make some street signs, which then I made them referring to Indonesian street sign regulation as what I did on further reading. So here's my progression:
fig 3.24, Street Sign Ideation, Week 12 (23/06/2022)
I continue to develop more for my street sign:
fig 3.25, Street Sign Progression, Week 13 (30/06/2022)
Then, I continue to develop the real version (not vector), using mockup that already provided:
fig 3.26, Free MockUp, source; https://mockupsforfree.com/product/street-sign-mockup/, Week 14(01/07/2022)
fig 3.26, Free MockUp, source; https://www.designbolts.com/2019/04/10/free-highway-wayfinding-signage-board-mockup-psd/, Week 14(01/07/2022)
2. OTHER APPLICATION
fig 3.27, Other Application, Week 14 (0/07/2022)
FINAL
fig 3.28, Jawa Raga Typeface Showcase, Week 13 (30/06/2022)
Uppercase & Lowercase : A-z
Numbers: 0 1 2 3 4 5 6 7 8 9
Punctuations: (.) (,) (?) (!) (:) (;)
fig 3.29, fontplay, Week 13 (28/06/2022)
1. STREET SIGN
fig 3.30, final application (JPEG), Week 13 (28/06/2022)
fig 3.31, final application (PDF), Week 13 (28/06/2022)
2. OTHER APPLICATION
fig 3.33, Other Application, Week 14 (0/07/2022)
WEEK 10 (03/06/2022)
- General Feedbacks:
- Decide the idea now and show some progression next week, since not much time left.
- Use facilities effectively
- Specific Feedbacks:
- Think of the purpose; accompany the Javanese script or just experimental, etc.
WEEK 11 (10/06/2022)
- General Feedbacks:
- Understand what you want to achieve, think for yourself, don't just take any feedback as value, but do it.
- Specific Feedbacks:
- Too rigid, need more characteristic of the reference.
- You can spend on more time to develop as the collateral is straightforward.
- Strokes need to be thinner so it mimics the Javanese Script.
- Lowercase also will be good.
WEEK 12 (17/06/2022)
- General Feedbacks:
- Make sure to upload the font in e-portfolio with the link also, accessed link.
- If only have Uppercase, can be used on lowercase also.
- Specific Feedbacks:
- Uppercase is fine, lowercase need more consistency.
- Settle the type, curves need to be figured out also.
fig 4.1, feedbacks for the shapes, Week 12 (17/06/2022)
- Be careful of the end of the stroke.
- Study the signage, roundish, colors, etc.
WEEK 13 (24/06/2022)
- General Feedbacks:
- Final Compilation need to bed finished by next week
- Like in Monday Class, when designing display typeface can use 2 typeface
- If doing only uppercase, place it in lowercase also
- Specific Feedbacks:
- The wording size needs to be consistent
- The border, color, thickness has to follow the real regulation
- Finish the illustrative first before the real
WEEK 14 (01/07/2022)
- General Feedbacks:
- Add short description before placing the typeface so people understand (Task 3)
- If the typefaces are complete (lowercase and uppercase), tell Mr. Vinod so the work can be submitted for copyright.
- Specific Feedbacks:
- Good, there's still room for improvement, maybe make the typeface bold version.
- Submit the typeface to Mr.Vinod
- Good, all complete!
REFLECTION
-Experience:
I experienced doing typography in a higher level. It's more difficult than last semester and in my opinion things are more harsh and fast I think. Also in this semester, the amount of task given is so many which in my opinion, having a great time management is recommended, or else you'll get stressed.
This module have given me ups and downs, mostly down because I'm thinking like I'm not good enough because of the feedback given, etc. But taking opportunity for it to bounce back is very important to make a better output.
-Observation:
I observe that lots of my friends work that given good comments are mostly "minimalistic" and "efficient". I observe that when designing, I have to understand which information is the one that people will perceive, which one needed to be the one people know first, etc.
-Finding:
I found out that if we have a strong understanding and ideation, it'll make things easier for designer like us. That's why it's important to follow the lectures some times before doing the tasks, so the design won't be shallow. The module, especially the typeface creating have make me master AI more than ever, because I did lots of trial and error in there. I also found out another way on generating font using other software than FontLab.
A Type Primer
a book by John Kane
*all images sourced from the book
Letters - Words - Sentences
Maintaining X-height
fig 5.1, x-height
- X-Height describes the size of lowercase.
- Curved strokes must rise above the median / sink lower than the baseline
Counterform
fig 5.2, counterform
- As important as recognizing specific letterforms.
- Counterform: the space described, and often contained, by the strokes of the form.
- When letters are joined -> counterform includes spaces between.
Contrast
fig 5.3, contrast
- Combining variation will produce more variations.
- Adding color will increase more possibility
Kane, J. (2011). A Type Primer (2nd ed.). Pearson Prentice Hall.
Anatomi Tipografik dari Aksara Jawa
by Aditya Bayu Perdana
(https://www.behance.net/gallery/58206077/Infographic-Typographic-Anatomy-of-Javanese-Aksara/modules/342543379)
*all images sourced from the post
"Selayaknya pada tubuh manusia, huruf juga memiliki anggota tubuh. Dalam tipografi, anggota tubuh huruf tersebut menjadi bagian penting dalam sifat dan karakter suatu typeface. Untuk itu, mempelajari anatomi huruf amatlah krusial karena menjadi kunci bagi designer untuk mengambil berbagai keputusan penting memilih typeface, mendesain typeface, memyusun layout, dan lain-lain."
Translated by me: Just the same as human body, letters also have their body parts. In typography, letters' body parts become important thing in terms of nature and characteristics of typeface. Thus, studying the anatomy of letters is very crucial because it is the key for designers to make important decisions in choosing typefaces, designing typefaces, compiling layouts, and so on.
Characteristic of Javanese Script:
- Beginning - Middle - End (bagian awal - tengah - akhir)
- Hill and Valleys (bukit dan lembah)
- Hook, top and bottom serration (kail, gerigi atas dan bawah)
- Blunt and Spiky (tumpul dan runcing)
- Left, Right, Top, and Bottom Knots (simpul kiri, kanan, atas, dan bawah)
- Writing style (sudut tulis)
- They don't have any style of italics, can be either italic or straight
REFERENCE:
B. (2017, October 27). Infographic: Typographic Anatomy of Javanese Aksara. Behance. https://www.behance.net/gallery/58206077/Infographic-Typographic-Anatomy-of-Javanese-Aksara?isa0=1
Road signs in Indonesia
*all images sourced from the post
Indonesian Road Sign is actually influenced by the Dutch in the colonial era, but over time goes on, a mixed influence of European, British, US MUTCD, New Zealand, and Japanese road sign features are introduced.
Language used:
- Indonesian
- Bilingual (example: some tourist spot in Bali)
Typeface used:
- Clearview
- According to the 2014 Minister of Transport's Regulation No. 13 concerning Traffic Signs
- FHWA Series fonts (Highway Gothic)
- Used in past
----------------------------------------- WARNING SIGNS -----------------------------------------
- Follow US MUTCD and Japanese diamond-shaped
- Yellow background
- Black-and-yellow outline but recently they change it to full black outline
----------------------------------------- INTERSECTION -----------------------------------------
- Follow US MUTCD and Japanese diamond-shaped
- Yellow background
- Black-and-yellow outline but recently they change it to full black outline
------------------------------------- PROHIBITORY SIGNS -------------------------------------
- Circular
- Red border with diagonal bars (except for stop, yield, and railroad crossing signs)
-------------------------------------- MANDATORY SIGNS --------------------------------------
- Follows the "Type A mandatory signs"
- White-on-blue circular signs (European-style)
- White border
------------------------------------- DIRECTIONAL SIGNS -------------------------------------
- Green
- White colored font
- Some highlighted with red / blue highlight
---------------------------------- TOLLED FREEWAY SIGNS ----------------------------------
- Custom-made by the tollroad operator and unavailable in the current regulations (mostly)
- Using red / blue / green / yellow colors
------------------------------------- INFORMATION SIGNS -------------------------------------
-------------------------------------- TEMPORARY SIGNS --------------------------------------
- Follow New Zealand design
- Orange colored
REFERENCE:
Wikipedia contributors. (2022, June 5). Road signs in Indonesia. Wikipedia. https://en.wikipedia.org/wiki/Road_signs_in_Indonesia
Comments
Post a Comment