Advance Typography | Task 1- Typographic Systems & Type & Play

Advance Typography | Task 1 - Typographic Systems & Type & Play

29.8.2022 - 2.12.2022 (Week 1 - Week 14)

Er Xin Ru (Melanie) | 0354939 
Bachelor Of Design (Hons) In Creative Media | Taylor's University
Subject: Typographic Systems & Type & Play


LECTURES
1. Week 1 Introduction to the module 31.8.2022

Week 1 lecture was mainly an explanation of details that what we will learn in the module. Firstly, I was informed to join the Advance Typography Facebook group & to show us where the important announcement and useful learning materials are.

All the information, contents and submission is all well-organized.  For practical, Mr. Vinod told us to set up a blog called "e-Portfolio". This blog will be used to accumulate the learning process of all modules, and it will be utilized to submit assignments including image data of my work, drawings, photos, designs, etc. 

Referring same to Semester 1, to clearly state the entire process of the assignment, not only the final outcome. All work must be output in JPEG (300dpi) and PDF format and posted. Everything were state in the Module Information Booklet for us to read.

1. Advanced Typography: Typographic Systems 31.8.2022

“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

“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)

While some may feel this imposition takes away intuition from a teaching point of view it provides a solid framework that allows learners to be guided in their exploration while their intuition develops and matures.

Axial System: all elements are organised to the left or right of a single axis.

Fig 1 - Axial System 31.8.2022

Radial System: All elements are extended from a point of focus.

  

Fig 2 - Radial System 31.8.2022

Dilatational System: All elements expand from a central point in a circular fashion




Fig 3 - Dilatational System 31.8.2022

Random System: Elements appear to have no specific pattern or relationship.

Fig 4 - Random System 31.8.2022

Grid System: A system of vertical and horizontal divisions


Fig 5 - Grid System 31.8.2022

Transitional System: An informal system of layered banding.

Fig 6 - Transitional System 31.8.2022

Modular System: A series of non-objective elements that are constructed in as a standardised units.

Fig 7 - Modular System 31.8.2022

Bilateral System: All text is arranged symmetrically on a single axis

Fig 8 - Bilateral System 31.8.2022


Conclusion
Student designers may initially find the system awkward but as work develops and understanding of the systems emerges whereby its creative potential (in terms of its permutations or combined uses) is realised.

Many designers focus primarily on the grid system for design and are unaware of the the potential that other systems hold. This here system is one of many possibilities that affords some level of distinctiveness from the grid systems in certain situations.

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.

2. Week 2 Principles of Design Composition 7.9.2022

Principles of Design Composition
When we think about composition, we think about the dominant principles underpinning design composition, which are emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective to name a few.

However 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 ideas mentioned above and the application of these ideas into real-life content (images, textual information and colour) on a page or screen can sometimes feel disparate. That said, Some of these principles are a little more easily translatable than the others.

Advanced Typography: Typographic Composition

Fig 9 - Principle Design Composition 7.9.2022

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 intersecting lines are are used as guide to place the points of interest, within the given space.

Fig 10 - Rule of Thirds 7.9.2022



The Rule of Thirds
Realistically no one would ever use the rule of thirds when there are other more favorable options.

Fig 11 - Rule of Thirds 7.9.2022

Anyone of he intersecting points become the focal point of the layout

Typographic Systems
These 8 systems we have covered in depth in theory and practical. From the 8 systems the most pragmatic and the most used system is the Grid System (or Raster Systeme), which is derived from the grided compositional structure of Letter Press printing.

It was further enhanced by what is now come to be termed as the Swiss (Modernist) style of Typography, with its foremost proponents being Josef Muller Brockmann, Jan Tschichold, Max Bill and such.

Fig 12 - Typographic Systems 7.9.2022

While the Grid System may seem to be old or rigid, the versatility of the system and its (to some degree) modular nature tends to allow an infinite number of adaptations. This is why it continues to remain popular

Typographic Systems
In reaction to this very ordered approach to Typography of the modernist era, a group of younger designers began to question and challenge this notion of order. Thus was born the post-modernist era in Typographical systems where chaos, randomness and asymmetry were explored. Legibility and readability were relegated to the back seat however the bests examples seem to combine the two seamlessly. Its proponents include: David Carson, Paula Scher, Jonathan Barnbrook, to name a few.

There was a method to their madness. Order was replaced with apparent chaos but this chaos was exciting and ‘new’ for a generation that was 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 designer.

Fig 13 - Typographic Systems 7.9.2022

Left to right: Paula Scher, Jonathan Barnbrook and David Carson

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.

It is an interesting manner of exploration and provides context to the forms developed in the designs—context why? Due to the fact that the system/structures were developed around key features of an environment associated to the communicators of the message. 

Fig 14 - Environmental Grid 7.9.2022

An example from lecturer Brenda McMannus, of Pratt Inst. from the book: Typographic Form and Communication, pp211.

Form and Movement
This system is based on the exploration of an existing Grid Systems. I 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.

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 is irrelevant. 

Fig 15 - Form and Movement 7.9.2022

Static versions of the form placed on spread (Grids were hidden). Care was taken to ensure visual connections and surprises on every page. The forms could represent images, text or colour. Right: animated version, the spreads of a book mimic the frame by frame nature of moving screen.

There 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.

3. Week 3 Principles of Design Composition 14.9.2022

Context & Creativity

Handwriting
Why is handwriting important in the study of type/typography?

We study handwriting because the first mechanically produced letterforms were designed to directly imitate handwriting. Handwriting would become the basis or standard for form, spacing and conventions mechanical type would try and mimic.

The shape and line of hand drawn letterforms are influenced by the tools and materials used to make them. Sharpened bones, charcoal sticks, plant stems, brushes, feather and steel pens all contributed to the unique characteristics of the letterform.

Additional factors included the material upon which the forms were written: clay, papyrus, palm leaf, animal skins (vellum and parchment) and paper.

Fig 16 - Evolution of Latin alphabet 14.9.2022

Cuneiform c. 3000 B.C.E.

Fig 16 - Cuneiform 14.9.2022

Cuneiform, the earliest system of actual writing, was used in a number of languages between the 34C. B.C.E. through 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. The cuneiform characters evolved from pictograms. Cuneiform was written from left to right, 

Hieroglyphics 2613–2160 B.C.E.
Fig 17 - Hieroglyphics 14.9.2022
Hieroglyphics 2613–2160 B.C.E.

The Egyptian writing system is fused with the art of relief carving. The system was a mixture of both rebus and phonetic characters—the first link to a future alphabetic system. Hieroglyphic images have the potential to be used in three different ways:

1. As ideograms, to represent the things they actually depict.
2. As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.
3. As phonograms to represent sounds that "spell out" individual words.

Early Greek / 5th C. B.C.E.
Fig 18 - Early Greek 14.9.2022


Early Greek / 5th C. B.C.E.
Built on the Egyptian logo-consonantal system, the Phoenicians developed a phonetic alphabet consisting
of 22 letters.

The Phoenicians system then was adopted by the Greeks who added the necessary vowels. Early Greek was comprised of only capital letters, written between two guidelines to organize them into horizontal rows..

The words may have been in rows but the direction of reading was not yet fixed. 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.

These early Greek letters were drawn freehand, not constructed with compasses and rule, and they had no serifs —neither the informal entry and exit strikes left by a relaxed and fluent writer, nor the symmetrical finish stroke typically added to letters by formal scribes.

In time the strokes of these letter grew thicker, the aperture lessened, and serifs appeared. The new forms, used for inscriptions throughout the Greek empire, served as models for formal lettering in imperial Rome.

Roman Uncials
Fig 19 - Roman Uncials 14.9.2022

Roman Uncials
By the 4th century Roman letters were becoming more rounded, the curved form alRoman Uncials

By the 4th century Roman letters were becoming more rounded, the curved form allowed for less strokes and could be written faster lowed for less strokes and could be written faster

And those Roman inscriptional letters—written with a flat brush, held at an angle like a broad nib pen, then carved into the stone with mallet and chisel—have served in their turn as models for calligraphers and type designers for the past two thousand years."

English Half Uncials, 8th C.
Fig 20 - English Half Uncials 14.9.2022

English Half Uncials, 8th C.

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. Luckily it came in the Carolingian Handwriting Reform.

Emperor Charlemagne 
Fig 21 - Emperor Charlemagne 14.9.2022

Emperor Charlemagne 8 C. CE

After the fall of the Roman Empire, the end of a central advanced culture resulted in general illiteracy and a 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
Fig 22 - Carolingian Minuscule 14.9.2022

Carolingian Minuscule
A court school was established under the direction of Alcuin of York. During Charlemagne's patronage book production increased and language was standardized —pronunciation and spelling as well as writing conventions— capitals at the start of a sentence, spaces between words and punctuation. A new script emerged, the Carolingian minuscule.

The Carolingian minuscule, was used for all legal and literary works to unify communication between the various regions of the expanding European empire.

The Carolingian minuscule was as important a development as the standard Roman capital—for it was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type.The Carolingian minuscule was as important a development as the standard Roman capital—for it was this style that became the pattern for the Humanistic writing of the fifteenth century; this latter, in turn was the basis of our lower-case roman type.

Black Letter 
Fig 23 - Black Letter 14.9.2022
Black Letter 12-15 C. CE

What is Gothic? Gothic was the culminating artistic expression of the middle ages, occurring roughly from 1200—1500. The term Gothic originated with the Italians who used it to refer to rude or barbaric cultures north of the Italian Alps.

The Gothic spirit took hold in France, Germany and England where it was manifested through unhindered upward striving:

The vertical supplanted 

Fig 24 - The vertical supplanted 14.9.2022

The vertical supplanted 
horizontals as the dominant line in architecture; the pointed arch replaced the round arch of the Romans; the almond shape, or mandorla, was preferred. Gothic writing forms reflected this aesthetic. Blackletter is characterized by tight spacing and condensed lettering. Evenly spaced verticals dominated the letterform.

Condensing line spacing and letter spacing reduced the amount of costly materials in book production.

The Italian Renaissance 
Fig 25 - The Italian Renaissance 14.9.2022

The Italian Renaissance

As the Gothic spirit reached its apex in the other areas of western Europe, Humanistscholars 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.

The Humanist admired the Carolingian script , which had clear open handwriting.

Letterforms Antica

Fig 26 - Letterforms Antica 14.9.2022

Humanist named the newly rediscovered letterforms Antica. The renaissance analysis of form that was being applied to art and architecture was directed toward letterform — resulting in a more perfect or rationalized letter.

Movable Type
Fig 27 - Movable Type 14.9.2022

Movable Type 11 C.—14 C.

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 in part to the number of characters and the material used (clay).

Fig 28 - Movable Type 14.9.2022

In late 14 C. several decades before the earliest printing in Europe, the Koreans establish a foundry to cast movable type in bronze—allowed the dismantling and resetting of text.

With the creation of their new script Han’gul, the Koreans would succeed where the Chinese failed.

To conclude, the introduction of moveable type was introduced in the 1000-1100 CE. This innovation was pioneered in China but achieved in Korea (Diamond Sutra). In the late 1300-1399 CE, several decades before the earliest printing in Europe (Guttenberg’s bible 1439), the Koreans establish a foundry to cast movable type in bronze.

Why do we talk about Greek influence on Rome, but not Egyptian or Near Eastern influence on Greece?

Because in the 19th century and the rise of the modern British Empire, it became out of style to credit Africa or Africans with anything of value, and therefore Greece and Rome were elevated over much older, much more influential civilizations, specifically Ancient Egypt, but also less extensive or old civilizations like Mesopotamia, the Indus Valley, China, etc.

An example of this insidiousness is how the European academic process worked to create the discipline of “Indology”. Max Mueller who was central to this, never actually visited India. By viewing historical evidence through colonial lenses they ignorantly postulated ideas that were self serving, i.e. Aryan theory.

And the same is true for: Classicism, Egyptology, Africanism, Indology and Orientalism.

Handwriting
What is important to note is that later day typographers, through research, curiosity and a respect for history would pay homage to these developments. This would result in books being written and published, recreation of the hand written styles into mechanical forms for printing.

With the digital revolution, the west would begin to digitize many of its historical creations and type foundries would create, market and sell or license them. The recognition of the importance of these historical letterforms is something to be admired and learned from.

With the colonization of the east by the west, much of the heritage and cultural practices in literature, arts and crafts, languages and scripts would be halted or stunted.

So let us look into eastern developments in handwriting briefly.

Evolution of Middle Eastern Alphabets:

Fig 30 - Evolution of Middle Eastern Alphabets 14.9.2022

Evolution of Middle Eastern Alphabets: It is also important to note that while the Phoenician letter marks a turning point in written language—use of sound represented in letters—the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts.

The Evolution of the Chinese script

Fig 30 - The Evolution of the Chinese script 14.9.2022

The Evolution of the Chinese script: From the Oracle bone to Seal Script to Clerical Script, Traditional and Simplified scripts.


Fig 31 - Phoenicia 14.9.2022

In case you are wondering where is Phoenicia (present day Syria, Lebanon and Israel. 

Indus Valley Civilization (IVC) script 

Fig 32 - Indus Valley Civilization (IVC) script 14.9.2022 

The oldest writing found in the ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE), is as yet undeciphered and seems to have been somewhat logo-syllabic in nature. “Some believe that these symbols are non-linguistic, while others argue that they represent a Dravidian language.” https://www.omniglot.com/writing/indus.htm

The Brahmi script 


Fig 33 - IThe Brahmi script 14.9.2022 

The Brahmi script (450–350 BCE) is the earliest writing system developed in India after the Indus script. It is one of the most influential writing systems; all modern Indian scripts and several hundred scripts found in Southeast and East Asia are derived from Brahmi.

The origin of the script is still much debated, with most scholars stating that Brahmi was derived from or at least influenced by one or more contemporary Semitic scripts, while others favor the idea of an indigenous origin or connection to the much older and as-yet undeciphered Indus script of the Indus Valley Civilization.

Handwriting
The oldest writing systems present in Southeast Asia were Indian scripts. There were a few, but the most important would be Pallava(or Pallawa in Malay), a South Indian script originally used for writing Sanskrit and Tamil.

Pallava was highly influential, becoming the basis for writing systems across Southeast Asia.

But Pallava wasn't the only Indian script in use in the Malay Archipelago. Another was Pra-nagari, an early form of the Nagariscript, used in India for writing Sanskrit.

But wait…

Kedukan Bukit inscription from Sumatra

Fig 34 - The Brahmi script 14.9.2022 

This is the Kedukan Bukit inscription from Sumatra, written in Old Malay using the Pallava script.

Pra-nagari
Fig 35 - Pra-nagari 14.9.2022 

Pra-nagari, an early form of the Nagari script, used in India for writing Sanskrit. It can be seen today in the Blanjong inscription of Bali


Fig 37 - Laguna Copperplate Inscription 14.9.2022 

Laguna Copperplate Inscription. Written in Kawi, “the bearer of a debt, Namwaran, along with his children Lady Angkatan and Bukah, are cleared of a debt by the ruler of Tondo.” The Sanskrit terms seen in the document, the culture and society of Manila Bay was that of a Hindu–Old Malay amalgamation, similar to the cultures of Java, Peninsular Malaysia and Sumatra at the time.

Handwriting
Does this mean Nusantara never had writing systems of its own? Were they all just borrowed from India? 

This is where we get to what is perhaps Indonesia's most important historical script: Kawi. Based on Nagari, but indigenous to Java.

The word Kawi comes from the Sanskrit term kavya meaning poet. The interesting thing about Kawi is that it was the script used for contact with other kingdoms. Because it was so widespread, Kawi became the basis of other scripts in both Indonesia and the Philippines.

This means that ancient kingdoms in of the Malay Peninsula would have been using both Indian scripts and Kawi to write old Malay language.

Rencong
Fig 38 - Rencong 14.9.2022 

Incung comes from a South Sumatran grouping of scripts known as Rencong.

Indonesia has a great number of historical writing systems. We will look into the scripts of the communities that assimilated into Peninsula Malay communities.

Scholars have theorised the existence of an ancient Gujerati-derived Proto-Sumatran writing system which was the basis of medieval scripts on the island. 

Now for some later examples. This is Incung from Kerinci. If you have family from Kampung Kerinci, this is your “tulisan asal” or original writing system, not Jawi.

Rejang script

Fig 39 - Rejang script 14.9.2022 

A related script to the Rencong grouping is the Rejang script, also from South Sumatra

The Batak script 
Fig 40 - The Batak script 14.9.2022 

The Batak script: This is a page from a Batak handbook on magic and divination

Lontara

Fig 41 -  Lontara 14.9.2022 

the Bugis script called Lontara, deriving from the word lontar, a type of palm used for writing manuscripts in the Malay Archipelago

Surya Ngalam

Fig 42 -  Surya Ngalam 14.9.2022 

The Javanese script is a medieval descendant of Kawi. This is the Surya Ngalam, a legal treatise.

Fig 43 -  Surya Ngalam 14.9.2022 

Record of sale for a female Batak slave to a British, can give more insight into our history. 

Jawi, the Arabic-based alphabet. We all know Jawi was introduced along with Islam. But how this happened is more interesting than "we converted and adopted the Arabic alphabet”.

Ancient Hindu societies in both South and Southeast Asia were classist and often caste-based. The lower classes were generally illiterate. Obviously Islam didn't change this completely, but it did encourage teaching for the sake of proselytization

When those traders engaged in missionary work, they would have taught Jawi to people that might otherwise not have learned to read and write. This allowed it to spread among the upper and middle-class in the trading ports. However it took a while for Jawi to supplant other scripts, and in some areas never did so completely.

Demak 

Fig 44 -  Demak 14.9.2022 

Demak was a Muslim Javanese kingdom, yet here's a manuscript from the 19th century which still uses the traditional Javanese writing system


In modern Malaysia, Jawi is of greater importance because it's the script used for all our famous works of literature. Every hikayat and Malay charm book is written in Jawi. Unlike Indonesia, we don't have a huge wealth of pre-Jawi inscriptions and writings—this part of the reason why some tend to ignorantly claim that Jawi is "tulisan asal Melayu", which is of course untrue. 

ms

Fig 45 -  Baloo 14.9.2022

(Right) Baloo: A perfect blend of pointy paws in a coat of fur, Baloo is an affable display typeface by Ek Type. A multi-script typeface, it is available in nine Indian scripts along with a Latin counterpart, the family is Unicode compliant and librelicensed.

The Malay archipelago / South East Asia.

All systems of writing have some form of influence. To claim complete originality is inaccurate and some would say ignorant. History gives us context, but it also gives designers opportunity to design, research or help codify to communicate and understand better our collective heritage.

4. Week 4 Designing Type 21.9.2022

So why design another typeface? Xavier Dupré (2007) in the introduction of his typeface Malaga suggested two reasons for designing a typeface:

•type design carries a social responsibility so one must continue to improve its legibility.
•type design is a form of artistic expression.

Let us explore the purpose and limitations behind some  of the following typefaces.

 
Fig 46 -  Frutiger 21.9.2022


Left: UNIVERS by Adobe Illustrator, InDesign (2015). Right: 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.”

Let us look at the typeface Frutiger, his name sake. 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. A more detailed history can be found here.

Purpose: “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. Extremely functional.”

Considerations/Limitations: letterforms neded 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.

Fig 47- Univers  21.9.2022

UNIVERS by Adobe Illustrator, InDesign (2015). This book tells the story of the typeface Univers and its creator, Adrian Frutiger. In particular, this book uses description and diagrams …

UNIVERS by Adobe Illustrator, InDesign (2015). This book tells the story of the typeface Univers and its creator, Adrian Frutiger. In particular, this book uses description and diagrams …

Fig 48 - Adrian Frutiger 21.9.2022

Adrian Frutiger at the National Institute of Design (NID), India 1964. 
Adrian Frutiger received many honors, "at the university in the “holy city of India”, Varanasi, he felt he had received the highest of honors, without medals or certificates. He had designed a new Devanagari font for modern typesetting and printing processes at the request of the Indian Design Institute. His goal was to simplify the sacred characters, without compromising their ancient calligraphic expression. As Frutiger sat waiting on the cool floor of a high vaulted room in the university, surrounded by religious dignitaries in ceremonial regalia, a group of “wise men” contemplated and discussed his first draft for quite some time. Finally they spoke of their judgment: they “approved” his draft of the new Devanagari and saw no “desecration of something that was, for them, sacred”.

Fig 49 - Adrian Frutiger 21.9.2022

Web designers hated him because Georgia (top/right) and Verdana (bottom/left) were among the fewfonts they could use. 

Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. Carter trained as a punchcutter at Enschedé by Paul Rädisch, responsible for Crosfield’s typographic program in the early 1960s, Mergenthaler Linotype’s house designer 1965–1981.

Many of Carter's fonts were created to address specific technical challenges, for example those posed by early computers… Let us look at Verdana (1996) for Microsoft

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.


Fig 50 - Adrian Frutiger 21.9.2022

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.

Fig 51 - AT&T 21.9.2022

In 1976, AT&T commissioned the design of a new 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. 

Fig 52 - “Underground” typeface 21.9.2022

Top: As the ultimate purist, Johnston went right back to the source – all the way back to Trajan’s column, the sharply cut letterforms of which he was deeply enamoured. Johnston, was asked to create a typeface with “bold simplicity” that was truly modern yet rooted in tradition. Johnston’s design, completed in 1916, combined classical Roman proportions with humanist warmth. 

Edward Johnston is the creator of the hugely influential London “Underground” typeface, which would later come to be knows as “Johnston Sans” (1916).

He was asked to create a typeface with “bold simplicity” that was truly modern yet rooted in tradition. 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."

Fig 53 - Johnston Sans 21.9.2022

Top: Digitised version of the Underground typeface later known as Johnston Sans, by Eiichi Kono
Right: Earlier versions reveal a more fussy “w”, formed from two intersecting “v”s, a capital-style “q”.


Fig 54 - Johnston Sans 21.9.2022

Top: His former student was perhaps driven by the guilt of seeing the success of his own typeface, Gill Sans, which he admitted had been heavily based on Johnston’s work.

“I hope you realise that I take every opportunity of proclaiming the fact that what the Monotype people call Gill Sans owes all its goodness to your Underground letter,” Eric Gill

General Process of Type Design:
1.Research
2.Sketching
3.Digitization
4.Testing
5.Deploy
Fig 55 - In traps 21.9.2022

Top: In traps. These were generally used when printing on cheap absorbent paper and when printing is fast and not very precise. Corners generally tend to suffer and as such with ink traps the corners remain visible. Today it is included more as a design flair.

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.

 

Fig 56 - Johnston Sans 21.9.2022
Kono


Top: Sketch of Johnston Sans, designed by Edward Johnston, sketch by Eiichi Kono

General Process of Type Design:

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.

Fig 57 - Johnston Sans 21.9.2022


General Process of Type Design:

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.

Fig 58 - Stencil (Stenz) 21.9.2022

Top: Prototype Stencil (Stenz) developed and designed by Vinod J. Nair. 

General Process of Type Design:

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. 

Fig 59 - Myno & Nomy 21.9.2022

Top: Prototype Number plate typeface (Car license registration) Myno & Nomy designed by Vinod J. Nair 2018. 

General Process of Type Design:

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. 

Fig 60 - Myno & Nomy 21.9.2022


Top: Construction grid for the Roman Capital using 8 x 8 cells.

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 centre of the square. More here and here.

Thus, using grids (with circular forms) can facilitate the construction of a letterforms and is a possible method to build/create/design
your letterform.

Fig 61 - Construction and considerations 21.9.2022

Construction and considerations:

Classification according to form and construction
Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters. 

Fig 62 - capitals and a group for lowercase letters 21.9.2022


Classification according to form and construction

Depending on their form and construction, the 26 characters of the alphabet can be arranged into groups, whereby a distinction is made between a group for the capitals and a group for lowercase letters.



Fig 63 - visual correction 21.9.2022


Construction and considerations:

Many different forms and constructions must be taken into accountwhen designing a new type. 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. 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. This is called ‘fitting’ the type.

Most typefaces come about due to a need or demand. The need/motivation can be intrinsic and extrinsic.

Intrinsic can be best summed up this way, the designer has an inexplicable need driven by interest to design a typeface, and seeks out a form that comes close to fulfilling a desire. It is also possible that the designer identifies a gap/problem and thus endeavors to solve it through the design of the typeface.

Extrinsic can be summed up in this way the designer has been commissioned or the student-designer has a task to complete that involves designing a typeface.

For a design to be successful the designer needs to be invested in the idea and understand the requirement/limitations/use/stakeholder.

Designing a typeface is a labour of love. Only the brave and foolish walk this path for the reward pale in comparison to the work.

4. Week 5 Perception & Organisation 21.9.2022

Advanced Typography: Perception & Organisation

Perception is “the way in which something is regarded, understood, or interpreted”. So, is perception what you see—and therefore understand—or what you are manipulated into seeing and understanding?

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. However our focus today is in typography.

Contrast

Fig 64 - Contrast 21.9.2022

There are several methods in typography to create contrast the one on the left is devised by
Rudi Ruegg. They are self-explanatory.

Fig 65 - Contrast 21.9.2022

Carl Dair on the other hand adds a two more principles into the mix; texture and direction “to make design work and meaning pop out — clearly and unambiguously, and with flair.” via the use of contrast in typography.


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.

Contrast / Size

Fig 66 - Contrast/Size 21.9.2022


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.

Fig 67 - Contrast/Size 21.9.2022

Contrast / Weight
Fig 68 - Contrast/Weight 21.9.2022

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.

Contrast / Form

Fig 68 - Contrast/Form 21.9.2022

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.

Contrast / Structure

Fig 69 - Contrast/Structure 21.9.2022

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.

Contrast / Texture
Fig 70 - Contrast / Texture21.9.2022

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. 

Fig 71 - Contrast / Texture 21.9.2022

Contrast / Direction

Fig 72 - Contrast / Direction 21.9.2022

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.

Contrast / Colour
Fig 73 - Contrast / Colour21.9.2022

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.

Form

Fig 74 - Form 21.9.2022

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. 

Fig 75 - Form 21.9.2022

Fig 76 - Form 21.9.2022

Fig 77 - Form 21.9.2022

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:
1.to represent a concept
2.to do so in a visual form.

Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

Form
Fig 78 - Form 21.9.2022

Fig 79 - Form 21.9.2022

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:
1.to represent a concept
2.to do so in a visual form.

Displaying type as a form provides a sense of letterforms’ unique characteristics and abstract presentation.

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 

Organisation / Gestalt: Perceptual Organisation / Groupings

1.Law of Similarity
2.Law of Proximity
3.Law of Closure
4.Law of Continuation
5.Law of Symetry
6.Law of Simplicity (Praganz)

s a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.

Fig 80 - Law 21.9.2022

Organisation / Gestalt: Perceptual Organisation / Groupings

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.

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.

Fig 80 - Law of Similarity and Proximity 21.9.2022

Organisation / Gestalt: Perceptual Organisation / Groupings

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

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.

Fig 81 - Law of Closure and Continuation 21.9.2022

Organisation / Gestalt: Perceptual Organisation / Groupings

The Law of Symmetry
Law of Praganz.

You can find out more about these laws by viewing the links provided or simply Googling them. However keep in mind that you will find variation in the interpretation and you will have to weigh them all to come to a consensus.of your own.

The idea in the end, is to ensure awareness and inform your work process. Organisation of information in the form of laying out complex content in a hierarchical manner requires practice and the knowledge gained herein but also elsewhere. Knowledge obtained from reading, listening and viewing must be exercised or put to usefor it to be retained and of standard.

 
Fig 82 - The Law of Symmetry and Law of Praganz 21.9.2022

The organization of information
and how it is perceived should be considered by designers as a social responsibility — crucial for effective communication, transfer
of knowledge and for under-standing to occur.
— Vinod J. Nair

- END OF LECTURE-

INSTRUCTIONS


Week 1 : Typographic Systems

Here are the instructions given for Week 1 - We need to Prepare the text from the given content. Choose one of three titles. I choose "All Ripped Up: Punk Influences on Design".

We need to use the words given:

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
Lecture Theatre 12

Fig 1: Words provided and paste it into ID 3/9/2022


Fig 2: The Design was finished in ID 3/9/2022

Fig 3: Typographic System 3/9/2022


JPEG
Fig 4: Axial system 3/9/2022
Fig 5: Dilatational system 3/9/2022

Fig 6: Radial system 3/9/2022

Fig 7: Transitional system 3/9/2022

Fig 8: Random system 3/9/2022

Fig 9: Grid system 3/9/2022

Fig 10: Modular system 3/9/2022

Fig 11: Bilateral system 3/9/2022


Part 1 | Type & PlayTypographic Systems

PDF

 
Final Outcome 4/9/2022

 
Final Outcome PDF 4/9/2022

Final Outcome PDF with Grid and line 4/9/2022

Part 2 | Type & PlayTypographic Systems JPEG & PDF

Week 2 : Type & Play (Part 1) : Finding Type

The picture finding in the design Exercise
Make a selection of images between man-made objects (chair, glass, etc.) or structures (buildings), and nature (Human, landscape, leaf, plant, bush, clouds, hill, river, etc.).

Process of Work
Selection of images
I selected the following photos as I think it is an interesting photos as there are a model (Human) and the Fashion Clothes which is (Man-made) by the Fashion Designers.

Fig 1 - Human + Man-made Fashion Clothes 21.9.2022

After that, I edited the photo with contrast and saturation to see more clearer of the details. You can see it become more clearer compare to the first photo. Then I draw the Alphabet as much as I can.

Fig 2 - Draw out the Alphabet 21.9.2022

Then I finalise the Alphabets which I think it it more interesting to Play for typo, I choose F,U,M,Y,B.

Fig 3 - Final Alphabet choosen 21.9.2022

After tracing out the Alphabet from the picture, I feel that the typo is nice and look special but I wanted to make it more spiffily at the end but still maintain the feeling that are originally trace out. Then next I choose the fonts given which is UNIVERS LTD STD


Fig 4 - Trace from photo, First attempt, Second attempt 21.9.2022

Fig 5 - Trace from photo, First attempt, Second attempt 
with line 21.9.2022


Fig 7 - Trace from photo, First attempt, Second attempt 
without line 21.9.2022

Fig 8 - Trace from photo, First attempt, Second attempt 
with line 21.9.2022


Fig 9 - Trace from photo, First attempt, Second attempt 
with line 21.9.2022



Fig 10 - Trace from photo, Second attempt, Final attempt 
without line 21.9.2022

Fig 11 - Trace from photo, Second attempt, Final attempt 
with line 21.9.2022


Final Outcome 

Final Type & Play Final ver. JPEG 

Fig 12 - Final Type & Play Final ver. JPEG in Grey 21.9.2022

Fig 13- Final Type & Play Final ver. JPEG in Black 21.9.2022

Fig 14 - Final Type & Play Final "F" JPEG 21.9.2022

Fig 15 - Final Type & Play Final "U" JPEG 21.9.2022

Fig 16 - Final Type & Play Final "M" JPEG 21.9.2022

Fig 17 - Final Type & Play Final "Y" JPEG 21.9.2022

Fig 18 - Final Type & Play Final "B" JPEG 21.9.2022


Final Type & Play Final ver. PDF

 
Fig 19 - Final Type & Play Final ver. PDF 21.9.2022

 
Fig 20 - Final Type & Play Final "F" PDF 21.9.2022

 
Fig 21 - Final Type & Play Final "U" PDF 21.9.2022

 
Fig 22 - Final Type & Play Final "M" PDF 21.9.2022

Fig 23 - Final Type & Play Final "Y" PDF 21.9.2022 

Fig 24 - Final Type & Play Final "B" PDF 21.9.2022 


Week 3 Type & Play Part 2: Type & Image 

This exercise is combine a visual(picture) with a letter/word with the font we create from last exercise. 

Process of Work
Image + Typography

Fig 25 - Final Type & Image Final JPEG 28.9.2022

Fig 25 - Final Type & Image Final JPEG 28.9.2022 

Fig 26 - Final Type & Image Final JPEG 28.9.2022
Fig 27 - Final Type & Image Final PDF 28.9.2022

Fig 27 - Final Type & Image Final PDF 28.9.2022

 
Fig 28 - Final Type & Image Final PDF 28.9.2022

Week 4 : Type & Play (Part 2) : Honor Wallpaper 

We were instructed to take part in a competition of 'Honor' Competition and it is part of the exercises. I choose to design Wallpaper and the words we need to use is 'Cultural Prosperity' and 'Renewal of Life'.

Progress
I decided to create my own design using Adobe Illustrator using words "Prosperity".

I choose 'Prosperity' is that I actually love Chinese culture a lot which I choose elements like the magpie birds (The magpie culture is one of the important symbols of Chinese culture. Legend has it that the magpie culture originated in the Spring and Autumn Period in my country. In China, the magpie is an auspicious bird, symbolizing joy, good luck, happiness and good luck.

The ancient and modern painters also love magpies, and they even write them on the pictures to give beautiful meanings, such as happy events, more happiness, and double happiness.), mountain, pavilion, bridge and etc.

Size : 6000px x 3000px - Landscape mode 


Fig 29 - First Attempt 21.9.2022

Fig 30 - Second Attempt 28.9.2022

Fig 31 - Final Attempt 5.10.2022

After Final Attempt, I submitted in for Honor Competition.

Fig 32 - Submission Process 1 6.10.2022

Fig 33 - Submission Process 2 6.10.2022

Fig 34 -Submission Process 3 6.10.2022

Final Submission

Fig 35 - Final Honor Wallpaper ver. JPEG 6.10.2022


 
Fig 36 - Final Honor Wallpaper ver. PDF 6.10.2022

- END OF TASK-


FEEDBACK

Week 2:
General feedback: 
As I'm still not familiar with the brief, I've made a mistake with the design. I’ve missed the feedback session from Mr.Vinod and do a new one again

Specific feedback: 
Through listening to the feedback session from Mr.Vinod commenting on others' works, I've learned from it and applied and changed my mistake to my assignment.

Week 3:
General feedback: 
Feedback given that I need to attach it with a better picture as instructed in the brief and the fonts can be more better.

Specific feedback: 
The font can be more simplified and there are more steps to finalize my font.

Week 4:
General feedback: 
As the previously one is not good, i redo it again and ask feedback at Messenger
Specific feedback: 
Thumb Up emoji

Week 5:
General feedback: I have did some of the design using picture, but I don't think it is nice and still consider about it.
Specific feedback: I decided to design my Honor wallpaper in digitalize as inspiration of photos I've taken.

Week 6:
General feedback: The wallpaper is doing okay as the word can be more clearer. The letter words are not specific enough which I need to redo again.
Specific feedback: I’m going to redo agian after listening Mr.Vinod feedback

Week 7:
General feedback: The design and font is interesting.
Specific feedback: It is not specific enough as when first sight seeing doesnt know that it is my name of “Mexr”

REFLECTIONS
Experience
I felt Adobe Illustrator provided more design flexibility than InDesign. I spent a lot of time thinking about typographic systems, so perhaps I'm just not used to Adobe InDesign it. But I try my best to try it out with Indesign creating the typographic system.

Observation
I discovered the importance of managing details and how this significantly affected the quality of the finished task.

Findings
This assignment taught me more technical layout techniques than the Sem1 module, and I am confident that I will be able to apply them in my future designs. I believe that the Type & Play Part 2 assignment, will help me improve a lot on my skills and creativity.  However, I am not satisfied enough with my job and I will continue to complete the task with my efforts to it even it is challenging.

FURTHER READING
Week 2: 
Typography of System Design
Author: Kimberly Elam

Fig 1 Book Cover - Typography of System Design (31/8/2022)

Typographic organization has always been a complex system in that there are so many elements at play, such as hierarchy, order of reading, legibility, and contrast. In Typographic Systems, Kim Elam, author of our bestselling books, Geometry of Design and Grid Systems, explores eight major structural frameworks beyond the gridincluding random, radial, modular, and bilateralsystems. By taking the reader through exercises, student work, and professional examples, Elam offers a broad range of design solutions.
Once essential visual organization systems are understood the designer can fluidly organize words or images within a structure, combination of structures, or a variation of a structure. With clarity and substance, each systemfrom the structured axis to the nonhierarchical radial arrayis explained and explored so that the reader comes away with a better understanding of these intricate complex arrangements. Typographic Systems is the seventh title in our bestselling Design Briefs series, which has sold more than 100,000 copies worldwide.

Week 3: 
The Art of Type and Typography
Author: Mary Jo Krysinski

Fig 2 Book Cover - The art of Type & Typography (7/8/2022)

The Art of Type and Typography is an introduction to the art and rules of typography. Incorporating the industry standard ― InDesign ― for typesetting from the outset, this book serves as a guide for beginning students to learn to set type properly through tutorials, activities, and examples of student work.

Week 4: 
Typography Essentials
Author: Ina Saltz

Fig 3 Book Cover - Typography Essentials (14/8/2022)

Typography Essentials: 100 Design Principles for Working with TypeTypography Essentials: 100 Design Principles for Working with Type is a practical, hands-on resource that distills and organizes the many complex issues surrounding the effective use of typography. An essential reference for designers since 2009, Typography Essentials is now completely refreshed with updated text, new graphics and photos, and a whole new look.

Week 5: 
Advanced Typography: From Knowledge to Mastery
Author: Richard Hunt

Fig 1.3 Book Cover - Advanced typography (21/8/2022)

Advanced Typography: From Knowledge to Mastery
In Advanced Typography, expert practitioner and instructor Richard Hunt goes beyond the basics to take your understanding and usage to the next level. Taking a practical approach, the book combines visual, linguistic, historical, and psychological systems with a broad range of applications and audience of type today. From the challenges of designing across media and cultures, to typing as information and craft, Hunt marries theoretical context with applied examples so you feel confident in improving your skills as an advanced typographer.



Comments