Typography / Task 2 : Typographic Exploration and Communication (Text Formatting and Exploration)

1.10.2021 - 8.10.2021 ( Week 6 - Week 7 )

Michelle Angeline Gunawan / 0349760 / Bachelor of Design in Creative Media
Typography
Task 2 : Typographic Exploration and Communication (Text Formatting and Exploration)

---

LECTURES

Previous lectures are provided in this link : 
https://miichelleangelinee.blogspot.com/2021/08/sample.html

Week 5 :

On week 5, while Mr. Vinod is doing the marking, we were asked to start doing the task 2. I started by watching the Lecture Playlist. The video title is Typo_Task 2_Process Demo. In that video, Mr. Vinod shows us a demonstration about how to do our task 2. 

Figure 1.0 Demonstration Video

From the video, I caught that the required size is 200 mm x 200 mm. In addition we also need to make it a spread. In the video Mr. Vinod made a sketch for the title then digitized it using Adobe Illustrator. Then when finished, use the place function in Adobe Indesign and place the title in the desired place, after that we can enter the body text that has been provided.

Week 6 :

On week 6, the class started with a survey. The survey had only 2 question, the first question is about how are we feeling and the second question is about how to improve the class. After some answer was given, Mr. Vinod read them one by one. It was very interesting to hear what others thinking about this class. And then the class continued by Mr. Vinod gave some of us a feedback and then later one of us took over the session and lead them.

Typography : Letters / Understanding letterforms

• The uppercase letter forms bellow suggest symmetry, but in fact it is not symmetrical. The difference is shown for this Baskerville stroke form where each bracket connecting the serif to the stem has a unique arc.
  
  
  

  Figure 1.1 Baskerville Stroke Form
  
  
• The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. 
  
  
  
  Figure 1.2 Univers Form
  
  
• The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces 一 Helvetica and Univers.

Figure 1.3 Stems Comparison between Helvetica and Univers

Typography : Letters / Maintaining x-height

• The x-height generally describe the size of the lowercase letterforms. Curved strokes, such as in 's', must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.
  
  
  

  Figure 1.4 Curved Strokes
  

Typography : Letters / Forms / Counterform

• When letters are joined to form words, the counterform includes the spaces between them. The latter is particularly and important concept when working with letetrforms like lowercase 'r' that have no counters per se.
  
  
  
  Figure 1.5 Counterform
  
  
• One of the most rewarding way to understand the form and counter of a letter is to examine them in close detail. Its worth noting here that sense of the 'S' holds at each stage of enlargement, while the 'g' tends to loose its identity
  
  
  
  Figure 1.6 Form
  
  
• The basic principles of Graphic Design apply the directly to typography. The simple contrasts produces numerous variations: small+organic/large+machined; small+dark/large light ..
  The following are some examples :
  
  
  
  Figure 1.7 Example of contrast
  
  

Typography : Different Medium

• In the past, typography was viewed as living only when it reached paper. There won't be any changes after a publications was edited, typeset and printed. Good typography and readability were the result of skilled typesetter and designers.
• Today typography exist not only on paper but on a multitude pf 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. 
• Today's typography experience 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 is designer's job to ensure that 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 their characteristic 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.
  
  
  

  Figure 1.8 Examples of Print Type
  
  
• Type for Screen
• Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments.
• Another important adjustment ー especially for the typefaces intended for smaller sizes  ーis more open spacing.
• 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.
• 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 book pretty close ー often only a few inches away ー they are typically set at about 10 points.
• System Fonts for Screen/ Web safe Font
  
• Each device comes with its own pre-installed font selection which is based largely on its operating system.
  
  
  
  Figure 1.9 Comparison between Screen and 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.
• Even within a single device class there will b a lot of variation.
  
  
  
  Figure 1.10 Pixel Differential between Devices
  
  
• Static Vs Motion
  
• Static :
  Static typography has minimal characteristic in expressing words.
  From billboards to posters, magazine to fliers, we encounter all forms of static typography with wide ranging purposes.
  
  
  
  Figure 1.11 Example of Static
  
  
• Motion :
  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.
  
  

---

INSTRUCTIONS

Progress

After I watched the demonstration video, I started to experiment on Adobe Illustrator. I tried to make one design of the title and this is how it turns out.

Figure 2.0 Title First Design

Then I did another experiment and made 3 designs, and this is the designs:

Figure 2.1 Title Second Design

Figure 2.2 Title Third Design

Figure 2.3 Title Fourth Design

After I heard the feedback, I fixed my second title and this is how it came out.

Figure 2.4 New Title

This is how the layout look like before I fix the cross alignment

Figure 2.5 Text Ragging First Layout

And then after I used the text frame option, it became like this

Figure 2.6 Body Text After Using the Text Frame Option, Layout 1

For the line length character, it is around 55 until around 60.

Figure 2.9 Line Length Characters

And for the leading and paragraph spacing I make it 11 pt as I add 2 more pt from the font size.

Figure 2.14 Leading & Paragraph Spacing

These are the cross alignment for all of my layouts.

Figure 2.7 Cross Alignments, Layout 1

Figure 2.10 Cross Alignment 1, Layout 2

Figure 2.11 Cross Alignment 2, Layout 2

Figure 2.12 Cross Alignment 1, Layout 3

Figure 2.13 Cross Alignment 2, Layout 3

Like what Mr. Vinod said, it is better to create these gray division to see if the space between is nice.

Figure 2.15 Gray Division, Layout 2

Figure 2.16 Gray Division, Layout 3

And these are all of my layouts that I made.

Figure 2.17 Layout 1

Figure 2.18 Layout 2

Figure 2.19 Layout 3

• Fonts:
• Headline : Futura Std Bold
• Sub-Headline : Univers LT Std (65 Bold)
• Body Text : Univers LT Std (55 Roman)
• Point size: 
• Sub-Headline : 9 pt
• Body Text : 9 pt
• Leading: 
• Body Text : 11 pt
• Alignment: Align Left
  

Final Outcome

For the final outcome I chose the third layout after some consideration.

Figure 2.20 Editorial Text Final Outcome

Final Outcome

Revised Final Outcome

After the feedbacks were given, I fixed my typesetting. For the tracking, I already used 5 before.

Figure 2.21 Tracking

This the comparison between my previous outcome and the latest one.

Figure 2.22 Comparison between previous and latest outcome

And this is my revised final outcome

Figure 2.23 Revised Final Outcome


Revised Final Outcome

---

FEEDBACKS

Week 6 :

General Feedback : Do not use the same sans serif for the title and the body text to create more contrast.
Specific Feedback : For the second title design, increase the kernings for the word 'follow' to make it look more like a proper square and the square line around it is unnecessary.

Week 7 :
Specific Feedback : 

• Mr. Vinod : Good job on the expression, more work needed in typesetting, have you made your tracking 5? (Preference > units and increaments).
• Mr. Charles : Good Progress! Nicely Done! Keep up this trend.

---

REFLECTIONS

Experience : 
After learning typography for 6 weeks, I learned new things. Mr. Vinod and Mr. Charles gave us really helpful feedbacks, their feedbacks are helping us to improve our design. In my opinion, this lesson is the most serious lesson compared to the others, but this is what makes this lesson interesting. There are many details that must be considered, we must not carelessly apply this and that because in typography there are lots of details and rules.

Observations :
I observed that all the feedback given was quite relevant but not all of them. I observed that progress and details will be very important for us and for those who see our work.

Findings :
I find that when I skip one step in editing editorial text, it messes up the other steps. Apart from that, we will also skip the details. Because in every rule there are details that must be considered such as how many leading or space length, etc.

---

FURTHER READING

https://docs.microsoft.com/en-us/typography/develop/font-variations

I read about  Microsoft OpenType Font Variations, and this is what I got from the website :

• The key to communicating your ideas concisely and effectively is good typography.
• Variable font files support more than typical font examples such as bold and condensed: it can also generate a seamless set of styles between them.
• A variable font contains three main components: Each font file contains a single set of outlines that forms the basis for the typeface family. It also includes a set of design axes, such as
• Weight
• Width
• Optical size
• It includes a set of deltas that describe how the outline shapes, kerning, mark positioning, and metrics change across those axes.
• Variable fonts are supported by current versions of Windows, MacOS, and Android, as well as all major web browsers. Windows currently includes the variable font Bahnschrift, and more will be coming in future releases.
• Microsoft and its collaborators hope that OpenType Font Variations will create a new font platform where developers and designers can create new levels of typographic richness while also providing better solutions for their customers.