Typography Task 2: Typographic Exploration and Communication

Nowadays, the using of digital digital media might be everywhere, but it doesn't affect the usage of printer/paper based art. Print has long history in graphic design and even longer history from now on and typography exist in all form.

Fig. 1.2 Typography in website

In the past typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Nothing changed after that. Good typography and readability were the result of skilled typesetters and designer. Today, typography exist not only on paper, but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the page is rendered, because typesetting happens in the browser.

Print Type Vs Screen Type

Type for Print

Primarily, type was 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 are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.

Fig. 1.3 Typography on print

Fig.1.4 Typography for print

Type for Screen

They are versatile, easy-to-digest classic typeface, which has a neutrality and versatile that makes typesetting with it a breeze. Typefaces intended for use on the websites are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a 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 for some design.

Another important adjustment -especially for typefaces intended for smaller sizes- is more open spacing. All of these factors serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.

Hyperactive Link/Hyperlink

A hyperlink is a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. It's mostly found in nearly all web pages. Hyperlinks are normally blue and underlined by default.

Font Size for Screen

16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close -often only a few inches away- they are typically set at about 10 points. If we were to read them at arm's length, we'd want at least 12 points, which is about the same size as 16 pixels on most screens.

System Fonts for Screen/Web Safe Fonts

Each device comes with its own pre-installed font selection. Which is based largely on its operating system. The problem is that each differs a little bit. Windows-based devices might have one group. While MacOS ones pull from another. Then Google's own Android system uses their own as well.

These fonts are the small collection that we can use on bot platforms:

- Open Sans

- Lato

- Arial

- Helvetica

- Times New Roman

- Times

- Courier New

- Courier

- Verdana

- Georgia

- Palatino

- Garamond

Fig. 1.5 Screen and print

Pixel Differential Between Devices

The screens used by our PCs, tablets, phones, TVs are not only different sizes, but the text we see on screen differs in proportion too, because they have different sized pixels. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV. Even within a single device class there will be a lot of variation.

Fig. 1.6 Pixels comparison

Fig. 1.7 Pixel appearance between 2 devices

Static Vs Motion

Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. Whether they are informational, promotional, formal or aspirational pieces of design, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.

Fig. 1.8 Dynamism can be Created in static design

Fig. 1.9 Billboard that is tacticle

Motion Typography

Temporal media offers typographers opportunities to dramatize type for letterforms to become "fluid" and "kinetic" (Woolman and Bellantoni, 1999). Film tittle credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of films and television production companies, increasingly contain animated type.

Type is often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack. On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.

WEEK 7

We were brief to continue to the next assignment and completing our e-portfolio.

🔝

INSTRUCTION

EXERCISES

Task 2: Editorial Layout

Rough Layout Sketches

Fig.1.0 Rough sketches
(10/11/2023)

Fig.1.2 Layouts
(10/11/2023)

FINAL OUTCOME

After 5 trials, I came up with new layout that I have made.

Fig. 1.3 Final Outcome

(10/11/2023)

Fig. 1.4 Final Outcome With Grids

(10/11/2023)

HEAD

Font/s: Univers LT Std / Futura Std
Type Size/s:

- Univers LT Std: 27 pt

- Futura Std: 89 pt ; 25 pt ; 72 pt ; 32 pt ; 57 pt ; 65 pt ; 14 pt

Leading: 86 pt

BODY

Font: Gill Sans MT
Type Size: 10 pt
Leading: 12 pt
Paragraph spacing: 4,233 mm
Characters per-line: 57
Alignment: Justified left

Margins: 10mm Top, 10mm Left , 10mm Right , 10mm Bottom
Columns: 2
Gutter: 5 mm

Fig. 1.5 Final Outcome

(10/11/2023)

Fig. 1.6 Final Outcome With Grids

(10/11/2023)

🔝

FEEDBACK

Week 6

No feedback given (There was no class)

Week 7 - Formatting Layout

General Feedback

- Do not put unnecessary elements

- Avoid high contrast text in body text

Personal Feedback

- The title arrangement is not readable

🔝

REFLECTION

Experience

In this task, I learned about text placement, how to use InDesign, and how to come up with layout. It is pretty hard because I was clueless about everything about this lecture, but by the time I enjoyed it. I also able to increase my creative thinking skill and able to operate InDesign.

Observation

So far, this chapter is more detailed than other lecture in my opinion. Because it work more with text, we have to understand how to placed the text so it can be read easily and not confusing the readers.

Findings

We cannot only focus on one style of layouts, research and practice are important. Read books, magazines, and news paper also important, because we have to experience the reading itself so we can produce good layouts.

🔝

FURTHER READING

Fig. 1.1 Cover book

Reference:

Simon Garfield (2010)

Just My Type

First of all, I like this book. The design caught my attention and it is fun to read. I enjoyed reading the first chapter, somehow this book gave me the feel of reading a comedy novel. The first chapter tells about Comic Sans the controversial font and how it is exist in this world. I highlighted some parts that I think is important and funny at the same time.

Fig. 1.2 Microsoft Bob dog - Page 19

It tells how Vincent Connare design Comic Sans for Microsoft Bob, because the company put Times New Roman as the default font for Microsoft Bob, but Connare think that Times New Roman is not suitable for Microsoft Bob's appearance. He was inspired by font that already existed in comic books.

Fig. 1.2 Page 20

Fig. 1.3 Comic Sans - Page 22

When Connare finished designing Comic Sans and hand it to the people who worked Microsoft Bob, the design was not able to be put in the program, because they have set everything in Times New Roman. Afterwards, Comic Sans was aplied in another Microsoft program named 'Microsoft Movie Maker'. Not only that, Comic Sans went global and people starts use it for daily need, such as t-shirt, platform, even restaurant book menu. But in the new century people are enough with this font and started to against it. We know that nothing last forever.

Fig. 1.4 Page 24

Fig. 1.5 Page 29

After reading this chapter, i feel like someone just poured me cold water. I realized that reading this kind of book is very important, before this I know nothing about Comic Sans, the only thing I ever thought about it was only 'I saw this on my phone when I was 9'. I learned that everything we see in our life, it is not just a thing, but there's always a story behind it.

🔝

QUICK LINKS

TASK 1: Type Expression & Text Formatting

TASK 3: Type Design & Communication

Typography: Final Compilation & Reflection

HOME

🔝