ADVANCED TYPOGRAPHY // TASK 1
31.8.2022 - 21.9.2022 (Week 1 - Week 4)
Advanced Typography // TASK 1 / Exercises: Typographic Systems & Type & Play
Ang Shin Er / 0355231
Bachelor Of Design (Hons) In Creative Media / Taylor's University
Ang Shin Er / 0355231
Bachelor Of Design (Hons) In Creative Media / Taylor's University
LECTURES
WEEK 1 / INTRODUCTION & BRIEFING
For the first week, our lecturer, Mr. Vinod was briefed us on the
assignments, task and explain in the detail way what we will learn in
this module. We were informed to join Advanced Typography Facebook group, all the important announcement and learning
materials will be update there. Next, we have to create an e-portfolio by using Blogspot same as semester 1 and
labeled properly. All work and process must be uploaded in the blogspot and in JPEG and PDF format.
| Lecture of Advanced Typography 1: Typographic System
“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 variations are as follows:
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
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 also come into play.
The typographic systems are akin to what architects term shape grammars. The typographic systems are similar that the systems has a set of rules that is unique and provides a sense of purpose that focuses and directs the decision making.” (Elam, 2007)
| all elements are organised to the left or right of a
single axis.
Fg.1.1 : Axial System
Radial System:
| All elements are extended from a point of focus.
Fg.1.2 : Radial System
Dilatational System:
| All elements expand from a central point in a circular fashion
Fg.1.3 : Dilatational System
Random System:
| Elements appear to have no specific pattern or relationship.
Fg.1.4 : Random System
Grid System:
| A system of vertical and horizontal divisions.
Fg.1.5 : Grid System
Transitional System:
| An informal system of layered banding.
Fg.1.6 : Transitional System
Modular System:
| A series of non-objective elements that are constructed in as a standardised units.
Fg.1.7 : Modular System
Bilateral System:
| All text is arranged symmetrically on a single axis
Fg.1.8 : Bilateral System
An understanding of the systems organization process allows the designer to break free from "the rigid horizontal and vertical grid systems of letter press" (Elam, 2007). It allows designers to use more fluid means to create typographic messages. Many designers focus primarily on the grid system for design and are unaware of the potential that other systems hold.
_
WEEK 2 / TYPOGRAPHIC COMPOSITION
| Lecture of Typography 2: Typographic Composition
Principles of Design Composition : When we think about composition, we think of dominant principles such as emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective to name a few.
These abstract notions seem ambiguous when it comes to translating it into typographic layouts or composition.They seem more relevant to imagery than complex units of information that consist different elements.
The Rule of Thirds :
Fg.1.9 : Rule of Thirds
It is a photographic guide to composition, it basically
suggest that a frame (space) can be divided into 3 columns
and 3 rows. The intersecting lines are are used as guide to
place the points of interest, within the given space.
Typographic Systems:
Fg.1.10 : Typographic Systems
Fg.1.11: Left to right: Paula Scher, Jonathan Barnbrook and David Carson
Post-modern Typographical systems explored chaos, randomness and asymmetry. Its proponents include: David Carson, Paula Scher, Jonathan Barn brook, to name a few. As such the asymmetry, random, repetition, dilatational and radial systems began to take root in the lexicon of designer.
Other models / Systems: | 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 designer 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.
| Form and Movement
Fg.1.13: Static versions of the form placed on spread
This system is based on the exploration of an existing Grid Systems. The placement of a form (irrespective of what it is) on a page, over many pages creates movement. Whether the page is paper or screen, this system allows students to explore the multitude of options the grid offers. It aims to get students 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 colour.
_
WEEK 3 / CONTEXT AND CREATIVITY
| Lecture of Typography 2: Context and Creativity
Why is handwriting important?
Fg.1.14 Evolution of Latin alphabet
Because the first mechanically created letterforms were designed to directly replicate handwriting, we study it. Handwriting would become the foundation or standard for form, space, and traditions that mechanical type would attempt to emulate.
The techniques and materials used to create hand drawn letterforms influence their shape and line. Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the letterform's distinct qualities. Other considerations were the substance used to write the forms: clay, papyrus, palm leaf, animal skins (vellum and parchment), and paper.
| Cuneiform : c. 3000 B.C.E.
Fg.1.15: Cuneiform
Cuneiform, the earliest system of actual writing, was used in a number of languages between 34C. B.C. and the 1st century C.E. Its distinctive wedge form was the result of pressing the blunt end of a reed stylus into wet clay tablets.
| Hieroglyphics : 2613–2160 B.C.E.
Fg.1.16 : Hieroglyphics
The ancient Egyptian hieroglyphic writing system was a mixture of rebus and phonetic characters. Hieroglyphs were the first link to a future alphabetic system. Images could have been used in three different ways: as ideograms, determinatives or phonograms.
| Early Greek : 5th C. B.C.E.
Fg.1.17 Early greek
Early Greek was comprised of only capital letters, written between two guidelines to organize them into horizontal rows. These early Greek letters were drawn freehand, not constructed with compasses and rule, and they had no serifs. The Phoenicians system then was adopted by the Greeks who added the necessary vowels.
Inscriptional letters are written with a flat brush, held at an angle like a broad nib pen, then carved into the stone with mallet and chisel. And those Roman inscriptional letters have served as models for calligraphers and type designers for the past two thousand years.
| Roman Uncials
Fg.1.18 : roman uncials
By the 4th century Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster.
| English Half Uncials, 8th C.
Fg.1.19 Eng half uncials
In England the uncial evolved into a more slanted and condensed form. While English and Irish uncials evolved, writing on the European continent devolved considerably and needed a reformer.
| Emperor Charlemagne 8C. CE
Fg.1.20 : emperor charlemagne
After the fall of the Roman Empire, the end of a central advanced culture resulted in general illiteracy and the breakdown of handwriting into diverse regional styles. For 300 years the knowledge of writing was kept alive mainly in the remote outposts of religious cloisters and retreats.
| Carolingian Minuscule
Fg.1.21 Carolingian Minuscule
A new script emerged, the Carolingian minuscule, during Charlemagne's patronage book production increased. A court school was established under the direction of Alcuin of York. The language was standardized -pronunciation and spelling as well as writing conventions- capitals and spaces between words.
| Black Letter 12-15 C. CE
Fg.1.22 black letter
Gothic was the culminating artistic expression of the middle ages occurring roughly from 1200 to 1500. Characterized by tight spacing and condensed lettering, Gothic books were designed to be more aesthetically pleasing to look at than ornate and ornate works of art from the Renaissance era.
| The Italian Renaissance
Fg.1.23 Italian renaissance
The renaissance embrace of ancient Greek and Roman culture spurred a creative wave through Italian art, architecture, literature and letter form design. Humanist named the newly rediscovered letterforms Antica. The analysis of form that was being applied to art and architecture was directed toward letterform.
| Movable Type 11C.—14 C.
FFg.1.24 moveable type
Printing (wood block) had already been practiced in China, Korea and Japan (Dharani Sutra, AD 750). Earliest known printed book (AD 868) is the Diamond Sutra: 16' scroll with the world's first printed illustration. China had attempted use movable type for printing but was unsuccessful due to the number of characters and the material used (clay).
WEEK 4 / DESIGNING TYPE
| Lecture of Typography 2: Designing Type
Fg.1.25 : UNIVERS by Adobe Illustrator, Airport Signage using Frutiger
“Adrian Frutiger is a renowned twentieth century Swiss graphic designer. His forte was typeface designing and he is considered responsible for the advancement of typography into digital typography. His valued contribution to typography includes the typefaces; Univers and Frutiger.”
Frutiger is a sans serif typeface designed by the Swiss type designer Adrian Frutiger in 1968 specifically for the newly built Charles de Gaulle International Airport in France. "The goal of this new typeface was create a clean, distinctive and legible typeface that is easy to see from both close up and far away".
Fg.1.26 Frutiger
This book tells the story of the typeface Univers and its creator, Adrian Frutiger. In particular, this book uses description and diagrams
Fg.1.27 Frutiger
Fg.1.28 Adrian Frutiger
Adrian Frutiger designed a new Devanagari font for modern typesetting and printing processes. His goal was to simplify the sacred characters, without compromising their ancient calligraphic expression. The Indian Design Institute saw no "desecration of something that was, for them, sacred".
Fg.1.29 Georgia and Verdana
Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. He trained as a punchcutter at Enschedé and was Mergenthaler Linotype's house designer 1965–1981. Many of Carter's fonts were created to address specific technical challenges posed by early computers.
Fg.1.30Verdana
Off screen, Georgia and Verdana have also made appearances in print. In 2010 there was a lot of “fontroversy” when it was announced that IKEA would be changing from Futura to Verdana
In 1976, AT&T commissioned a typeface whose sole purpose would be for use in their telephone directories. The design had to solve multiple technical and visual problems related with the existing phonebook typeface, Bell Gothic. The solution, named in honour of the company's 100th anniversary, was Bell Centennial.
Fg.1.31 Comparison, font vs printed
Edward Johnston created "Johnston Sans" (1916) for the London Underground in 1916. Was asked to create a typeface with "bold simplicity" that was truly modern yet rooted in tradition.
Fg.1.32 Johnston Sans
Edward Johnston created "Johnston Sans" (1916) for the London Underground in 1916. Was asked to create a typeface with "bold simplicity" that was truly modern yet rooted in tradition.
| General Process of Type Design:
1.Research
When creating type, we should understand type history, type anatomy and type conventions. We should also know terminologies, side-bearing, metrics, hinting…It is then important to determine the type’s purpose or what it would be used for, what different applications it will be used in such as whether the typeface is for school busses or airport signages, etc. We should also examine existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.
Fg.1.32 research
Kon
2. Sketching
Some designers sketch their typeface using the 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. Some designers sketch their typeface using digital tool sets, such as Wacom directly into a font design software (much quicker, persistent, and consistent) but this can sometimes impede the natural movement of hand strokes. Both methods have their positives and negatives.
Fg.1.33 sketching
3. Digitization
There are professional software that are used in the digitization of typefaces, amongst the leading software are: FontLab and Glyphs App. There are designers that also use Adobe Illustrator to design or craft the letterforms and then introduce it into the specialized font apps. This however is frowned upon by the purist. 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.
Fg.1.34 digitalisation
4. Testing
Testing is an important component in the design thinking process. 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. Depending on the typeface category (display type/text typ) the readability and legibility of the the typeface becomes an important consideration. However it is not as crucial if the typeface is a display type, where 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 doesn’t end upon deployment.The rigour of the testing is important in so that the teething issue remain minor.
Typeface Construction
Fg.1.35 Typeface Construction
Roman Capital: The grid consists of a square and inside it a circle that just 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
your letterform.
Construction and considerations
Classification according to form and construction. Depending on their form, the 26 characters of the alphabet can be arranged into groups.
Visual correction is the extrusion of curved and protruding forms past the baseline and cap line. It is needed for the distance between letters. The letters must be altered to a uniform visual white space. This is called "fitting" the type.
Fg.1.36 Construction and considerations
Most typefaces come about due to a need or demand. The need/motivation can be intrinsic and extrinsic. For a design to be successful the designer needs to be invested in the idea. It is also possible that the designer identifies a gap/problem and endeavors to solve it through the design of the typeface.
WEEK 5 / PERCEPTION AND ORGANISATION
| Lecture of Typography 5: Perception and Organisation
Perception in Typography : Its deals with the visual navigation and interpretation of the reader via contrast, form, and organization of the content.
| Contrast
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.
Fg.1.37 Contrast
Contrast / Size
A contrast of size provides a point to which the reader’s attention is drawn. For example if you have a big letter and a small letter you will obviously see the big letter first before the small. The most common use of size is in making a title or heading noticeably bigger than the body text.
Fg.1.38 Contrast / Size
Contrast / Weight
Weight describes how bold type can stand out in the middle of lighter type of the same style. Other than then using bold, using rules, spot, squares is also provide a “heavy area” for a powerful point of visual attraction or emphasis, therefore not only types of varying weight.
Fg.1.39 Contrast / Weight
Contrast / Form
Contrast of form is the distinction between a 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.
Fg.1.40 Contrast / Form
Contrast / Structure
Structure means the different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a blackletter.
Fg.1.41 Contrast / Structure
Contrast / Texture
By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture. Texture refers to the way the lines of type look as a whole up close and from a distance. This depends partly on the letterforms themselves and partly on how they’re arranged.
Fg.1.42 Contrast / Texture
Contrast / Direction
Contrast of direction is the opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. Text blocks also have their vertical or horizontal aspects of direction. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.
Fg.1.43 Contrast / Direction
Contrast / Color
The use of color is suggested that a second color is often less emphatic in values than plain black on white. Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colors that are used.
Fg.1.44 Contrast / Color
For refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. A good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point, it entertains the mind and is most often memorable.
The interplay of meaning and form brings a balanced harmony both in terms of function and expression.
When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.
Fg.1.45: Form
Originating from the Greek words “typos” (form) and “graphis” (writing), typography means to write in accordance with form. Typography can be seen as having two functions:
- to represent a concept
- to do so in a visual form.
Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.
Fg.1.46 Type Form 1-3
The interplay of meaning and form brings a balanced harmony both in terms of function and expression.
When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.
| Organisation / Gestalt
Gestalt theory emphasizes that the whole of anything is greater than its parts—this is based on the idea that we experience things as unified whole: Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.
Fg.1.47: Gestalt Theory
Organisation / Gestalt: Perceptual Organisation / Groupings
- Law of Similarity
- Law of Proximity
- Law of Closure
- Law of Continuation
- Law of Symetry
- Law of Simplicity (Praganz)
- 7.…
The Law of Similarity is the gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of features, including color, orientation, size, or indeed motion.
Fg.1.48 Similarity
The Law of Proximity is the gestalt grouping law that states elements that are close together tend to be perceived as a unified group. This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.
Fg.1.49 Proximity
The Law of Closure refers to the mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing
Fg.1.50 Closure
Law of (Good) Continuation holds that humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. The alignment of the objects or forms plays a major role for this principle to take effect.
Fg.1.51 Continuation
_
INSTRUCTION
TASK 1 / EXERCISE 1: TYPOGRAPHIC SYSTEM
For task 1 , we briefed through Youtube video. We are given the instruction to choose one of three titles that had prepared with the given content. Which is :
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
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
Lecture Theatre 12
I choose "The ABCs of Bauhaus Design Theory". We are only allowed to use the 10 typeface that given last semester and only in Indesign.
First, create a file Size 200 x 200 mm and paste all the text inside.
fg. 2.1 progress of work 3/9/2022
The font size should maintain in 8 to 12pt, excluding tittle and other important content.
fg. 2.2 progress of work 3/9/2022
Finalising work in Adobe indesign. Here is my outcome.
fg. 2.3 Axial System 3/9/2022
fg. 2.4 Radial system 3/9/2022
fg. 2.5 Dilatational System 3/9/2022
fg. 2.6 Random System 3/9/2022
fg. 2.7 Grid System 3/9/2022
fg. 2.8 Modular System 3/9/2022
fg. 2.9 Transition System 3/9/2022
fg. 2.10 Bilateral System 3/9/2022
8 Typographic system in PDF 4/9/2022
8 Typographic system PDF in Grid 4/9/2022
_
TASK 1 / EXERCISE 2 : TYPE & PLAY: PART 1: FINDING TYPE
First select the image that between man-made objects (chair, glass, etc.) or structures (buildings), and nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc.).
Analyze, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. It is expected that through a process of iteration the forms would go from crude representation to a more refined celebration that would reflect a degree of its origins.
Analyze, dissect and identify potential letterforms within the dissected image. The forms would be explored and ultimately digitized. It is expected that through a process of iteration the forms would go from crude representation to a more refined celebration that would reflect a degree of its origins.
I have selected an interesting building photo.
fg. 2.11 selected building photo 14.9.2022
Here are the alphabet that I found inside the image
fg. 2.12 identifying the alphabet 14.9.2022
I extract the shape by using image trace tool and separate it out by using knife tool
fg. 2.13 tracing image 14.9.2022
Here are my 1st extraction.
fg. 2.14 extracting the alphabet 14.9.2022
fg. 2.15 process of work 14.9.2022
Following feedback, I discovered that my font lacked consistency and lacked a reference font. I decide to design one character for my typeface and use it in several others.
fg. 2.16 process of work 21.9.2022
First combine all the shape by using shape builder tool
fg. 2.17 process of work 21.9.2022
Then simplify it,
fg. 2.18 process of work 21.9.2022
Then, duplicate it for the other alphabets.
fg. 2.19 process of work 21.9.2022
Cut out the extra shape by using knife tool.
fg. 2.20 process of work 21.9.2022
My finalising progress,
fg. 2.21 process of work 21.9.2022
| Final version in JPG
Individual letter In PDF
My final outcome
_
TASK 1 / EXERCISE 2 : TYPE & PLAY: PART 2 : TYPE & IMAGE
For this task, we're going to participate a Honor Talent design competition and have to design a wallpaper with the themes given, which is 'Cultural Prosperity' and 'Renewal of Life'. The word I have choose must be woven into a symbiotic relationship with the images.
I decided to create 1 for cultural and 1 for renewal. I combine the word that I have choose to a picture that I have took.
fg. 2.22 selected image 28.9.2022
The picture that I took is from a museum that showcasing peranakan culture, which is the Peranakan Mansion at Penang Church Street.
fg. 2.23 selected image 28.9.2022
This picture that I took is a sunset, which also a symbols of peace, harmony, and the promise of renewal.
My 1st outcome,
fg. 2.24 1st outcome 28.9.2022
My 2nd outcome,
fg. 2.25 2nd outcome 28.9.2022
After received feedback, I decided to do landscape (6000 x 3000px), here is my second outcome.
fg. 2.26 lanscape 1st outcome 28.9.2022
fg. 2.27 lanscape 2nd outcome 28.9.2022
I decided to choose the second one as my final version. Then, uploading my work.
fg. 2.28 submission 4.10.2022
| Final Outcome
Foldable wallpaper
Personalized Cards
Wallpaper
Wallpaper design in PDF
_
FEEDBACK
WEEK 2 / Task 1: Exercise 1
| General feedback : didn't get any feedback, because I missed week 1 class
WEEK 3 / Task 1: Exercise 2
| General feedback: better to have a reference font before begin all the parts.
| Specific feedback: it seems to be in the right direction, but the extraction is not accurate.
WEEK 4 / Task 1: Exercise 2
| General feedback: good job
| Specific feedback: good job
WEEK 5 / Task 1: Exercise 2
| General feedback: is an interesting picture
| Specific feedback: the word is very hard to see and can try to uterlize the element that inside the picture, maybe like finding the shape that look like C ..
REFLECTION
| Experiences
The 1st task, which is the typography system, I spend a lot of time working on it. Maybe it's because I'm not used to it. When creating the font is a little bit similar with the typography final task, Its quite fun to find type from a picture
| Observation
When designing the typographic system, Every system has its own set of rules and layout, and each alignment is immensely satisfying. I discovered that keeping information organized has a significant effect on the final design.
| Findings
I think that the task, which is exercise 2, Part 2 assignment, is quite hard when brainstorming the idea, it required me to be artistic. However, I am not satisfied with my work. I still have a lot of space to improve my art sense.
FURTHER STUDY
 |
| Type Team by Tony Seddon |
I learned about how many fonts (or typefaces) we truly need in a single design from the chapter "How many fonts (or typefaces)?" According to the book, in most circumstances, the answer is probably no more than two or three. This is because if several distinct typefaces are utilised in a design, it may appear complicated and cluttered.
Comments
Post a Comment