Labels

TYPOGRAPHY / TASK 2 : Typographic Exploration and Communication

 


24.9.2021 - 08.10.2021 (Week 5 - Week 8) 

Muhammad Azka Farezi Septenal / 0351345 / Bachelor of Design (hons) in Cretive Media 
Typography 
Task 2 / Typographic Exploration and Communication


JUMP LINK :

Lecture :

LECTURES

Week 5 : Lecture 5

Typography : Letters / Understanding letterforms


  • The uppercase letter forms bellow suggest symmetry, but in fact it is not symmetrical. It is easy to see the two different stroke weights of the Baskerville stroke form (below); more noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Figure 5.1 Baskerville

  • 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. Both Baskerville (previous) and Univers (below) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Figure 5.2 Univers

  • The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans-serif typefaces -- Helvetica and Univers. A comparison of how the stems of  the letterforms finish and how the bowls meet the stem quickly reveals the palpable difference in character between the two.

Figure 5.3 Helvetica and Univers (comparison)


Typography : Letters / Maintaining x - height

  • X - height generally describe the size of the lowercase letterforms. However, you should keep in mind that 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 5.4 Median and Baseline

Typography : Letters / Forms / Counterform

  • Counter or Counterform -- the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counter form includes the space between them

Figure 5.5 Counterform


Typography : Letters / Contrast

  • The basic principles of Graphic Design apply the directly to typography. The following are some example of contrast -- the most powerful dynamic design -- as applied to type, based on a formate devised by Rudi Ruegg.

Figure 5.6 Contrast

Figure 5.7 contrast


Week 6 : Lecture 6
Typography in Different Medium :

  • 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 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. 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 form print long before we read from screen. It is designer's job to ensure that text is Smoot, 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, easy0to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it breeze.

Figure 6.1 Example for 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. This can include a taller x-height (or reduced ascender 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 the 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. Hyperlinks are found in nearly all web pages, allowing users to click their way from page to another. Text 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 book 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 as 16 pixels on most screen.

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

Figure 6.2 The difference 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. 100 pixels on a laptop is very different from 100 pixels on a big 60" HDTV.

Figure 6.3 

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

Figure 6.4 Example for Dynamic in static

Figure 6.5 Example for Dynamic in static

  • Temporal media offer typography opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic" (Woolman and Bellatoni, 1999). Film title credits present typographic information overtime, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

INSTRUCTIONS



EXERCISES :


TASK 2 : TEXT FORMATTING AND EXPRESSION


QUICK LINK :





Mr Vinod told us to use Adobe Illustrator and Adobe Indesign respectively and gave us several arrangement before starting our layout. And here are some of the rules or arrangement :

- Create 2 pages (300x300 mm)
- No image or color
- You can use minor graphical element on your design
- Final result in JPEG


  • SKETCHES :

Figure 2.1 Sketch #1 (28/09/21)




For this task, Mr Vinod assigned us to create various composition layout using Adobe Illustrator and Adobe InDesign (final result) to finish our task. He also demonstrated us through his video from YouTube in order to guide students accomplish their design layout/contexture.

I tried to create several sketches and composition for the word of "Bauhaus". I made 3 different composition by using my iPad. I chose Ibis paint to draw my sketches before I convert it to adobe inDesign as well as adobe Illustrator.



Figure 2.4 Variation for "Bauhaus", week 5 (28/09/21)



Typeface : Univers Lt Std 67 Bold Condensed

Subsequently, I made and revolved several type expression using Adobe Illustrator as instructed, I explored several elements by using pathfinder and pen tool to find suitable type expression for the given text (Facebook).


Figure 2.5 


  • Reference and Inspiration :

Figure 2.6 Reference from Pinterest #1 (28/09/21)

Relying from Pinterest (click here to get the link), I found this picture interesting because of its type expression, I love how the type expression in this picture looked like it's moving. So I decided to  apply several elements from this image to give the sense of movement into my type expression (font) . It is quite hard for me to a

Figure 2.7 Reference from Pinterest #2 (28/09/21)


For the last type expression (figure 2.5) I took this picture from Pinterest (click here for the link) again to be my reference by cutting half of the letter to create another elements (interconnected elements) to fill the blank/gap from the chopped word.


  • PROGRESSION :

Figure 2.8 Hidden Characters and Alignment (28/09/21)

Figure 2.9 Hidden Characters and Alignment (28/09/21)


  • First Layout (Before Feedback) :
Figure 2.10 First Layout #1 (29/09/21)



Figure 2.11 First Layout #2 (29/09/21)



Figure 2.12 First Layout #3 (29/09/21)




Figure 2.12 First Layout #4 (29/09/21)





Figure 2.13 First Layout #5 (29/09/21)




Figure 2.14 First Layout #6 (29/09/21)

    • BLOCKED OUT VERSION :
I also made the blocked version like Mr Vinod told us to see the balance and symmetrical of each texts, this also helped me to change and reposition some of the text that I thought was not balance enough.



Figure 2. Blocked Out Layout (29/09/21)



  • LISTED LAYOUT (WEEK 6)
Figure 2.15 Layout #1 (29/09/21)


  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Bold Oblique)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)


Figure 2.16 Layout #2 (29/09/21)


  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Bold Oblique)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)
Figure 2.17 Layout #3 (29/09/21)


  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Extra Black)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)



Figure 2.18 Layout #4 (29/09/21)


  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Black)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)
Figure 2.19 Layout #5 (29/09/21)

  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Black)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 12pt (lead in text)
  • Leading : 12pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 12pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)


Figure 2.20 Layout #6 (29/09/21)

  • Fonts : Univers Lt Std (Bold Condensed, Light, Condensed Oblique, Black)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 12pt (lead in text)
  • Leading : 12pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 12pt (body text), 13pt (lead in text), 12pt (sub text)
  • Line Length : 55pt (body text)





  • REVISED LAYOUT (WEEK 7)
Here are some of my new layouts based from the given feedbacks from Mr Vinod as well as my Friends from last week class.



Figure 2.21 Revised Layout #7 (29/09/21)



Figure 2.22 Revised Layout #8 (29/09/21)



Figure 2.23 Revised Layout #9 (29/09/21)




Figure 2.24 Revised Layout #10 (29/09/21)




Figure 2.25 Revised Layout #11 (29/09/21)



  • BLOCKED OUT VERSION (REVISED)
To help me find the balance and symmetry from each elements and texts, I decided to follow Mr Vinod's instruction to make this block out version. It does helped me to find the asymmetrical texts and make it easier for me to change or re arrange its composition



Figure 2.26 Blocked Out Layout (29/09/21)


  • LISTED LAYOUT (REVISED) 



Figure 2.27 Layout #7


  • Fonts : Univers Lt Std (Light Condensed, Light, Bold Oblique, Condensed Oblique)
  • Point Sizes : 10pt (given Text), 8pt (sub text), 12pt (lead in text)
  • Leading : 12pt (text), 14 (lead In text), 10 (sub text)
  • Paragraph Spacing : 12pt (body text), 14pt (lead in text), 10pt (sub text)
  • Line Length : 47pt (body text)


Figure 2.28 Layout #8 

  • Fonts : Univers Lt Std (Light Condensed, Light, Black ,Condensed Oblique)
  • Point Sizes : 10pt (given Text), 8pt (sub text), 10pt (lead in text)
  • Leading : 12pt (text), 12 (lead In text), 10 (sub text)
  • Paragraph Spacing : 12pt (body text), 12pt (lead in text), 10pt (sub text)
  • Line Length : 54pt (body text)
Figure 2.29 Layout #9

  • Fonts : Univers Lt Std (Light Condensed, Roman, Black ,Roman)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 10pt (lead in text)
  • Leading : 12pt (text), 12 (lead In text), 10 (sub text)
  • Paragraph Spacing : 12pt (body text), 12pt (lead in text), 10pt (sub text)
  • Line Length : 55pt (body text)


Figure 2.30 Layout #10


  • Fonts : Univers Lt Std (Light Condensed, Roman, Bold Oblique ,Roman)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 10pt (sub text)
  • Line Length : 55pt (body text)


Figure 2.31 Layout #11


  • Fonts : Univers Lt Std (Light Condensed, Extra Black,Roman)
  • Point Sizes : 9pt (given Text), 8pt (sub text), 11pt (lead in text)
  • Leading : 11pt (text), 13 (lead In text), 10 (sub text)
  • Paragraph Spacing : 11pt (body text), 13pt (lead in text), 10pt (sub text)
  • Line Length : 55pt (body text)



ALL LAYOUTS :

Figure 2.32 Progress Layout (29/09/21)




FINAL RESULT (TASK 2) : TYPOGRAPHIC EXPLORATION AND COMMUNICATION


Figure 2.33 Final Outcome - JPEG (29/09/21)


Figure 2.33 Final Outcome - PDF (29/09/21)

FEEDBACK :

Week 6 : 

  • General Feedback :
    • Mr Vinod gave some of the students very clear feedback in order to let the students improve their work by themselves. He also told me that my composition looked interesting.

  • Specific Feedback :

    • Mr Vinod and also some students gave me feedbacks about my first composition (Figure 2.17), they said the layout and composition looked nice, but several things need to be improved and adjusted, for instance a huge gap/spaces within certain words, they also reminded me to be more careful about the readability of my title. Lastly, Mr Vinod told me to adjust the cross alignment for my last layout (Figure 2.20)



      REFLECTION :

      • Experience :

        • Throughout this task and exercise, I learned so many things from both Mr Vinod and Mr Charles. The class was great and our lecturer also gave us very understandable lectures and feedbacks. We learned about typographic exploration and communication that I found valuable for us to help us improve our design skill to be a great designer later. We also learned so many aspects related to text formatting that I found it a little bit complex yet undoubtedly valuable for us.

      • Observation :

        • I observed that adobe indesign was a powerful website or application to create a great design (especially for typography), we can even adjust the even little thing of details such as spacing between letter or even to change the kerning and text leading that other application can't do.

      • Finding :

        • I found that typography is not as simple as I saw it at first, there are so many rules and complex elements to create a great or decent typography or design. Throughout this exercise, I found that I need to expert and learn more about typography such as kerning and text leading by using Adobe Indesign.

      FURTHER


      Figure 2.39 Typographic Design : Form and Communication


      Reference :

      Rob Carter, Philip B. Meggs, Ben Day, Sandra Maxa, Mark Sanders

      Typographic Design : Form and Communication


      A grid is a skeletal framework used by designers to organize information within a spatial field. It is a system characterized by the dualities of freedom and constraint, simplicity and complexity. It provides a strategy for composing text and other visual information in two- and three-dimensional space, including those of printed materials, film, computer screens, built environments, and typographic installations. 


      Grid systems aid designers in making information clear and optimally accessible—highly desirable traits in a world increasingly inundated by visual noise. When used effectively, typographic grids provide form and space with proportional harmony and aesthetic beauty. The final result is clearer and more accessible communication.





      Figure 2.34 I.D.E.A.S Computer Typography Basics (2003)


      Reference :

      David Creamer 2003 : I.D.E.A.S Computer Typography Basics


      By reading this book, I learned that fonts come in many designs. Some of these differences are subtle, while others stand out like the proverbial "sore thumb." Many references subdivide type into only two major categories: serif and sans serif.  However, these simplified categories are not adequate for the great variety of fonts that one might encounter on today's computer. This report will use these expanded categories to clarify the difference :

      • SERIF :
      Figure 2.35 Serif



      Serif fonts are the most common text or "body" copy font. They can work nicely for headline fonts, as well. "Serifs" are the little feet or arm that hang off the end of the letter strokes, and typically add a thick/thin look to the letter.

      Serif fonts are considered the easiest fonts to read and come in three sub categories :

        • Oldstyle
        • Modern
        • Square Serif


      • SANS SERIF

      Figure 2.36 Sans Serif



      As the name implies, Sans Serifs fonts are "without serifs" and usually have an overall even stroke weight, which creates little contrast for the letters. Sans Serif fonts can evoke a more modern look for a report, but can be harder to read than serif fonts. 




      • DISPLAY 
      Display and Decorative fonts are designed to be used as attention - getting headline fonts, They should rarely, if ever, be used as body copy fonts.


      • SCRIPT 
      Script fonts are designed to mimic handwriting, therefore, the letters are designed to touch one another. These fonts may be the more traditional type used for formal invitations. Script fonts should never be used In all capitals.


      • TEXT
      Based on the hand-down letters made by early monks for religious books, Text fonts have an "Old-World" feel to them. They are mostly used for certificates, diplomas, and invitations. As wish Script fonts, they should not be used in all capital letters.


      • MONO - SPACED
      Figure 2.37 Mono Spaced


      Most fonts are proportionally spaced; that is, smaller characters take up less space than larger ones. For example, the letter "I: is not as wide as the letter "M". In contrast, mono-spaced fonts, which are usually typewriter-style fonts, take up the same amount of space regardless of the actual letter.


      • DINGBATS 
      Figure 2.38 Dingbats








      Labels:

      Comments

      Post a Comment

      Popular Posts