Advanced Typography | Exercises: Typographic System & Type & Play
Week 1 (30/8/2023) - Week 3 (13/9/2023)
Nurul Asilah Binti Mohamad Asif | 0353346 | Bachelor's of Design in Creative Media | Advanced Typography
Week 1 - Introduction and Briefing
Mr. VInod began by introducing us to modules and a few other documents that were posted on Teams, whilst also briefing us on Task 1, 2A, 2B, 3, and 4. The e-books can be found in the files on teams. Mr.Vinod also gave a little bit of a brief on MIB. We are also required to fill up our info into the feedback sheet. Then we watched the lecture 1 video on the typography system together.
Lecture 1 - Typography Systems
The typographical organization is complex because the elements are dependent on communication in order to function. Additional criteria such as hierarchy, order of reading, legibility, and contrast.
Shape Grammar is a set of rules that is unique and provides a sense of purpose that focuses and directs the decision-making.
Axial System
All elements are organized to the left or right of a single axis.
Fig 1.1 Example of Axial System
Radial System
All elements are extended from a point of focus.
Fig 1.2 Example of Radial System
Dilatational System
All elements expand from a central point in a circular fashion.
Fig 1.3 Example of Dilatational System
Random System
Elements appear to have no specific pattern or relationship
Fig 1.4 Example of Random System
A system of vertical and horizontal divisions.
Fig 1.5 Example of Grid System
Transitional System
An informal System of layered banding.
Fig 1.6 Example of Transitional System
A series of non-objective elements that are constructed as a standardized unit.
Fig 1.7 Example of Modular System
Bilateral System
All text is arranged symmetrically on a single axis.
Fig 1.8 Example of Bilateral System
Week 2
Lecture 2: Typographic Composition
Principles of Design Composition
Emphasis, isolation, repetition, symmetry and asymmetry, alignment, and perspective to name a few.
Fig 1.9 Emphasis
The rule of Thirds
A frame can be divided into 3 columns and 3 rows. The intersecting lines are used as a guide to place the points of interest, within the given space.
Fig 2.0 The rule of thirds
Typographic System
The most used system is the grid system, which is derived from the gridded composition structure of letterpress printing.
Fig 2.1 Grid system
Post-modernist era in Typographical systems where chaos, randomness, and asymmetry were explored, Legibility and readability were relegated to the back seat, however, the best examples seem to combine two seamlessly. Being exposed to Punk anti-establishment thought and music. As such the asymmetry, random, repetition, dilatational, and radial systems began to take root in the lexicon of designers.
Fig 2.2 Example of post-modern typography
Environmental Grid
This system is based on the observation of an existing structure or a collection of structures. An extraction of critical curved and straight lines is created.
Fig 2.3 Example of environmental grid by Brenda McManus, of Pratt Inst.
Form and Movement
The placement of a font on my page, over many pages, creates movement. Whether the page is paper of screen is irrelevant.
Fig 2.4 Form and Movement
Lecture 3: Context and Creativity
Hand-writing
- The first mechanically produced letterforms were designed to directly imitate handwriting.
- Basis or standard for form, spacing, and conventions mechanical type would try and mimic.
- Shape and line of hand-drawn letterforms are influenced by the tools and materials used to make them. Eg: Sharpened bones, charcoal sticks, plant stems, brushes, feathers, and steel pens all contributed to the unique characteristics of the letter form.
- Letterforms were written on clay, papyrus, palm leaf, animal skins (vellum and parchment), and paper.
Fig 2.5 Evolution of the Latin Alphabet
Cuneiform
The earliest system of actual writing was used in a number of languages between 34c. B.C.E. through the 1st century C.E. The wedge form was the result of pressing the blunt end of a reed stylus into wet clay tablets. The cuneiform character evolved from pictograms. Cuneiform was written from left to right.
Fig 2.6 Cuneiform c. 3000 B.C.E
Hieroglyphics
The Egyptian writing system was the first link to a future alphabetic system. To be used in the 3 ways:
- As ideograms, to represent the things they actually depict.
- As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
- As phonograms to represent sounds that "spell out" individual words.
Fig 2.7 Hieroglyphics 2613-2160 B.C.E
Early Greek
The Phoenicians developed a phonetic alphabet consisting of 22 letters. Has only capital letters, written between two guidelines to organize them into horizontal rows. Greek was often read in a format known as boustrophedon or "as the ox plows." One row would read left to right and then switch from right to left. Were drawn freehand, not constructed with compasses and rule, and they had no serifs.
Roman Uncials
By the 4th century, Roman letters were becoming more rounded, allowing for fewer strokes and speedier writing.
Fig 2.8 Roman Uncials
English Half Uncials
In England, the uncial evolved into a more slanted and condensed form.
Fig 2.9 English Half Uncials. 8th C.
Carolingian Miniscule
Capital at the start of a sentence, spaces between words, and punctuation. It was used for all legal and literary words to unify communication between the various regions of the expanding European empire. it became the pattern for the Humanistic writing of the 15th century, this letter, in turn, was the basis of our lowercase Roman type.
Black Letter
Gothic was the culminating artistic expression of the Middle Ages, occurring roughly 1200-1500. The vertical supplanted horizontals as the dominant line in architecture, and the pointed arch replaced the round arch of the Romans, the almond shape, or mandorla, was preferred. Blackletter is characterized by tight spacing and condensed lettering with evenly spaced verticals dominating the letterform.
Fig 3.0 Black Letter 12-15C.CE
Humanist scholars in Italy were slowly reviving the culture of antiquity. The Renaissance embrace of ancient Greek and Roman culture spurred a creative wave through Italian art, architecture, literature, and letter form design.
Fig 3.1 The Italian Renaissance
Humanists named the letterforms Antica. The form that was being applied to art and architecture was directed towards letterforms, resulting in a more perfect or rationalized letter.
Fig 3.2 Antica
Movable Type
Printing had already been practiced in China, Korea, and Japan. The introduction of movable type was introduced in the 1000-1100 CE.
Fig 3.3 Movable type
Evolution of Middle Eastern Alphabets
Possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.
Fig 3.4 Evolution of Middle Eastern Alphabets
Evolution of Chinese Script
From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.
Fig 3.5 Evolution of the Chinese Script
Indus Valley Civilization (IVC) script
A yet undeciphered and seems to have a logo-syllabic in nature.
Fig 3.6 Indus Valley Civilization (IVC) script 3500-2000 BCE
The Brahmi script
The earliest writing system developed in India after the Indus script.
Fig 3.7 The Brahmi script 450-350 BCE.
Fig 3.8 Pavalla script
Fig 3.9 Pra-nagari (Nagari script)
Fig 4.0 Kawi
Fig 4.1 Incung
Fig 4.2 Rencong
Fig 4.3 Batak script
Fig 4.4 Bulgis script
Fig 4.5 Javanese script
Jawi
Arabic-based alphabet. Jawi is introduced along with Islam
Programmers and type design
vernacular scripts are being produced by software giants (Google)
Fig 4.6 Programmers and type design
Week 4
Lecture 4: Designing Type
Why design another typeface?
- Type design carries a social responsibility
- Type design is a form of artistic expression.
Adrian Frutiger
- 20th-century Swiss graphic designer
- Typeface contribution - Univers and Frutiger
Purpose
Create a clean, distinctive, and legible typeface that is easy to see from both close up and far away which is extremely functional.
Limitations
It needed to be recognized even in poor light conditions or when the reader moves quickly past a sign.
Fig 4.7 Airport Signage using Frutiger
Is the son of Harry Cater, Royal Designer for Industry, a contemporary British type designer, and an ultimate craftsman. Many of Carter's fonts were created to address specific technical challenges, for example, those posed by early computers like Verdana (1996) for Microsoft.
Purpose
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"
Fig 4.8 Verdana typeface
In 1976, AT&T commissioned the design of a new typeface whose sole purpose would be to use it in their telephone directories. it has solved multiple technical and visual problems related to the existing phonebook typeface, Bell Gothic.
Fig 4.9 Comparisons, font vs printed
Edward Johnston
Is a creator of the hugely influential London "Underground" typeface, which is later known as "Johnston Sans" (1916). he was asked to create a typeface with "bold simplicity" that was truly rooted in tradition. Johnton's design was completed in 1916, and 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.
Considerations/limitations
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 fits the modern age.
Fig 5.0 Earlier versions reveal a more fussy "w", formed from two intersecting "y", a capital-style "q"
General Process of Type Design
1. Research
We should understand type history and type conversations. know terminologies, side-bearing, metrics, hinting. It is important to determine the type's purpose or what it would be used for, and what different applications in. Examine existing fonts that are presently being used for inspiration/ideas/reference/context/context/ usage pattern/ etc.
2. Sketching
Using a traditional tool set (brushes/ pens, ink, and paper) then scan them for the purpose of digitization. They are more confident with their hands and have better control using it. Others sketch their typeface using digital toolsets such as Wacom directly into a font design software which is much quicker, persistent, and consistent. But this can sometimes impede the natural movement of hand strokes.
3. Digitization
FontLab and Glyphs App are professional software that can be used to digitize typefaces. Adobe Illustrator is also used to design or craft letterforms and then introduce them into the specialized font apps. Attention should not only be given to the whole form at this stage but also to the counter form. The readability of the typeface is heavily dependent on it.
4. Testing
Depending on the typeface category (display type/text type) the readability and legibility of the typeface become an important consideration. It is not crucial if the typeface is a display type, where the expression of the form takes a little more precedence.
5. Deploy
Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases. Thus, the task of revision does not end upon deployment. The rigor of the testing is important so that the teething issue remains minor.
Typeface Construction
The grid in the Roman Capital consists of a square, and inside it is a circle that touches the lines of the square in four places. Within the square, there is also a rectangle. This rectangle is three-quarters the size of the square and is positioned in the center of the square. Thus, using grids with circular forms can facilitate the construction of letterforms and is a possible method to build/ create/ design the letterform.
Construction and considerations
An important visual correction is the extrusion of curved and protruding forms past the baseline and cap line. This also applies to vertical alignment between curved and straight forms. A visual correction is also needed for the distance between letters as it is not possible to simply place letters next to each other with equal spacing between them. The letters must be altered to a uniform 'visual' white space. This means that the white space between the letters should appear the same which is called the 'fitting' type.
Instructions
Exercise (1)
Task 1: Typographic Systems
We are assigned to create 8 systems which are axial, radial, dilatational, random, grid, modular, transitional, and bilateral in Adobe InDesign.
Requirements:
- Size: 200 x 200mm
- In addition to black, we are allowed to use one other color.
- Graphical elements like (line dots, etc.) can be used but limitedly.
8 Systems for the following content:
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
Manish Acharia, 11AM-12AM
Lecture Theatre 12
Digitalization in InDesign
Axial + Progress
Fig 1.0 Axial Progression 1 (31/9/2023)
Fig 1.1 Axial Progression 2 (31/9/2023)
Fig 1.2 Axial Progression 3 (31/9/2023)
Fig 1.3 Axial Attempt 1 with grids (31/9/2023)
Fig 1.4 Axial Attempt 1 without grid (31/9/2023)
On my first attempt, I wanted to do a vogue-style cover magazine type of layout where it has a BOLD italic comes into play. I wanted the title to be in verticle to show the aesthetics of how it would look like in a poster banner or magazine.
Fig 1.5 Axial Progression 4 (31/9/2023)
Fig 1.7 Axial Attempt 2 without grid (31/9/2023)
I actually liked my 2nd attempt more than my first one, it's not too messy and it's really clean to look at. I wanted to add a little bit of element to it, but I was afraid it might look messy again. I decided to give it a go anyway. No harm in trying right.
I used the lines to make some sort of a ripped effect but using shapes, I thought it would look interesting having the shapes looking like it was torn apart (in a way).
Fig 1.8 Axial progression 5 (31/9/23)
Fig 1.9 Axial attempt 3 (31/9/2023)
Fig 2.0 Axial attempt 4 (32/9/2023)
In the end, I decided to use the layout in Figure 1.9, I added the color "hot pink" to brighten up the darker background to add contrast to this design.
Radial
Fig 2.1 Radial progression 6 (33/9/2023)
Fig 2.2 Radial Attempt with grid (33/9/2023)
Fig 2.3 Radial Attempt without grid (33/9/2023)
Fig 2.4 Radial with color (33/9/2023)
Fig 2.5 Radial with color#2 (33/9/2023)
Fig 2.6 Radial Progression 7 (33/9/2023)
Fig 2.7 Radial with color#3 (33?9/2023)
Dilatational
Fig 2.8 Dilatational Progression 7 (35/9/2023)
Fig 2.9 Dilatational Attempt with grid (35/9/2023)
Fig 3.0 Dilatational Attempt without grid (35/9/2023)
Fig 3.1 Dilatational Attempt with color (35/9/2023)
Random
Fig 3.2 Random Progression 8 (35/9/2023)
Fig 3.3 Random with color (35/9/2023)
According to Mr. Vinod's feedback, this is not how a random should look, it should have more of an aggressive style, like throwing ice cream on a wall, that is random. So I decided to change the style a little bit and look back at the lecture video to have a better understanding of the "random" section.
I rearranged the words again but this time, I decided to go messy on the canvas.
Fig 3.4 Random Progression 9 (6/9/2023)
Fig 3.5 Random with color (6/9/2023)
Grid
Fig 3.6 Grid progression 10 (7/9/2023)
Fig 3.7 Grid with color (7/9/2023)
Modular
Fig 3.8 Modular Progression 11 (7/9/2023)
Fig 3.9 Modular Attempt 1 (7/9/2023)
Fig 4.0 Modular with color (7/9/2023)
Transitional
Fig 4.1 Transitional Progression 12 (7/9/2023)
I didn't really the how I arranged the color in the beginning, I decided to a black background instead.
Fig 4.2 Transition Attempt 1 (7/9/2023)
Fig 4.3 Transitional with color (7/9/2023)
Bilateral
Fig 4.4 Bilateral progression (7/9/2023)
Fig 4.5 Bilateral with color (7/9/2023)
Fig 4.6 Bilateral with color #2 (7/9/2023)
Fig 4.7 Final Axial System JPEG (10/9/2023)
Fig 4.8 Final Radial System JPEG (10/9/2023)
Fig 4.9 Final Dilatational System JPEG (10/9/2023)
Fig 5.0 Final Random System JPEG (10/9/2023)
Fig 5.1 Final Grid System JPEG (10/9/2023)
Fig 5.2 Final Modular System JPEG (10/9/2023)
Fig 5.3 Final Transitional System JPEG (10/9/2023)
Fig 5.4 Final Bilateral System JPEG (10/9/2023)
Final (PDF Format)
Fig 5.5 Final Task 1 - Exercise1: Typographic Systems PDF (17/9/2023)
Final (PDF format with grid)
Fig 5.5 Final Task 1 - Exercise1: Typographic Systems Grids and Guides PDF (17/9/2023)
Task 1: Exercise 2- Type and Play
Part 1: Finding Type
We were assigned to make a selection of images between man-made objects or structures, and nature.
Dissect and identify the letterforms, only 4 letters are required.
- Selecting images
- Trace out the outline from the image.
- Identify different shapes and letterforms.
- Refine
- Reference with existing typefaces
Chosen Photo
Fig 5.5 Picture chosen for Exercise 2 (10/9/2023)
Letterform extraction:
Fig 5.6 Traced Letters - A.X.V.I.Y (10/9/2023)
.jpg)
Fig 5.7 Traced Letters #2 (10/9/2023)
.jpg)
Fig 5.8 Extracted Letters - A,X,V,I,Y (10/9/2023)
Reference:
Fig 5.9 Typeface reference - GillSansSTD-Light (10/9/2023)
Digitalization:
Fig 6.0 Progression Typeface (11/9/2023)
Fig 6.1 Different stage of refinement (11/9/2023)
Fig 6.2 Improvise (13/9/2023)
Final Finding Type
Fig 6.3 Compiled Process (13/9/2023)
Fig 6.4 Original extracted Letterforms and The Final Type Desigm (13/9/2023)
Fig 6.5 Final Type Design (13/9/2023)
Fig 6.6 Letter "A" (13/9/2023)
Fig 6.7 Letter "X" (13/9/2023)
Fig 6.8 Letter "V" (13/9/2023)
Fig 6.9 Letter "I" (13/9/2023)
Fig 7.0 Letter "Y" (13/9/2023)
Final (PDF Format)
Fig 7.1 Final Finding Type - PDF (14/9/2023)
Part 2: Type ShowCase
On our next task, we are required to find an image and combine it with the letterforms we have created in part 1. Secondly, we must match the same vibe with the letterforms in the picture chosen.
Fig 7.2 Picture Chosen (14/9/2023)
The reason why I chose this picture is that my letterforms seem to look a little horror themed, therefore I chose a picture that was inspired by an insidious movie and tried to reframe it from there onwards.
Attempt 1
Fig 7.3 Attempt 1 of Type showcase (14/9/2023)
Fig 7.4 Attempt 2 of Type showcase (14/9/2023)
Fig 7.5 Attempt 3 of Type showcase (14/9/2023)
Final (JPEG Format)
Fig 7.6 Type Showcase movie poster (14/9/23)
Final (PDF Format)
Fig 7.7 Final Type movie poster showcase PDF format (14/9/2023)
Feedback
Week 1 Brief
Week 2 -
General Feedback:
- Unnecessary lines and unnecessary backgrounds distract the audience.
- You may keep the rectangle.
- The circular is distracting.
- Bilateral needs to be different.
- Font size needs to be in the range of 8-12
It looks good, however, it needs to be properly aligned.
Week 3
General feedback:
Identify the shapes of the letterforms and not just line them out. Observe the texture and lines of the objects chosen.
Specific Feedback:
The picture chosen is fine, The extraction seems good. The challenge will be how to obtain what characteristics can be seen there. One is the outer part of the picture, next is the inner part. If you dig deeper, you can find more than just 5 letters.
At the beginning of the exercise, I felt the urge to come up with creative ideas as I was looking forward to the start of the semester, I kept looking up some references on how I could start making my designs a little bit more different. However I realized that it's not just the typeface, but the colors as well that i am struggling with. I haven't touched InDesign software since the previous typography class, therefore I had to look back at my previous progress on how to start with my tasks. I loved using Photoshop and Illustrator, but in order for me to enlighten my skills in InDesign, I have to start learning and exploring more about the software itself.
Further Reading
This book provides a thorough exploration of typographic grids, hierarchies, and the organization of type within various design contexts. It offers practical insights and showcases real-world examples to help designers create structured and visually appealing typographic compositions. Whether you're a seasoned graphic designer or just starting out, this book is an invaluable resource for mastering the principles of typographic systems and applying them effectively in your design projects.
Notes:
- Title: "Typographic Systems: A Comprehensive Guide for Graphic Designers"
- Author: Kimberly Elam
- In-depth examination of typographic systems and their significance in design.
- Focuses on typographic grids, hierarchies, and organizing type within different design contexts.
- Features practical insights and real-world examples to illustrate key concepts.
- Suitable for graphic designers at all levels of experience.
- An essential resource for those looking to enhance their skills in creating structured and visually appealing typographic compositions.
Comments
Post a Comment