Typography Task 2 - Typographic Exploration & Communication (Text formatting & expression)

02.05.2022 - 18.05.2022 / Week 6 - 8

Yung Siew Weng / 0339847

Typography / Bachelor of Design (Hons) in Creative Media

Task 2 / Typographic Exploration & Communication (Text formatting & expression)

LECTURE

Lecture recordings 01-06 are completed in Task 1 : click here to view! ❤

WEEK 6 : TYPO TASK 2 @ PROCESS DEMO

In this particular video recording, Mr. Vinod had briefed and guided us on how to create a typography editorial layout for task 2.

THE IMPORTANT NOTES :

1. At first, look at the contextual content within the page size to understand how much texts there are and how much the space it covers on the page.

2. Begin with a thumbnail sketch, create some possible ideas for the layout.

3. Create the headline by using Adobe Illustrator (200x200mm), using the 10 typefaces provided.

4. Create a new document in Adobe InDesign. (200x200mm, 6 pages, 2 columns, 5mm gutter). To make the pages to be spread, [select the all the pages > turn off allow selection spreads to shuffle, drag the second page to the first page]

5. To insert the headline to Adobe InDesign, [file > place > get the file(ai)].

6. Compose the best layout.

TASK 2 : TYPOGRAPHIC EXPLORATION & COMMUNICATION

MODULE INFORMATION

Task 2 :

INSTRUCTION
In this task, we will tasked to express typographically the content that provided in a 2-page editorial spread. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc might be allowed. Utilising the knowledge gained in the exercises and other modules from the same semester, you will use Adobe InDesign to typographically compose and express the text within given size (200 x 200 mm/ per page).

We can use Adobe Illustrator to create the headline expression should you feel the need to do so but the final layout is to be completed in Adobe InDesign. Explore several options in expression and layout (sketches). Execute a good layout, with an expressive and appropriate headline in line with the spirit/ message of the text. Only 10 type families that provided are allowed.

EXPLORATION
At the very first of the task, we are required to watch the record lecture which briefed us on the basic requirement of the task.

After the briefing of the task, I started my journey on exploring the best idea of the layout. We are tasked to sketch some possible ideas for the headline expression. At first, I insert the contextual text and look on how much possible spaces would it covers.

Fig 1.1 contextual text (Week 6 / 08.05.2022)

Then I start my journey on idea sketch and exploration. As the text that I chosen is 'visualise for a better world', I having 2 ideas.

IDEA

1# creating something in a form of 3-Dimension, in which jumped out from the flatten surface as our eyes can view things in 3D form.

2# in a fisheye views, which showing the sense of pupils in circle, and the world is circle too.

Fig 1.2 Idea sketch (Week 6 / 08.05.2022)

After having the idea on how the headline goes, I started to discover on how to form the text expression by using Adobe illustrator (AI).

At first, I chosen the most suitable type family for the whole text, headline and also the sub-headline. The chosen typefaces is Univers LT std :

Fig 1.3 Chosen Typefaces (Week 6 / 08.05.2022)

Then I start to discover the effects and feature of AI by playing around with the effects etc. And, I found the 3D effect can formed the similar effect of my idea sketch.

Fig 1.4 Trying effects and features (Week 6 / 08.05.2022)

I started to discover the 3D effect features with varieties of ratio to form a good headlines expression :

Fig 1.5 - 1.7 Result of 3D effect (Week 6 / 08.05.2022)

After the exploration in AI for headlines, I started to design a great layout for the page and the result :

Fig 1.8 Result of 3D effect layout (Week 6 / 08.05.2022)

#IDEA SKETCH ON LAYOUT

Fig 1.9 Layout idea sketch (Week 7 / 09.05.2022)

After having a result on the headline and layout idea, I began the journey on text formatting. At the very first of text formatting, I formatted the suitable font size, kerning, forming, and adjusted the text leading.

Fig 1.10 Before adjustments (Week 7 / 09.05.2022)

Fig 1.11 After adjustments (Week 7 / 09.05.2022)

I formatted the text as :

Font size : 9 pt

Leading text : 11 pt (bigger 2-3 pt than font size)

Paragraph Spacing : 11 pt

Alignment : Left justified

Average character per line : 54-59

Columns : 2

Fig 1.12 The comparison between before and after the adjustments (Week 7 / 09.05.2022)

To achieve the cross alignment, I had to edit the Baseline Grid, make every single line sit on the grid. By clicking the Text Frame Options (Command + B), change offset from Ascent to Leading, Vertical Justification from bottom to top.

Fig 1.13 Cross alignment achieved (Week 7 / 09.05.2022)

Moreover, after the text formatting, I start inserting the potential headline design in Adobe Indesign.

#LAYOUT IDEA 1

Fig 1.14 outcome of layout idea 1 (Week 7 / 10.05.2022)

#LAYOUT IDEA 2

Fig 1.15 outcome of layout idea 2 (Week 7 / 10.05.2022)

And, I tried a version on without the headline at the left-bottom.

Fig 1.16 outcome of layout idea 2 (without headline) (Week 7 / 10.05.2022)

As tomorrow will be the day to show our progress (11.05.2022), I felt that to create more versions or more perspective to show and check with Mr. Vinod, whether which having the more potential. So, I continued exploring the features in AI and I found that a feature [Type on a path tool]. It is a tool that can create text-line regardless how the line goes.

The idea came random and unexpectedly, a creation by a 's' , and combine the 3D effect of the headline. From my studies (further reading), in my opinion, this creation can be stated as environmental as it had a potential to create a chair? a 3D formation?

Fig 1.17 Result of the discovery (Week 7 / 10.05.2022)

I also created one without the 3D effect :

Fig 1.18 Outcome of the discovery without 3D effect (Week 7 / 10.05.2022)

Then, it was the time for the layout composition!

#LAYOUT IDEA 3

Fig 1.19 Outcome of layout idea 3 (Week 7 / 11.05.2022)

#LAYOUT IDEA 4

Fig 1.20 Outcome of layout idea 4 (Week 7 / 11.05.2022)

On the day (11.05.2022 / week 7), we had a progress check on this particular task. I showed my outcome and received some feedbacks from Mr. Vinod as well :

WEEK 7 / 11.05.2022

#LAYOUT 1

Fig 1.21 Progression - Layout 1 (Week 7 / 11.05.2022)

GENERAL FEEDBACK : Overall, great. I like the layout and formatting for the #1.

SPECIFIC FEEDBACK : But for the text at the right-bottom, 'visualise for a better worlds' seems problematic. Delete the text there as it will confused the audience on whether it is the last sentence of the paragraph or a headings. But, the text expression of 'visualise' is not strong.

#LAYOUT 2

Fig 1.22 Progression - Layout 2 (Week 7 / 11.05.2022)

SPECIFIC FEEDBACK : No idea on the text expression. I prefer more on the #1 layout in which for the text on the right-top, 'visual communications...' seems like a headings nor a subheadings. Whereas, the headings seems like an image.

#LAYOUT 3

Fig 1.23 Progression - Layout 3 (Week 7 / 11.05.2022)

SPECIFIC FEEDBACK : This text expression having more potential on visualisation compared to the previous.

After receiving the feedbacks, I started to explore it more, continued on discover the features in AI :

#LAYOUT IDEA 5

Fig 1.24 Headline idea 5 (Week 7 / 11.05.2022)

Fig 1.25 Outcome of layout idea 5 (Week 7 / 11.05.2022)

#LAYOUT IDEA 6

Fig 1.26 Headline idea 6 (Week 7 / 11.05.2022)

Fig 1.27 Outcome of layout idea 6 (Week 7 / 11.05.2022)

#LAYOUT IDEA 7

Fig 1.28 Headline idea 7 (Week 7 / 11.05.2022)

I tried a version on a black background, make the idea more contrast :

Fig 1.29 Headline idea 7 - black background (Week 7 / 11.05.2022)

Fig 1.30 Outcome of layout 7 - black background (Week 7 / 11.05.2022)

Then, I reached Mr. Vinod in class to check the progress. I showed him the idea #6 and #7 and received feedback below :

GENERAL FEEDBACK : The idea is similar as the previous, not having much differences between each.

SPECIFIC FEEDBACK : Visualisation is somewhat like you look through a perspective, like form a hierarch, view through a from a near to a far or a far to a near perspective viewpoints. You should make more exploration on it to create the meaning of this task.

After receiving the feedbacks, I had read through all the text and getting inspiration over again. Based on Mr. Vinod's feedbacks, visualisation is a viewpoint from a near to a far or somewhat a far to a near perspective. So, I tried to form an idea by the 'distance eye prescription'.

Fig 1.31 Reference - distance eye prescription, loudspec.com

#IDEA SKETCH

Fig 1.32 idea sketch 2 (Week 7 / 15.05.2022)

Then, I formed the headline idea :

Fig 1.33 headline idea (Week 7 / 15.05.2022)

#LAYOUT 8

Fig 1.34 outcome of Layout 8 (Week 7 / 15.05.2022)

#LAYOUT 9

Fig 1.35 outcome of Layout 9 (Week 7 / 15.05.2022)

I felt that the idea are a bit weird, in which the perspective should be the bigger in the bottom and the smaller at the upper to show the view from eye level. And, I sketch a new idea sketch :

Fig 1.36 idea sketch #3 (Week 8 / 16.05.2022)

It was an idea, view from a near to a far, from a big to a small (as the farer, the smaller objects will can only view). But for layout 11, I felt that there are a potential to add a door there as, the topic is about "visual for a better world", the door might can be the access to a new world, with giving the audience thoughts and imagination on its function.

#LAYOUT 10

Fig 1.37 headline idea layout 10 (Week 8 / 16.05.2022)

Fig 1.38 outcome of layout 10 (Week 8 / 16.05.2022)

#LAYOUT 11 (WITH A IDEA OF 'DOOR')

Fig 1.39 headline idea layout 11 (Week 8 / 16.05.2022)

Fig 1.40 headline idea layout 11 - black backdrop (Week 8 / 16.05.2022)

Fig 1.41 outcome of layout 11 (Week 8 / 16.05.2022)

So far so good, but at this moment, i felt that I left my initial idea #2 (fig 1.2), so I digitalise by using Adobe Illustrator (AI), with the effect of fisheye. I designed it in both grey and black background to compared on it.

But this time, I included a line of heading within the 'fisheye' to create a sense of "out of the line," producing something outside the box, which is the designer's goal, creating design beyond the boundaries and exploring creativity.

#LAYOUT 12

Fig 1.42 Headline idea layout 12 - grey background (Week 8 / 17.05.2022)

Fig 1.43 Headline idea layout 12 - black background (Week 8 / 17.05.2022)

By using the same composition in the previous layout, I place into the text layout :

Fig 1.44 outcome of layout 12 (Week 8 / 17.05.2022)

Fig 1.45 outcome of layout 12 (Week 8 / 17.05.2022)

After the varieties of attempts and exploration, I finalise my final outcome by comparing all the layout. Overall, I created 12 layouts :

#COMPILATION OF 12 LAYOUTS

Fig 1.46 Compilation of 12 layouts (Week 8 / 17.05.2022)

As the layout 01-07 been rejected, so I shall make selection within layout 08-12.

Fig 1.47 The final selection layout (Week 8 / 17.05.2022)

As I having confusion on whether I did perform well on the idea of visualise, so I asked my friends on some feedbacks and suggestion.

Feedback from friend D : I prefer the layout #11 and #12b. A black backdrop is touted as having more contrast and being more appealing.

Feedback from friend E : I favour layout #11. I like the notion of having a door there because it gives me more thoughts and ideas to ponder about.

Feedback from friend C : Layout #10 is a basic and contrasted layout.

Feedback from friend R : I like #11, #12b, and #08. The concept of #12b is unique, with a hint of Taiwanese design.

Feedback from friend J : The layout #11 is great . Your notion for layout #09 reminds me of a torch light. It's also fantastic, however too much visualisation makes the layout very confused and difficult.

After receiving some comments from my friends, I decided on layout #11 as my final product since, in my opinion, the headline expression adds more meaning and inventiveness to it. Then, I make last adjustments to ensure that the composition is in the greatest possible before the submission.

Fig 1.48 adjustment (Week 8 / 18.05.2022)

Fig 1.49 outcome (Week 8 / 18.05.2022)

I had submitted the outcome (fig 1.49) on 18/5/2022. However, I received some suggestions from Mr. Vinod to improve the outcome, thus I did some adjustments.

The feedback(s) received :

GENERAL FEEDBACK : Very good effort to explore solutions.

SPECIFIC FEEDBACK : Try to align the headline expression on the left to the body text on right (bottom or top). You can also make it larger (allow some cropping of the text).

Mr. Vinod suggested that the headings and subheadings be revised to align with the body text (left-aligned). I tried on both, align at the right and left of the body text.

Fig 1.50 adjustment, align at the right (Week 11 / 09.06.2022)

Fig 1.51 adjustment, align at the left (Week 11 / 09.06.2022)

I liked how the headline and subheadings were aligned at the left of the body text (fig 1.51), giving the impression that the content are read from the top left to the bottom right. So, I decided to take it (fig 1.51) as my final submission.

#FINAL OUTCOME

Fig 1.52 Final outcome - JPG (Week 11 /09.06.2022)

Fig 1.53 Final outcome - PDF (Week 11 /09.06.2022)

Fig 1.54 Final outcome with baseline - PDF (Week 11 /09.06.2022)

TEXT FORMATTING DETAILS :
Font : Univers Lt Std
Typeface : Univers Lt Std Bold (heading & subheading), Univers Lt Std Roman (body text, heading expression)
Type Size : 9 pt (body text), 10 pt (subtext), 14 pt (heading)
Leading : 11 pt
Paragraph spacing : 11 pt
Average character per line : 54 - 61
Alignment : Left Justified
Margins : 10mm (4 side)
Columns : 2
Gutter (for columns) : 4.233 mm

FEEDBACK

WEEK 7 / 11.05.2022

#LAYOUT 1

GENERAL FEEDBACK : Overall, great. I like the layout and formatting for the #1.

#LAYOUT 2

#LAYOUT 3

SPECIFIC FEEDBACK : This text expression having more potential on visualisation compared to the previous.

#SECOND ATTEMPT
GENERAL FEEDBACK : The idea is similar as the previous, not having much differences between each.

WEEK 8

# SUBMISSION

GENERAL FEEDBACK : Very good effort to explore solutions.

SPECIFIC FEEDBACK : Try to align the headline expression on the left to the body text on right (bottom or top). You can also make it larger (allow some cropping of the text).

REFLECTION

EXPERIENCE

Throughout assignment 2, I realised how incredible it would be if Adobe Illustrator (AI) and Indesign functioned together. AI provides more flexibility and accessibility to develop ideas, and all of the features and effects are incredible and functional.

OBERVATIONS

I have experienced that the expression may be declared to have "no meaning" if the content is not read and the idea of the text are not understood. No matter how creative you design, the design are considered ' out of topic'. Although it is only a picture on the side of the text, it should be related to and connected to each other. A superb layout composition, including nice typefaces, and even how we demonstrated to the audience the capability of looking from numerous viewpoints. Furthermore, I noticed that even though I produced my first concept sketch, the plan will expand beyond the paper when I explore the features and enjoy the journey, new thoughts will sprout up and lead me to a more far-fetched notion than my initial.

FINDINGS

Making appropriate use of negative space may, in most situations, have the most influence on a layout design, regardless of how simple an element is. Furthermore, I discovered that a simple and basic composition and layout design would be more important to capture attention and provide a sense of comfort than a complicated design.

FURTHER READING

1. Typography Essentials (2009)

Fig 2.1 Typography Essentials (2009)

Type of source : e-book

Name : Typography Essentials : 100 Design Principles for Working with Type

Author : Ina Saltz

Year of publication : 2009

Bad typeface (p.58-59)

Today, there are over 90,000 digitally accessible fonts. Almost all of them are valuable for some reason, even if it is obscure. Many fonts are intentionally vague or naïve, or do not adhere to the niceties of traditional type design, or known as a 'bad' typeface. Type is a question of taste; in the ninth century, uncials were described as ugly, and in the eighteenth century, Bodoni was mocked. Playful novelty faces are frequently designed to be intentionally unpleasant (but beauty is in the eye of the beholder).

Fig 2.2 Bad typefaces

Here, the word 'weirdo (fig x) is emphasised by a "weird" letterform and mismatched letterforms in the ribbon of text, appropriate for a book on lowbrow art.

Using the Right Type (p.104-105)

Finding the right type is just as important as finding the right soulmate. Every project embodies a spirit, and choosing the right tyro for the project will amplify and clarify its spirit as well as its message. Depending on the design challenge, there may be more than one or even many "right" choices. Understanding what is to be communicated and to whom should help to navigate the vast universe of available typefaces.

Fig 2.3 Right type

For example, based on the figure 2.3 above, the ribbed container and the bamboo inflected type details had suggest the ethnic origins of the product : Indochina. Whereas, for the comic below, the cover art and display type are the right pop-culture approach to depict the graphic cult of Japanese comics.

Invisible typography (p.108-109)

"Speak softly and carry a big stick". Teddy Roosevelt's philosophy of governing can also be applied to type usage: sometimes the best way to emphasise the content visually is with "quiet" typography. At other times, the nature of content calls for a low-key treatment.

Softness can be accomplished in a variety of ways:

1. choosing a typeface with a thin stroke width, or choosing to keep contrast a minimum.

2. Using a small point size

Fig 2.4 Cover by Chris Dixon

For example, the cover designed by Chris Dixon, is a brave design for magazine cover, though not the first to use white-on-white (that was a legendary Esquire cover). This subject matter on how to find peace and quiet to achieve serenity in a frenetic city- is perfectly addressed and supported by the logo in its near invisibility.

Fig 2.5 Visual identity

In addition, the whisper of type on this layout and the logo itself, echo the gauzy fabric image. The effect is elegant and somewhat remote.

2. The Typography Idea Book (2016)

Fig 2.6 The Typography Idea Book (2016)

Type of source : e-book

Name : The Typography Idea Book : Inspiration From 50 Masters

Author : Heller, Steven, Anderson, Gail

Year of publication : 2016

Communicate through letters (p.8-20)

PICTORIAL

Pictorial, image as letter / symbol.

What we call pictorial type may not be pure typography, but it can be effective design.

Fig 2.7 AD, Alex Steinweiss (1941)

For example, Alex Steinweiss 1941 cover design for AD (Art Director) magazine is a pictorial-letter combo.

ENVIRONMENTAL

Environmental, alphabet as monument.

Some alphabets designed for site-specific environments convey clear messages to passers-by, yet others are designed solely as environmental spectaculars, in which the ironic use of scale and surprising materials is the only rationale for the existence of the work. These 'spectaculars' should be considered as artworks that use letters, rather than as typographic megaphones sending out overt promotional or political message.

Fig 2.8 Interior and Interior Light, Andrew Byrom (2001)

For example, a British-born Andrew Byrom, who has produced grand-scale typography for the purposes of both art and design, made the typefaces Interior from tubular steel usually used for furniture. The type is complemented by his wittily conceived Interiors Light to form the type viewed as furniture - more abstract.

CONSTRUCTION

Construction, building a scene with type.

Practically, this type treatment can be used at many sizes, including extremely large for posters and relatively small for spot newspaper advertisements. The choice of black as the only type colour forces us to see the poster as a totality, not separate headline and illustration.

Fig 2.9 Interior and Interior Light, Andrew Byrom (2001)

For example, the visual elements above showing a sense of construction in order to communicate with the audience through letters.

TRANSFORMATIVE

Transformative, alphabetical feet.

Type that made from a foot, a hand or just about any other natural, man-made or fantastical object that seems somehow ripe for transformation.

Fig 2.10 'Unterwegs", Mehmet Lai Türkmen (2012)

For example, the figure above (fig x.x) is a Turkish designer Mehmet Lai Türkmen created idiosyncratic alphabet by using the feet of his wife and daughter to spell out the title of the poster 'Unterwegs' (on the way) for an exhibition at Westend Cultural Centres Photography School, Bremen.

CONCEPTUAL

Conceptual, out-of-body type experience.

The conventional way to compose editorial text is to arrange columns vertically on a sample grid, either flush left or justified, so that one text block leads into the next.

Fig 2.11 'Tony Kaye', Dave Towers (2013)

The majority of books, magazines and newspapers adhere to this convention and it is the most expected and navigable way to read consecutive lines and paragraphs.

Create typographic personalities (p.22-37)

COLLAGE

Fig 2.12 The Great Gatsaby, Alvin Lustig (1945)

Collage, something borrowed, something new.

Collage involves cutting and pasting (by hand or with digital tools) previously printed material, which could be either old or new typefaces and letter, into a legible typographic composition.

RE-FORMING

Fig 2.13 Re-forming

Re-forming, tearing and sampling.

It is an exercise that will strengthen your type skills: select ten of your favourite typefaces from existing magazines, tear them out of their original contexts, finally recompose the type as new words, with an eye to creating both harmonic and dissonant juxtapositions. You may end up with a Dadaesque concoction or something much more refined. Whatever the outcome, this is one enlightening way to experience the connections and distinctions between typographic styles.

OBSESSIVE

Obsessive, eccentricity vs excess.

Hand-lettering is increasingly integrated into all forms of art these days because the boundaries separating applied from fine art are continually blurring. Painters, sculptors and even performance artists freely take creative nourishment from graphic design and now offered places in the art world to hang their artwork.

EXTREME

Fig 2.14 'Terra' (2014)

Extreme, more is more.

Extreme typographic display is tasty, but it is also easy to consume more ornament than the eye can truly digest.

TALKING

Fig 2.15 sample of 'talking'

Talking, speech made visual.

Parole in libertà (words in freedom) is the poetic term that Italian Futurists applied to 'noise' typography. Their type didn’t actually make audible sounds, of course, but, when read aloud, the combination of letters and words conjured the tenor and timbre of such aural icons as the motor car, aeroplane engines, guns firing and bombs exploding. Unlike figurative or metaphorical typography, these type compositions did not try to imitate the look of anything, such as rain or a mouse’s tail, but rather provided the reader with the stimulus to read aloud in order to absorb the entire multi-sensory experience.

OVERLAPPING

Fig 2.16 sample of overlapping

Overlapping, a voice for type.

Lubalin made letters overlap and interconnect, producing typography that linked words in headlines in a single visual statement – call it a voice with personality. The result was a demonstrative and expressive headline that spoke to the viewer, rather than the usual simple, orderly lines of type. It was a tedious process then, but using today’s digital programs, creating Lubalinesque typographic ‘oratory’ is achievable in less time and with more variations.

NON-TRADITIONAL

Fig 2.17 OCD (2013)

Non-traditional, concept-driven typography.

An ‘aspirational’ typeface is one that is conceptual and emerges out of that passion, and this is especially true of non-traditional fonts. While not all typefaces created in this way are pixel-perfect, creating a conceptual font can result in various happy surprises.

REFERENCE

Eye Test. Retrieved from https://loudspecs.com/eye-test

Heller, S., & Anderson, G. (2016). The Typography Idea Book : Inspiration From 50 Masters. Laurence King Publishing.

Ina Saltz. (2009). Typography Essentials : 100 Design Principles for Working with Type. Rockport Publishers.

Yung Siew Weng / Jq 0339847

Search This Blog