ADVANCED TYPOGRAPHY - EXERCISES

27/08/18 - 17/08/18 (Week 1 - Week 4)
Mohamad Irfan Mohamad Zaim (0326620)
Advanced Typography
Exercises

---

LECTURES


Week 1 (27/08/18)
Lecture 1 - Typography Systems

Week 2 (03/09/18)

No lecture this week. What was discussed is mentioned in this weeks feedback.

Week 5 (24/9/18)

History of Typefaces

Pictograms and Ideographs

• They are similar
• Oldest forms of types
• Pictograms and Ideograms are combined to make a symbol/icon
• Pictograms are simple drawings to communicate the most minimal/simplest information.
• Ideographs are more complex than pictograms, represent tangible or abstract ideas
• No smoking sign is a combination of Pictogram and Ideograph
• Ideographs are expressed through geometry with shapes, lines, agreed upon a consensual opinion.

Hieroglyphics and Phoenicians

• Translates to holy writing
• Used by ancient Egyptians as a language
• Phoenetic (representing a sound), Determinative (clarifying meaning), Logograms (picture representing a concept)
• Hieroglyphics are ideographs
• Phoenicians is what came before Roman alphabet and Arabic alphabet.

Greeks

• Linear B script was the writing system used to write Greek before Greek alphabet was invented.
• Greeks adopted Phoenician alphabet to their language by 750 BCE
• The Greeks made a few changes, from Early Greek to late Greek

Roman

• One of the three main kinds of historical type, alongside Blackletter and Italic.
• Invented Serif, painting onto rocks, brush left stroke ends and corners
• Uses thick and thin lines, first to use in their texts
• Another theory is that serif was devised to neaten the ends of lines as they were chiseled into stone.

Charlemagne

• Classical all-caps with spiky serifs, but retains clean lines and proportions
• Used in handwritten rectangular capitals of the 9th century
• Supports up to 50 languages
• Best used in large point sizes and good for 

Gutenberg - Present Day

Blackletter

• Johannes Gutenberg,
• Blackletter became a mass produced typeface, significant contribution to the Printing Revolution
• Gutenberh created Blackletter that mimicked handwriting of scribes

Roman

• First ever Roman typeface was made in the 15th century by Frenchman Nicholas Jensen
• Very legible
• Became popular across Europe
• Based on straight lines and regular curves

Italic

• Italic is slanted roman, created by Aldus Manutius in the late 15th century
• Fit more words into a line to save money
• Italics is for emphasis
• Aldus also created commas and semicolons

England 18th Century - Caslon

• Englishman William Caslon created Caslon
• Caslon's typefact is now referred to as Old Style
• John Baskerville created Transitional
• Didot and Bidoni created modern

The 3 Types of Serifs

• Oldstyle
• Transitional
• Modern

Sans Serif (1816)

• William Caslon the 4th decided to remove serifs, calling it Sans Serif
• It became popular later on

2nd Industrial Revolution (1870 - 1914)

• Advertising during the 2nd industrial revolution created a need for new typeface and experimentation
• Letters were made taller and wider, using large font sizes on posters and billboards.
• Thick, blocky, serif typeface called Slab serifs were born.

Geometric Sans (1927)

• Complexity of the 19th century brought on the simplicity of typefaces in the 20th century.
• Paul Renner created Futura
• Based on simple geometric shapes, thus it was called Geometric Sans

Gill Sans (1928)

• British man Eric Gill created Gill Sans which was similar to Geometric Sans but with gentler and more natural curves, which is called Humanist Sans

Helvetica (1857)

• Created in Switzerland, 1947
• Has simple curves and is available in many different weights
• The darling of Typographers

Introduction of the Computer - Present Day

• Crude pixel type emerged due to primitive screen technology
• Technology evolved and allowed the creation of thousands of different typefaces.

Influence that made Typefaces

Carol Twombly

• American Designer known for her type design
• Type designer at adobe systems from 1988 to 1999
• Designed popular text and display typefaces such as Trajan, Charlemagne, Lithos, and Adobe Caslon
• Studied and inspired by early Greek inscriptions 400 B.C to the 1700s

Historical Models Inspired

• Charlermagne was modeled on classical roman engravings
• Lithos modeled on 5th century BC Greek stone inscriptions
• Trajan is modeled on the classic letterforms of the inscriptions on the Column of Trajan

Inspiration behind the Infamous Comic Sans

• Inspired by DC and Marvel Comic books
• Created by Connare in 1995 by using a mouse and cursor to draw intentionally sloppy letters
• Got a lot of hate, Canadians campaigned to ban the font in 2005

The Man Behind Helvetica

• Swiss typeface designer
• Created the Neue Haas Grotesk (1957), renamed to Helvetica (1960)
• Worked for the Globe for 10 years as a Typographer
• Worked for Haas Type Foundry and created Helvetica after
• Helvetica was inspired by Akzidenz-Grotesk, features a large x-height, and one of the most widely used fonts today.

Adrian Frutiger

• Swiss typeface designer
• Influenced type design in the 20th century
• Creator of the typefaces Univers, Avenir and more.
• Avenir was inspired by Futura
• Univers was inspired by contemporary graphic designs
• Herculanum was inspired by Roman brush lettering
• Rusticana was inspired by rustica Roman Carving

Paul Renner

• German graphic designer, type designer and typographer
• Best known for designing Futura
• Head of the commercial art and typography department at the Frankfurter Kuntstschule in 1925-1926
• Futura was inspired by Geometric Sans-Serif Typeface
  Based on the simple geometries that became representative of the Bauhaus style

---

INSTRUCTIONS

---

EXERCISES

Typographic Systems (Week 1 - Week 2)

Week 1

Fig 1.1 - Typographic Systems first attempt

Week 2

After getting feedback, I made changes to my typographic systems. Apart from not following the system rules correctly, I did not have hierarchy in most of my designs, with 'Typosexual Typographic Exhibition' at the top of the hierarchy.

Fig 2.1 - Final Version for Typographic Systems

Embedded PDF for Typographic Systems

Type and Play - Part 1: Finding Type (Week 3)

For this exercise we had to choose an image/photograph from these three: man-made object, structures, or nature. We then have to analyze, dissect, and look for 5 letter-forms from the image. The image must be in black and white.

Fig 3.1 - Photograph I took inside a Mosque

Fig 3.2 - Letter-forms Identified (S, E, V, A, M)

Fig 3.2 - Filled in letter-forms

Fig 3.3 - Letter-forms separate from image

Fig 3.4 - Letter 'S' before and after iteration

Fig 3.5 - Letter 'E' before and after iteration

 Fig 3.6 - Letter 'V' before and after iteration

  Fig 3.7 - Letter 'A' before and after iteration

Fig 3.7 - Letter 'M' before and after iteration

Type and Play - Part 2 (Week 4)
For this next exercise we were required to take a photograph of a structure, man-made object, or nature and have a 20-30 word sentence related to the image within an A4 format. The purpose is to create interplay between the image and the sentence. We can only use the same 10 typefaces and duo-tone colour is allowed.

Fig 4.1 - Original photograph used

Fig 4.2 - Working in Photoshop

4.3 - First Attempt for Part 2 (Duotone)

Fig 4.4 - First attempt for Part 2 (Grayscale)

Type and Play - Part 1 and 2 (Week 5)

Based on feedback from Mr Vinod and Mr Shamsul, I did revision to part 1. I needed to show the iteration, taking letter-forms from lines in my image, and showing how it becomes a consistent and better looking typeface. I changed some of the letter-forms outlined from my previous attempt.

Fig 5.1 - Outlining lines seen in photograph

Fig 5.12 - Lines only

Fig 5.2 - Letter 'N'

Fig 5.3 - Letter 'E'

Fig 5.4 - Letter 'C'

Fig 5.5 - Letter 'S'

Fig 5.6 - Letter 'M'

Fig 5.7 - Initial letter-forms N, E, C, S, M

Fig 5.8 - Letter-forms on a baseline (further iteration)

Fig 5.9 - Final iteration using ruler lines

Fig 6.0 - Final iteration of letter-forms

After getting feedback for part 2, I needed to apply more interplay with the text and the image like I did with my 'happiness'. The hierarchy for my initial attempt was a bit confusing, as I used bolder text for many words.

Fig 6.1 - Final Version for Part 2

Fig 6.2 - Final Version for Part 2 (Grayscale)

---

FEEDBACK

Week 2

General Feedback: There are 3 steps to ensure a successful design of a typographic system. 1. The design must abide by the rules of the typographic system used. 2. The design has to look good, meaning it has the proper hiearchy, readibility, composition, alignment and so on. 3. Lastly the design has to communicate the message properly. Mr Vinod also said that a composition angled at exactly 45 degrees is not good, a composition should not be aligned too close to the edge, and using justified will leave rivers.

Individual Feedback: Most of my designs followed the rules of the respective typographic system, but were missing certain elements. Some designs did not look good, used the wrong typeface or font size. Some like my modular system lacked exploration and creativity.

Week 3 - Week 4

No class.


Week 5

General feedback: Putting images is important in helping the audience understand, put time periods, we should stand up while giving presentations, collaborate with each other and help each other during the presentation instead of just do our parts, and understand and explain our parts

Individual Feedback: My letters need more character in them as now they are only lines without refining them and for exercise pt2. I should have the typographic design compliment the image and work together to make it look like a good typographic piece.

---

REFLECTION

Experiences:
Week 1 - It was good to be back but after knowing about what is to come later in the semester it made me anxious.
Week 2 - It was very confusing to understand and come up with good looking designs for some of the systems. However seeing the designs from my classmates helped a lot.
Week 3 - The most difficult part of this exercise was finding the right image. I had 3 to choose from and I could see letter-forms in all of them. I chose the mosque one as it had the most variety in the shape of the letter-forms.
Week 4 - Once again the one of the hardest part of this exercise was finding the right image. I decided to do something I had love and affection for and my cat was the perfect solution.
Week 5 - I thought I had done a decent job at the exercises but I was actually confused and unsure of what exactly the exercise entails and its objectives.

Observations:
Week 1 - My handwriting looked weird as I have not written down anything since the start of the holidays.
Week 2 - For some of the systems such as bilateral and axial, there was not much that could be done. Those who tried to be more creative these systems ended up not following the rules of the system or not making the design work.
Week 3 - The photograph I took had very straight and rigid structures, so naturally there would be straighter letter-forms as well.
Week 4 - For this exercise the design principles such as contrast and balance are crucial. I changed the typeface, font size, and colour with these principles in mind.
Week 5 - I noticed my Photoshop, Illustrator, and InDesign skills were rusty, but with a bit of practice I got back into it.

Findings:
Week 1 - I will use what I experienced last semester with the blog and exercises to make sure it is smoother and efficient this semester.
Week 2 - Most of my designs did not work the first time around as I did not apply the 3 steps. I did not include much hierarchy and was too focused on trying to follow the rules of the system. I will keep these 3 steps in mind for future designs when using any typographic systems.
Week 3 - Typography is everywhere, even when there technically isn't any typography. This reminded me that typography is an art, it is the creation of letters by shaping them.
Week 4 - In my initial stages of this exercise I was just adding text to an image, there was no connection between the two. I later realized I had to make the image and text into one rather than two separate elements.
Week 5 - Fort part 1 I needed to do more iteration to the letter forms to make it into a good looking typeface. Part 2 needed more interplay between the text and image, and better hierarchy. I used bold typefaces on several words which ruined the hiearchy.

---

FURTHER READING

Typographic Systems by Kimberley Elam
Week 1



Nonobjective Elements

Using nonobjective elements sharpens and articulates the composition. Typography is functional in communicating a message and using nonobjective elements enhances the functions of emphasis, organization, and balance. Nonobjective elements become guides when used with typography by enhancing the hierarchical order and directing the viewers eye. There are 3 main types of nonobjective elements:

• The Rule Series - rules can both organize and emphasize a message. Single weight rules of equal length are used as elements of organization. Altering the weight and length creates rhythm and a strong diagonal. A change in the weight can also create a hierarchy by guiding the eye to the largest volume of black.
• The Circle Series - can act as a nonobjective pivot point or create hierarchy. Placing the circle near a word can direct the eye to read that word first in the composition.
• The Tone Series - can alter the hierarchy of the message as the eye is drawn to the highest volume of black on a white background. Words or portion of words can be emphasized, giving the message a sense of visual punctuation. 

The use of nonobjective elements should be carefully considered as using elements can overwhelm the message, either because of the volume of colour or the complex shape.

Texts on Type: Critical Writings on Typography by Steven Heller and Philip B. Meggs
Week 2



Square Span - Tradition requires that sentences follow each other in a horizontal continuous sequence. Paragraphs are used to ease perception by a slight break. There can be more ways than just using paragraphs. Square span is putting words into thought groups of two or three short lines.

after a                     you will
short time               begin
                               thinking

The advantage of grouping words supports the theory that we do no read individual letters, but words or phrases.

The Narrow Column - Sizes of typefaces must be proportionate to the length of the line. The smaller the type, the shorter the line (10 point typeface should not be wider than 20 to 25 pica). This method of organizing text has been proven to be easier and faster to read. Newspapers are a prime example of the narrow column in use.

Text in Colour - The eye forms complementary images, flicking, optical illusions, when black is printed on white stock due to these colours being extreme opposites. This however can be minimized by using a small typeface. They can be reduced if the contrast of black on white is softened by gray printing on white stock; black printing on gray, yellow, light blue, or light green stock; brown, dark green, or dark blue printing on light coloured stock. The colours of printing and stock does not necessarily have to be chosen for harmony, but it is the power of controlled contrast that must be retained.

The Visible Word: Experimental Typography and Modern Art, 1909-1923 
Week 3



As described in a General Linguistics course,  language and writing are two distinct systems. Writing exists to represent language. The linguistic object is not defined by the combination of written and spoken language, spoken language alone constitutes it. The word however merges so intimately with the spoken word of which it is the image, that it ends up replacing the primary role, and the process of an equal, or greater importance gets assigned to the representation of the vocal sign than to the sign itself. An example of this is when you get to know someone through their photograph rather than directly by their face.

A man named Saussure has his take on this. He believed there was a bias which existed in favor of writing because of the way graphic image strikes the eye as a permanent, solid object and makes a more lasting impression than that of spoken sounds. The criteria of pronunciation, according to Saussure, belonged to the spoken realm, it was a matter of correctly articulating phonetic and phonemic units which belonged to language at a particular moment in history. For french oi is pronounced wa, this spelling would have to exist independently; actually wa is written oi. This also implies that language depends on its written form and certain liberties mat be taken in writing, as the the graphic symbols were the norm.

The basic units of written and spoken language which are letters and phonemes respectively, remained ambiguous and changeable in every respect unfixed. The only thing "natural" in spoken language was that the act of pronunciation was necessarily a separate act from that of writing, noting, or representing. This was an interesting interpretation from Saussure, as one of the representations (writing or speaking) would dominate the other. However this concept can also be seen as a complementary relation, an alignment, in which each set of signs either graphic or phonic could indicate each other without one necessarily taking precedence.

The Complete Manual of Typography, Second Edition
Week 4



Character vs Glyph

The goal of Unicode is to assign a unique ID number to every character, linguistic symbol, or ideogram in all of the world's languages. This number of IDs now exceeds 100,000. An important aspect of Unicode is that it recognizes that a single character may have several forms, each represented by a distinct glyph.

Fig 7.1 - Unicode ID number can have several forms, each represented by a unique glyph.

The Unicode's main concern is clear communication, not typography, so it does not distinguish between a simple roman A and a decorated A for design purposes. The goal of unicode is simply to depict a capital A as capital A. All capital A's have the same Unicode ID, but they may be represented by alternate glyphs. This is the reason that computer tools for browsing the contents of fonts are often called glyph palettes, a given font's glyph set can be larger than its character set.

There are however issues related to cross-platform font-compatibility. The only way to be sure that a typeset document appears on one platform exactly as it was designed on another platform is to create it using the same OpenType fonts from the same vendor on both platforms.

http://thinkingwithtype.com/letter/
Week 5

Optical Sizes

A type family with optical sizes has different styles for different font-sizes. The graphic designer will select a style based on context and purpose. Optical sizes designed for headlines or display tend to have delicate, lyrical forms. Styles created for text and captions have heavier strokes.

During the era of metal type, type designers created different styles for each size of type by adjusting the weight, spacing, and other components. When the type design process became automated in the 19th century, many typefounders economized by simply enlarging or reducing a base design to generate different sizes. This mechanized approach to type sizes became the standard for photo and digital type production. When a text-sized letterform is enlarged to poster-sized proportions it became too heavy and vice versa.

Fig 8.1 - Display/headline style

Display or headline style looks spindly and weak when reduced to smaller sizes. This style is intended for use at 24 points or larger.

Fig 8.2 - Basic style

Basic text styles are designed for sizes ranging from 9 to 14 points. Their features are strong and 'meaty' but not too assertive.

Fig 8.3 - Caption style

Caption styles are built with the heaviest stroke weight. They are designed for sizes ranging from 6 to 8 points.