Typography Task 2

 Typography: Task 2

Week 6-

Siam Siew Yong 0358399

Bachelor of Design in Creative Media | Taylor’s Design School | Taylor’s University

INSTRUCTION

Lectures

Week 6: Typo_5_Understanding

Understanding Letterforms:

Uppercase letter forms always seem symmetrical but some is not

Example- Baskerville- no symmetrical, Univers- symmetrical

Fig 1.1 Baskerville letterform

Fig 1.2 Univers letterform

Different lowercase letter forms will have slight differences even they seem similar

Fig 1.3 diff of stem between Helvetica & Univers

Maintaining x-height

X-height mainly describe the size of the lowercase letterform

But curved strokes such as 's', must rise above the median/ sink below the baseline

To appear to be the same size as the vertical/horizontal strokes they adjoin

Fig 1.4 example of 'r' and 's' rising above & sinking below

Letters / Form / Counterform

Counterform(counter)- the space described and often contained by the stroke of the form

When letters form words, counterform includes the spaces between them

How well we handle the counters when setting type determines how well words hang together

Fig 1.5 example of  counterform in letterform

Contrast

Simple contrasts produces numerous variations

like small+organic / large+machined ; small+dark /large light

Fig 1.6 example of contrast

Week 7: Typo_6_Screen&Print

Different Mediums

In past, good typography and readability were the result of skilled typesetters and designer, 

and typography was thought to be alive only on paper

But now, typography not only on paper but on a multitude of screens

Since typography takes place in a browser, our experience of typography today changes depending on how the page is rendered

Print type

Good typeface: Caslon, Garamond, Baskerville

Reason: elegant and intellectual, high readable even set at small font size

Fig 1.7 print type in Caslon 

Fig 1.8 print type example

Screen type

The typeface used on web are optimized and modified to improve screen readability and performance in digital environment

eg: Higher x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles

Another important adjustment- typeface with smaller size need more open spacing

To increase character recognition and readability in the non-print environment, which include web/e-books / e-reader / mobile devices

Hyperlink- word, phrase or image that you can click on to jump to new section

Hyperlink are found in web pages and normally blue

Font size for screen- 16-pixel text on screen is roughly the same size as text printed in a book or magazine, this takes into account t reading distance

To read magazines or books at arm's length, it should be set to 10 points or 12 points, which same size as 16 pixels on screens

Task 2 Typographic Exploration & Communication

In this task, we were required to express the content typographically

3 passages were given to be chosen, we will need to choose 1 to format into a 2-page editorial spread (200mm x 200mm per page)

We can use Adobe Illustrator to create headline/ title expression, and the layout must be done by using Adobe InDesign

Inspiration photo

Fig 2.1 example of layout from pinterest

Fig 2.2 example of layout

I have do some research from Pinterest, and I get some inspiration from these figure

I choose [ Unite to visualise a better world] article to create my layout

And I was also inspired by these images to create my headline

Fig 2.3 unite logo

Process

First, I create my headline by using Adobe Illustrator

And Mr Vinod help me to make the 'U' and 'N' stick together as a curved line

Fig 2.4 creating headline 1

Fig 2.5 initial headline

Afterward, I put the artwork into Adobe InDesign to make the layouts with the contents

Fig 2.6 first layout

Fig 2.7 second layout

I had made two layout, and finally I prefer the second layout because I thought it can express the layout readable and creative

Fig 2.8 second layout

I also made slight changes to make this layout more comfortable

I have also create some curve line like dna, can be also express as 'connection', and placed in my layout

Fig 2.9 two curved line

Final work

HEAD

Font/s: Univers LT Std (55 Extra Black)

BODY

Font/s: Univers LT Std

Type Size/s: 9 pt

Leading: 10 pt

Paragraph spacing: 10 pt

Characters per-line: 50

Alignment: left justified

Margins: 12.7mm top, 12.7mm bottom

Columns: 3

Fig 2.10 final editorial layout with grid(jpg)

Fig 2.11 final editorial layout without grid(jpg)

Fig 2.12  final editorial layout with grid (pdf)

Fig 2.13 final editorial layout without grid (pdf)

Feedback

Week 7

General feedback- Use two types of font to make contrast, line length must be the same in whole paragraph Week 6

General feedback- column system must be the same,

must express the meaning of the word in the headline,

meaning of the word need to be focus in the expression, connection between headline and text are important,

column system must be the same,

Specific feedback- I have to express the meaning of the word in the headline, and the meaning of the word need to be focus in the expression

Reflection

Experience

Actually, I feel a bit nervous in this task because I have less time to complete this task than the previous one. Fortunately, this task only requires applying the knowledge learned from the last task, allowing us to demonstrate the layout skills acquired.

Observation

By observing the examples provided by the teacher and the works of other students, I gained inspiration for my own layout work. I chose to use ‘Unite’ to demonstrate my task 2 assignment, as 'Unite' is a concept that can be well expressed and is not limited to traditional layout.

Finding

Typography requires patience and a good sense of aesthetics. I find that I still have some shortcomings in these areas and need to work harder. Additionally, I need to improve my time management skills.

Futher reading

3.1  cover of Typography Reference

The book I chose was Typography Reference 2020

3.2  typography selection

Typographic principle > typography selection

Text Type

Preferred Typefaces for Uninterrupted Reading:

• Caslon (157)
• Bembo (155)
• Garamond (162)
• These typefaces are effective for large areas of book text.

Readability Factors:

• Line length
• Word spacing
• Leading

Choosing a time-tested typeface is a good starting point for book text readability

Display Type

Purpose:

• Quickly catch readers' attention, similar to posters, advertisements, and promotions from the late nineteenth century.
• Assertive typographic size is used to stand out in competitive visual environments.

Role in Printed and Digital Media:

• Headline and subheads must
• Pull in readers
• Delineate levels of information
• Indicate the reader's location within the content
• Maintain reader's attention

Recommend Typefaces for Display:

• Slab Serifs
• Rockwell (190)
• Memphis (188)
• Clarendon (58)

These have sufficient weight and character for headlines or subheads

3.3  example of layout in book

Grids

Purpose:

• Grid is a tool for designers to create compositions with unity and variety

Existing Structures:

• Various grid structures exist by default in design software
• Designers can use these or create custom grid systems using columns or modules

Considerations for grid creation:

• Media
• Format
• Use
• Image size
• Typographic scope
• Word count (or lack thereof)
• Expandability

Example of grid use:

• Books:
• Traditional books benefit from single left- and right-page columns for easy text flow

• Magazines:
• Important to know the gutter (center margin) position and paper creep toward the binding center

• Websites:
• Grids are flexible and dynamic, allowing modules to adapt to different screen sizes (e.g., large monitors vs. small phone screens).