TYPOGRAPHY/TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

-
03/11/2023 - 10/11/2023 / Week 6 - Week 7
Marsya Arisa Binti Mahmud / 0359684
Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 2: Typographic Exploration and Communication
Table of Contents
LECTURES

Lectures from Week 1 - Week 5 completed in Task 1: Exercise 1 & 2

Week 6 - 03/11/2023
Typography in Different Medium

1. Print Type Vs Screen Type

Type for Print
Designed intended for reading from print long before we read from screen. It's the designer's job to ensure that the text is smooth, flowing and pleasant to read

A good typeface for print: Caslon, Garamond, Baskerville (Highly readable when set at small font size and also elegant)

Easy to digest classic typeface, has neutrality and versality that makes typesetting with it a breeze

Figure 1.1: Example of Print Type

Type for Screen
Intended for use on the web are optimized and modified to enhance readability and performance onscreen. Includes a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles

An important adjustment for typefaces intended for smaller sizes is more open spacing. They serve to improve character recognition and overall readability

Hyperactive Link
A word, phrase, image that you can click on to jump to a new document or section, found in nearly all Web pages

Font Size for Screen
16-pixel text on a screen is about the same size as text printed in a book or magazine. Typically set at about 10 points. If you were to read at arm's length, you'd want at least 12 points, which is similar as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts
Each device comes with its pre-installed font selection, based on its operating system. The problem is that each differs a bit. 

Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Pixel Differential Between Devices

Figure 1.2: Pixel Differences

2. Static Vs Motion

Motion Typography
Temporal media offer typographers opportunities to ''dramatize'' type, letterforms become ''fluid'' and ''kinetic''. It gives brand identities of film and television production

Often overlaid onto music videos and ads, establishes tone of content or express a set of brand values

INSTRUCTIONS

Text Formatting and Expressing
Express the contents given typographically. Choose 1 out of 3 text options provided. 
  • 200mm x 200mm
  • No images allowed
  • Graphic elements (line, shade, etc) might be allowed
  • Only use the 10 typefaces provided
<iframe src="https://drive.google.com/file/d/1owRseXP-FxTMMuXai7oDSyhPShYw9s0W/preview" width="640" height="480" allow="autoplay"></iframe>

PROCESS WORK

1. Header
I chose to typographically express  'A CODE TO BULD ON AND LIVE BY'. To explore my ideas, I came up with 3 options to the text provided to showcase during tutorial. 

Figure 1.1: Logo Design Draft

For the first design, I used Gill Sans Regular. I wanted 'A Code To Live Build On And' look like they were blocks, emphasising the fact that they are 'building on' top of each other. I highlighted the text 'Live By' in black and changed the font colour to white to make it look like it was buried underground. 

For the second design, I used Bodoni 72 Book. I added chevrons to 'Code' because it is often used in programming/coding.  The word 'build' is stacked onto each other repeatedly to give an emphasis on the word build. I also added black highlights to make it look more like a building.

For the third design, I used Futura Bold and Futura Condensed ExtraBold. I made the word 'Build' stack on top of 'On' and reduced the font size, to look like each letter were depending on one another to stand, like a building. I made the text 'Live By' vertical to add texture to the text. 

1.1 Text
In Adobe InDesign, I added the rest of the texts with the title. Some had 2 columns in a page and some had 3. I tried out different layouts to see which one works best. I had the intent of placing the title and the texts in different columns. Eventually, I went with Layout 3. 

Figure 1.2: Text Layout Draft

Figure 1.3: Layout 3

After, showing it to Mr. Vinod he had given me feedback for Week 7 and there were certain things I needed to change such as the line length, the point size, and that I could pull off the expression better if I changed the size of the letters for 'build' from descending to ascending. I then realised upon my classmates examples that I should take up most of the page for the headline and move it to the side instead of having it in the middle of the texts. I intend to make the texts look like a bunch of buildings. The next thing I did was kern the texts to ensure that there was no ragging or rivers of texts. 

Figure 1.4: Layout Adjustment

Before Kerning

Figure 1.5: Texts without Kerning
After Kerning

Figure 1.6: Texts with Kerning

1.3 Final Outcome
  • Font: Univers LT Std 55 Roman
  • Type Size: 8 pt
  • Leading: 10 pt
  • Paragraph spacing: 10 pt
  • Characters per-line: 44
  • Alignment: Justified
  • Margins: 10 mm top / 10 mm left / 10 mm right / 10 mm bottom
  • Columns: 3
  • Gutter: 5 mm

Figure 1.7: A Code to Build On and Live By without Gridlines

Figure 1.8: A Code to Build On and Live By with Gridlines

<iframe src="https://drive.google.com/file/d/1pewfi6CYfRiWoO0dqFSYWmw2LjoNh39b/preview" width="640" height="480" allow="autoplay"></iframe>

<iframe src="https://drive.google.com/file/d/1Yb5H5hVLH7ij-IoN-ZHXqOxig133ktqw/preview" width="640" height="480" allow="autoplay"></iframe>

FEEDBACK

Week 7 - 10/11/2023

General Feedback: Never use full justified when formatting. There should be no distortion in the title, make it even especially in terms of colour and try not to use too many different fonts. Emphasise the word you want to express more.
Specific Feedback: Line length and point size is wrong. The text and colour is uneven causing rivers of texts and the idea in the expression is not pulled off well. Maybe invert the size from big - small to small - big.

REFLECTION

Experience
Typographic Exploration and Communication is definitely more challenging for me compared to Task 1 especially when it comes to the texts. I spent most of my time looking at the texts to ensure there was no ragging or rivers. This project taught me the rules and requirements of text layouts. For instance, paragraph spacing and leading is determined by the point size and the amount of words in a line makes a drastic difference. It has increased my knowledge involving the thought process of editors in decision making.  

Observation
The layout of the texts should be thought out through the hierarchy of text because it implies what a reader pays attention to first. Left justified is easier to kern compared to justified, but in this case I chose to do justified because I wanted to practice my skills on kerning. I find that using justified requires more attention to the texts. Mr. Vinod also taught me to close one eye to make observing easier.

Finding
The font size requires having 55-65 words in a line and leading should be increased by 2 based on the font size. The paragraph spacing is also determined by the leading because it has to be the same. When it comes to tracking the texts, use 3+ or 3- at most. Maintaining cross alignment is also very important for text layouts. Using up space within the margin helps keep the texts organised and gives more space for editors to work with, it reduces the clutter. 

FURTHER READING

Computer Typography Basics by I.D.E.A.S
Figure 1.1: Computer Typography Basics

Leading
Factors to consider:
  • Font used - some fonts require more line spacing to keep ascenders and descenders from touching
  • Line length - longer lines require more leading
  • Type size - the larger the type size, more line spacing is required
Line Spacing for Headlines and Subheads
Normally, auto leading should be avoided because it can make larger heads look too spread out. These are the methods for all line spacing.


1.2: Comparison of percentage and absolute line spacing

Paragraph Spacing
A more elegant way to space out paragraphs than simply doubling spacing returns because the settings can be adjusted globally or by fractional line spaces. 

1.3: Examples of different settings of paragraph spacing

Paragraph Spacing for Subheads
Subheads should be set in multiples of line spacing. However, where the space is applied is up to the designer. 
  • Ex: Subhead is set at 14/4 with paragraph spacing at 10 pts above and 4 pts below. Total would still be 14
  • Can cause problems with locking to a baseline grid
  • Paragraph spacing is also used when applying paragraph rules
Figure 1.4: Examples of paragraph spacing

Example 1: 14 pts
Example 2: 10 pts above and 4 pts below

Popular posts from this blog

ADVANCED TYPOGRAPHY/TASK 2: KEY ARTWORK & COLLATERAL

-
Image
13/05/2024 - 03/06/2024  /  Week 4 - Week 7 Marsya Arisa Binti Mahmud / 0359684 Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 2: Key Artwork & Collateral LECTURES Lectures from Week 1 - Week 4 are documented in Task 1 WEEK 5 - PERCEPTION AND ORGANISATION (20/05/24) Perception Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organization . Contrast There are several methods in typography to create contrast: Contrast in Size: Provides a point to which the reader's attention is drawn. Bigger letters are seen first before smaller letters, normally the heading is bigger than the body text. Contrast in Structure: Structure means different letterforms of different kinds of typefaces. (sans serif and traditional serif, italic and blackletter) Contrast in Texture: By adding contrast of size, weight, form and structure. It gives contrast of texture to the page.  Cont...
Read more

ADVANCED TYPOGRAPHY/TASK 1: EXERCISE 1 & 2

-
Image
22/04/2024 - 13/05/2024  /  Week 1 - Week 4 Marsya Arisa Binti Mahmud / 0359684 Advanced Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1: Exercise 1 & 2 Table of Contents Lectures Typographic Systems: Exercise 1 Type & Play: Exercise 2 Feedback Reflection Further Reading LECTURES WEEK 1 - TYPOGRAPHIC SYSTEMS (22/04/24) There are 8 major variations with an infinite number of permutations: Axial Radial Dilational Random Grid Modular Transitional Bilateral Axial All elements are organised to the left or right of a single axis (axis can be bent)  Figure 1.1: Example of Axial (source: type365) Radial All elements are extended from a point of focus Dilational All elements expand from a central point in a circular fashion Random Elements appear to have no specific pattern or relationship Grid A system of vertical and horizontal divisions Figure 1.2: Examples of Radial, Dilational, Random and Grid Modular A series of non-objective el...
Read more

VIDEO & SOUND PRODUCTION/PROJECT 1: EXERCISE 1 & 2

-
Image
22/04/2024 - 22/07/2024   /  Week 2 - Week 6 Marsya Arisa Binti Mahmud / 0359684 Video & Sound Production / Bachelor of Design (Hons) in Creative Media / Taylor's University Project 1: Exercise 1 & 2 INSTRUCTIONS Sound for Visual Choose or record sound clips to be used to create sound effects to bring a video clip to life. The clips will be provided. Identify the visual components for the video clip that needs sound. Voice Editing: Audio Effects - Pitch Shifter - Semi Tones Volume: Dialogue (between -6dB & -12dB), Ambience (below -20dB) <iframe src="https://drive.google.com/file/d/1KhRUdfMzssK5DMkuq4BZAI9Cot0Dzw-N/preview" width="640" height="480" allow="autoplay"></iframe> PROCESS WORK For this exercise, we were instructed to create sound effects for the clip provided . We were also given the script to make it easier to break down each scene. Before beginning the process on Adobe Premiere, we had to properly plan our ...
Read more