TYPOGRAPHY / TASK 3A : Type Design and Communication

  


08.10.2021 - 28.10.2021 (Week 7 - Week 10) 

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



JUMP LINK :

Lecture :


LECTURES


Week 7 : Lecture 7


Typography : Task 3 briefing and demo

  • Research and find any reference from the internet about "Type Design"
  • Find a decent typeface and try to deconstruct it
  • Learn and identify deconstructed font design
  • Produce 5 sketches or more (The more sketches created are nice)



Figure 7.1 Deconstruct "R" 


Subsequently, we will also need to deconstruct our font reference in order to figure out how to produce a neat and acceptable font design. We will also need to be aware of several notes from the lecturer before start working on our task.

  • Follow the stated ascender height
  • Capital height
  • Median or mean line
  • Baseline
  • Descender line






INSTRUCTIONS





EXERCISES :


TASK 3A : TYPE DESIGN AND COMMUNICATION 



For this particular task, students were assigned to learn and to produce their own typefaces by following the instruction from the given videos. To begin this project, all students need to research about this topic (Type Design and Communication) as well as to sketch, identify, and deconstruct the reference.

Here are the letters that we will design : a i m e p y t g d o b ! , .



  • RESEARCH  





Figure 2.1 Font Space


Font Space : 

The majority of my final designs inspired from this website, Millions of references can be found in here. You can configure and determine so many style reference from this website and I would say this font browser does helped me a lot.






Figure 2.2 My Fonts


My Fonts :

Another prodigious website that I've discovered from the internet was My Fonts, innumerable breath taking fonts can be found I this particular website, the preponderance of font designs in here are classical and old school (definitely what I was looking for). I would certainly comeback here to explore another inspos from here.




  • SKETCHES AND IDEA EXPLORATION :



Figure 2.3 Sketch #1 and #2 (22/10/21)


Figure 2.4 Sketch #3 and #4 (22/10/21)


I managed to construct four different sketches before finalize it using Adobe Illustrator. I chose to determine futuristic concept into this project and generate four different styles into my preliminary drawings. Every initial designs has their own style, thickness, spaces, and even sharpness to give the audience different sensation and experience while looking at my designs.




  • IDENTIFY AND DECONSTRUCT THE REFERENCE :


Figure 2.5 Deconstructed letter "E" - Futura Regular (22/10/21)


Figure 2.6 Deconstructed letter "M" - Futura Regular (22/10/21)


Figure 2.7 Deconstructed letter "M" - Futura Regular (22/10/21)


By deconstructing these letters, I've discovered many ways to produce our own fonts and designs, These chosen deconstructed letters are my reference to learn and construct another form of letters. As you can see, this fonts are generally simple and less complex than the other published fonts, but that simplicity that challenged me to generate new design with a little bit more complex.



  • DIGITALIZE AND EXECUTION :



Figure 2.8 Stated Guidelines (22/10/21)


These guidelines were constructed by Mr Vinod to assist us while adjusting our upcoming font design. These guidelines are crucial elements to ensure the future fonts keep symmetrical and consistent.


Figure 2.9 Constructing letter "A' (22/10/21)







Figure 2.10 Digitalize the Early Design (22/10/21)


Afterwards, I started to digitalize the first layout of my pre designs act in a accordance with the instructions, as mentioned before from the MIB as well as the appointed video, we were required to execute 14 different letters into digital form operating Adobe Illustrator.

Here is my final layout, I tried to differentiate this specific layout from other initial font designs. By reducing the thickness and stroke from this layout, I performed different impression to the audience and give the sense of modern along with a small-scale of movement effect from this composition.




  • LISTED LAYOUT (BEFORE FEEDBACK) :




Figure 2.11 Layout #1 (22/10/21)


    • Ascender : 820 Pt
    • Capital Line : 620 Pt
    • Med Line : 500 Pt
    • Baseline : 0 Pt
    • Descender : - 330 Pt



Figure 2.12 Layout #2 (22/10/21)


    • Ascender : 690 Pt
    • Capital Line : 690 Pt
    • Med Line : 500 Pt
    • Baseline : 0 Pt
    • Descender : - 250 Pt



  • LISTED LAYOUT (AFTER FEEDBACK)



Figure 2.13 Guides and Digitalized font (22/10/21)



    • Ascender : 690 Pt
    • Capital Line : 690 Pt
    • Med Line : 500 Pt
    • Baseline : 0 Pt
    • Descender : - 250 Pt


Mr Vinod told me that this layout looked interesting, he also told me to revise several parts in order to evolve the final design for instance, the letter of "M" that need to be improved, the letter of "Y" as well as "G" that need to be a little overshoot.




Figure 2.14 Final Design (22/10/21)


I decided to create another variant for my font design, I won't make it too complicated so I've created a thicker version from the regular Galactica font. There isn't any significant changes from the original font, but I personally want to create bolder version because I thought the bolder version looks more futuristic than the foregoing version,






  • PROGRESSION (IN FONT LAB) :



Figure 2.15 Convert the Font Design to FontLab 7 (22/10/21)


As instructed before, I converted the final arrangement of my letter design into FontLab 7. I did several adjustment such as re composing the font.




Figure 2.16 FontLab Progression (22/10/21)


We also been thought how to kerning our typefaces through FontLab 7, Mr Vinod also demonstrated us to adjust several aspects to improve our font design, he also let us know to adjust the font information and measurement to complete the typeface design.


Figure 2.17 Converted Font Design (22/10/21)


If you're using MacBook to create the letter design, you can see this item and icon from your document once you export it into your computer. You can use it and even publish your work to the Internet when you're successfully convert it.

  • POSTER EXPLORATION :


  

Figure 2.19 Layout #1 and #2 (22/10/21)




  • FINAL RESULT : TASK 3A (TYPE DESIGN AND COMMUNICATION) 



Figure 2.20 Final Result Task 3A - "Galactica Regular", JPEG (22/10/21)





Figure 2.21 Final Result Poster - "Galactica Regular", JPEG (22/10/21)





Figure 2.22 Final Result - "Galactica Regular", PDF (22/10/21)


Figure 2.23 Final Result - "Galactica Regular" (22/10/21)




  • FONT GENERATOR :


    • You can only use  (a i m e p y t g d o b ! , .) typefaces.
    • You can only use lowercase typefaces.




FEEDBACK :

Week 8 - 10 : 

  • General Feedback :
    • Mr Vinod managed to give all students who attended the class a valuable feedback, We spent the whole class to learn and identify our little mistakes and had given second chance to develop and improve our final work before submission.

  • Specific Feedback :

    • Mr Vinod told me that the Layout #2 looked nice and executed well, besides, he also gave me a little note to refine several parts such as the letter "M" curve and composition as well as to increase the "Coma" size.

        • He also suggested me to see and identify "Phill Bains" typefaces to enhance and enlarge my understanding or reference about font designs



      Figure 3.2 "Can you read me" by Phil Bains (22/10/21)





      REFLECTION :


      • Experience :
        • New task is a new journey for me, This exercise was a great moment for to explore and develop my self. Mr Vinod helped me again and again also did a very good job to elaborate us about font exploration and communication. I'm not a very good person to create or deal with typography, but ever since I entered Mr Vinod's class, I knew that I evolved and grew in here.

      • Observation :
        • I've discovered FontLab 7 very well lately, I also had a chance to enhance my knowledge and understanding about letter design and typefaces throughout this project. Poster exploration also supplemented to this task so that every student will be able to learn many things from this exercise.

      • Finding :
        • I found that construct a font design was very fun, I'm over the moon while producing my own fonts through FontLab 7, it was such a new thing for me and as I mentioned, a new task is a new adventure for me and it is a form of growing to me. 



      FURTHER READING :





      Figure 3.3 Typographic Design : Form and Communication


      Reference :

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

      Typographic Design : Form and Communication




      Figure 3.4 Sans Serif (22/10/21)


      Figure 3.5 Sans Serif and Serif Typefaces (22/10/21)




      Sans serif and serif typefaces

      • Because sans serif typefaces are generally simpler in form than serif typefaces and scripts, they achieve a clearer visual presence on the web. On screen, very small serifs are described by an inordinate number of pixels relative to the rest of the letterform. Comparisons between sans serif typefaces must be made by the designer to ensure that selections are suitable to the content. Usually, a well- proportioned sans serif typeface possesses a medium stroke weight and a balanced ratio of form to counterform.


      •  Slightly condensedfaces afford more characters per line and thus utilize less space on the page. Designers may safely select traditional workhorses such as Helvetica, Univers, and Futura, or typefaces embracing similar design characteristics. These classic typefaces still appear fresh when well- spaced and provided with sufficient scale contrast. Sans serif fonts with personality can be equally effective for on-screen viewing. These include DIN, Franklin Gothic, Gill Sans, Lucida Sans, Meta, and Rotis Sans, to name but a few.


      • When serif typefaces are used, they are best selected on the basis of their legibility on screen at small sizes (Fig. 3.4). In the serif category, slab serif fonts provide more legibility than Old Style, transitional, or Modern typefaces (Fig. 3.). Typefaces such as Memphis, Rockwell, Serifa, and Museo possess moderate contrast between strokes, and blocky serifs that translate well into pixels. All typefaces under consideration should be tested by comparing their relative legibility on screen at various sizes. Typefaces endowed with sturdy serifs and moderate stroke contrasts hold up best to pixelation on screen (Fig. 8-16).

      Comments

      Popular Posts