Typography // Task 2 : Editorial Text

31/5/2024 - 14/6/2024 / Week 6 - Week 8

Lo Yi En / 0355192

Typography / Bachelor of Mass Communications

Task 2 : Editorial Text

---

TABLE OF CONTENT

1. Instruction

2. Lecturer

3. Task 2

3. Feedback

4. Reflection

5. Further Reading

---

INSTRUCTION

---

LECTURER

Week 6 - Lecturer

Typography : Typography in Different Medium 

In the past, typography was viewed as living only when it reached paper. No changes were made once a publication was edited, typeset and printed. Today, typography exists not only on paper but on a multitude of screens. Typography is not only controlled by designers as it is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and the screen itself.

fig. 1.1 Typography poster

1. Print Type vs Screen Type 

Type of Print

The type was designed intended for reading from print long before we read from a screen. Designers should ensure the text is smooth, flowing and pleasant to read.

Typefaces for print: Caslon, Garamond, Baskerville, Univers (characteristics: elegant and intellectual, highly readable at small font size)

fig. 1.2 Type of print 1

fig. 1.3 Type of print 2

Type of Screen

Typefaces intended for use on the web are optimized and often modifies to enhance readability and performance on-screen in a variety of digital environments. 

Examples of adjustments: taller x-height or reduced ascenders and descenders, wider letterforms, more open counters heavier thin strokes and serifs, reduced stroke contrast, modified curves and angles, etc.

Another important adjustment: more open spacing (especially for smaller sizes typefaces)

All the adjustments were made to improve character recognition and overall readability in non-print environments (web, e-books, e-readers ad mobile devices).

There are typefaces specifically designed for screens such as Verdana and Georgia due to the insufficiencies in the clarity of typefaces and screen resolution in the past.

Hyperactive Link/ hyperlink: A word, phrase, or image that you can click on to jump to a new document or a new section within the current document. Found in nearly all Web pages. Text 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 you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens.

fig. 1.4 Font size for screen

System Fonts for Screen/Web Safe Fonts: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond.

Pixel Differential Between Devices: The screens used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

fig. 1.5 Pixels differences between devices

2. Statics vs Motion

Statics Typography

Static typography is not limited to minimal characteristics such as bold and italic in expressing words. It can also create movements and motions in a dynamic way.

fig. 1.6 Statics Typography

Motion Typography

Motion typography is introduced around since the 1960s when feature films started using animated opening titles instead of static text. Alfred Hitchcock's North by Northwest (1959) is credited as the first feature film to extensively use kinetic typography.While Matt Woolman and Jeff Bellantoni introduced a comprehensive survey of motion typography in the book Type in Motion: Innovations in Digital Graphics.

Today, motion typography is widely used in various forms of animation and motion graphics. The 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. 

---

TASK 2

1. References 

Before I begin sketching, I take some time to gather information and search for ideas that fit my headline. This helps me get inspired and ensures that my sketches are relevant and well-informed.

fig. 1.1 References

1. My Sketch 

After doing some research, Mr. Max told us to start by playing around with the headline first. I came up with six sketches, each with a different expression of the headline. Mr. Max chose sketches #1, #5, and #6 for the final digital artwork. He also showed me how I can improve them.

fig. 1.2 Sketch 1

fig. 1.3 Sketch 2

2. Headline Expression Exploration

I started trace the three headlines based on the sketches chosen in Adobe Illustration. After consulting Mr.Max, he said all of three design was interesting and creative , except the third one because he said the text was already distort by using wrong ways to stretch the text. He also step by step teach me how to correctly stretching without making the text become distort.

fig. 1.4 Headline 1

fig. 1.5 Headline 2

fig. 1.5 Headline 3

I am trying to change the typeface of the word inside and add a black background to make the whole word more obvious.

fig. 1.6 Headline 3 after change

3. Layout Exploration

After formatting the headline, I started do one layouts to match each headline first. After the week 6 class, Mr.Max said the first and the second layout was nice ,just need to double check with the paragraph spacing and arrangement. For the third one, he said overall is a bit messy ,so he choose first and the second headline to let me proceed more two layout.

fig. 1.7 Layout 1

fig. 1.8 Layout 2

fig. 1.9 Layout 3

 Layout after feedback and Week 6 class

I check every line length to make sure it is between 55-65 characters, then Mr.Max got mentioned before need to prevent have "river", so I adjust the paragraph make it look tidy. I also show hidden characters to see is it my paragraph is spacing without space.

fig. 1.10 Line Length check

fig. 1.11 Paragraph settings

fig. 1.12 Hidden Characters

fig. 1.13 New layout based on feedback

fig. 1.14 New layout blocked out

Final Task 2 : Typographic Exploration and Communication

Mr.Max chose layout #1.3 as my final layout for this task .

fig. 1.15 Final layout

fig. 1.15 Final layout (with grid)

HEAD

Font/s: Futura Std Extra Bold Condensed (BUILD), Light Condensed (a code, on and live by)

Type Size/s: 250 pt (BUILD), 39 pt (a code to, on and live by)

BODY
Font/s: Futura Std Book (body text), Futura Std Heavy Oblique (subtext)

Type Size/s: 9.5 pt (body text), 9.5 pt (subtext)
Leading: 12 pt (body text), 18 pt (subtext)
Paragraph spacing: 11.4 pt (body text)
Characters per-line: 55-65 characters
Alignment: Justify all lines

Margins: 10 mm (top, bottom, left, right)

Columns: 6

Gutter: 5 mm

fig. 1.16 Final layout without grid -PDF

fig. 1.17 Final layout with grid -PDF

---

FEEDBACK

Week 6 General Feedback : I came up with six sketches, each with a different expression of the headline. Specific Feedback : Sketch #1,#5,#6 is more outstanding and more things can be play around so they can be digitalize , Mr.Max also show me how can I improved them. Week 7 General Feedback : Mr.Max like first and second headline digitalize ,seems interesting and creative ;dislike the third one because my headline has been distorted, but he said I just need to modify some part,and adjust layout arrangment . After that, the work is ready to submit. Specific Feedback : For the first and second headline just need to adjust the paragraph alignment , Mr.Max also teach me step by step how to improve third headline.

---

REFLECTION

Experience

I used the knowledge from Task 1 in this assignment as it is a combination of the two exercises from Task 1. I started with the headline sketch and then moved on to the body and layout explorations. For the feedback section, mr.max will use a few students' work to show to all of the students as references to improving, then suggest which part needs improvement, step by step help us with making changes.

Observation

In the feedback session, we exercise our judgment by observing the work of our peers and also increase our creativity. mr.Max's feedback on this task helped me to discover a broader perspective of judgment. mr.Max's advice on my task 1 post helped me a lot in organizing this task.

Findings

Completing this task helped me see how important text is. Words can create images in our minds and make us feel different emotions, just like pictures can. This shows that text is not just for sharing information but also for creating experiences and feelings, making it a powerful tool.

---

FURTHER READING

1. The Anatomy of Type ( by Stephen Coles )

As opposed to Bringhurst’s seminal book above, Stephen Coles’ The Anatomy of Type (published as The Geometry of Type in the UK) is primarily a visual work. It closely examines 100 typefaces, zooming in on the tiny details that make up the designs.

There is a section at the beginning that covers typeface classification. This was my favorite part of the book and what I found to be the most useful. The rest of the book begins to feel tedious after a while as the same design features are called out over and over again (large x-height, open apertures, mild bracketing, etc). But after reading this book, you will be better at identifying and classifying typefaces as these little details seep into your brain. This, in turn, will make you better at communicating about type.

2. Thinking with Type ( by Ellen Lupton )

For anyone who is a visual learner, I would recommend starting with this book rather than Bringhurst’s book mentioned above. The pages are filled with engaging, full-color examples, and it’s a quick, easy read. It’s written for more of a general audience that includes writers and editors, rather than just designers. The focus isn’t on the web as much; it’s just more of an all-around typography primer. I own the first edition (with the green cover) from 2004, but supposedly the second edition features more web-oriented content.

2. Type on screen ( by Ellen Lupton )

Type on Screen is marketed as a follow-up to Lupton’s previous book, Thinking with Type, but I much prefer the original. With this book, Lupton served as the editor, while it was researched and written by a team of students and faculty at Maryland Institute College of Artwhere Lupton teaches. I think this group approach to producing the book is what leads to its disjointed feel. It jumps from topic to topic without much cohesion.

The content does focus entirely on designing for screens, but the examples feel dated already. If you read it right when it was released in 2014, you probably would have found it much more pertinent than it feels in 2024. My recommendation would be to skip this one and stick with Thinking with Type, which feels much more like a classic that will hold up over time.