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
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.
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
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
Comments
Post a Comment