Advanced Typography - Task 1: Exercises 1 & 2

23/8/2021 - 20/9/2021 / Week 1 - Week 5

Lui Hsiao Hui (Tressa) / 0342003
Advanced Typography / Bachelor of Design (Hons) in Creative Media

Task 1: Exercises 1 & 2

LECTURES

WEEK 1 - LECTURE 1

Advanced Typography: Typographic Systems

Typographic systems provide a sense of purpose that focuses and directs the decision-making.

Shape grammar is a set of shape rules that apply in a step-by-step way to generate a set, or language, of designs.

Fig. 1.1 Axial system (source: type 365)

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

Fig. 1.2 Radial system (source: type 365)

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

Fig. 1.3 Dilatational system (source: type 365)

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

Fig. 1.4 Random system

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

Fig. 1.5 Grid system (source: type 365)

Grid System: A system of vertical and horizontal divisions.

Fig. 1.6 Transitional (source: type 365)

Transitional System: An informal system of layered banding.

Fig. 1.7 Modular system (source: type 365)

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

Fig. 1.8 Bilateral system (source: type 365)

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

WEEK 2 - LECTURE 2

Advanced Typography: Typographic Composition

Fig. 2.1 Principles of Design - emphasis

Principles of Design Composition: Emphasis, isolation, repetition, balance (symmetry/asymmetry), alignment, perspective, rhythm, contrast.

Fig. 2.2 The Rule of Thirds

The Rule of Thirds: A photographic guide to composition. The intersecting lines are used as a guide to place the points of interest, within the given space.

Fig. 2.3 Environmental grid, Typographic design: Form and communication (2015)

Environmental Grid: Based on the exploration of an existing structure or numerous structures combined.

Fig. 2.4 Form and movement

Form and Movement: Based on the exploration of an existing Grid Systems. The placement of a form on a page, over many pages creates movement. The forms could represent images, text or colour.

WEEK 3 - LECTURE 3

Advanced Typography: Context and Creativity

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.

Fig. 3.1 Cuneiform c. 3000 B.C.E.

The earliest system of actual writing, written from left to right and evolved from pictograms.

Fig. 3.2 Hieroglyphs

- Ideograms, represent the things they actually depict.

- As determinatives to show that the signs preceding are meant as phonograms and to indicate the general idea of the word.

- As phonograms to represent sounds that "spell out" individual words.

Fig. 3.3 Letterforms through the ages

Early greek (5th C. B.C.E.): Drawn freehand, not constructed with compasses and rules, and they had no serifs. In time the strokes of these letters grew thicker, the aperture lessened, and serifs appeared.

Roman Uncials: By the 4th century Roman letters were becoming more rounded, the curved form allowed for fewer strokes and could be written faster.

English Half Uncials (8th C.): In England, the uncial evolved into a more slanted and condensed form.

Carolingian Minuscule: Capitals at the start of a sentence, spaces between words and punctuation. 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 (12-15 C. CE): Characterised 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: 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 rationalised letter.

Fig. 3.4 ‘Indian’ subcontinent the Indus Valley Civilization (IVC) script (3500-2000 BCE)

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.

Fig. 3.5 Brahmi script (450–350 BCE)

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.

Fig. 3.6 Southeast Asia scripts, scripts of the communities that assimilated into Peninsula Malay communities.

WEEK 4 - LECTURE 4

Advanced Typography: Designing Type

Type Design Process

1. Research

- Understand type history, type anatomy, type conventions and terminologies.

- Determine the type’s purpose or what it would be used for and what different applications it will be used in.

- Study existing fonts that are presently being used for inspiration/ideas/reference/context/usage pattern/etc.

2. Sketching: Traditional/digital

3. Digitisation

Professional softwares: FontLab and Glyphs App. Some designers also use Adobe Illustrator then only the specialised font apps. This however is frowned upon by the purist.

4. Testing

The results of testing are 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 type) the readability and legibility of the typeface becomes an important consideration. However, it is not as crucial if the typeface is a display type, where expression of the form takes a little more precedence.

5. Deploy

Even after deploying a completed typeface there are always teething problems that did not come to the fore during the prototyping and testing phases. Thus, the task of revision doesn’t end upon deployment. The rigour of the testing is important so that the teething issues remain minor.

Typeface Construction

Fig. 4.1 Construction grid for roman capitals (8 x 8 cells)

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

Construction and considerations

Fig. 4.2 Classification according to form and construction

Different forms and constructions must be taken into account when designing a new type. An important visual correction is the extrusion of curved (and protruding) forms past the baseline and cap line (overshoot). This also applies to vertical alignment between curved and straight forms.

Fitting the type: A visual correction is also needed for the distance between letters. The letters must be altered to a uniform visual white space - the white space between the letters should appear the same.

Fig. 4.3 Ink traps

Ink traps were generally used when printing on cheap absorbent paper and when printing is fast and not very precise. Excess ink gathers at the corners, but with ink traps the corners remain visible.

WEEK 5 - LECTURE 5

Advanced Typography: Perception and Organisation

Contrast

Fig. 5.1 Size (by Carl Dair)

Fig. 5.2 Weight

Fig. 5.3 Form

Fig. 5.4 Structure

Fig. 5.5 Texture

Fig. 5.6 Direction (by Carl Dair)

Fig. 5.7 Colour

Fig. 5.8 Form

Form: The overall look and feel of the elements that make up the typographic composition. To represent a concept by doing so in a visual form. The interplay of meaning and form brings a balanced harmony both in terms of function and expression.

When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.

Fig. 5.9 Gestalt theory for organisation

INSTRUCTIONS

Task 1: Exercise 1 - Typographic Systems

For this exercise, we are to explore 8 systems which are Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and Bilateral in InDesign using the content given in the MIB. We were also instructed to watch the InDesign demonstration videos in the lecture playlist.

- Size 200 x 200 mm

- Colours: Black and additional colour

- Minor graphical elements

Week 1 Practical

Fig. 6.1 Axial - attempt #1, Week 1 (23/8/2021)

During our week 1 practical, we were instructed to attempt the axial system first. It was my first time using InDesign again after a few months, so it took a while to get used to it and designing again. My first attempts were all trial and error, boring and feel a little constricted. I was advised to explore other typefaces besides Univers Extended. Furthermore, the InDesign videos by Mr. Vinod helped refresh my memory on InDesign mechanics, and especially helped me further understand the modular system.

InDesign Progress

Fig. 6.2 Creation process (grids and guides), Week 1 (23-27/8/2021)

Fig. 6.2 shows the creation process of a few of the systems. I used a mixture of serif and sans serif typefaces for different designs - for exploration purposes and variation.

All body texts are 8 pt to 12 pt, but most of them are 10 pt with a 13.2 pt leading. Title point size varies. The accent colour is red along with black and white because those are Taylor's colours.

I didn't do any sketches because I prefer to work immediately in the software when it comes to layout designs. It just allows me to visualise my ideas better.

Week 1 attempts

Fig. 7.1 Axial - attempt #2, Week 1 (26/8/2021)

Although this seems like an easy typographic system, it took me a lot of time to figure out a good layout because it was very easy to create an imbalance between the body text and title. Mr. Vinod mentioned avoiding heavy titles because of the imbalance, so that's what I tried to fix after my first attempts at the axial system.

Fonts used:

Left: Univers LT Std (Extended and Black Extended)

Middle: Univers LT Std (Light, Roman, Bold)

Right: Univers LT Std (Roman, Bold) and ITC New Baskerville Std (Bold Italic, Italic)

Fig. 7.2 Radial - attempt #1, Week 1 (27/8/2021)

For the radial system, I was trying to create a light ray look/pattern, hence the extended texts at the edge of the canvas of the left design.

Fonts used:

Left: Futura Std (Book, Heavy, Bold)

Right: Bembo Std (Bold, Regular)

Fig. 7.3 Dilatational - attempt #1, Week 1 (27/8/2021)

The dilatational system was another system I struggled with. It was hard to come up with creative solutions to ensure information hierarchy yet also creating an attractive layout. For the left design, the placement of the bold extended title was an attempt at balancing out the body texts. Overall, there seems to be something lacking in the layout. I'm not very fond of these designs.

Fonts used:

Left: Univers LT Std (Bold Extended, Light)

Right: Univers LT Std (Bold Extended Oblique, Bold, Light, Extended Oblique)

Fig. 7.4 Random - attempt #1, Week 1 (28/8/2021)

Because it is a random system, I used different fonts for each letter in the title to create a random look. The left one is a more experimental random system. I layered the texts randomly with some text mirrored and numbers emphasized with the use of different fonts and point sizes. It is not legible and is more expression-based. I actually made it out of anger and frustration because I wasn't liking what I was doing. It turned out to be my favourite out of this exercise because it became a sort of 'vent' art.

I put a lot of thought into the arrangement of the design in the middle. I emphasized "open public lectures" with a mixture of fonts and used red for the title "The ABCs of Bauhaus Design Theory" so it would still remain eye-catching. I also incorporated the transitional system by layering. From the examples I've seen, the random system may be random but the content still has its own groups so there's still some sense when read. So I kept that in mind when arranging the texts. It's ironic how the random system took the longest to make. One would think that it being random means that less thought is put into it.

Fonts used: Most of the 10 typefaces

Fig. 7.5 Grid - attempt #1, Week 1 (25/8/2021)

The layout in the middle is again more of an experimental one and also adheres to the axial system. I quite like it because of how 'weird' it looks. Besides that, one thing I realised about using a black background is that it makes the piece less empty. The black colour seems to fill up the empty space. I think it looks better than leaving the background white, where the empty space becomes more apparent.

Fonts used:

Left: Univers LT Std (Bold, Roman, Light)

Middle: Univers LT Std (Bold, Roman, Light Condensed) and Bembo Std (Semibold, Semibold Italic)

Right: Univers LT Std (Bold, Roman)

Fig. 7.6 Modular - attempt #1, Week 1 (28/8/2021)

Each of the content/group of texts takes up either 1 square to 4 squares. Refer to Fig. 6.2 above to see the InDesign grids. As for the graphical elements in the design on the left, I was trying to incorporate the Bauhaus elements.

Fonts used:

Left: Univers LT Std (Bold, Roman, Extended)

Right: Univers LT Std (Bold, Extended, Bold Extended, Black Extended)

Fig. 7.7 Transitional - attempt #1, Week 1 (27/8/2021)

With the transitional system, I played around with layering and incorporating empty space. I wanted to make the text look like they were floating/holding onto one another. For the left design, I was also inspired by the glitch look, hence why I added some lines, squares and rectangular shapes.

Fig. 7.8 Bilateral - attempt #1, Week 1 (28/8/2021)

The bilateral system was also one of the challenging ones as it is easy to make a boring layout because everything is centralised. To combat the boringness, I tried to make an interesting typographic title (left design) by using a mixture of light italics, light condensed and light fonts from the same type family (ITC Garamond Std). I like the look of it and it reminds me of magazine designs.

Fonts used:

Left: Univers LT Std (Light, Roman, Bold) and ITC Garamond Std (Light, Light Condensed, Light Italic)

Right: Univers LT Std (Light, Light Oblique, Bold) and Bodoni Std (Italic)

Week 2 attempts - Revised and further exploration

Fig. 7.9 Bilateral - revised, Week 2 (30/8/2021)

In week 2, Mr. Vinod suggested moving the body texts to the left for better balance. I also decided to change the colours because it felt like something was missing and I like this colour scheme better.

Fig. 7.10 Radial - revised, Week 2 (30/8/2021)

Mr. Vinod also mentioned that my design for radial was imbalanced. I didn't view it that way at first, but after trying out his suggestion of putting something at the top, I think it looks more stable. The text at the top creates the illusion of a slanted square which I think makes the design even more dynamic and it also creates eye movement.

Fig. 7.11 Dilatational - further exploration, Week 2 (4/9/2021)

I mentioned that I didn't like my attempts at the dilatational system. I noticed that I was staying in my comfort zone, only using small point sizes. To improve that I tried using larger and stylised titles as the emphasis to create a more dynamic look. The title's point sizes decrease and increase in size, which creates dimension as if the text is moving towards viewers or is receding back into the background. In a sense, this design feels more 'kinetic' compared to my previous attempts in week 1.

This took a longer time to do compared to the random system because it was very hard to ensure good arrangement with the titles receding in point sizes. It causes the need for some circles to become ovals (shape path). The design in the middle is an attempt at layering to balance out the white colour because it seemed lacking without some white at the corner. However, it looked unappealing to me so I did a 3rd attempt which looks neater.

Final Task 1 - Exercise 1: Typographic Systems

Fig. 8.1 Final Axial System - JPEG, Week 2 (30/8/2021)

Fig. 8.2 Final Radial System - JPEG, Week 2 (30/8/2021)

Fig. 8.3 Final Dilatational System - JPEG, Week 2 (/9/2021)

Fig. 8.4 Final Random System (Layout #1) - JPEG, Week 1 (24/8/2021)

Fig. 8.5 Final Random System (Layout #2) - JPEG, Week 1 (25/8/2021)

Fig. 8.6 Final Grid System - JPEG, Week 1 (25/8/2021)

Fig. 8.7 Final Modular System - JPEG, Week 2 (29/8/2021)

Fig. 8.8 Final Transitional System - JPEG, Week 1 (24/8/2021)

Fig. 8.9 Final Bilateral System - JPEG, Week 2 (30/8/2021)

Fig. 8.10 Final Task 1 - Exercise 1: Typographic Systems - PDF, Week 2 (4/9/2021)

Fig. 8.11 Final Task 1 - Exercise 1: Typographic Systems Grids and Guides - PDF, Week 2 (4/9/2021)

*Did not use grids and guides for random and transitional systems so they're not included in the PDF. Some texts are not aligned to the baseline grid (axial) in order to balance out the title.

Task 1: Exercise 2 - Type and Play

Part 1: Finding Type

For exercise 2 part 1, we are tasked to analyse, dissect and identify potential letterforms (4 letters only) within a chosen image of a subject - organic or man-made.

- Uppercase or lowercase only

- Choose reference typeface from the 10 typefaces

1. Chosen subject

Fig. 9.1 Chosen subject - plant, Week 3 (6/9/2021)

The image is my own. I chose a plant as my subject because I think the organic shapes would make for an interesting exploration. Before taking the photo, I observed the branches for a while to see if I can identify any potential letters. The letters I found were D, K, L, A.

Letterform extraction

Fig. 9.2 Traced letters - D, K, L, A, Week 3 (6/9/2021)

I used the pen tool in Adobe Illustrator to trace the branches. I tried my best to keep the details of the branches, such as the smaller branches jutting out.

Fig. 9.3 Extracted letterforms - D, K, L, A, Week 3 (6/9/2021)

From the extracted letters, I noticed that there are many sharp edges, curved and slanted stems, and the contrast of thin and thick strokes to the letterforms.

2. Sketch

Fig. 9.4 Ideation for the final letterforms, Week 3 (6/9/2021)

After extracting the letters, I sketched out a rough idea of how I want the final letters to look. I wanted it to be a serif display inspired font. In the sketches, you can see the constant changing of the features of the letters (serif, direction of curves and angles etc).

Reference

Fig. 9.5 Typeface reference - Bembo Std

We were instructed to have a reference to help with the construction/refinement of our typeface. From the 10 typefaces, I chose Bembo Std because it has a roughly similar "K" and my typeface would be a serif.

3. Digitalisation

Fig. 9.6 Guides in Adobe Illustrator

Here is an overview of the attempts in Adobe Illustrator. The artboards are 1000 px height and 3000 px width.

Fig. 9.7 Attempt #1 - Simplified letterforms, Week 3 (6/9/2021)

In my first attempt, I deleted a few anchor points of the original extraction to simplify the shapes of the letters. The curves and slants are minimised, as well as the stroke widths being a little more standardised. The sharp edges are not all blunted at this stage because I planned on reshaping the letters.

Fig. 9.8 Attempt #2 - Straightened stems, Week 3 (6/9/2021)

For the second attempt, I started using grids so the letterforms are equal in their stem widths. I increased the contrast between the stroke widths of the stems and other parts of the letters. Besides that, I blunted the ends of the sharp points - which I learned from Typography class last semester.

At this stage, I really struggled with the "A". It is very imbalanced due to the fact that it's slanted to the left and the stem is thicker on the left as well. There is not enough thickness on the right to balance the weight, so overall it just looks very awkward. I also don't like the way the left stem ends with a slant, so for the next attempt, I replaced that with a serif.

Fig. 9.9 Attempt #3 - Straightened stems (serif), Week 3 (11/9/2021)

Here I focused on refining the "A". I tried to resolve the imbalance by creating movement with the use of curves to the stem. I also added the serif feature at the top and bottom of the stem as a way of giving the letters some 'grounding'. However, it is still imbalanced.

I also added serifs to the top and bottom of the letters in this stage, as a way of bringing about cohesion with all the letters. But I think it feels very 'modernised' in a sense and does not really convey its original organic form.

Fig. 9.10 Attempt #4 - Returned organic curves, Week 3 (11/9/2021)

Since the straight letterforms look very different from the original extraction, I decided to introduce back its organicness by curving the stems slightly. I wanted the letters to maintain their organic shapes, while also looking like a serif font. The contrast between the stroke widths is also increased for that sleekness and extra flare to the type design. Overall, I think the outcome does look like thorned branches which were what I was going for.

Fig. 9.11 Comparison of original extraction and attempt #4 letter "D", Week 3 (11/9/2021)

Quite self-explanatory - the features are the same, just the difference in the slant and better contrast with the stroke widths.

Fig. 9.12 Detail of the letter "D" - subtle blunt point

This blunt point isn't as blunted as the rest because I wanted it to look sleek.

Fig. 9.13 Comparison of original extraction and attempt #4 letter "K", Week 3 (11/9/2021)

The "K" went through a whole makeover but still retained its original shape, just simplified. I decided to exaggerate some details for that extra spice to the letter.

Fig. 9.14 Comparison of original extraction and attempt #4 letter "L", Week 3 (11/9/2021)

Fig. 9.15 Comparison of original extraction and attempt #4 letter "A", Week 3 (11/9/2021)

I managed to refine the "A" to something I am satisfied with. Because I was struggling a lot with it, I referred back to my reference - Bembo Std (Fig. 9.5 above) and found that maybe I should switch the thicker stem to the right side, instead of having it on the left. The letter itself is already slanted to the left so having the thicker stem on the right would balance it out. After changing that it looks much better.

From lecture 4, I learned about ink traps in type design (refer to Fig. 4.3 in the lectures section). Nowadays ink traps are incorporated into type design as a stylistic feature rather than its original purpose of reducing ink bleeds. I decided that the "A" would look more interesting with one, and I think it also looks like a tiny branch growing out of the main branch.

4. Messing around studies (attempt #4)

Fig. 9.16 Ligatures/joined letterforms (attempt #4), Week 4 (12/9/2021)

Fig. 9.17 Form study (attempt #4), Week 4 (12/9/2021)

I made this to make them look like their original subject - branches.

5. Further refinement (Week 4)

Fig. 10.1 Attempt #5 - Straightened stems (serif), Week 4 (13/9/2021)

In week 4, Mr. Vinod said that attempt #3 has more formality like an actual typeface, while the curves in attempt #4 made the type informal. Though it was understood that I was trying to bring back its organic form, a refined attempt #3 would better suit for the final type design.

When it came to the organic curves (bowl, crossbar, arm and leg etc), I relied more on observing and intuition if the letters look balanced, rather than relying on the grids to show me where to place the anchor points or curve the points. I only adjusted the grids once I was satisfied with the refinement to show that the features of the letters are aligned/in the same section.

Fig. 10.2 Letter "D" - non-lowered and lowered bowl, Week 4 (13/9/2021)

Mr. Vinod mentioned to lower the bowl of the "D", however it looked very weird to me. It just feels off, somehow its like the feature (jutting out point) is trying to 'hide'. The left is the one I prefer and right is the lowered bowl.

Fig. 10.3 Attempt #3 compared to attempt #5, Week 4 (13/9/2021)

*Attempt #3 - light gray; Attempt #5 - outline

To make the bowl of the "D" seem lowered, I moved the shape slightly to the right so it takes up more space. I also adjusted the thickness of the bowl to be less thin. A serif is added at the bottom end of the bowl for more stability, and also to match with the other letters.

For the rest of the letters I tweaked the stroke widths to ensure it's all cohesive and maintains equal visual weight. I decided to change the arm and leg of the "K" and the crossbar of the "A" because their shapes were bothering me. Since the "A" has an ink trap, I thought the "K" should have one as well.

Final Part 1: Finding Type

Fig. 10.4 Compiled process, Week 3-4 (6-13/9/2021)

Fig. 10.5 Original extracted letterforms compared to the final type design, Week 4 (13/9/2021)

Fig. 10.6 Final type design, Week 4 (13/9/2021)

Fig. 10.7 Letter D, Week 4 (13/9/2021)

Fig. 10.8 Letter K, Week 4 (13/9/2021)

Fig. 10.9 Letter L, Week 4 (13/9/2021)

Fig. 10.10 Letter A, Week 4 (13/9/2021)

Fig. 10.11 Type showcase, Week 4 (13/9/2021)

I edited the original image of the plant to fit the aesthetic of the type.

Fig. 10.12 Final Finding Type - PDF, Week 4 (13/9/2021)

Part 2: Type and Image

In part 2 of exercise 2, we are to chose an image and incorporate a word/sentence of our choice which fits the chosen image. The objective is to enhance/support the interplay between the letter/word/sentence and the selected visual. The text must be woven into a symbiotic relationship with the image.

- Do not manipulate the image (colour editing is fine).

- Text and image takes up 50% each, they shouldn't overwhelm each other, you'll want to see the interplay of each other.

- Either add to the motion or guide the motion.

Fig. 11.1 Original photo sourced from Pinterest

Fig. 11.2 Attempt #1 - "I burn you? You melt me", Week 4 (15/9/2021)

The cheesy phrase "I burn you? You melt me" is from a book I read and I thought it suited the image.

For the words "I burn you?", I was trying to make it look a part of the fire, and as if it's burning the person on the left. It's also acting as the motion of the image. The word itself was overlayed twice - the top layer is white, with the bottom layer being yellow because as observed the fire has a yellow ring surrounding it. It was challenging manipulating the text to look like fire because readability was a concern. This took multiple tries however I still think it needs refinement or better placement.

I wanted to make "you melt me" look like it's projected onto the model's face (like projector photoshoots), so it's slightly curved to follow the contour of the face. I also overlayed it twice to get that projector fringing look, hence there's the slight pink on the outer edges.

Fonts used:

"I burn you?": ITC New Baskerville Std Bold

"You melt me": Univers LT Std Bold

Tools used:

Liquify: To warp the text.

Gaussian blur: To blur the entire text to make it blend seamlessly with the image.

Tilt-shift blur: Used on the edges of "I burn you?" to imitate the smoke from fire.

Blending modes 'divide' and 'overlay': To create the projector text look/effect for "you melt me".

Fig. 11.3 Attempt #2 - "I burn you? You melt me", Week 5 (18/9/2021)

Attempt #2 is more of a movie poster style. The flame text is centered and follows the contour of both models' side profiles, and the projector-style text is placed at the bottom of the image. I decided to overlap them asymmetrically for extra flare.

Fig. 11.4 Original photo by Julien Tatham

http://www.fubiz.net/en/2015/09/21/people-at-bus-stop-photography/

Fig. 11.5 Attempt #3 - "I waited for you", Week 5 (19/9/2021)

I decided to try using another image because I felt like I wasn't doing enough. For this one, I wanted to bring out the moodiness of the image. I came up with the phrase and made the words blend/melt according to the fogging of the glass. I used gaussian blur, tilt-shift, and the liquify tool to drag the ends of the text (melting look). It also brings out a bit of dimension to the text because there's a sense of how the 'clearer' parts of the text are closer to the glass, while the blurred parts seem further away from the glass. This is a more simple and straightforward piece. While I am worried about if it comes out as boring, I think it does portray the feeling of the image.

Fonts used: Univers LT Std Roman and Bold

Tools used:

Liquify: To melt/fog the ends of the text "for you".

Gaussian blur: To blur the entire text to make it blend seamlessly with the image.

Tilt-shift blur: Used on the edges of the text.

Blending mode 'overlay' and lowered the opacity so it matches with the ambience.

Final Part 2: Type and Image

Fig. 12.1 Final Type and Image #1 - "I burn you? You melt me", Week 5 (18/9/2021)

Fig. 12.2 Final Type and Image #2 - "I waited for you", Week 5 (19/9/2021)

Fig. 12.3 Final Type and Image - PDF, Week 5 (20/9/2021)

Hours spent for Task 1

Exercise 1 - 30 hours (span of 2 weeks)

Exercise 2, part 1 - 22 hours (1 week)

Exercise 2, part 2 - 7 hours (1 week)

FEEDBACK

Week 1 - Exercise 1: Typographic Systems

General feedback: Avoid large titles and bold numbers as they can be weighty and distracting, causing imbalance. Angling large titles can take away the stillness and imbalance. Avoid absolute diagonal axis because it creates an extreme division. Not more than 1 pt stroke width, ideally 0.5 pt stroke width.

Specific feedback: Explore different fonts. There is a long gap in the middle, feels like something needs to happen there. (first attempt)

Week 2 - Exercise 1: Typographic Systems

General feedback: Move text to fill empty space. Don't use too many non-objective elements. Take note of kerning, letter spacing. Reduce point size for the timings or use small caps (downsize). Ensure eye movement and hierarchy of information. If there's something pulling on one side the other side should have one as well.

Specific feedback: The top part needs something to balance it out (Radial). Move the body text to the left for better balance (Bilateral).

Week 3 - Exercise 1: Typographic Systems

Specific feedback: Very spot on decision-making process and ability to see details and issues. There's technical adherence to typography yet there's also a good aesthetic component.

Week 4 - Exercise 2, Part 1: Finding Type

General feedback: Avoid oversimplifying or adding features that aren't in the original extraction.

Specific feedback: The second last attempt is preferred because it is more stable and looks formal (like a normal typeface) compared to the final choice. Lower the bowl of the "D" for better stability, refine the "A" as it looks imbalanced.

Week 5 - Exercise 2, Part 2: Type and Image

Specific feedback: Good sensitivity to the fogging of the text, and making the text fit the quality of the image.

REFLECTION

Experience

For exercise 1, I mainly struggled with being creative with the layouts while sticking strictly to the systems, as well as battling my perfectionistic side. I was extremely worried about my work looking similar to my classmates, so there was an added pressure of not just performing up to expectations but also coming up with layouts that weren't 'common'. I would scrutinise my work a lot and abandon or start over a new layout after spending hours on one. Some of the systems were less worrying, particularly the random system because I got to let loose and ‘disregard’ most typographic rules which made designing it fun. For the finding type exercise, I actually enjoyed it very much and liked the idea of it. It was a creative way to develop type design from subjects. I considered it fun too because I enjoy type design the most in typography. Lastly, the type and image exercise was slightly challenging because of maintaining legibility. Though it was a good exercise because it trains type expression, type integration with the image, creativity and layout.

Observations

In exercise 1, besides observing the usual typography basics such as leading, point size, alignments etc, I had to also pay attention to balance. Ensuring equal weight distribution even in an asymmetrical design/layout is important. From the finding type exercise, I learned to observe the letters closely to find out what are the issues that make it look awkward. Nevertheless, learning to observe an organic subject to identify letters was quite interesting and fun in a way. Somehow it's like a treasure hunt and you use what you found to create something reminiscent of its original form. In the final exercise of type and image, I learned to observe the qualities of the image such as mood, colour and the subject I was trying to integrate my type with. It's important to understand the subject so I'll know how to incorporate the text - for example, the flame has a ring of yellow around it, so my text should have that quality too.

Findings

Before attempting exercise 1, my view on typographic systems was a bit stubborn. I simply thought that because they are ‘systems’, there was limited room for creativity. But obviously, after exploring various ways of spicing up the layouts, my views changed. I found that once I got the hang of the systems, it was actually fun to come up with different layouts. Lastly, when doing the type and image exercise, I found that fluidity/movement of the text is a key point when creating an interplay between the two.

Lui Hsiao Hui (Tressa) 0342003

Search This Blog