Typography | Task 2: Typographic Expression & Communication

3/11/2023 - /11/2023 / Week 6 - Week 8

Kerly Ooi / 0358726

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 02 / Typographic Expression & Communication (Text Formatting and Expression)

---

LECTURES

Lecture 07 : Typo_6_Screen & Print

Fig 1.1 Examples of Typography in different medium , Week 6

Fig 1.2 Screen Design for website , Week 6

Example of Screen Design for Website

• Bold
• Dynamic
• Good contrast & balance on the overall layout of the webpage
• Can see how Typography is used on screen as well

Typography : Different Medium

In the past, typography was viewed as "living" only when it reached paper. A publication was completed once it had been edited, typeset, and printed. After then, nothing changed. Good typography and readability were the result of skilled typesetters and designers. 

Typography now exists not only on paper, but also on a variety of screens. Many unknown and variable aspects influence it, including the operating system, system typefaces, the device and screen itself, the viewport, and others. Because typesetting occurs in the browser, our perception of typography today varies depending on how the website is rendered. 

Print Type VS Screen Type

Type of print

• 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.
• They are versatile, easy to digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

This is true if you’re using a good typeface or good type family, type-setting tends to be a breeze quotations as described above. 

Fig 1.3 Example of dated method of typesetting, normally seen in novels  , Week 6

Fig 1.4 Example of Typography in Print , Week 6

Type for Screen

• Typefaces intended for use on the web are optimised and often modified to enhance readability and performance onscreen in a variety of digital environments.

This can includes :

• 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 designs.

Another important adjustment - especially for typefaces intended for smaller sizes — is more open spacing.

All 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.

• Leading and spacing that you use in typography for screen may vary (in terms of the spacing given to it write more open spacing) simply because there is no lumping of text which could be be done on print but not necessarily so when it comes to screen again this is subject to the type of screen and resolution. 

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.

Hyperlinks are found in nearly all Web pages, allowing users to click their way from page to another. Text hyperlinks are normally blue and underlined by default. When you move the cursor over a hyperlink, whether it is text or an image, the arrow should change to a small hand pointing at the link.

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.5 Comparison of Screen and Print  , Week 6

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.

For example, the designer chose an obscure, paid font family for the design of this site. If you don't already have that font installed and it's not attracting from a web-friendly source - more on that later - the font you see will revert to a basic variety like Times New Roman. However, as a visitor, you would not necessarily be aware of this. To you, it would simply appear unappealing. 

Examples of 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. 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 Technical information in terms of screen size  , Week 6

Fig 1.7 Examples on mobile and watches , Week 6

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 Examples of Static VS Motion , Week 6

Fig 1.9 Billboard (something that is tactile visually) , Week 6

Motion Typography

Temporal media offer typographers opportunities to “dramatise” type, for letterforms to become “fluid” and “kinetic”.

• Woolman and Bellantoni, 1999. Film title credits present typographic information over time, often bringing it to life through animation.
• Motion graphics, particularly brand identities of film and TV 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.

Example of the movie Se7en, an old movie came out of the 90s or mid 90s. 

 

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

Name of the movie : Se7en 

The editing and typography in the film were both outstanding.

---

INSTRUCTIONS

    

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

TASK 2 - Typographic Expression and communication (20%)

Research

We were required to develop an editorial layout utilising one of the three titles and text provided for this task. I chose one of the three alternatives available which is  "The role of Bauhaus thought on modern culture" . Rather of sketching on paper, I chose to begin in Illustrator to have a better perspective and understanding of what I was doing. Before I began my work, I researched the Bauhaus art style to spark thoughts and serve as inspiration.

I researched about the types of layout possible and watched this youtube video to deepen the understanding of Bauhaus art style.

https://www.youtube.com/watch?v=Y69wOKg6yp4

Types of layouts :

Some of the ideas I pinned on my Pinterest account

Fig 2.0 Types of layouts , Week 6

Fig 2.1 Research ideas , Week 6

Fig 2.2 Research ideas , Week 6

Fig 2.3 Research ideas , Week 6

Headline designs :

Fig 2.4 Headline expression design process , Week 6

Fig 2.5 Headline expression design process , Week 6

Fig 2.6 Headline expression design process , Week 6

Fig 2.7 Headline expression design process , Week 7

Layouts :

Layout # 1 

Fig 2.8 Digital Layout # 1 , Week 7

Layout # 2

Fig 2.9 Digital Layout # 2 , Week 7

 

Layout # 3

Fig 2.10 Digital Layout # 3 , Week 7

 

After the feedback given by Mr Vinod, I adjusted my 1st layout. 

Final Outcome :

HEAD
Font/s: Gill Sans (Regular)
Type Size/s: 68 pt
Leading: -
Paragraph spacing: -

 
BODY
Font/s: Univers LT Std (55 Roman)
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 55-65
Alignment: Left align

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

Columns: 2
Gutter: 5 mm

Fig 2.11 Final Editorial Spread (JPEG) , Week 7

Fig 2.12  Final Editorial Spread with grid (JPEG) , Week 7

    

Fig 2.13 Final Editorial Spread (PDF) , Week 7

    

Fig 2.14 Final Editorial Spread with grid (PDF) , Week 7

Fig 2.15 Final Editorial Spread (Blocked out) , Week 7

---

FEEDBACK

Week 7

Exercises : 

Specific feedback : The design of the headline is acceptable as I expressed the meaning of Bauhaus using its characteristic. What I need to adjust is the paragraph, although there is a flow for it but it will be better to align those paragraph in a line at the bottom to make good used of the white space. As, the current alignment of the paragraph is a bit awkward. 

General feedback : Do not have long line paragraphs as it will cut off the reading rhythm and (the characters per line will go over the advisable size which is between 55 to 65). Do not use bold for an entire texts, only used for headline or to emphasised. 

---

REFLECTIONS

Experience

This project needs the use of both the skills I learned in Project 1 which are the type expression and Project 2, Task formatting. I began by researching online how famous editorial publications layout their texts and came up with at least three layouts. We were given little instructions on how to structure our text for this project because the key learning experience is for us to try to break down enormous texts and arrange them in such a manner that it catches the reader's attention and allows them to easily digest the meaning behind the piece. 

Observation

With my observation, feedback and sharing session during classes with Mr Vinod and all of the students, I discovered that several of the students have roughly the same vision when it comes to creating the editorial layout. This tells me that coming up with ideas might sometimes be identical to those of others.  I also noticed that while developing the headline word expression, many things may come to mind, but it is crucial to remember not to abuse the expression and make it too tough.

Findings

Throughout Task 2, I discovered that readability/legibility is just as important as design aesthetics - the two must be treated equally in order to achieve successful design. Another thing I learned is the value of thinking beyond the box, which can only be accomplished by study and reading - the more you see, the more dynamic your thoughts and creations will be.

---

FURTHER READING

The book I decided to read this week is Typographic Design : Forms & Communication

Typography on Screen :

As more designers become involved in on-screen design, the importance of maintaining typographic integrity in this environment grows. However, this is complicated by fast changing technology, such as screen sizes, screen resolutions, and new forms of interactivity.

Typographic principles for printed messages apply to on-screen displays as well. However, designing with type on screen presents unique obstacles, and designers who aim to just copy the appearance of the printed page are incorrect. This chapter examines the link of typography to screen environments, focusing on legibility, visual hierarchy, and type organisation on digital pages.

Rendering Type On Screen :

To display an outline letterform saved as a Bézier curve on a computer screen, it must be rasterised, or turned into small dots known as pixels (short for picture components). 

Many modern computer screens, which typically have a bitmap matrix of 72 or 96 pixels per inch, cannot reflect the delicate nuances of a properly designed font due to their low resolution. 

• Details like as stroke weight, delicate curves, and serif detail are reduced to a coarse approximation of the sophisticated features inherent in the original design when the outline of a type is rendered on a screen. 
• This is due to the jagged stair-step quality of curved and diagonal edges represented as pixels on a raster-scan display, known as "the jaggies." 
• The higher the resolution, the more pixels used to make the letterform (Fig. 8-1). A catastrophic loss in legibility can occur when minuscule type appears on-screen with too few pixels to adequately depict the delicate forms of the letter (Fig. 8-2).

Fig 3.0 Letterforms , Week 7

Antialiasing

This method is used to replace pixels' jagged stairstep edges (Fig. 8-3) with the smooth curves inherent in well-designed typefaces. Pixels along the margins of curved or angled letterforms are represented in a tone or colour in between.

These pixels are shown in a blend of the type and background colours, resulting in smoother, more refined letterforms (Fig. 8-4). The disadvantage of antialiased type is that the smaller the text becomes, the fuzzier it appears, which can considerably harm the original design of the typeface on low-pixel-density displays (Fig. 8-5).

Fig 3.1 , Week 7