Labels

Typography Exercises

Typography

--


28/08/19-25/09/19 (Week 1-Week 5)
Natalie Leong Yuin May (0334127)
Typography
Exercises

Lecture Notes

Lecture 1

I did not attend the first lecture as I had to sit for an exam. However, I emailed Mr. Vinod about regarding what I missed and what was needed for the class. Mr. Vinod told me that I had to join a Facebook group and download the Module Information Booklet (MIB). Additionally, he stated in his email that the class had started on some typography exercises.

Lecture 2 - The Development of Typography

I managed to attend the first lecture. Before the lecture began, Mr. Vinod asked everyone who was attending class for the first time to gather at the front to brief us what happened in the first lecture. He told us that we needed to do an exercise where we pick a personality trait of ours and present it through typography using our name.
Mr. Vinod gave us a lecture on the development of Western Typography. In the slides shown was the development of the early letterform and how the Greeks changed the direction of writing. he stated that the problem with the direction of writing they invented was that the alphabets had to be written mirrored to the original writing form which caused quite some difficulty in reading. Historically, the alphabets written at approximately at an angle of 60 degree off the perpendicular. This way of writing took up a lot of space on papers. Today, the alphabets are written vertically straight to save space on the paper. The letterforms he showed were:

  • Blackletter
  • Oldstyle
  • Italic
  • Transitional
  • Modern
  • Square Serif / Slab Serif
  • Sans Serif
  • Serif/Sans Serif
    • He explained that the 'Transitional' letterform is a refinement of the Oldstyle such as the fonts Bodoni and Baskerville. The difference between serif and sans serif was that serif is a semi serif, and that sans serif was no serif (sans means no in french).

    Lecture 3 - Text/Tracking: Kerning and Letterspacing

    For this week, Mr. Vinod gave us a lecture to tracking. There were a few terminologies he mentioned:
    •  Kerning- removing space between letters 
    • Letterspacing - adding space between letters
    • Tracking - both kerning and letterspacing
    Mr. Vinod mentioned that letterspacing was introduced in headlines to look elegant. He also said that a lot of typographers don't like letterspacing because the typeface was designed that way. Counterspace has a bearing on readability, which was considered by the designer when designing the typeface so there typographers feel that there isn't really a need for letterspacing.

     Gray value, was a term Mr. Vinod said was important. Gray value is important as when we look at well-spaced bodies of text, we look for even gray value which determines whether the black matter and white matter is evenly distributed.

     There are a few types of text alignment:
    • Flush left
    • Flush right
    • Central alignment
    • Justified 
    Mr. Vinod said that if a body text uses central alignment, reading is difficult. So it is not advisable to use central alignment for large bodies of text. As for justified, this tends to create rivers.

     There is a difference between leading and line length: leading is the spacing between two lines of text, while line length is the end of the line of text to the end of the next line of text.
     Mr. Vinod advised us that good rule of thumb for line length should be between 55 to 65 characters and to correlate point size, line length and leading, there are a few steps to be taken is to first identify the typeface, then identify the type size. He suggested that the body text size should be between 8pt to 12pt. After determining the type size, we can then determine the leading as we will need to add 3pt to the type size.

     Mr. Vinod asked us to note down what compositional requirement was. This means that text should create a field that can occupy a page or a screen.

     He ended the lecture with a quote "Typography is all about details".

    Lecture 4 - Text (Part 2)

    To start off, Mr. Vinod had a run through of last week's lecture:
    1. Letterspacing - adding space between letters
    2. Kerning - decrease space between letters
    3. Tracking - both letterspacing and kerning
    Mr. Vinod mentioned that too much letterspacing and leading (space between lines of text) creates vertical eye movement. He said that for good even text, we should look for gray value. In order to do that, we should half close our eyes and see if the positive and negative spaces are equally balanced.
    He showed us how people back then indicated paragraphs, with the use of a pilcrow (¶) which leads to saving space. Below is an example he showed us in the lecture (Fig. 4.1).
    Fig. 4.1: Pilcrow (¶) used back then.

     Mr. Vinod then said that when creating paragraph space, and in a scenario where we are using a 12 pt typeface, we should give the text a 12 pt leading. He then compared a terminology in Microsoft Word as compared to what designers use. Line spacing is used by Microsoft Word, but designers use leading. However, they are essentially referring to the same thing.
    For designers, leading is the spacing between two lines of text whereas line spacing is measured at the end of the line of text to the end of the next line of text. Unfortunately, much of the people in the world use 'line spacing' because it was made famous by Microsoft Word. 
    Fig.4.2: Line spacing vs leading.

    To determine the correct leading to use, we should add 3 pt to the size of the font. For an example if we are using a 12 pt typeface, the leading is 15 pt. Below is a picture showing an example of line spacing (Fig. 4.2).

    Fig. 4.3: Line spacing.
    Mr. Vinod mentioned another way of indicating paragraphs, through the use of indentations. Indentations were initially used by newspapers to save space. Indentations should be the same pt size as the typeface. Below is an example of what indentations look like (Fig. 4.4).
    Fig. 4.4: Indentations.
    Paragraphs can also be indicated through the opposite of an indentation, called an extended. Mr. Vinod mentioned that this type of hanging style was usually used in the APA citation style for reference list. A figure below shows an example of extended (Fig. 4.5).
    Fig. 4.5: Extended.
    In traditional typesettings, there are generally two unpardonable gaffes (wrongdoings) - widows & orphans (Fig. 4.6).
    Fig. 4.6: Widows & orphans.
    Mr. Vinod explained that widows are short lines of text left alone at the end of a column while orphans are short lines of text left alone at the start of a column and then warned us to be careful when doing project 1 to not commit these gaffes.

     Highlighting is used to create hierarchy of information. Below are four images that illustrate the different ways of highlighting text which includes using bold, italics, color and different typeface. 

    Fig. 4.7: Highlighting text by bolding.

    Fig. 4.8: Highlighting text by color.

    Fig. 4.9: Highlighting text by using a different typeface and bolding.
    Fig. 4.10: Highlighting text by italicizing.

    Instructions


    Mib Gcd60104 Typography Bdc... by Natalie Leong on Scribd

    Exercises

    Week 1 - LETTERING (28/08/2019)

    For the 1st week, as I did not attend I did not start on any sketch.

    Week 2 - LETTERING (04/09/2019)

    Mr. Vinod those of us that did not attend the first lecture that we had to choose a personality trait, and then sketch letterings of our name. He advised to do it by today as the others had started digitizing their sketches. So I set off to work and picked two personality traits: kind and messy. I showed my sketches to Mr. Vinod to which he said to forget about 'kind' and focus on 'messy'. He then commented that it didn't look messy and he suggested for me to look at my classmate's sketch to get some ideas. From there, I realized that my lettering had to be scratchier.
    Fig 2.1: Sketches of 'kind' and 'messy'.

     I showed Mr. Vinod more sketches to which Mr. Vinod said that it still looked neat. Then, he showed me an example of what messy would look like. After receiving his feedback, I felt that I did not have enough time so I started digitizing it.
    Fig 2.2: Nat; Digitized version of lettering of my name.


    Week 3 - LETTERING (11/09/2019)

    Mr. Vinod checked our blogs but as mine was not complete, I did not show it to him. Then, I showed him my digitized lettering of my name to which he said that it still looked neat. He suggested to me to add more stray hairs for each alphabet.
    Fig. 3.1 Messy;Final Outcome of Digitized Lettering (JPEG)
    After digitizing it, I decided to animate it.


    3.2: Nat; Gif of digitized lettering of my name

     I showed the gif to Mr. Vinod to which he asked me to add two more frames as I currently only had two frames. So I added two more frames after his critique.

    Fig 3.3: Nat; Modified gif of digitized lettering of my name.

     For the exercise this week, we had to do sketches of six words: sneeze, gigantic, clean, emerge, explode and party without deforming it and then digitize all six words using a specified group of typefaces: Adobe Caslon Pro, Bembo Std, Futura Std, Gill Sans, Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std and Univers LT Std. Then, we had to animate it.
    Fig 3.4: Digitization of six words: sneeze, gigantic, clean, emerge, explode and party (JPEG)

    Week 3 [Recovered] by Natalie Leong on Scribd
    Fig. 3.5: Digitization of six words: sneeze, gigantic, clean, emerge, explode and party (PDF)

    I decided to animate the word 'Gigantic'.

    Fig. 3.6: Artboard of GIgANTic

    Fig. 3.7: Animation frame of GIgANTic

    Fig 3.8: GIgANTic; Animation of Gigantic

    Feedback

    Week 1

    As I did not attend the first week, there is no feedback.

    Week 2

    At first I chose two personality traits: kind and messy, to which Mr. Vinod told me to focus on messy. He said my first draft did not show any sort of messiness at all, so I did 8 more designs. But Mr Vinod said it still looked neat, then he showed me what a messy typography looked like.

    Week 3

    Digitizing typography of my name: As last week was my first class, I started the typography design for my name quite late and planned on showing my design to Mr. Vinod. Mr. Vinod commented that my design still looked slightly neat. He then suggested that I let a few lines go astray so that it looks messier. I was also supposed to complete the animation to show it to him to receive feedback. However, I thought that I should show it in class to which Mr. Vinod said that I could message them next time instead so that time is not wasted. Mr. Vinod critiqued my animation that I should add 1 or 2 more frames that adds more messiness to my animation. Some of his suggestions are lines appearing somewhere else or blotches around the typography. For the digitizing of the six words, Mr. Vinod said that my ideas for 'clean', 'gigantic' and 'explode' were good, but my ideas for 'emerge' and 'party' needed more work. He said that 'sneeze' was alright.

    Week 4

    Mr. Vinod commented that my digitization of sneeze could be better and told me to export the whole A4 piece as a jpeg.I digitized the word 'gigantic' and Mr. Vinod said that I exported the gif wrongly, which caused it to have a white background. Overall, he liked how the 'GIANT' landed hard enough to cause 'gic' to jump.

    Reflection

    Week 1

    As I did not attend the first week, there is no reflection.

    Week 2

    I realized that expressing myself through typography was hard and I felt worried as I saw my classmate's sketches which were unique and really out of the box. I spent quite a while thinking and finding ideas of what a 'messy' typography would look like. So I went onto Pinterest to look for inspiration and examples. From there, I realized that most of the examples had a 'space' within the brushing of the letter itself, so I tried to incorporate that. The next thing I noticed was that the angling and stroke wasn't consistent for the letters.

    Week 3

    I struggled with the sketches because Mr. Vinod said that we were not allowed to distort it. I had fun with animating 'gigantic'. My initial idea was to have 'GIANT' increase in size rapidly while 'gic' remained the same. However, I thought that would be too easy so I decided on another idea which was to have 'GIANT' drop from above and when it lands, 'gic' will jump or shake slightly.

    Week 4

    I feel pretty satisfied with my gif for GIgANTic however I feel a bit dissatisfied with my digitization of 'explode', 'sneeze' and 'party'. 

    Observations

    Week 1

    As I did not attend the first week, there is no observation.

    Week 2

    I went onto Pinterest to look for examples of messy fonts and came across the following images.
    Figure 2.1: Salt - example of messy font.
    Figure 2.2: Make it suntory time. Also Nikka and Chichibu time- example of messy font.
    Figure 2.3: Here's to the crazy ones - example of messy font.
    Figure 2.4: Aa - example of messy font


    Week 3

    I browsed through the senior's blogs to find inspiration and see how they did it as I was really struggling with thinking out of the box to express a word's definitions through typography. Additionally, as I forgot how to export gifs in Adobe Photoshop, I googled tutorials on how to export it.

    Week 4

    I noticed that quite a lot of  my classmates animated 'explode'. However, I did see one gif in particular that stood out, and it helped me look at a different perspective of animating 'explode' even though I animated 'gigantic'. I  looked through someone of my classmate's blogs and I found out that everyone really has a different way of expressing typography, and I did get some inspiration for ideas from looking at their documentation and their thought process.

    Findings

    Week 1

    As I did not attend the first week, there are no findings.

    Week 2

    I found out that expressive typography really plays an important role in making something interesting. I've seen it before in magazines and even online but never really realized. Everything feels foreign to me right now: from weekly assignments to personalities in class, I guess I'm still stuck in a programmer's mindset although I do like the environment I'm in because it feels like a fresh start. I also found out that things can be a bit simpler and not as complex as what I think it should be. For example, designing a typography of my name. It took way longer than necessary because I kept overthinking and thought it wasn't 'enough'.

    Week 3

    I still feel a bit out of place in class. I feel stuck whenever I need to design something because there are so many constraints that I am learning about in designing. I do realize it's a bit similar to coding, as in the font is the programming language and the coding conventions would be the designing rules or constraints. They're both creative fields but yet quite different.

    Week 4

    I realized that to design better, I have to observe more. But yet I feel a bit conflicted because I'm afraid of accidentally or subconsciously copying someone else's design. Also, I'm starting to realize the importance of documentation. It's an important habit to have especially if I'm stuck in coming up with a design, I can go back and read my thought process again which might help in giving a spark in ideas.

    Further Readings

    Week 4

    Book title: Stop Stealing Sheep & find out how type works (third edition)
    Author: Erik Spiekermann
    Fig. 5.1: Stop Stealing Sheep & find out how type works by Erik Spiekermann.
    The first book I borrowed from the library is the third edition of Stop Stealing Sheep & find out how type works (Fig. 5.1). This book contains many simple and easily understandable visuals and explanations of how to look at type, choosing the best typeface for a text and more.

    I read chapter 3 (Looking at type) and learnt about some typefaces and what their physical characteristics connote. For an example, Runic Condensed. Runic Condensed has spiky serifs and exaggerated letterforms which typically do not confirm with conventional standards of how we define beauty and proportion. Due to this, it expresses uneasy feelings. The substitutes for this font are Bodega Sans Light, Block Extra Condensed, Harlem Slang, Bureau Empire and Bodega Serif Light.

    Additionally, the analogy with type is that if it is printed in different colors, on different backgrounds, dark on light or light on dark, it will always appear as if the typefaces are not the same and more than one typeface is being used.

    I flipped through chapter 4 (Type with a purpose) and learnt about how typography is part of branding:
    "Brands have to speak their own authentic language. Type is visible language. Using a bland or overused typeface will make the brand and its products or media equally bland and even invisible."

    This makes me understand that we can't use fonts that are too common.

    I also learnt about how the more technical the profession or business, the cooler and more rigid its typeface to indicate seriousness. The example found in the book is the typeface Univers for architects. It continued with how the more traditional a trade is, the more classical the typeface used which the example given was the typeface Bodoni for bankers.

    Labels:

    Comments

    Post a Comment

    Popular Posts