Typography / Task 1: Exercises


27.8.2021- 24.9.2021 (Week 1 - Week 5)
Cheryl Voo Yie Qi / 0349878
Typography / Bachelor of Design in Creative Media
Task 1 / Exercises


LECTURES

Week 1 (27/8/2021) 
Today is the first day of the Typography class and it was lectured by Mr. Vinod and Mr. Charles. We were briefed about things we need to do, Module Information Booklet (MIB), and how to set up our E-portfolio blog as well. And we need to watch youtube lecture videos that are filmed by Mr.Vinod.

Typo_0_Introduction 

What is typography?
- The style and appearance of printed matter (oxford dictionary)
- The art and technique of arranging type to make written language legible, readable, and appealing when displayed (Wikipedia)


Typography is also visible in animation, website designs, apps designs, and our daily lives. 

Fig 1.2, website designs, https://www.dreamhost.com/blog/elements-of-webdesign/

Typography has evolved over 500 years: Calligraphy > Lettering > Typography. It employs a number of terminologies, conventions, and unwritten rules depending on your disposition or influences with regard to style.

  • Typeface - Refers to the entire family of fonts/weights that share similar characteristics/styles, for example, Georgia, Arial, Times New Roman, Didot, and Futura.

Fig 1.5, different typefaces, https://wpcbg.uk/web-typography/serif-sans-serif/


Typo_1_Development

Early letterform development: Phoenician to Roman
- Initially writing meant scratching into wet clay with sharpened stick/carving into stone with a chisel


Fig 1.6, Evolution from Phoenician letter, https://www.pinterest.com/pin/458733912029959885/

 The Greeks changed the direction of writing. The Greeks developed a style of writing called "boustrophedon", which meant that the lines of text read alternately from right to left and left to right. They also changed the orientation of the letterforms.



Etruscan carvers working in marble printed letterforms before inscribing them. Certain qualities of their strokes- a change in weight from vertical to horizontal, a broadening of the stroke at start and finish.


Fig 1.8, an example of Augustan inscription, http://glyphika.blogspot.com/2018/08/




Square capitals were the written version that can be found in Roman monuments. The variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular. 

Fig 1.10, example of Square capitals, https://en.wikipedia.org/wiki/Roman_square_capitals

A compressed version of Square capitals, Rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen was held at an angle of approximately 30° off perpendicular. They were slightly harder to read due to their compressed nature.


Fig 1.11 , example of Rustic capitals, https://www.britannica.com/topic/rustic-capital

However typically written in cursive hand in which forms were simplified for speed. Roman cursive is the beginning of what we refer to as lowercase letterforms. 


Fig 1.12, example of Roman cursive, https://en.wikipedia.org/wiki/Roman_cursive

Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of A, D, E, H, M, U, and Q. "Uncia" is Latin for a twelfth of anything. However, be more accurate to think of uncials simply as small letters. Uncials are more readable at small sizes than Rustic capital.



Fig 1.13, example of Uncials, https://www.britannica.com/topic/uncial

    Half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.




    Fig 1.14, example of half-uncials, https://www.britannica.com/topic/half-uncial

    Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization and punctuation which set the standard for calligraphy for a century. 


    Fig 1.15 , example of Carolingian minuscule,https://en.wikipedia.org/wiki/Carolingian_minuscule

    In northern Europe, a condensed strongly vertical letterform know as Blackletter or textura gained popularity.  The humanistic script in Italy is based on Alcuin's miniscule.


    Fig 1.16 ,example of Blackletter, https://en.wikipedia.org/wiki/Blackletter

    • 1450 Blackletter
      The earliest printing type, its forms were based upon the hand-copying styles that were used for book in northern Europe.


    • 1475 Oldstyle
      The uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated from Italy to England.






    Typo_2_Basic

    As with any craft that has evolved over 500 years, typography employs a number of technical terms. Knowing a letterform's component parts make it much easier to identify specific typefaces. 


    • The font
    The full font of a typeface contains much more that 26 letters, to numerals, and a few punctuation marks.
    " To work successfully with type, you should make sure that you are working with a full font and you should know how to use it."

    Uppercase
    - Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

    Lowercase
    - It include the same characters as uppercase.
    Small capitals
    - Uppercase letterforms fraw to the x-height of the typeface.
    - They are primarily found in serif fonts / expert set.
    - Do not confuse real small caps with those artificially generated.



    Fig 1.29, heights comparing (lowercase and small capital),https://ilovetypography.com/2008/02/20/small-caps/

    Uppercase Numerals (Lining figures)
    - The same height as uppercase letters and are all set to the same kerning width.
    - Most successfully used with tabular material / in any situation that calls for uppercase letters.

    Lowercase Numerals ( Old style figures / text fugures)
    - Are set to x-height with ascenders and descenders.
    - Best used whenever you would use upper and lowercase letterforms.
    - They are far less common in sans serif typefaces than in serif.


    Fig 1.30, Uppercase and lowercase Numerals, https://www.quora.com/What-are-the-lower-case-letter-numbers-and-symbols

    Italic 
    - Most fonts today are produced with a matching Italic.
    - The forms in a Italic refer back to fifteenth century Italian cursive handwriting.
    - Oblique are typically based on the roman form of the typeface.


    Punctuation, Miscellaneous characters
    - Can change from typeface to typeface.


    Ornaments 
    - Used as flourishes in invitations or certificates.
    - Provided as a font in a larger typeface family.
    - Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro)



    Typo_3_Text_P1
    • Kerning and letterspacing
    - The term "kerning" refers to the automatic adjustment of space between letters.
    - It is often mistakenly referred to as "letterspacing'.
    - Letterspacing means to add space between the letters.

    - This format most closely mirrors the asymmetrical experience of handwriting. 
    - Each line starts at the same point but ends wherever the last word on the line ends.
    - Spaces between words are consistent throughout the text.


    Centered
    -
    The format imposes symmetry upon the text,  assigning equal value and weight to both ends of any line.
    - Centered type creates such a strong shape on the page, its impotant to amend line breaks so that the text does not appear too jagged.


    Flush right (from right)
    -
    This format places emphasis on the end of a line as opposed to its start.
    - The relationship between text and image might be ambiguous without a strong orientation to the right.


    Justified 
    - Like centering, this format imposes a symmetrical shape on the text.
    - It is achieved by expanding or reducing spaces between words and letters.
    - Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.


    The goal in setting text type is to allow for easy, prolonged reading.
    1. Type size : should be large enough to be read easily at arms length
    2. Leading : Text that is set too tightly encourages vertical eye movement, a reader can easily loose his or her place
    3. Line length : Appropriate leading for text is as much a function of the line length as it is a question of type size and reading. Shorter lines require less leading ; longer lines more. A good rule of thumb is to keep line length between 55-65 characters
    Type Specimen Book
    -
    Shows samples of typefaces in various different sizes.
    - Only determine choice on screen when its final version is to read on screen.
    - Provide an accurate reference for type, type size, type leading, type line length etc.

    Typo_4_Text_Part 2
    • Indicating paragraphs
    - "Pilcrow" ( ¶ ), a holdover from medieval manuscripts seldom use today.


    - "Line space" (leading) between the paragraphs.
    - Line space is 12pt = paragraph space is 12pt



    Line space vs Leading


    Fig 1.50, Difference between line spacing and leading, https://www.flickr.com/photos/nicksherman/5640736164

    Standard indentation
    - The indent is the same size of the line spacing / same as the point size of text


    Extended paragraphs 
    - Creates unusually wide columns of text.
    - Strong compositional / functional reasons for choosing it
    - Used in academic writing 

    Widow - a short line of type left alone at the end of a column.
    Orphan - a short line of type left alone at the start of a new column.

    - In justified text both widows and orphans are considered serious gaffes.
    - Flush right and ragged left text is somewhat more forgiving towards widows.
    - Orphans remain unpardonable.

    Highlighting text 
    - Different kinds of emphasis require different kinds of contrast.

    Ways to highlight text :
    1. Italic
    2. Increase the weight of the text (bold) 
    3. Change the typeface / bold
      - Sans serif font (univers) has been reduced by .5 to match the x-height of the serif typeface .8 

    4. Change the color of the text (black, cyan, and magenta) 
    5. Place a field of color at the back of the text ( maintaining the left reading axis of the text ensures readability is at its best)


      Fig 1.55, with indentation (left) without indentation (right), https://www.youtube.com/watch?v=u5meWAB32wA&list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR&index=6

    6. Place certain typographic elements outside the left margin of a column ( maintain a strong reading axis)

      Fig 1.56, Inside the left margin(left) outside the left margin(right), https://www.youtube.com/watch?v=u5meWAB32wA&list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR&index=6


    7. Quotation marks (bullets)
      - Create a clear indent, breaking the left reading axis



    Headline within Text
    Many kinds of subdivision within the text of a chapter. Pulling together a sequence of subheads = Hierarchy.
    1. A head 
      - Indicates a clear break between the topics within a section




    2. B head
      - Subordinate to A heads
      - Indicate a new supporting argument or example for the topic at hand


    3. C head
      - Not materially interrupt the flow of reading
      - Shown in small caps, italics, serif bold, and san serif bold
      - Followed by at least an em space for visual separation




    Cross alignment
    Cross aligning headlines and captions with text type reinforces the architectural sense of the page — the structure —while articulating the complimentary vertical rhythms.

    Understanding letterforms

    - The uppercase letter forms below suggest symmetry, but it is not symmetrical. 
    - Two different stroke weights 
    - Each bracket connecting the serif to the stem has a unique arc



    - The width of the left slope is thinner than the right stroke.


    - Two similar sans-serif typefaces—Helvetica and Univers
    - Comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.


    Fig 1.64, Letter "a" comparison between Helvetica and Univers, https://www.youtube.com/watch?v=k-Vbx50e-eA&list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR&index=8&t=981s

    Maintaining x-height
    - x-height generally describe the size of the lowercase letterforms.
    - Curved strokes like “s”, must rise above the median/ sink below the baseline (in order to be the same size as the vertical and horizontal strokes)

    Fig 1.65, example of curved strokes rise above median/sink below baseline, https://www.youtube.com/watch?v=k-Vbx50e-eA&list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR&index=8&t=981s 

    Letters/ Form /Counterform
    - Develop a sensitivity to the counterform
    - When letters are joined to form words, the counterform includes the spaces between them
    - How easily we can read what have been set 

    Examine the form and counter of a letter in close detail provides a good feel for how the balance between form and counter is achieved


    Letters/ Contrast


    Typo_6_Screen and Print (Different medium)

    Print Type
    vs Screen Type
    Type for print
    • Most common typefaces that used for print: Caslon, Garamond, Baskerville
      (Their characteristic are elegant, intellectual, and highly readable when set at small font size)
    • They are versatile, easy-to-digest classic typefaces
    Type for screen 
    • Typefaces intended for use on the web are optimized and modified to enhance readability and performance on screen
    • Include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles 
    • More open spacing (for typefaces intended for smaller size)
    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.
    • Text hyperlinks are normally blue and underlined by default

    Font Size for Screen
    • 16-pixel text on a screen is about the same size as text printed in a book or magazine
    • Books (typically set at 10 points), if you were to read them at arm's length (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
    • The designer picked some obscure, paid font family for this site's design, but if you don't have that font already installed, the font you see would default back to basic variation like Times New Roman
    • Web safe ones : Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
    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.

    Static vs Motion
    Static photography 
    Motion Typography
    • Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic”
    • Motion graphics, the brand identities of film and television production companies, increasingly contain animated type
    • Type overlaid onto music videos and advertisement/ set in motion following the rhythm of a soundtrack

    Week 2 (3/9/2021) 
    Today is the second week of the Typography class, Mr. Vinod wanted us to submit our word sketches idea and he gave feedbacks to some of our works. After that, we have been divided into breakout rooms to discuss and give feedback on our friend's work. Mr. Vinod gave us a few questions to give us a direction to give feedback on other's work in our breakout rooms.

    1. Are the explorations sufficient?
    2. Does the expression match the meaning of the word?
    3. On a scale of 1-5, how strong is the idea?
    4. How can the work be improved?
    Week 3 (10/9/2021)
    Today we are going to turn our Type Expression exercise into a GIF using Adobe Illustrator and Photoshop.  

    Week 4 (17/9/2021)
    Today Mr. Vinod gave us some feedback on our GIF and we were given some guiding questions. After that, we need to watch some videos to do the text formatting exercise.
    1. Is the animation suitable?
    2. Does the animation enhance the meaning of the word?
    3. Does the animation reflect the form being expressed?
    4. Does the animation create a smile in your mind?
    5. How can it be improved?
    Week 5 (24/9/2021)
    While Mr Vinod and Mr Charles starting to mark our e-portfolios, we were asked to watch videos from Mr Vinod's lecture playlist before we start to do Task 2.


      INSTRUCTIONS




      Week 1 (27/8/2021) 
      We need to choose 3 words and sketch out our ideas, and try to digitalize them in illustrator. 
      1. Terror (mandatory)
      2. Space
      3. Water
      4. Glitch
      5. Broken
      6. Abyss
      7. Bark
      8. Colossal
            
      Week 2 (3/9/2021) 
      We need to use the 10 typefaces and compose the letters in a manner that allows the meaning of the word to become visible. After that, we need to turn our Type Expression exercise into a JPEG file. 

      Week 3 (10/9/2021)
      Using the last week's exercise, turn it into a GIF using Adobe Illustrator and Adobe Photoshop.

      Week 4 (17/9/2021)
      Watch the videos in the playlist to do exercise 2 in Indesign.

      Week 5 (24/9/2021)
      Watch videos from the playlist and do Task 2.

      EXERCISES
      Exercise 1
      I chose Space, Water, and Bark among the 7 options. We need to create typography designs that can express the word that we chose. Here are my sketches : 


      From the left to the right, the first terror I was trying to make it dripping blood thing. Then for the second terror, I added a knife to the letter T to add some relevant element for "terror". For the last terror, I changed the O to a skull to make it "terror".

      Fig 1 , Terror sketches, (29/8/2021)

      For the water, I used a whale that spouted out water from its fumarole and uses the water to form the word. For the second one, I added a couple of water drops to create a water vibe. For the last one, I changed the T into a faucet and filling up the A.

      Fig 2, Water sketches,(29/8/2021)

      For the word space, I try to make it simple by adding spaces and lines between the alphabets. And for the second one, I scattered the letters to make more space between the letters. Lastly, I was inspired by the spacebar on our computer, I turned it into a spacebar and add the word on it.

      Fig 3, Space sketches,(29/8/2021)

      I don't have too much idea for bark, so I tried to make it simple by adding some paws, and lines, and a dog's ear on the B at last.

      Fig 4, Bark sketches,(29/8/2021)

      Here is my digitized version of the 4 words:

      Fig 5 , digitized version,(4/9/2021)

      After that, I got some feedback from Mr.Vinod and Mr. Charles: my "water" still using too much illustration and more written down in the feedback section.


      Fig 6 , Final PNG,(5/9/2021)


      Fig 7, Final PDF (5/9/2021)

      Then we are going to make one of our words into GIF. Here is the process:
      I chose bark to make GIF, and I wanted to make it look like a dog to relate to the "bark".I tried making it jump and shake its tail like a dog. 


      Fig 8, GIF making process in AI, (10/9/2021)

      After making the frames in AI, I uses photoshop to animate them and export them into GIF.


      Fig 9, GIF making in Photoshop,(10/9/2021)

      Here's the GIF that I made:


      Fig 10, GIF,(10/9/2021)

      After receiving feedback from Mr. Vinod and Mr. Charles, I added more frames and made it not just jumping but going to the left and bark. 

      Fig 11, Final GIF (11/9/2021)

      Exercise 2
      We are going to do kerning exercise and layout exercise.
         

      Fig 12, with kerning and tracking,(19/9/2021)

      Layout 
      These are my sketch before I do the layout exercise, and I decided to use the right hand side one. Then I started my exercise :

      Fig 13, sketches, (22/9/2021)


      Fig 14, process of doing layout exercise ( 22/9/2021)

      This is my final JPG for Exercise 2:

      Fig 15, Final text formatting in JPG (24/9/2021)

      This is my final PDF file for text formatting.

      Fig 16, Final text formating in PDF file (24/9/2021)



      FEEDBACK

      Week 1 (27/8/2021)
      • General feedback : Our blog shouldn't be personalized before we know how to properly use blogger (colour, fonts, theme)
      • Specific feedback : Watch youtube videos to learn how to embed files.

      Week 2 (3/9/2021) 
      • General feedback : 
        Typography sketches
        - Don't add too much illustration.

        E-portfolio 
        - Update continuously every week
        - Don't use white as the background colour to make the post easier to see.
      • Specific feedback : 
        Breakout room
        - For my water design, reduce the use of illustration. As for the bark, change the font to strengthen the "bark", because three of them are too similar, and the paw can be remain.

      Week 3 (10/9/2021) 

      • General feedback Most of the Gifs are too big. Make it smaller and put 3 seconds at the end. 

      • Specific feedback : For “terror” don't have the need to use distortion since already have a knife in the "T". For "space", can make the space bar longer to make it more looks like space bar. "Water" using too much illustration.
      Week 4 (17/9/2021)
      • General Feedback: Stop more at the end to make it clear that which is the start and the end.
      • Specific Feedback: Add more frames to the Gif and make the "bark" not just jumping, make it move more to express "bark". 

      Week 5 (24/9/2021)
      • Specific Feedback: Final submission not indicated. PDF/JPG missing? T1, Ex2: No submission. Marks not awarded.


      REFLECTION
      Experience : At first, I thought it will be very difficult, but after the first class I think that it is still manageable and it is fun in the class. Adding elements to the typography is a fun and frustrating process because I'm trying to not add too much illustration to it, which I can't control myself. And I learned a lot from Mr. Vinod and Mr. Charles like using the Adobe Illustrator. Exercise 2 is more challenging to me because when I followed the video to do exercise 2, the result did not turn out like the one in the video, so I'm struggling to found out where the problem is and it took me a lot of time doing it. But when I'm done I felt satisfied when it turned out fine like the video.

      Observation : Typefaces and elements could affect the typography design. I found out that pre-recorded lecture videos on youtube are really useful. When I can't catch up on some of the content, I can watch it over and over again or even decrease the speed to look carefully about some of the details.

      Finding : I found out that there are a lot of typefaces, especially when I was finding the suitable typefaces for the word that I'm working on it. When doing exercise 2, I did not know that a text needs to pay attention to a lot of things like orphans, widows, and cross alignment.


      FURTHER READING

      Early Evolution of Roman Letters
      (https://www.fonts.com/content/learning/fontology/level-1/type-history/early-evolution-of-roman-letters-1)
      Roman capitals are elegant, commanding attention and respect. This “typographic attitude” was suitable for graphic communication intended to last for millennia. 

      Over time, three distinct styles of handwriting emerged to replace formal capitals in everyday graphic communication. These styles came to be known as square capitals, rustic capitals and Roman cursive.
      • Square capitals 
        - Used almost exclusively to produce the most formal books and documents
        - Written more quickly, with a more flowing hand, than was possible in stone




      First Alphabets
      (https://www.fonts.com/content/learning/fontology/level-1/type-history/first-alphabets)
      The process of developing alphabets began quite simply, though the first messages weren’t actually “writing” as we know it. Rather, they were simple tokens. However, these tokens and signs evolved into marks. The marks were the beginning of written communication. They had to be simple and well-shaped, so each could be recognized consistently for its unique meaning. From its earliest beginnings, writing was an art.

      • Symbol Alphabets
        - These were normally very simple shapes that spoke to a rather simple vocabulary: man, woman, fire, food, tree, etc
        - Multiple “tree” symbols were combined to make a “forest,” and the separate symbols for man, woman, and child were consolidated into a single “family” symbol
      • Phonograms
        The Egyptians were probably the first to break with the tradition of simple symbol writing
        - They began to use “phonograms” (sound pictures) to only represent syllables
        -The phonograms were strung together to create a word
      • Phonetic Writing
        The Phoenicians clearly had a need for an alphabet, but not for the graceful, decorative alphabet of the Egyptians.
        - Phoenician writing was free of frills, easy to read, and quick to write. Phoenician writing was also purely alphabetic – one character equaled one sound. 


        Fig 2.6 , Phoetic alphabet, https://www.worldhistory.org/alphabet/


      • Our Alphabet Emerges
        The Greeks added vowels, new characters, and curves
        - The Latin alphabet was derived from Greek letterforms by way of the Etruscans
        - The Romans adopted and adjusted the Greek alphabet in much the same confident way they adapted and adjusted to the Greek gods

      • Roman Capitals
        - Roman capital letters grew out of signage
        - Even though these letters were carved in stone, they reflect the same principles as handwritten letters
        -  
        Our typefaces are curved, with thick and thin graduations of stroke, because writing by hand with flat-tipped utensils shaped ancient letters this way


      Comments

      Popular Posts