Advanced Typography / Task 1: Exercises
23/08/2021 - 13/09/2021 / Week 1 - Week 4
Advanced Typography / B' in Creative Media / Taylor's Design School
Task 1: Exercises- Typographic Systems & Type & Play
LECTURES / Prerecorded Lectures on Youtube
Lecture 1: Typographic System
All design is based on a structural system. There are 8 variations with an infinite number of permutations.
1. Axial: all elements are organized to the left or right of a
single axis
Fig 1.1 Zurcher Kunstler in der Kunsthalle Basel, Switzerland- c1966
Fig 1.2 Juni Festwochen - c1966
2. Radial: all elements are extended from a point of focus.
Fig 1.3 by Esquire (Malaysia) - c2013
3. Dilational: all elements expand from a central point in a circular
fashion.
4. Random: Elements appear to have nos specific patterns or
relationship
5. Grid: A system with vertical and horizontal divisions
Fig 1.8 By Qiang Wang
6. Modular: A series of non-objective elements that are constructed in standardized units. This layout use repeating structures like shapes to break up the
content.
7. Transitional: An informal system of layered banding.
Banding means segregating information into each section or 'band'.
8. Bilateral: All text is arranged symmetrically on a single axis
A shape grammar is a set f shape rules that apply step-by-step to
generate a set of language or design. Typographical organization is
complex because the elements are dependent on communication in order to
function. Additional criteria as stated below also come into play
1. Hierarchy
2. Order of reading
3. Legibility
4. Contrast
Lecture 2: Typographic Composition
Typography can mean the creation of letters or the arrangement and layout of a large amount of texts within a space; be it an editorial print, poster, webpage or tactile. In design composition, we should consider the dominant design principles like emphasis, symmetry, asymmetry, alignment, repetition, isolation, rule of thirds, etc. though not as easily translatable from imagery to textual information.
Grid system (Raster Systeme) now come to termed as the Swiss (Modernist) style of Typography. Famous Designers: Josef Muller Brockmann, Jan Tschichold, Max Bill.
Fig 2.1 Swiss Modernism (24/08/2021)
Fig 2.2 & 2.3 David Carson, Paula Scher
Environmental Grid is based on the exploration of an existing structure(s). Information around this super-structure includes lines, curves and other non-objective elements. This creates a unique and exciting mixture of texture and visual stimuli. Famous Designer: Brenda McMannus
Form & Movement system is developed from exploring exiting Grid Systems
Lecture 3: Context & Creativity
Studying handwriting is important in learning typography as handwritings work as the most basic framework for the creation of all mechanical type.
Fig 3.1 Evolution of the alphabet
By 8th Century BC: Greeks developed Greek alphabets from the Phoenician alphabet and adapted them to their own language, In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.
By 4th Century AD: Roman Uncials letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster.
By 8th Century CE: The English Half uncial evolved into a more slanted and condensed form in England.
After 8th Century CE: General illiteracy and a breakdown of handwriting into diverse regional styles.
Black Letter
12-15th Century CE: The Black Letter had vertical supplanted horizontals, dominant line, and pointed arch. Blackletter is characterized by tight spacing and condensed lettering, and their evenly spaced verticals dominated the letterform.
14-17th Century CE: The Humanist admired the Carolingian script, which had clear open handwriting.
In Malaysia, murasu.com was incorporated on 22 July 1998 to address the needs of regional language users on computer platforms. Prior to the product developed by the company, called Murasu Anjal, it was not possible for computer users to create and publish documents in languages like Tamil, Malayalam and Hindi in Malaysia. The programming language needed to encode the different types of vernacular writing systems was cracked by Muthu Nedumaran. The system is now used in mobile phones and desktops.
Huruf a local group of graphic designers interested in the localized lettering of Latin and vernacular letters painted or inscribed on walls and signages are amongst the more prominent organizations digitizing and revitalizing typefaces in Malaysia.
Ek Type and Indian Type Foundry are organizations that have done groundbreaking work with the development of vernacular typefaces in India.
Lecture 4: Designing Type
Xavier Dupré (2007) believes that we should continue designing new typefaces despite having so many existing ones. The reasons are type design carries a social responsibility so one must continue its legibility and type design is a form of artistic expression.
Adrian Frutiger (1928-2015) was a Swiss graphic designer. He designed many typefaces that we still use today and is considered responsible for the advancement of typography into digital typography. His valued contribution to typography includes the typefaces; Univers and Frutiger.
Purpose: “The goal of this new extremely functional typeface was a clean, distinctive and legible typeface that is easy to see from both close-up and far away.
Considerations/Limitations: letterforms needed to be recognized even in poor light conditions or when the reader was moving quickly past the sign. He tested with unfocused letters to see which letterforms could still be identified.
Matthew Carter created many fonts that address specific technical challenges, for example, those posed by early computers.
Purpose: the font was tuned to be extremely legible even at very small sizes on the screen due in part to the popularity of the internet and electronic devices.
Considerations/limitations: The Verdana fonts exhibit characteristics derived from the pixel rather than the pen, the brush or the chisel. Commonly confused characters, such as the lowercase i j l.
Edward Johnston created the bold yet simple font which would be named “Johnston Sans”. Johnston’s design, completed in 1916, combined classical Roman proportions with humanist warmth.
Purpose: London's Underground railway ordered a new typeface for its posters and signage from the calligrapher Edward Johnston. He handed over details and examples of letter shapes that would set the tone for printed text until the present day.
Consideration/limitation: "Johnston's remit was to unite the London Underground Group, the different companies all using the same rails and tunnels," "All the advertising, all the signage was all completely different - there was this cacophony of letters. Johnston applied the proportions of Roman capital letters to his typeface, so it was rooted in history, rooted in traditional calligraphy. But it has an elegance and a simplicity that absolutely fitted the modern age."
General Process of Type Design:
- Research- determine the type's purpose and what will be used. Examine existing type fonts for inspiration/ideas/references./context/usage patterns etc.
- Sketching- sketch using traditional tools (pens, brushes, papers, etc.)or digital toolsets (Wacom, font design software, etc.)
- Digitization- professional softwares that are used in the digitization of typefaces, amongst the leading software are FontLab and Glyphs App.
- Testing- refine, correct to improve the readability and legibility of the typeface.
- Deploy- the rigour of the testing is important so that the teething issue remain minor.
Lecture 5:Perception & Organisation
Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of colour.
Carl Dair posits 7 kinds of contrast (most of which has already been covered by Rudi Reugg albeit using different terms): 1. Size, 2. weight, 3. contrast of form, 4. contrast of structure, 5. contrast of texture, 6. contrast of colour and 7. contrast of direction. His explanations are clearly illustrated here.
Type form refers to the overall look and feel of the elements that make up the typographic composition. A good form in typography tends to be visually intriguing to the eye and often gives a good first impression.
Gestalt theory emphasizes that the whole of anything is greater than its parts. That is, the attributes of the whole are not deducible from the analysis of the parts in isolation. Below is the Design Principles and Gestalt Theory notes I have written in my last semester for the Design Principles module. I am certain that these perceptual organisations would be applicable to my current and future work.
Fig 5.8 Handwritten notes (08/04/2021)
Fig 5.9 Handwritten notes (08/04/2021)
LECTURES / Online class
Week 1:
Today's class started off with a recap of what we have learned about text formatting using InDesign in the last semester:
- font-size: 8-12 pt for a typical handheld document
- leading of 2-3 pt bigger than the font size
- paragraph spacing of 3 pts bigger than leading
- kerning, forced-line break, etc.
We were also reminded of the importance of updating our ePortfolios. Mr Vinod then proceeded to ask us to watch the prerecorded videos posted on Youtube. We had to follow the instructions and create a typographic piece following the axial system using InDesign. Our assignment for the week is to create 8 artwork following the typographic systems taught in the lecture videos. The words to be used are:
The Design School,
Taylor’s University
All Ripped Up: Punk Influences on Design
or
The ABCs of Bauhaus Design Theory
or
Russian Constructivism and Graphic Design
Open Public Lectures:
June 24, 2021
Lew Pik Svonn, 9AM-10AM
Ezrena Mohd., 10AM-11AM
Suzy Sulaiman, 11AM-12PM
June 25, 2021
Lim Whay Yin, 9AM-10AM
Fahmi Reza, 10AM-11AM
William Harald-Wong, 11AM-12PM
Lecture Hall 12
The owner of each piece of work can be found on the top right corner of the shared screen. Credit goes to my coursemates, Lim Jia Sheng, Lavender Ting, Haura Chan and Lui Hsiao Hui.
Fig 6.1 Screenshot of coursemates' work during online class discussion (23/08/2021)
1. In the first piece, the words "All Ripped Up:" are too heavy in the whole composition. To compensate for the weight, the information down below indicated with the blue arrows could be extended.
2. As for the second piece, The area painted with an orange wiggly line has too much negative space. The dates 24 and 25 circled in red are too big, creating an imbalance with the rest of the information. It could either be reduced in size and weight, or the weight of the other information can be increased. The green line running across the whole piece is to exhibit another approach of executing the whole piece more exciting to the viewer, even though the position of the straight axis works as well.
Fig 6.2 Screenshot of coursemates's work during online class discussion (23/08/2021)
3. Circled in red, the letters in the title clash. Kerning and leading can help diminish this problem. Indicated in blue, Mr Vinod mentioned that Names and Time should have contrast to bring emphasis to a certain extent without totally throwing off the grouping of the information. It is also important to mention that time with en dashes should not be separated into 2 paragraphs. The green tick shows the correct paraphrase of writing time.
4. The red box shows the relatively large amount of negative space that brings uneasiness to the whole poster. Mr Vinod suggested to create excitement, the whole information can be arranged according to a curved axis he has drawn.
5. (Not from the figure above) Always try to avoid perfect angles like 90 or 45 degrees as it might look too stiff and tensed.
Week 2:
Mr Vinod started our class today with this question, "What is Graphic Design?" It is visual communication. Graphic design is the art of planning, designing, and presenting ideas or messages in a visual way. Graphic design is Brand Identity, Signage, Environmental Graphics, Book cover designs, Campaigns, Data Visulazaitions, Digital designs, Editorial, Packaging, Typography and so much more. Pentagram is a multi-disciplinary, independently-owned design studio, which Mr Vinod used as an example when explaining Graphic Design.
Some of the phenomenal work done by Pentagram (as recommended by Mr Vinod):
City Point- Brand Identity, Signage & Environmental Graphics, Campaigns
Fig 7.1 Tribeca Festival - Brand Identity (30/08/2021)
Fig 7.2 Bibliothèque nationale du Luxembourg - Interiors & Architecture,
Signage & Environmental Graphics, Exhibition Design (30/08/2021)
After that, Mr Vinod then started going through our 8 typographic system, posted on Facebook as instructed.
The owner of each piece of work can be found on the top right corner of the shared screen. Credit goes to my coursemates, Alvin Lim, Arthalia Teja, me, Ellis Ngu Kah Shin and Amber Lee.
1. In the first artwork done by one of my coursemates, the blue line was drawn to emphasize the line Mr Vinod suggested to be the axis line. A much more angled axis could bring more balance to the whole piece as the amount of negative is much more evenly spaced out.
2. Circled in orange, the texts are too closely packed together. It is also rather difficult to differentiate the names of the speakers from the time of the lecture as the typeface and type font are all the same. To solve this problem, paragraph spacing can be introduced. Either the name or time can be bold or italic. Superscript, subscript, or small-caps can also be applied to AM and PM to bring some level of contrast amongst the whole information.
Fig 7.5 Screenshot of coursemates' work during online class discussion (30/08/2021)
3. The green dotted lines represent Mr Vinod's suggestions of the placement of the texts. The word Russian could be brought upwards to fill up the empty space. Some texts can be brought down to the green dotted lines at the bottom right as there is an ample amount of negative space.
4. Paragraphs of similar information should be aligned as a way to group and build hierarchy. The blue arrows show the great arrangement of the information. Since they are both locations, the decision to put them both on the right was smart and heeded the hierarchy.
Fig 7.6 Screenshot of coursemates' work during online class discussion (30/08/2021)
Week 3:
This week, Mr Vinod further provided us with feedback for our Exercise 1: 8 typographic systems. All progress work is noted down in
Exercise 2: Type & Play section.
Week 4:
After the feedback session for our work from the past weeks, Mr Vinod explained to us about the next exercise which was to integrate type with images.
Fig 8.3 Screenshot of online lecture class (30/08/2021)
Fig 8.2 Screenshot of online lecture class (30/08/2021)
INSTRUCTIONS
HTML Link:
<iframe
src="https://drive.google.com/file/d/1BbQHyHGjLjka6kxC9IPEd1TAvh7SybWh/preview"
width="640" height="480" allow="autoplay"></iframe>
Exercises:
Exercise 1: Typographic Systems
For this task, we were required to create a piece of work for each of the 8 typographic systems. I first sketched them out on my notebook to brainstorm a few ideas right the top of my head.
Fig 9.1 Initial sketches (24/08/2021)
It was difficult to judge how much space would the words take when written out versus when typed out digitally. So, I moved on from paper and proceeded onto my laptop. Below are my first attempts at digitalizing my sketches on Adobe InDesign.
Fig 9.2 & 9.3 Digitalisation (24/08/2021)
After the feedback session with Mr Vinod, I wrote down and tried to apply the comments he suggested about all our work. Below shows the progress work of my work from the initial digital draft towards the end product.
Fig 9.4 Axial; progress work (31/08/2021)
Fig 9.5 Radial; progress work (31/08/2021)
Fig 9.6 Dilatational; progress work (31/08/2021)
Fig 9.7 Random; progress work (31/08/2021)
Fig 9.8 Grid; progress work (31/08/2021)
Fig 9.9 Transitional; progress work (31/08/2021)
Fig 9.10, 9.11 Bilateral, Modular; progress work (31/08/2021)
FINAL SUBMISSION
Fig 9.12 Linear in JPG (01/09/2021)
Fig 9.13 Radial Bilateral in JPG (01/09/2021)
Fig 9.14 Dilatational Bilateral in JPG (01/09/2021)
Fig 9.15 Random Bilateral in JPG (01/09/2021)
Fig 9.16 Transitional Bilateral in JPG (01/09/2021)
Fig 9.17 Grid Bilateral in JPG (01/09/2021)
Fig 9.18 Modular in JPG (01/09/2021)
Fig 9.19 Bilateral in JPG (01/09/2021)
Fig 9.20 Final PDF compilation (01/09/2021)
HTML LINK: |
Fig 9.21 Final PDF compilation (with grids and guides) (01/09/2021)
HTML LINK: |
Exercise 2: Type & Play
First, I tried to list down whatever that came to mind that has patterns that have the potential to form letterforms. There were glacier ice patterns, cake sprinkles, shadows of tree branches, microscopic views of the human skin, and eventually stumbled upon the idea of blurred city lights.
The reason I settled with city lights is with the intention that this piece of work might come in handy later on during our Final Project, where I could explore possible solutions or combinations that may add value to the existing typeface.
Fig 10.1 Image selected from Google Images (06/09/2021)
After observing, I used the eclipse shape tool by pressing shift so it forms a perfect circle, then I traced the outline of the alphabet letters I can see. I ended up with the letters G, S, L and A.
Fig 10.2 Image selected from Google Images (06/09/2021)
From here onwards, I attempted to transform the traced work into tangible type letters. In the first row with the letters in red and yellow, it is the direct reproduction of the traced work copied and pasted onto a white background.
Fig 10.3 Direct reproduction of letterforms from the image selected (07/09/2021)
Using QUARTZO Bold as a point of reference, I arranged the circles into legible typeforms. I tried to retain the same size of the circles extracted. Iterations 1 and 2 are attempts at rearranging the circle elements of the font to develop balance and symmetry.
Fig 10.4 Iteration #1 (07/09/2021)
Fig 10.5 Iteration #2 (07/09/2021)
Iterations 6, 7 and 8 are attempts at adjusting the little nuances and details to achieve overall stability and harmony in the letterforms.
In Iteration #6, the circles on the upper part of the arc of G are connected with the automated round handle. The fact that it is automated, it does not make it perfect. I altered the mistake later on which can be seen in the final submission. As for the joint of letter L and arc of S are still imbalanced.
Fig 10.6 Iteration #6 (07/09/2021)
In Iteration #6, the circles on the upper part of the arc of G are connected with the automated round handle.
Fig 10.7 Iteration #7 (07/09/2021)
Fig 10.8 Iteration #8 (07/09/2021)
Mr Vinod provided us with the questions (see below) to guide us in the right direction. We were to ask our peers for feedback and vice versa. This was aimed to build our ability to analyse, scrutinise the construction of a competent type form.
1. Are the strokes consistent in style & weight?
2. Comment on the refining process:
• Are the number of stages appropriate/enough?
• Has the form evolved while retaining crucial/core features?
3. What can be improved upon?
Fig 10.9 Sharing progress with class for feedback (13/09/2021)
Fig 10.10 Iteration #9 (13/09/2021)
Fig 10.11 Iteration #10 (13/09/2021)
Fig 10.12 Progress work on Adobe Photoshop (13/09/2021)
FINAL SUBMISSION
Fig 10.13 Exercise 2: Type & Play- Final JPG Typeface (14/09/2021)
Fig 10.14 Exercise 2: Type & Play- Final JPG Poster (14/09/2021)
Fig 10.15 Exercise 2: Type & Play- Final PDF Compilation (14/09/2021)
<iframe src="https://drive.google.com/file/d/15REVbpvRkYzVHpbNECDkvYsDIU0lPYW7/preview" width="640" height="480" allow="autoplay"></iframe>
Exercise 3: Type & Image
For this exercise, we were required to combine a visual with a letter, word or sentence of our choice. The main objective is to enhance or support the interplay between the texts and the selected image. After Mr Vinod explained to us this task, I went on Pinterest and looked for the visuals I have pinned in the past. Out of the thousands of images, I narrowed it down to these 3 as I already had the exact words that were linked with the image in a symbiotic way.
Fig 11.2 Cher for Vogue, 1974
For Fig 11.1, I applied a liquid text effect on Adobe Illustrator, as seen in Fig 11.4, 11.5 and 11.6. The main aim is to create a dreamy, dazed feel. First, I duplicated the word euphoria 2 more times so I have a total of 3. Then I applied the blend effect and liquified and dragged the type.
Fig 11.4 Progress work (Euphoria) on Adobe Illustrator (15/09/2021)
Fig 11.5 Progress work (Euphoria) on Adobe Illustrator (15/09/2021)
Fig 11.6 Progress work (Euphoria) on Adobe Illustrator (15/09/2021)
Fig 11.7 Progress work (Euphoria) on Adobe Illustrator (15/09/2021)
As for this piece, I was inspired by Cher's pose. Although she is very elegant, I can't help but imagine her stumbling down the stairs, hence I came to the decision to use the word stumble. LOL! The typeface was chosen with the consideration of its grace and complementing flair to Cher. I deliberately added shadows after positioning each alphabet individually. The shadows part were a little complex but was extenuated after studying a few other artworks working with shadowss.
Fig 11.8 Progress work (Stumble) on Adobe Illustrator (15/09/2021)
Fig 11.8 Progress work (Stumble) on Adobe Illustrator (15/09/2021)
I also made another piece inspired by Cher. The texts "Mom, I am a rich man." is inscribed on the mirror behind Cher. I decided to not go on with this as the statement does not link much to the image and the concept is not as correlated.
Fig 11.8 Mom, I am Rich Man - Type & Image study (15/09/2021)
FINAL SUBMISSION
Fig 11.9 Exercise 3: Type & Image (Euphoria) - Final JPG (16/09/2021)
Fig 11.10 Exercise 3: Type & Image (Stumble) - Final JPG (16/09/2021)
Fig 11.11 Exercise 3: Type & Image - Final PDF compilation (19/09/2021)
FEEDBACK
Week 1
General Feedback: The 24 and 25 circled in red are too big, creating an imbalance with the rest of the date. It could either be reduced in size and weight, or the weight of the other information can be increased. Always try to avoid perfect angles like 90 or 45 degrees as it might look too stiff and tensed.
Specific feedback: Needs to pay more attention to paragraph spacing in Bilateral. Remove the white banner on the left for Transitional. Redo Random and Modular.
Week 2
General Feedback: Be mindful of awkward placement and too much negative/white space.
Specific feedback: There were several suggestions for the placement of the texts for Dilatational. The word Russian could be brought upwards to fill up the empty space. Some texts can be brought down at the bottom right as there is an ample amount of negative space.
Week 3
General Feedback: Can refer to the work of David Carson, Paula, Neville Brody, Edward Fella and Jason Pollock. Study cubism and dadaism for further understanding of typographic systems.
Specific feedback: Good work on Bilateral, Dilatational and Axial. All other systems are good to go as well. Move on to Task 2.
Week 4
General Feedback: Use existing typefaces as points of reference to construct the letterforms. The selection of images should not be too complicated, as the refining process might be too laborious and perplex
Specific feedback: Mr Vinod was skeptical when he saw the selected image but the font I created was good. However, I should proceed with step 6 instead of step 8, where only some of the circles are connected and others are not, rather than all circles connected and merged together.
Week 5
General Feedback: Texts should integrate and be related to the image selected.
Specific feedback: Mr Vinod said that my shadows components were executed well. Overall good job, though the typeface chosen could've had more girth so the shadows would be easier to model.
REFLECTIONS
Observations
Throughout the past 5 weeks, the most apparent point I have apprehended is that I really should manage my time well. With lots of activities and events I have participated in, it is tricky for me to find time to complete all assignments (including other modules), let alone read the recommended books. However, it is a learning process and I am still learning to cope with all the workload of a design student at Taylor's.
Findings
The first exercise, the 8 typographic system were an eye-opener for me. I have always analysed editorial designs and newspaper layouts but never realised how these can be organised into individual groups and how visually diverse they can be.
Experience
Our lessons for this module this semester will continue being conducted online. The past 5 weeks have been hectic but very fun nevertheless. We got to try a lot of different tasks in comparison to Typography class last semester. Task 1 exercises were quite enjoyable because we were given more freedom in our designs, rather than last semester's where we had to follow to rules more strictly. I especially liked the last take where we were given full control of the typeface and images chosen.
Further readings
Elam, K. (2007). Typographic Systems. Princeton Architectural Press, New York
In this book, Elam explained thoroughly and explored the complex typographic system. Many elements such as hierarchy, legibility, contrast, weight, and many more come to play when we design structural frameworks. The book also included many examples which I found to be extremely useful.
7 Essential Typographic Layout Systems eBook by Lucas Czarnecki
Very similar to Elam, K's Typographic Systems, this eBook provided a visual organisation system for typography with clarity. I gained a better understanding of the intricacy of these complex structures which helped me to be able to fluidly organize information in my design work.
Comments
Post a Comment