Typography - Task 2

 2023.10.31 - 2023.11.7 / Week 6 - Week 7

Velicia Raquel Dewi Setiawan / 0369188 / Bachelor of Design (Honours) in Creative Media

Typography 

Task 2

1. LECTURE

LECTURE LIST

Lecture 7: Typo_6_Screen& Print

Week 6 – Lecture 7 (pre-recorded) Screen &; Print

Different Medium

Typography was traditionally considered alive only on paper, with no post-editing, typesetting, or printing changes.

Today, typography spans beyond paper to various screens but is still influenced by unpredictable factors like the operating system, system fonts, device, and screen. Most contemporary students, having acquired basic coding skills in the school system, arrive at tertiary levels they are already familiar with computer languages. This familiarity made them to better understand coding and be able to push and explore typography's boundaries within diverse variables.

1. Print Type vs Screen Type

1. Type for Print

The font was originally designed for print reading, well before screen reading exist. The designer's job is to guarantee that the text is smooth, flowing and enjoyable to read.

Fig 1.1.1 Type for print, Week 6(31 October, 2023).

Suitable fonts for print include Caslon, Garamond, Baskerville, and Univers. Because they are: elegant and intellectual, having high readability even at small font sizes.

2. Type for Screen

Typefaces meant for web usage are optimized and modified often to improve readability and on-screen performance across many digital settings. These modifications are taller x-height or reduced ascenders and descenders, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles.

Fig 1.2.1 Type for screen, Week 6(31 October, 2023).

Common screen typefaces include Verdana and Georgia (not recommended for print).

More important adjustment: 

• having more open spacing, especially for smaller-sized fonts
• to enhance readability in non-print contexts such as the web, e-books, e-readers, and mobile devices.

3. Hyperactive Links/Hyperlinks

A hyperlink is a word, phrase, or image that (when clicked) directs you to a different document or section within the current one. Almost all web pages have hyperlinks, usually shown in the default style of being blue and underlined.

4. Font Size for screen

Text that's 16 pixels on a screen is the same size as the text in a book or magazine, considering the distance for reading. Printed text is typically set at around 10 points, but when reading at arm's length, at at least 12 points are needed, which aligns with the size of 16 pixels on most screens. However, 20-24 points are also considered suitable.

Fig 1.4.1 Font size on screen (left) vs print (right), Week 6(31 October, 2023).

5. System Fonts for Screen / Web Safe Fonts

Every device has its default font selection based on its operating system, Windows, macOS, and Google's Android each have their system fonts. Fortunately, this is no longer a problem thanks to Google Fonts.

Web-safe fonts, such as Open Sans, Lato, Arial, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond, are fonts that remains across various operating systems, spanning from Windows to Mac to Google.

6. Pixel Differential between Devices

Text displayed on screens varies in size and proportion across different devices such as PCs, tablets, phones, and TVs. Even with a specific device class, there is still a significant variation.

2. Static vs Motion

1. Static Typography

Static typography has limited characteristics in expressing words, often relying on traditional bold and italic styles, which only provide a fraction of dynamic properties. However, the lack of motion doesn't imply a lack of dynamic, it depends on the designer's skill in managing technology with their tools and limitations.

Fig 2.1.1 Static typography, Week 6(31 October, 2023).

2. Motion Typography

Temporal media provides typographers with chances to 'dramatize' type, allowing letterforms to become 'fluid' and 'kinetic' (Woolman and Bellatoni, 1999). This means bringing film credits to life through animation and using motion graphics on the brand identities of film and television production.

The text is frequently overlaid onto music videos and advertisements, often set in motion with the rhythm of a soundtrack. On-screen typography has evolved to be expressive, helping to establish the tone of associated content or conveying a set of brand values.

Fig 2.2.1 Breaking Bad Intro, Week 6(31 October, 2023).

Fig 2.2.2 Se7en (1995) Title Sequence, Week 6(31 October, 2023).

2. INTRUCTIONS

Task 2

Text Formatting and Expression

Express typographically the content in given link in a 2-page editorial spread (200mm x 200mm per page). Choose 1 from the 3 text options provided. No images are allowed. However, some very minor graphical elements, i.e. line, shade, etc. might be allowed. Execute a good layout, with an expressive and appropriate headline in line with the spirit/message of the text. 

• Ensure you are only using the prescribed 10 typefaces. 
• You may use Adobe Illustrator to create the headline expression should you feel the need to do so. However, the final layout (text formatting and layout) is to be completed in Adobe InDesign.
• No colour may be used in this task. 
• Final submission must be indicated clearly (distinguishable from process work) and uploaded as PDF and JPEG &/ GIF (not PNG)

The typographic expression has been explored in great variety and creatively. The expression conceptually and typographically communicates the meaning of being conveyed. The textual information is extremely well formatted (font size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, widows and orphans). The layout and composition is suitable, impactful, memorable, and engaging.

Marking Criteria

• The typographic expression has been explored in great variety and creatively.
• The expression conceptually and typographically communicates the meaning of being conveyed. 
• The textual information is extremely well formatted (font size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, widows and orphans). 
• The layout and composition is suitable, impactful, memorable, and engaging.

Timeframe

Week 6 – Week 7 (Deadline on Week 8)

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

3.TEXT FORMATTING AND EXPRESSION 

3.1 Research

Attempt #1

Fig 3.1.1 Coding Poster, Week 6(31 October , 2023).

Fig 3.1.2 Book Cover, Week 6(31 October, 2023).

Fig 3.1.3 Magezine Spread, Week 6(31 October, 2023).

Attempt #2 

Not satisfied with the first approved layout, so i did more research.

Fig 3.1.4 Typography Poster, Week 6(1 Nov, 2023).

Fig 3.1.5 Typography Poster, Week 6(1 Nov, 2023).

Fig 3.1.6 Typography Poster, Week 6(1 Nov, 2023).

3.2 Digitazation

Attempt #1

Headline

Fig 3.2.1 Headline Sketch in Illustration, Week 6(31 October, 2023).

Layout

Fig 3.2.1 Layout Sketch in InDesign #1, Week 6(October 31, 2023).

Out of the 6 sketches, the first one got approved. The layout is clear and easy to read, the italics on the word 'build' and 'live' gives good emphasis on the verb of the headline. Was suggested to add 'brackets' on the word 'Code' and the first sentence of each paragraph to be Bold or Italics (Because it has the same opening words). Even though the first layout was the one that approved, there are other feedback for the other layout.

• The third design was suggested to have the word 'Code' to go out of the page, with the 'A' on the top left of the page and the rest of the words to be inside the letter 'E' of the word 'Code'.
• For the fourth design, the first paragraph is too long (making people too lay to read it), was suggested to make it smaller.
• The rest of the layout, the headline had too many different types of fonts (way too much), was suggested to keep with 2 type of fonts only.

Attempt #2

Layout

Fig 3.2.2 Layout Sketch in InDesign #2, Week 6(1 Nov, 2023).

The first design is still the one approved, the second design is good but it's too stylish for the context of the text, same with the last design it's too bold and expressive for the context. Alas were going back to the first design. Even so the lecturer said that the other design is good practice for different context. 

The lecturer said that the last too lines can be highlighted some way (be bold or something).

Final Layout

HEAD

Font/s: Serifa Std 75 Black (Headline), ITC New Baskerville Std Italic (Smaller Headline)

Type Size/s: 160 pt (headline), 50 pt (Smaller Headline)

Leading: 192 pt (headline), 60 pt (Smaller Headline)

Paragraph spacing:-

 

BODY

Font/s: Univers LT Std 55 Roman and 65 Bold (body text)

Type Size/s: 9 pt (body text)

Leading: 12 pt (body text)

Paragraph spacing: 4 mm

Characters per-line: 39 characters

Alignment: Center Aligned and Justify with last line aligned left

 

Margins: 8 mm top, 8 mm left + 8 mm right + 8 mm bottom

Columns: 3

Gutter: 5 mm

Fig 3.2.3 Final Layout Without Grids PDF, Week 7(Nov. 7, 2023).

Fig 3.2.4 Final Layout With Grids PDF, Week 7(Nov. 7, 2023).

Fig 3.2.3 Final Layout With Grids JPEG, Week 7(Nov. 7, 2023).

Fig 3.2.4 Final Layout Without Grids JPEG, Week 7(Nov. 7, 2023).

4. FEEDBACK

Week 6

General feedback: The headline and the body text cam be in the same Page. Be carefull of white spaces when using justify aligned text. The headline need to have clear message.

Specific feedback: Out of the 6 sketches, the first one got approved. Suggested to add 'brackets' on the word 'Code' and the first sentence of each paragraph to be Bold or Italics (Because it has the same opening words).

Week 7

General feedback: Update the feedback sheet incase something happened to the e portfolio blog. Don't change too much the reading direction of the text (only for short sentence).

Specific feedback: The first design is still the one approved, the second design is good but it's too stylish for the context of the text, same with the last design it's too bold and expressive for the context. The lecturer said that the last too lines can be highlighted some way (be bold or something).

5. REFLECTION

5.1 Experience

Throughout these exercises, I get to learn and get used to some more of InDesign tools and it's quite fun messing around. Really enjoyed the exercises, making sure to make design accordingly to the context of the text, kept making diferrent variations to find The Perfect One.

5.2 Observations

This exercise is the combination of the last two exercise, to design the headline font and to design the layout of the body text. I found out(the hard way) that you need to design with the understanding of the context given, else you might make a lot variation of designs that has a different 'vibe' that what you're sepposed to make. Also the lecturer said that design only need 2 or 3 typefaces as too many typefaces in one design will confuse the reader.

Even though I made many many variations, the one approved is still the most simple and straightfoward one(and least time needed to make). Really stressed the "simple is best" solution here.

5.3 Findings

Make sure to understand the context first before designing, and really sometimes the solution is just the most simple ad I can't argue with that. More effort is not equal to the solution.

6. FURTHER READING