Typography / Task 2: Exercise

24/09/2021 - 08/10/2021 (Week 5 - Week 7)

Alicia Teng Yi Ling (0345159) BDCM

Typography

Task 2 / Typographic Exploration & Communication (Text Formatting and Expression)  

---

LECTURES

Lecture 06 - Screen & Print

Different Medium

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 

These are the most common typefaces that is used for print. Because of their characteristic which are elegant 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.

Fig 1.1 Typography Art for Printing

Fig 1.2 Website Screen Design

Print Type

Fig 1.3 Print Type I

Fig 1.4 Print Type II

Screen Type

Typefaces intended for use on the web 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 designs.

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.

Hyperlink / Hyperactive Link

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

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.

‘Web safe’ ones, however, appear across all operating systems. They’re the small collection of fonts that overlap from Windows to Mac to Google

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond

Fig 1.5 Screen VS Print

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 Pixel Difference Between Devices

Fig 1.7 Print Type VS Screen Type

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.

Fig 1.8 Static VS Motion

Motion Typography

Temporal media offer typographers opportunities to “dramatize” 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 the brand identities of film 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.

---

INSTRUCTIONS

---

Task 2: Typographic Exploration and Communication

LAYOUT RESEARCH

Before I started, I decided to look at examples of typography and the four below are the ones that caught my attention and I liked them the most out of all the others I viewed because they looked simple yet dynamic. 

Fig 2.1.1 Research I (28/09/2021)

Fig 2.1.2 Research II (28/09/2021)

Fig 2.1.3 Research III (28/09/2012)

Fig 2.1.4 Research IV (28/09/2021)

CHOSEN TEXT

For this task, I chose the second article as it seemed the most interesting to me and I believed that I could design a clean layout as it has many subheadings (e.g. a designer has...) so I went with this one.

Headline: Be Good, Do Good, Follow The Code.

Fig 2.1.5 Chosen Text (28/09/2021)

SKETCHES 

These are my four layout sketches that were inspired by my four research images above. I want to design something clean and easy to read but it will still have some sort of dynamic element so it will not look too boring.

Fig 2.1.6 Four Layout Sketches (29/09/2021)

Out of all these, I like the second layout so I will be attempting to make it in Adobe InDesign first.

DIGITAL PROGRESSION

Attempt One:

I liked this idea because the positioning of the headline and text seemed to make it flow well and easy to read (it guides the viewers eyes better) and Mr. Vinod agreed. However, I want to improve and change it as the sideways orientation makes it difficult for the audience to read it and also my alignment and spacing can be improved so I will do that. 

Fig 2.1.7 Attempt One at Task (29/09/2021)

This version includes:

• Headline 
• Typeface: Univers LT Std / 73 Black Extended
• Size: 60 pt
• Text Leading: 0 pt
• Body Text 
• Typeface: Univers LT Std / 55 Roman
• Size: 12 pt
• Text Leading: 14.4 pt
• Characters Per Line: 32 - 43
• Alignment: Ragging - Left Alignment

This one has a lot of issues such as the font size being too large, incorrect text leading and characters per line, so I will be fixing that in my future attempts. 

HEADLINE CREATION IN ADOBE ILLUSTRATOR

I decided to make the headline separately in Adobe Illustrator as I wanted it to stand out in comparison to the rest of the heading by highlighting it black and changing the colour to white. This was to emphasise the words, Follow the Code',  so that viewers would know it is an important subject in this article. '

Fig 2.1.8 Making the Headline in Adobe Illustrator (03/10/2021)

 

PROGRESSION - Creating layout in Adobe InDesign

I decided to start off with changing the orientation so viewers could read the text more easily without having to tilt their heads.

Fig 2.1.9 Changing the Orientation (05/10/2021)

Next, I tried adjusting the placement of the paragraphs to get a feel of what looks nice.

Fig 2.1.10 Testing out Text Placement (05/10/2021)

Following this, I decided which text placement I liked best and also made the headline spacing a bit tighter and neater.

Fig 2.1.11 Finalizing Text Placement and Headline Spacing (05/10/2021)

Finally, I kerned the text and added angle brackets for simple visual design but also to show the 'start' (<) and the end (>) of the texts.

Fig 2.1.12 Kerning the text and adding angle brackets (05/10/2021)

Fig 2.1.13 Checking the balance of the layout (05/10/2021)

ALIGNMENT & HIDDEN CHARACTERS

Fig 2.1.14 Alignment to Baseline Grid (05/10/2021)

Fig 2.1.15 Hidden Characters (05/10/2021)

This final version includes:

• Headline 1 (Be Good, Do Good)
• Typeface: Univers LT Std / 73 Black Extended
• Size: 45 pt
• Text Leading: 0 pt
• Headline 2 (Follow the Code)
• Typeface: Univers LT Std / 73 Black Extended
• Size: 62 pt
• Text Leading: 0 pt
• Body Text 
• Typeface: Univers LT Std / 55 Roman
• Size: 8 pt
• Text Leading: 11 pt
• Characters Per Line: 57 - 65
• Alignment: Ragging - Left Alignment

FINAL DESIGN OUTCOME

Fig 2.2.1 Final Design Outcome JPG (07/10/2021)

Fig 2.2.2 Final Design Outcome PDF (07/10/2021)

---

FEEDBACK

Week 06 - 01/10/2021

• General Feedback
• The headline must be bold enough to capture the viewers attention, and also the concept of the headline must properly express the meaning of the article
• Text should be easily readable, with proper line length, appropriate kerning and achieved cross alignment, with no unnecessary hyphenation.
• Sub-headline should be clearly separated from the paragraph lines.
• Make sure that balance is achieved.
• Ensure that all the text throughout the article is an even colour. 

• Specific Feedback
• When I place the words at this orientation (sideways), it makes it difficult for the viewers to read it as they have to tilt their heads. 
• Fix alignment. 
• Point size is too big for the line length (make it smaller). 
• Take away the gap from the second and third paragraphs. 
• The idea is good but not executed well, improve upon this. It has a good flow for the viewers eyes. 
• No reason to have the black highlighted part but personally I like it. 
• Create a transitional headline.

---

REFLECTION

Experience

• To summarize, typographic exploration and communication was interesting as I was able to explore different layouts for articles and I particularly enjoyed conducting visual research on layouts as I am interested in producing clean and easy to read texts. Additionally, I liked exploring how I could place the paragraphs and seeing how that would affect the flow of how viewers read the article. The most difficult part was balancing the overall piece but in the end I managed to do it by equally spacing the paragraphs and testing different positions until I found one I liked. Overall, I liked this assignment and it was very fun to learn about this topic as I have always been interested in architecture magazine text layouts and I wanted to be able to do something like that one day.

Observation

• One thing I observed greatly was how important kerning and cross-alignment is in typography. After doing both of these things, the layout design, overall visual and aesthetic of the design was much cleaner and formatted properly.
• There are many styles in which you can create layouts and they each produce different feelings. For example, in my layout research, the first image looks much more dynamic just by tilting the orientation of the headings and text. Whereas, the second image is much more clean with regular orientated text but the bold contrast between the headings and text makes it equally dynamic and visually interesting to the first one.

Findings 

• I found that creating clean and yet dynamic layouts is much more difficult than I initially thought. It was also tough trying to make and position a bold and attention capturing title that suited the article. 
• Placement of paragraphs and spacing affects rhythm greatly and the flow in which viewers eyes read the text so it is highly important. 
• Balance and white space is a lot more difficult to manage and make use of, but I did my best to design the layout so it would not look imbalanced or too empty or crowded in some places. 

---

FURTHER READING

For this tasks further reading, I looked through two books, 'Typographic Design: Form and Communication', by Rob Carter, Philip B, et al. and 'A Type Primer' by John Cane. I decided to research and read more about different types of column grids and text placement.

 

Typographic Design: Form and Communication: 

Fig 3.1 Typographic Design: Form and Communication (03/10/2021)

Single Column Grids

Fig 3.1.1 Sample of various layouts for single column grids

The manner in which text blocks are placed on the page can greatly affect the overall tone of the communication. These sample layouts suggest plenty of possibilities. It is clear that the different ways in which text blocks, images and margins are organized to define the space change the overall feeling.

The problem is always to consider the text block and margins of the page as a proportional system. Margins function to set the typographic stage; they may be dynamically asymmetrical or slightly symmetrical. Margins also accommodate marginalia - separate typographic parts that support the text.

Multicolumn Grids

Fig 3.1.2 Example of a multicolumn grid

Multicolumn grids possess unique anatomical characteristics. These include: margins that provide boundaries for typographic elements and define the active space of the page; text columns; gutters that separate text columns; and flow lines that create a dominant axis for the alignment of elements from page to page. The baseline grid represents the baselines of the primary text, which run from the top margin to the bottom margin.

Fig 3.1.3 Example of the use of concurrent grids

Grids may consist of primary and secondary divisions of space. For example, the grid used in this book consists of two columns as the dominant structure, with an optional structure of six columns. Concurrent grids not only provide added flexibility, they also enable the designer to layer typographic elements, achieving the illusion of 3D space.

A Type Primer

Fig 3.2 A Type Primer (03/10/2021)

Placing Text on a Page

Fig 3.2.1 Placing text on a page

There is an ideal layout based on the golden section. As shown above, this layout has been considered ideal since the creation of illuminated books in the Middle Ages.

"The rules of this layout are simple:

1

The height of the text field equals to the width of the full page

2

The placement of the text field is determined by diagonals that describe both the page and the field

3

The margins at the gutter of the spread (along the spine of the book) define 1 unit of measure. The margin at the top of the page equals 1.5 units. The margins to the outside of the page equal 2 units. And the margin at the bottom equals 3 units."

Although I am not doing a book layout, it was still interesting to view and read about the ideal 'golden section' and how text is placed based on this ideal. It gave me a basic understanding about centralizing text and how important placement is. 

---

REFERENCES

Fig 1.1 - Fig 1.8: Lecture 06 - Screen & Print

Fig 2.1.1: https://jewettgallery.wordpress.com/applied-arts/2011-2012-workshops/typography/

Fig 2.1.2: https://www.printmag.com/history/black-and-white-a-portfolio-of-40-statements-on-a-single-theme-1969/

Fig 2.1.3: https://www.creatopy.com/blog/cool-banner-fonts/

Fig 2.1.4: https://www.behance.net/gallery/51689801/Cartaz-Tipografico-Bodoni