Typography | Task 2 : Typographic Expression & Communication

23.10.24 - 17.11.24/ week 6 - week 8
Subhana Salim / 0375936
Typography / Bachelor's of Design (Honours) in Creative Media / Taylor's University
Task 2 : Typographic Expression & Communication

1. Lectures

2. Instructions

3. Task 2 : Typographic Expression & Communication

4. Feedback

5. Reflection

6. Further Reading

LECTURES

WEEK 6 :

Lecture 6 : Typo_5_Understanding

Most uppercase letterforms suggest symmetry, However they are not. The letter A of the Baskerville font has noticeably 2 different stroke weights. Even Univers font, although not noticeable, also have different stroke weights.

Figure 1.1 Baskerville and Universe letter 'A'

Despite the letter a between the font Helvetica and

Univers is not that significant, the minor changes result in making them distinguishable from each other.

Figure 1.2 Helvetica VS Univers letter 'a'

Curved strokes like the letter 's', rise above the median and sink below the baseline, in order to appear the same height as the x height of other letters

Figure 1.3 Height of letter 's'

It is also necessary to take importance into the counter forms of the letterforms. Counterforms refers to the space between the letterforms.

Simple contrast produce numerous variations

Figure 1.4 Contrast chart

WEEK 7 :

Lecture 7 : Typo_6_Screen&Print

Print type VS Screen Type

Type for Print :- Primarily, Type is designed intended for reading from print. Good type faces for print are Caslon, Garamond, Baskerville. This is because their characteristics which are elegant and intellectual but also highly readable when set in small size. They are mainly versatile, neutral, easy to digest, classic typefaces.

Type for Screen :- Typefaces intended for use for web are modified to enhance the readability on various digital mediums. Such as taller x- height, wider letterforms, more open counters, heavier thin strokes, serifs, reduced stroke contrast, etc. Another adjustment made is more open spacing in typefaces intended for smaller sizes. Typefaces used for screen use are Verdana, Georgia, etc.

Hyperlink :- Word, Phrase, Image that you can click to jump to a new document or a new section within the current document. It is usually blue and underlined by default

Font size for screen :- 16 pixel text on screen is about the same size as text printed in books or magazine (which is around 12 points). This is accounting for reading distance, which is about an arms length.

System fonts/ Web safe font :- Each operating system has its own set of pre-installed font selection which differ from one another a little bit. These fonts are particular to one operating system and may not be available in the others. Web-safe fonts, are a small collection of fonts that overlap in all operating systems. Ex:- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Etc.

Figure 1.5 Screen vs Print type

Pixel differences between devices :- PCs, tablets, phones and TVs are not only different sizes, and the text is also of different proportions due to the different sized pixel. 100 pixels on a laptop will look very different to 100 pixels on a big 60" HDTV

Figure 1.6 Pixel difference between devices

Static vs Motion typography

Static typography :- It has minimal characteristics in expressing words. It is seen in billboards, posters, magazines.

Motion typography :- Temporal media offers typographers opportunities to 'dramatize' type for letterforms to become 'fluid' and 'kinetic' It is seen in Motion graphics

INSTRUCTIONS

Task 2: Typographic Expression & Communication

This Task gives us a body of text which we are to express typographically in a 2-page editorial spread. We are given 3 options of body of text to choose from. From the chosen body of text we are required to make 3 typographic designs, from which one will be finalized.

TASK 2 : TYPOGRAPHIC EXPRESSION AND COMMUNICATION

We are given 3 different bodies of text to choose from one from and we are required to make an 2 page editorial spread. We are not allowed to use images but we can use minor graphical elements if we would like. The Headline can be designed in Adobe illustrator. But the final page layout is to be done in Adobe InDesign. We are supposed to make several iterations of the layout of the same text.

Gathering inspiration

To get ideas on how to design my text formatting layout spread I decided to look for references in both pinterest and google images.

Figure 2.1 Reference for Task 2

I decided to go with the text 'Unite to visualize a better world' as it had less text which would allow me to add more elements into my design. The lead in text also helped me add text variety in my layout.

Sketches

I decided to sketch my ideas to help me further flush out my ideas before working on my layout digitally

Figure 2.2 Sketches for task 2

I decided to work on the designs and the heading first in illustrator before transferring it to InDesign.

Figure 2.3 Working out the layout in Adobe Illustrator

After formatting the layouts in InDesign, I came up with four layouts

Figure 2.4 4 Layouts

FINAL LAYOUT

Margins :- 20mm

Gutter :- 10mm

Head

Font :- Univers LT Std 55 Extended

Body

Font :- Gill Sans Std

Size :- 10 pts

Leading :- 11 pts

Paragraph Spacing :- 11 pts

Characters per line :- 48

Alignment :- Left alignment

Figure 2.5 Final Layout PNG

Figure 2.6 Final Layout PDF

Figure 2.7 Final Layout PNG (With grids)

Figure 2.8 Final Layout PNG (With grids)

FEEDBACK

Week 6

General Feedback : For this week Ms. Vitiyaa gave us instructions on what needs to be completed in class and what needs to be completed this week. We had to update the feedback sheet for week 6. We were also required to finish with our blog and task 1 exercise 2 by this week. She instructed us to print out our text formatting layouts on a page, after which she would evaluate them and approve the best one. She also instructed that we start working on our Task 2 this week.

Specific Feedback : After reviewing through my text formatting layouts, she gave me a few criticisms. She mainly asked me to make sure the title and the text body aligns to the margin width made. She also had asked me to reduce the number of hyphenated words in my body text.

Week 7 :

General Feedback : For this week Ms. Vitiyaa instructed that we submit the 4 composition designs for Task 2 under the Facebook post. She also instructed that we get started with task 3 assignment. We are supposed to watch a video and follow along with the assignment. She also instructed that we update our e-portfolio as well. She also went over the class to review our layouts

Specific Feedback : She tells me to pay more attention to leaving out orphans. She also told me to make minor adjustments to my body text to make them more aligned.

REFLECTIONS

Experience

My tutorial and practical classes are mainly focused on briefing and working on our assignments. We are also given feedback for our work as well. The lecture classes are mainly videos uploaded in Youtube which allows versatility when it comes to attending them. The classes in a way is relaxing as it provides a quiet atmosphere that allows us to work. The presence of the other students as well as the tutorial teachers allows me to ask for feedback and advice whenever necessary

Observation

I observed that the assignments given to me, helped improve my understanding typography and the programs Adobe illustrator and InDesign. I also perceive type in a differently with more appreciation and importance. I observed that I am more receptive to criticism compared to before.

Findings

I find that I struggle with coming up with creative ideas when it comes to my typographic assignments. I find that asking for feedback from my friends helps improve my work. The tutorial videos posted also helps in clarifying the guidelines and rules for the assignment.

For my first further reading I decided to read the book 'The Vignelli Canon' by Massimo Vignelli. It goes through the basics of typographic principles. The book is divided into 2 parts. The first part covers the intangible aspects of designs such as Semantic, syntactics, pragmatics, etc. The second part covers the tangible aspects of design such as paper sizes. grids, rulers, scale, binding, etc.

Figure 3.2 About Semantics

There are 3 aspects of design that is the most important :- Semantic, Syntactic and Pragmatic. Semantic in design refers to the meaning for whatever we design. Syntactic refers to the overall structure, grid, typefaces, the text and headlines, the illustrations, etc. Pragmatic refers to the ability to effectively communicate the information or message through the design.

Figure 3.3 About Discipline

It also goes into detail about other factors such as Discipline, Appropriateness, Ambiguity, Visual Power, Intellectual Elegance, Timelessness, Responsibility, Equity.

Figure 3.4 Typography Referenced

For my second further reading I decided to read 'Typography Referenced'. This books talks about the development of type and how moveable type revolutionized the world.

Figure 3.5 Introduction to the book

This section of the book talks about how the past type play an important influence to typographic design today. Certain features such as the darkness of the block of text, the visual reinforcement of horizontal and vertical axes, the distribution of space between letters, the length of ascenders and descenders, and line spacing become very important factors in type design.

Figure 3.6 The past as inspiration

This page talks about what letterforms, typeforms and fonts is. Letterforms refers to the representation of letters made manually, regardless of tool and the scale. Typeforms refers for the representation of letters intended for mechanical reproduction. Font is a machine specific implementation of a typeface.

Figure 3.7 The language of letters

Search This Blog

Subhana Salim (0375936)