ADVANCED TYPOGRAPHY / Task1(Exercises 1&2)
22 Apr 2024 - 13 May 2024 (Week1-4)
Kaho Yamaya / 0364278
Advanced Typography / Creative Media / Taylor’s University
Task1- Exercises 1&2
JUMP LINK
・Submissions
Week1 (22/4/2024 - 28/4/2024): Typographic Systems
In Week0 lecture video, Mr. Vinod suggested typographic system. Typographic systems are akin to what architects term shape grammars. Shape grammars are a specific class of production systems that generate geometric shapes. “All design is based on a structural system” and according to Elam, 2007, there are eight major variations with an infinite number of permutations. These eight major are as follow: Axial, Radical, Dilatational, Random, Grid, Modular, Transitional, Bilateral.
Fig 1.1 Axial System by type365
Axial System
All the elements are organized to the left or right of a single area.
Fig 1.2 Radical System by type365
Radical System
All elements are extended from a point of focus.
Fig 1.3 Dilatational System by type365
Dilatational System
All elements expand from a central point in a circular fashion. We can have multiple rings pf circles with information on either sides or in line with those circles.
Fig 1.4 Random System by jackywilliams
Random System
Elements appear to have no specific pattern or relationship.
Fig 1.5 Grid System by type365
Grid System
A system of vertical and horizontal divisions.
Fig 1.6 Transitional System by type365
Transitional System
An informal system of layered banding.
Fig 1.7 Modular System by type365
Modular System
A series of non-objective elements that are constructed in as standardized units.
Fig 1.8 Bilateral System by type365
Bilateral System
All text is arranged symmetrically on a single axis.
Typographical organization is complex because the elements are dependent on communication in order to function. As a designer, we need to keep in our mind when we are giving form to content, it is important that communication is right in the forefront of that form. Additional criteria such as hierarchy, order to reading, legibility, and contrast also come into play.
“Typography is the use of type to advocate, communicate, celebrate, educate, elaborate, illuminate, and disseminate. Along the way, the words and pages become art.” -James Felici, The Complete Manual of Typography
Week2 (29/4/2024 - 5/5/2024): AdTypo_2_Typographic Composition
Two aspects in Typography: Typography pertains to the creation of letters and also pertains to the arrangement of large amounts of text within in a given space. Typographic composition refers to letter which is arrangement of textual information within a given space.
Principles of Design Composition
Composition principles underpinning design composition. The examples: emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective to name a few. However these abstract notions seem ambiguous and relevant to imagery when it comes to translating it into typographic layouts or composition.
Fig 2.1 Emphasis in Typographic composition
Emphasis is shown in 2D, but also shown in layout as well.
Fig 2.2 The Rule of Thirds
The Rule of Thirds is a photographic guide to composition, it basically suggest that a frame (space) can be divided into 3 columns and 3 rows. The interesting lines are used as guide to place the points of interest, within a given space.
Typographic Systems
The 8 system used in previous practice include the Grid system (or Raster System), which is most used and pragmatic. It was further enhanced by Swiss (Modernist) style of Typography, less by Josef Muller Brockmann, Jan Tschihold, Max Bill and such.
Fig 2.3 Grid system
Grid system continues to remain popular because of its versatility and modular nature, allowing to an infinite number of adaptions.
Fig 2.4 Paula Scher (Left), Jonathan Barnbrook (middle), David Carson (right)
In the modernist era of typography, a group of younger designers challenge the order and exploded chaos, randomness and asymmetry.
Fig 2.5 An example from lecturer Brenda McMannus,of Pratt Inst. from the book:
Typographic Form and Communication, pp211.
Environmental Grid
This system is based on the exploration of an existing structure or numerous structures combined. An extraction of crucial lines both curved and straight are formed. The designers then organizes his information around this super-structure, which includes non-objective elements to create a unique and exciting mixture of texture and visual stimuli.
Fig 2.6 Example of Form and Movement
Form and Movement
This system is based on the exploration of an existing Grid Systems. It developed this system to get students to explore; the multitude of options the grid offer; to dispel the seriousness surrounding the application of the grid system; and to see the turning of pages in a book as a slowed-down animation in the form that constitutes the placement of image, text and color.
“This is a fine line between genius and insanity, just as there is a fine line between legibility-readability & memorability.” -1st point came Oscar from Levant, second from me.
Week3 (6/5/2024 - 12/5/2024): AdTypo_3_Context&Creativity
We study handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting. Handwriting would become the basis for spacing and conventions.
Fig 3.1 Cuneiform c.3000 B.C.E
The eariest system of actual writing, was used in a number of languages between 34C. B. C. E through the 1st century C. E.
Fig 3.2 Hieroglyphics 2613 - 2160 B. C. E
The Egyptian writing system is fused with the art of relief carving. As ideograms, represent the things they actually depict. As determinatives to show that the signs preceding are meant as photograms and to indicate the general idea of the word. As phonograms to represent sounds that “spell out” individual words.
Fig 3.3 The transitions of Letterforms
Early Greek / 5th C. B. C. E.
Drawn freehand, not compasses and rule, and they had no serifs. In this time the strokes of these grew thicker, the aperture lessened, and serifs appeared.
Roman Uncials
Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster by the 4th century.
English Half Uncials, 8th C.
In England the uncial evolved into a more slanted and condensed form.
Carolingian Minuscule
The Carolingian Minuscule was used for all legal and literary works to unity communication between the various regions of the expanding European empire.
Black Letter, 12-15 C. CE
Characterised by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform.
The Italian Renaissance
Humanist named newly rediscovered letterforms in Antica. The renaissance analysis of art and architecture was directed toward letterform - resulting in a more perfect or rationalised letter.
Fig 3.4 The oldest writing found in the “Indian” subcontinent the Indus Valley Civilisation (IVC) script (3500-2000 BCE)
It is as yet undeciphered and seems to have been somewhat logo-syllabic in nature.
Fig 3.5 Southeast Asia scripts
Looking behind gives you context, Looking forward gives you opportunities. -Vinod J. Nair
Week4 (13/5/2024 - 19/5/2024):AdTypo_4_Designing Type
General Process of Type Design:
1. Research
We should understand type history, type anatomy and type conventions. Determine the type’s purpose or what it would be used for, or what different applications it will be used in. Examine existing fonts that are presently being used for inspiration, ideas, reference, context, usage pattern, etc.
2. Sketching
Some designers sketch their typeface using the traditional tool, and some designers using digital tool. Both methods have positives and negatives.
3. Digitisation
Professional software that are used in the digitisation of typefaces: FontLab, Glyphs App, and sometimes Adobe Illustrator.
4. Testing
It is an important thinking process and the results of the testing is part of the process of refining and correcting aspects of the typeface. prototyping is also part of the testing process and leads to important feedback.
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 doesn’t end upon deployment.
Fig 4.1 Construction grid for the Roman Capital using 8x8 cells
Using grids (with circular forms) can facilitate the constructions of a letterforms and is a possible method to build/create/design the letterform.
Fig 4.2 Classification according to form and construction
Many different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curves (and protruding) forms past the baseline and cap line. This is also applies to vertical arraignment between curved and straight forms.
The mindset of a type designer -if clinically studied -might be construed as sick; plagued by an unusual obsession to detail. -Vinod J. Nair
INSTRUCTIONS
Fig 5.1 Instructions for this task (page6-9)
SUBMISSIONS
Exercise1: Typographic Systems /Week1-3
In this exercise, we are explore with 8 typographic systems (Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral) using 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-12PM
WEEK1
Fig 6.1 Screen grab of making process, Week1 (26/4/2024)
In week1 practical, we suggested to make compositions that related to the previous eight typographic systems with using Indesign.
Fig 6.2 Axial System, Week1 (26/4/2024)
In Axial System, I wasn’t struggle with function, but the information hierarchy is little bit difficult.
Font used:
Left, Middle: Georgia (Regular, Bold) Right: Gill Sans (Regular, Bold)
Fig 6.3 Radical System, Week1 (26/4/2024)
Font used:
Left, Right: Gill Sans (Regular, Bold)
Fig 6.4 Dilatational System, Week1 (26/4/2024)
Font used:
Left, Right: Futura (Medium, Condensed Medium)
Fig 6.5 Random System, Week1 (27/4/2024)
Font used:
Left: Georgia (Regular, Bold, Bold Oblique), Gill Sans (Ultra Bold), Helvetica (Light Oblique), Futura (Bold)
Right: Georgia (Regular, Bold, Bold Italic, SemiBold Italic), Gill Sans (SamiBold Italic), Helvetica (Bold Oblique), Futura (Bold, Condensed Medium)
Fig 6.6 Grid System, Week1 (27/4/2024)
Font used:
Left: Georgia (Regular, Bold), Helvetica (Regular, Bold) Right: Georgia (Regular, Bold)
Fig 6.7 Transitional System, Week1 (27/4/2024)
Font used:
Left: Georgia (Regular, Bold) Futura (Condensed Medium) Right: Georgia (Regular, Bold)
Fig 6.8 Modular System, Week1 (28/4/2024)
Font used:
Left: Helvetica (Regular, Bold) Right: Helvetica (Regular, Bold), Futura (Condensed Medium)
Fig 6.9 Bilateral System, Week1 (28/4/2024)
Font used:
Left, Right: Futura (Medium, Medium Italic, Condensed Medium)
WEEK3
Fig 6.10 Week3 extra attempts, Week3 (12/3/2024)
From Week2 Feedback, I tried to fix some of them. My visual elements are too strong for the screen, so I made them more weak. In the past attempt, I struggle with random system because I need to be conscious to make randomness. I also focus on the hierarchy of informations and eye movement of viewer in every systems. For example, I made Bilateral System structure related to the reading rule; left to right, up to down.
FINAL TYPOGRAPHIC SYSTEMS
Fig 6.11 Final Axial System, JPEG, Week3 (12/5/2024)
Fig 6.12 Final Radical System, JPEG, Week3 (12/5/2024)
Fig 6.13 Final Dilatational System, JPEG, Week3 (12/5/2024)
Fig 6.14 Final Random System, JPEG, Week3 (12/5/2024)
Fig 6.15 Final Grid System, JPEG, Week3 (12/5/2024)
Fig 6.16 Final Modular System, JPEG, Week3 (12/5/2024)
Fig 6.17 Final Transitional System, JPEG, Week3 (12/5/2024)
Fig 6.18 Final Bilateral System, JPEG, Week3 (12/5/2024)
Fig 6.19 Final Task1- Exercise: Typographic Systems, PDF, Week3 (12/5/2024)
Fig 6.20 Final Task1- Typographic Systems, PDF, Week3 (12/5/2024)
Task1: Exercise2- Type & Play /Week2-4
In this task, we required to analyze, dissect and identify potential letterforms within the dissected image. The forms would explored and ultimately digitised.
WEEK2
1. Choose subject and trace shapes
Fig 7.1 Chosen picture- Pile of Whale Bones, Week2 (30/4/2024)
I'm loving with the bones, so I chose this picture for my subject.
Fig 7.2 Traced shapes and found letters, Week2 (2/5/2024)
I know it is too much work for just tracing, but I really enjoying this process and couldn’t find where should I stop. I could found the letters below: R, D, Q, Y from here.
Fig 7.3 R, D, Q, Y from chosen picture, Week2 (2/5/2024)
I chose two types of letter R and D because both shapes have good point and bad point. I want to combine them in next step and make more better design.
Fig 7.4 Rough sketch before start digitisation, Week2 (2/5/2024)
I made few sketches before start digitalization. I need to fix letter R immediately, so I shorten the stem part. Also I adjust the size of letter D for vertically long version. I’ve noticed the letter Q has tail and it is extend to right, so I change the direction for right. I think the counter space in each letters are vertical version is more appropriate in this situation. The number six is the best one for start the digitalisation.
2. Digitalisation
Fig 7.5 Typeface reference from Bodoni Std (Poster), Week2 (3/5/2024)
I choose Bodoni Std (Poster) from 10 fonts because the uppercase shape has similar shape with my extracted fonts. The tail part in letter Q and asymmetry ascender part in letter Y is the most similar point with my extracted shapes.
Fig 7.6 Simplified Typeface, Week2 (3/5/3034)
First, I simplified the extracted shape for next step. I need to fix the letter R because there is a super long part and not suit for typeface.
Fig 7.7 Adjust Typeface first attempt, Week2 (3/5/2024)
For make constancy in these typeface, I replace the counter part shape for letter D one. Later replace them, I change the left part of counter space of letter R and Q for combine with reference typeface. I send these four for my friend and get some feedback. The letter D is little bit similar with letter A, and letter Y is looks like letter T. So I focus on fix these parts and changed a lot of letter Y to get more clear visibility. Reference typeface Y has asymmetry open-counter space and thickness, so I also make mine like that.
Fig 7.8 Working progress, Week2 (4/5/2024)
I marked few points that I paid attention when I was adjusting. In reference typeface, some points have same angle and shape. I adjust these angle for make constancy.
Fig 7.9 Adjust Typeface second attempt, Week2 (4/5/2024)
I adjusted little bit from first attempt to take a balance when it comes individual or group.
Fig 7.10 Compare extracted and adjusted shape letter R, Week2 (5/5/2024)
The part I showed in red circle are the difficult point to fix. The counter space is really big and the long part is super long and I’m stuck in combine with reference typeface.
Fig 7.11 Compare extracted and adjusted shape letter D, Week2 (5/5/2024)
I adjusted these points to get more smooth visual. Extracted one is having a lot of complex texture and it will prevent visibility.
Fig 7.12 Compare extracted and adjusted shape letter Q, Week2 (5/5/2024)
Counter space in extracted shape is horizontal and placed at left below, but I want a vertical shape in the middle. So I replaced the shape to letter D counter space and placed it in the centre.
Fig 7.13 Compare extracted and adjusted shape letter Y, Week2 (5/5/2024)
In my first idea, these points are more appear in the adjusted one, but it will lose visibility, so I changed the above point for really big counter space.
WEEK3
From Week3 Feedback from Mr.Vinod, I need to study more about the texture and bone-like visual for my typeface.
Fig 7.14 Extra reference photo, Week3 (6/5/2024)
To learn more about bone visual, I chose more close-up photo. It shows the curve and its characteristic shape more clearly.
Fig 7.15 Letter R transitions, c
I referred to the photo above and make it more simple. Actual bones have not so jagged. Letter R is having clear readability in its visual, so I deleted the counter space to get more bone-like visual.
Fig 7.16 Letter D transitions, Week3 (12/5/2024)
Letter D is also need to fix its visual because I put straight line in left part but actual bone has no completely straight line.
Fig 7.17 Letter Y transitions, Week3 (12/5/2024)
First I think I could satisfy with the third attempt in this figure, but later I rethink about stem part because it still having non-natural curve. The fourth attempt is the most simple and natural visual.
Fig 7.18 Letter Q transitions, Week3 (12/5/2024)
I’ve so struggle with letter Q. Because there is a lot of black part and I need to adjust counter space to reduce the weight.
Fig 7.19 Process screen grab, Week3 (12/5/2024)
WEEK4
Fig 7.20 Add some texture and crack, Week4 (12/5/2024)
From week4 feedback and classmate works, I realised my title typeface has less connection with background. I add some texture and crack for the title typeface and make it more bone-like visual.
FINAL TYPE & PLAY
Fig 7.21 Complied process board, Week2-4 (2/5/2024 - 13/5/2024)
Fig 7.22 Extracted and Final typeface compilation, Week4 (13/5/2024)
Fig 7.23 Final Typeface, Week4 (13/5/2024)
Fig 7.24 Final letter R, Week4 (13/5/2024)
Fig 7.25 Final letter D, Week4 (13/5/2024)
Fig 7.26 Final letter Q, Week4 (13/5/2024)
Fig 7.27 Final letter Y, Week4 (13/5/2024)
Fig 7.28 Final Typeface poster, Week4 (13/5/2024)
Fig 7.29 Final Type & Play, Week4 (13/5/2024)
FEEDBACK
Week1(22/4/2024)
General Feedback... No need face pages in task1 requirements. One color available with black. Just screen grab to show the progress in the blog. Each system need one final work for submit. We need readable size of texts. PDF without the guides and grids and PDF with guides and grids are required in final submit.
Week2(29/4/2024)
Specific Feedback...Many colors in the whole work. Axial is need to gathered the information. The graphical shapes are too strong in your work, so change the background color into white and try more light color to them to reduce the impact. Random is very distracted and cannot make hierarchy while trying to read the information. In Grid, you have function first and you just put them in the white space in the work. Font follows the functions, and good design has good structures before put anything. However your Grid is distraction. The Bilateral is not symmetrical and cannot catch the idea from screen.
General Feedback... Do not make e-portfolio too long with the single pictures. Update your e-portfolio repeatedly because you will rush in the further week. The graphical shape is too much strong in the work, so you need to be careful in that part. Upside down cause the lose readability. The important information in the work is acceptable to be having strong visual. You need to keep pay attention in the texts are not going to too much below the screen. Place something strong in the outside is let viewer’s eye movement for out. The importance of keep our eye in the artwork is let viewers focus on the work. Keep people’s attention in the informations. The important information placed in the center is more attractive because it gets attention. 45° radical is the bad design.
Good design with random is having a readability in that artwork and you can read them by using little bit time for it. You need to make hierarchy in the randomness.
Radical is need to make angle in the single sentence, not block of sentences. The strong color like B&W separated in two screen and also separate information in two will make people distracted.
Week3(6/5/2024)
Specific Feedback... It is difficult to find what is the original subject picture. The reference typeface is not completely suit for the subject picture. The process of typefaces is not done yet for final outcome. You need to study more for the “bone” expression to get bonelike visual. You should start from one typeface to get more bonelike appearance. Also the typeface has no constancy in its visual.
General Feedback... We’ll gonna make poster in this week class, so you don’t need to make it. We need to pay attention for the final outcome with the reference typeface. The reference typeface is need a relationship with extracted shape. Do not chose no-relation typeface. Do not make poster design in Photoshop.
Week4(13/5/2024)
Specific Feedback... Still having issue in the typeface. The readability in letter D is not well. Letter D and Q still have too much characteristic in its visual and need more simplification. Too much complications are lose readability and bone-like visual. Letter R shape is very clean, letter Y is also clean.
General Feedback... Person / person’s face will grab viewers attention and not focus on the title. No readability in content is no meaning. Most important thing in this poster is functional readability. Title needs to be bigger. Interplay between title and background is really important. Big rivers (gap between type or sentences) are taboo for the designer. In this stage, “Why you like this design” is the most important. Make a mistake by yourself, not lean others to avoid your responsibility. If viewers don’t not what is the main theme of typeface but there is relationship between background, they could know the main idea. Add some value by make relation ship between title and background. The star in the poster is title, so the other elements need to be more weaker.
REFLECTIONS
Experience... In Typographic systems, I was really struggle with random system because it needs to make randomness by thinking. When the first attempt failed, I try to get idea from further reading examples. As Mr. Vinod mentioned in the class, the professional works having clear information in its chaotic visual. Information hierarchy in poster is also important because if the most important information is too weak in the whole screen, it is not considered as good design. In Type & Play, I’m not good at making typeface because make rule for every single fonts and keep consistency is little bit difficult to me. However this is my weak point to fix because I am easily prioritise unique and interesting visual than the rules when I make design. I need to keep in mind to along with consistency in design.
Observations... Classmate work in Type & Play is really good and I studied a lot from them. First, I thought title is the most important object in screen, and I made background more darker than the title. However I must do the work after this part. One classmate made interplay between title and background naturally, and viewers can easily get the idea of its visual reference from appearance. On the other hand, another classmate made his typeface interplay with background in another way. He made their few parts hidden in the background. It is also considered as a connection between title and background.
Findings... Mr. Vinod said we need to think about “Why I like this design? What is the reason that I feel this design is interesting?” in this stage. Also he said we need to make mistake by ourselves because if we lean others in this academic practice, we lost the opportunity to make mistake and find more good way by ourselves. I made a lot of mistake and do some work in non-proper way in this task1, but I found some points to fix and can be change. I want to try more new design in my work, and keep in mind that I must not afraid make mistake.
FURTHER READING
Fig 8.1 “Typographic Systems” by Kimberly Elam, 2007
This book explain typographic systems with pictures and example works. I could learn more from this book for fully understand each systems.
Fig 8.2 Random System, page 72-73
Fig 8.3 Bilateral System, page 138-139
I also stuck with the Bilateral System in previous work, so I want to get more good design knowledge for future work. I thought the symmetrical layout is just placed sentences in opposite position, but this book said there are position that the sentences alternately placed. I could learn new layout from here.
Comments
Post a Comment