Advanced Typography: Task #1—Exercises

29.03.2021 - 30.04.2021 (Week #1 - Week #5)

Seerat Tayyab Mukhtar Qureshi - 0345576 (BDCM)

Advanced Typography 

Task #1: Exercises



1. Lectures:

This week Mr Vinod introduced us to the new module and he gave us an overview of what we can expect and what he expects from us. Mr Asrizal also introduced us to him and how he will be assisting us throughout. We learned about the 8 typographic systems (axial, radial, dilatational, grid, modular, transitional, random and bilateral) that will help guide us in the future. We also revised some inDesign techniques to refresh our memories. Then we were assigned our first task.

Notes:

TYPOGRAPHIC SYSTEMS

Mr Vinod explained that these systems can "hold your hand" and guide you on how to create compositions. There are 8 major variations of the structural systems. Organisation in typography is important because the elements are dependent on communication to function. These systems can help direct decision making. The 8 systems are as followed:

1. Axial systems: All elements organised to the left or right of a single axis.

Screenshot from lecture video

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

Screenshot from lecture video

3. Dilational systems: All elements expand from a central point in a circular fashion

Screenshot from video

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

Screenshot from video

5. Grid systems: A system of vertical and horizontal divisions

Screenshot from video

6. Transitional systems: An informal system of layered banding

Screenshot from video

7. Modular systems: A series of non-objective elements that are constructed in standardised units

Screenshot from video

8. Bilateral systems: All text is arranged symmetrically on a single axis

Screenshot from video

Mr. Vinod introduced us to our next exercise which is the Type & Play one. We have to take a picture, extract 5 letterforms from the picture, and then refine it until we get a final and professional-looking outcome. He then showed us some examples of previous students works to give us an idea of how to proceed.  

TYPOGRAPHIC COMPOSITION 

There are dominant principles that underpin design composition which is emphasis, isolation, repetition, symmetry and asymmetry, alignment, perspective etc. However, these are abstract notions and they seem ambiguous in the context of typographic layouts or composition.

The Rule of Thirds and Typographic Systems are ways of creating compositions.

Rule of thirds

In the postmodernist era, younger designers began to question the notion of order. Chaos, randomness and asymmetry were explored in typographic systems and legibility and readability were given a lower priority. However, there was a method to their madness. This chaos was new and exciting to the generation being exposed to anti-establishment and punk influences.

Punk typography 

Other models include an environmental grid. This system is based on the exploration of an existing structure or numerous structures combined. The designer extracts information from this structure, which includes non-objective elements to create a unique mixture of texture and visual stimuli. 

The next system is form and movement. This system was created to dispel the seriousness surrounding the grid system and to see the turning of pages in a book as a slowed down animation in the form of text, image and colour. The placement of form on a page, over many pages creates movement.

Demonstration by Mr Vinod on form and movement

CONTEXT & CREATIVITY 

We will be looking at the historical context of some topics. To start off we will be looking at handwriting. Handwriting is important because the first mechanically produced letterforms were based directly on handwriting. 
Evolution of letters from pictographs to phonetic letterforms

Cuneiform was the first form of writing made by pressing reed into a clay tablet. They were also pictographs similar to hieroglyphics.

Cuneiform 

The Phoenicians in the 5th B.C.E developed a phonetic consisting of 22 letters. This was adopted by the Greeks who added the necessary vowels. The direction of reading for the greeks was in an "ox ploughs" which was from left to right, then right to left. These letters were drawn freehand with no compasses and no serifs. 

Roman letters were becoming more rounded in the 4th century which made them easier to write faster, whilst in England, they evolved to a more slanted form. 

Type evolved to movable type in 11 C. — 14 C. and the Koreans established a foundry to cast movable type in bronze. They succeeded where the Chinese failed because of the number of characters. This was several decades before the earliest printing in Europe

The Egyptians were never given enough credit for their contributions because of the rise of the British empire. They viewed historical evidence through a colonial lens and postulated self-serving ideas. It is important to learn this so typographers can pay homage to these developments. 

It's important to note that while the Phoenician letter marks a turning point in written language, the use of sounds represented in letters, the script itself has been possibly influenced by the Egyptian Hieroglyphics and Hieratic Scripts. 

The older writing found in the Indian subcontinent was the Indus Valley Script. These civilisations were much more advanced than Western civilisations in terms of writing, sanitation etc.

Indus Valley script 

We have always looked at handwriting from a Western perspective and it's important to understand how other regions influenced writing because of cross-culture influence. It's important to record our culture and make sure these scripts don't disappear because young designers don't use them.

— Lectures continued in next post (Project #1) —

2. Instructions:

Module Information Booklet



3. Exercises:

Task #1: Typographic systems

I watched the YouTube video by Mr. Vinod on each of the systems and then looked at some inspiration online. I looked at Typographic Systems by Kimberly Elam which was an interesting read and helped guide my designs. We were given the text in the MIB that we had to format.

Fig 1: Working on InDesign



1. Axial systems:

Fig 1.0: 2 axial systems
2. Radial systems:

Fig 1.1: 2 radial systems
3. Dilatational systems: 

Fig 1.2: 2 dilatational systems
4. Random systems:

Fig 1.3: 2 random systems

5. Grid systems:
Fig 1.4: 2 grid systems
6. Transitional systems: 

Fig 1.5: 2 transitional systems
7. Modular systems:

Fig 1.6: 2 modular systems
8. Bilateral systems:

Fig 1.7: 2 bilateral systems

These are my first drafts of the systems. After receiving feedback from my classmates, I made the improvements.

Fig 1.8: Radial systems

Fig 1.9: Dilational systems

Fig 2.0: Random systems

Fig 2.1: Grid systems

Fig 2.2: Transitional systems

Fig 2.3: Modular systems

Fig 2.4: Bilateral systems

Fig 2.5: Axial systems

Mr. Vinod said to select one design and use that as our final.

FINAL:


Fig 2.5: Radial system final

Fig 2.6: Bilateral system final

Fig 2.7: Grid system final

Fig 2.8: Dilational system final

Fig 2.9: Random system final

Fig 3.0: Transitional system final 

Fig 3.1: Modular system final

Fig 3.2: Axial system final

Fig 3.3: Final PDF

Task #2: Type & Play part #1:

In this assignment, our task was to look at man-made objects or natural structures and try and identify any letterforms. After extracting them we had to refine them into proper letterforms through a series of iterations. 

I looked at two different pictures to see which one had more potential letterforms. 

Fig 3.4: Picture of rocks I took 

Fig 3.5: A picture I took of the Gardens by The Bay

I realised I could see so many letterforms and interesting shapes in the trees so I decided to go with that. The next step was to trace the image to get a clean outline. 

Fig 3.6: Traced image

I started to identify some of the letterforms in the branches of the tree.

Fig 3.7: Identifying letterforms

The next step was to put these shapes in Illustrator and start to refine them.

Fig 3.8: Iteration #1— making them the same size and putting them on a baseline

Fig 3.9: Iteration #2— refining shapes and adjusting stroke corners

Fig 4.0: Iteration #3— more refining on shapes and stroke widths

These letterforms were looking a bit like some sort of futuristic font so I decided to look at some inspiration before continuing the refinement process. I came across the Elixia font which surprisingly had a lot of similar nuances as my letters.

Fig 4.1: Elixia font

I liked the way the form of the "K" was in this font. Mine was looking a bit too condensed so I thought it would be a good idea to add a little stroke.

Fig 4.2: Iteration #4— refining "K" and all other nuances

Fig 4.3: Iteration #5— making the stroke width uniform and adding some thinner strokes.







Fig 4.4: Final iteration

Fig 4.5: Final PDF

Type & Play part #2:

Our exercise this week is to create a poster with a combination of text and image that is visually harmonious and expressive of the image.

Fig 4.6: Example from Nike.

I looked through some images I could I use, I came across two that I really liked.

Fig 4.7: Julius Erving by Neil Leifer

Fig 4.8: Muhammad Ali by Neil Leifer

I liked the first one more because its composition allowed more space for the text and experimentation. I started out by roughly placing the words with the idea I had in mind.

Fig 4.9: Rough sketch

Then I started working with text in Photoshop to try and figure out a suitable design.

Fig 5.0: Progress 1

Fig 5.2: Progress 2

Something about the blue test was looking a bit too dull so I decided to try and mimic the sort of halo around him from the light into the text.

Fig 5.3: Progress 3

After receiving the feedback from my peers I changed the design a bit. I removed the words below and add a little bit of motion blur to emulate the movement and also the light from the background. I also decided to add a bit of chromatic aberration to emphasise the sort of halo being created by the light. I quite liked how it turned out thanks to the feedback of my peers.

Fig 5.4: Final JPEG

Fig 5.5: Final PDF

4. Feedback:

Week #1: After the short in class exercise, Mr. Vinod gave us general feedback. He said to nor make text directly angled at 45 degrees as it makes it hard to read. He also mentioned we should be mindful of how the text will be read and the path of the viewer's eye.

Week #2: After the peer review session my classmates gave me feedback on how I can improve my designs. 

Improvements to be made:

General: Make time details font smaller. Don't use hyphens in time, use a longer dash. 

Specific: Adjust column spacing in the dilatational system. Modular system text is a bit hard to read. The random system is nice and not too chaotic. 

Week #3: My peers gave me good feedback on my work and they said it looked pretty good and complete. They said the original shape was there but it was quite refined at the same time. Overall the feedback was good and I don't need to make too many changes to my design, just some experimental changes to explore.

Week #4: This week Mr. Vinod picked out my work in the random sampling and gave me short comments. He said it was looking good and that I was pretty much done. He also gave us some general feedback on what to do for the next exercise. He said that there needs to be a good link between the photo and text.

Week #5: In our peer feedback session, my classmates said that my design was good but I could possibly make some changes to make it more visually sound. They suggested that the gradient around the text was too harsh and maybe toning it down could help. They also suggested that maybe I change the "Above adversity" text at the bottom. Either I completely remove it, or maybe change the design a little since it doesn't seem to match so much. They said that even just the word "RISE" would match the picture and look okay.

5. Reflection:

Week #1: I felt like I was not so comfortable using InDesign but after this exercise, I am a lot more comfortable with the software. I know more about the different features and how to use them to create spreads in various different styles. I enjoyed this exercise because I love making compositions in general. I found that the random system was a bit challenging for me because it was supposed to have no pattern or relationship which went a bit against my way of thinking. I like seeing patterns in design and in general so this definitely pushed me to change the way I see things and to be able to see more than one way of designing something. 

Week #2: I am starting to feel a bit of pressure since we have to complete the second exercise by next week and I also need to work on some of the feedback I received today. Mr. Vinod did warn us that the first task would be "hell" so can't do anything except stay organised and try our best. After receiving feedback and looking at some of my classmate's works I definitely know where I have to improve on my current designs. I hope I can keep improving and working 

Week #3: After receiving positive feedback from my peers I feel quite energised and motivated. I hope this can continue in the future too. I really enjoyed this exercise and it really makes you realise that you can really use anything as an inspiration. It was a bit of an unusual exercise but it was fun. I am getting more and more comfortable using Illustrator to create letterforms compared to the project last semester.

Week #4: I'm glad we got some extra time to do the last exercise it really helped reduce some of the stress of all the other assignments piling up. Next week's exercise seems to be an interesting and creative one where we have the freedom to pretty much do it however we want. 

Week #5: I think this week my peer review session was quite useful, they are a bit of a hit or miss because some students are a bit hesitant. We were also briefed on our next project which is creating the key artwork. We were allowed to pick out some events we could use in the project so that makes it exciting. 

6. Further reading:

THE ELEMENTS OF TYPOGRAPHIC STYLE BY ROBERT BRINGHURST 




Chapter 4: Structural forms & devices (Week #1)

This chapter starts out by discussing the importance of title formatting in a text. Bringhurst states that the title page should be made a symbol of dignity and the presence of the text. The title page should reflect the properties of the text.

Next, he states that the title should never oppress the text. The title text is bold and big and spreads across a lot of space or the title is capitals in the same size as the text. He says that most unsuccessful attempts fall between these two extremes. 

Lastly, the titles and opening should always be set in a form that contributes to the overall design. He mentions that Renaissance books had long titles and ample margins which would leave no space for the heads of chapters. This has changed in modern times and perhaps gone to the other extreme of having too much space just for the beginning of a chapter.

Chapter 5: Analphabetic symbols (Week #2)

The first point in this chapter is the use of a midpoint to invoke inscriptional tradition. It is one of the simplest and most effective forms of typographic punctuation.  Roman calligraphers used a flat brush that was thick on one end and thinner on the other. This resulted in modulated letterforms that have still retained their form, over 2 thousand years. When they wrote the midpoint it was not a circular dot but rather a small curved wedge.


These inscriptional and calligraphic traditions have left us other useful marks such as the colon, the slash, the hyphen and the long dash.

The second point is to use analphabetic symbols that are in tune with the basic font. It is explained that in some fonts these symbols are beautifully designed but in some, they are not designed at all. In fact, they are simply borrowed from other fonts which may differ in weight and size. The troublesome symbols usually are the square brackets; which are often too dark, the parenthesis; which are often too thin and symmetrical, the asterisk, the pilcrow, the section sign and the numeral sign. 


Chapter 5 (continued): Analphabetic symbols (Week #3)

I didn't get to finish the chapter last week so I continued reading this week. The next point in analphabetic symbols is to use the best available ampersand in heads and titles. It is one of the oldest alphabetic abbreviations and originated from the Latin word et meaning and. Contemporary ampersands are described as uninspiring and pretzels by Bringhurst. Since ampersands are used mostly in display works, he states that there is no reason not to borrow the italic ampersand with the roman text because the more creative versions are more useful.

The next point is that it's worth taking a close look at hyphens. The hyphen was originally just a simple thin pen stroke. Many Renaissance calligraphers used the canted hyphen with italic fonts and the level hyphen with roman. Bringhurst states that the hyphen is a good place to start when redesigning a font. It is a simple character and one might be able to restore instead of subverting the designer's original intention.
 


THINKING WITH TYPE BY ELLEN LUPTON 



Letter (Week #4)

Lupton explains that this book is about how to use fonts. Commonly designers tap into the vast majority of existing typefaces and choose and combine them in response to a particular audience or situation. To do this with wit and wisdom requires knowledge of how and why letterforms have evolved.

The next part moves onto a little bit of an insight into the history of typography. The first typefaces were directly modelled on the forms of calligraphy. Typefaces are images manufactured for infinite repetition and the history of typography reflects a continual tension between the hand and the machine, the organic and the geometric, the human body and the abstract system. These tensions marked the birth of printed letters over 500 years ago and they continue to energize typography today.


Writing in the West was revolutionised with the invention of movable type which was invented by Johannes Gutenberg in Germany in the early 15th century. Books and documents were manufactured by hand by scribes. Printing with type allowed for mass production: large quantities of letters could be cast from a mould and assembled into forms. After the pages were printed, the letters were put away in gridded cases for reuse.

Letter (continued) (Week #5)
 
This book has a lot of history about typography which we learnt in semester 1 so I thought this was a good recap because I have forgotten some of it. Lupton moves onto humanism and the body. The fifteenth-century Italian humanist writers and scholars rejected gothic scripts in favour of the letter antica, a classical mode of handwriting with wider, more open forms. This preference for letter antica was part of the Renaissance. Nicolas Jenson established an influential printing firm in Venice around 1469. His typefaces merged the gothic traditions with the Italian taste for a rounder, lighter forms. They are considered among the first and finest roman typefaces.


Many of the fonts we use today originated in the same manner, named after printers who worked in the fifteenth and sixteenth century, including Garamond, Bembo and Palatino. These typefaces are known as "humanist"

Comments

Popular Posts