TYPOGRAPHY/TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

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

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

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

Marsya Arisa Binti Mahmud (0359684)

TYPOGRAPHY/TASK 2: TYPOGRAPHIC EXPLORATION AND COMMUNICATION

Comments

Post a Comment