Typography - Exercises
LECTURE NOTES
Lecture 1:Briefing
Week 1 (29/08/18)
Our first lecture turned out to be a briefing of sorts as to what Mr. Vinod expects from us in the module. We were asked to create e-portfolios on Blogger and after doing so, we were given clear instructions on how we would have to log our progress into the semester - on how we would have to insert files, formats for posts, and so on. I found this helpful, especially as we were shown sample blogs made by previous students.
A short presentation introduced us to the history; from calligraphy to lettering and then to typography, along with basic terminologies which I realised are being used very interchangeably before:
Font: originating from the French word "foundry" is the actual process of creating a typeface
Typeface: it refers to the individual face from a type family - an example being arial or serif.
For the following week, we were assigned an exercise - practising with our calligraphy pens by drawing lines and circles on graph paper.
Lecture 2: Anatomy of Typography
Week 2 (5/09/18)
In this lecture, we were introduced to the technical terms used to describe the different parts of a letterform:
- Baseline : were the characters in a typeface sit
- x-height : the height in any typeface of lowercase "x", or the height of the body of lowercase letters excluding that ascenders and descenders.
- Median : imaginary line defining the x-height of a letterform
- Ascender : part of a lowercase letterform rising above the median, as seen in letters like b, d or h.
- Descender: the portion of a lowercase letterform that descends below the baseline.
- Stroke : any line that defines the basic letterform
And other more detailed parts like apex, arm, barb, beak, bowl, em/en, leg, ligature, finial, serif, tail and so on.
 |
| Fig. 1.1 Some of the pictures I found online to understand the terminologies better. http://www.paulshawletterdesign.com/2014/06/the-nomenclature-of-letter-forms-a-brief-review-of-the-literature/ |
 |
| Fig. 1.2 https://chavelli.com/blog/the-anatomy-of-letterforms |
A full font includes not just 26 letters, but also numerals and special characters like punctuation marks. We also learnt more about certain rules that we have to adhere to, for instance, capital letters are made slightly smaller than letters like b, d or h with ascenders so that the overall appearance of the word isn't inconsistent. This is because capital letters have more surface area than that of lowercase letters and is simply an optical illusion.
To improve the readability of letters, it would be better to use typefaces that have a larger x-height, like Helvetica or Georgia. Contrast between the thickness of lines in a letter is also an important factor here, as seen in Times New Roman, compared to a sans-serif font like Helvetica.
Lecture 3: Calligraphy Practice
Week 3 (12/09/18)
We did not have a lecture this week, instead we completed the first exercise, practicing our chosen hand by writing a few short lines.
Lecture 4: Development/Timeline of Typography
Week 4 (19/09/18)
In this week's lecture, we covered the early development of typography and letterforms, which we were told based on the western world's perspective.
Letterform development began with the Phoenicians - the appearance of letterforms were based on the materials and tools used - scratching wet clay with twigs or carving into stone with a chisel, and the forms of uppercase comprised of straight lines and pieces of circles.
Later, the Greeks changed the direction of writing and developed a style of writing called "Boustrophedon" (literally translating to "how the ox ploughs"); unlike the Phoenicians who wrote from right to left, the lines of text were read alternatively from right to left and then left to right. They changed the orientation of letterforms as well.
 |
| Fig. 1.3 Example of boustrophedon, showing how the direction of writing alternated https://agamya.files.wordpress.com/2014/08/boustrophedon-script-example.png |
Etruscan (later, Roman), carvers working on marble painted the letterforms with a brush before carving them, adding a certain quality to the stroke - a variation in thickness of the stroke and a change in weight, carried over to the carved letterforms, in something that resembles the serif.
There were two common Roman scripts, square capitals and rustic capitals.
Square capitals were written by Romans on monuments - which have serifs added to the finish of the main strokes, achieved by the use of reed pens. However, this took up more space, leading to the use of rustic capitals, which allowed twice as many words on a sheet of parchment and took far less time to write. Although, they were found to be a slightly harder to read due to their compressed form.
Square and rustic capitals were reserved for use on documents, however for everyday transactions, cursive hand was used instead.
 |
| Fig. 1.4 Square capitals http://www.lancaster.ac.uk/users/yorkdoom/palweb/week02/palwk2x.htm |
 |
| Fig. 1.5 Rustic capitals https://www.britannica.com/topic/rustic-capital |
 |
| Phoenician (1000 B.C.E) Greek (900 B.C.E) Roman (100 B.C.E) |
During Charlemagne's reign, text was standardised across Europe - and rewritten in majuscules, minuscules, capitalisation and punctuation that was set the standard in calligraphy for a century.
However, after the dissolution of his reign, various changes were brought about in the different regions of Europe and a letterform called Blackletter quickly gained popularity.
Gutenberg then introduced the type mold - in a brass matrix or negative impressions of the letterform.
 |
| Fig. 1.5 Gutenberg Bible https://www.businessinsider.com/high-resolution-gutenberg-bible-2013-12/?IR=T |
The Development of text type classification -
- 1450 - Blackletter
- 1475 - Old Style
- 1500 - Italic
- 1550 - Script
- 1750 - Transitional
- 1775 - Modern
- 1825 - Square Serif/Slab Serif
- 1900 - Sans Serif
- 1990 - Serif/Sans Serif
Week 5 (26/09/18)
We did not have a lecture this week, instead proceeded to animate our lettering. We were also briefed about the exercise for next week and chose adjectives to work with.
Lecture 6:
Week 6 (3/10/18)
We did not have a lecture this week and proceeded to animate our chosen type expression after having it approved.
INSTRUCTIONS
FEEDBACK
Week 2
General feedback: We were told that we needed to make our strokes more consistent and to also adjust the spacing between strokes, which is the thickness of the nib.
Week 3
General feedback: When posting the pictures of our work to the blog, we were asked to take the photos in natural lighting without any shadows and not to edit the photos so much - the exposure should not be so high so the texture of the paper should still be noticeable.
Specific feedback: Mr. Shamsul said my lettering passage looked good overall - the space on the sides where fine and it was centred well and the letters looked neat but I had to adjust spacing at the top and bottom in the passage before submitting it.
Week 4
General feedback: When creating the lettering matching our personality, we were told to stick to just one adjective. Mr. Vinod also told us to capture our photos (for the e-portfilio) in natural light without any shadows.
Specific feedback: I was asked to redo my lettering and make it more loose so that it describes "easygoing" better.
Week 5
General feedback: We were told that the more artboards (or frames) we use, the smoother the animation of our lettering will appear. Mr. Vinod also suggested that any questions we have regarding the softwares we use (i.e Photoshop or Illustrator), could be raised in the respective classes and we should ask those lecturers so we can learn and understand better.
Specific feedback: Since I had trouble with a few frames of my animation due to slight differences in the alignment (that caused it to flicker), Mr. Shamsul said I should stop relying on my laptop's trackpad and start using a mouse or pen tablet more for better accuracy.
Week 6
EXERCISES
Calligraphy (Week 1 - 4)
Lettering (Week 4 - 5 )
Our first exercise was to create our own lettering which reflects our personality. This is to be animated later on. I had some trouble picking an adjective and tried a combination of many but I finally decided on "easygoing".
Type Expression (Week 6)
For this exercise, we were given specific list of type families to work with to express the meaning of a few words - sparkle, float, blur, heavy, tall & rage. We were not allowed to distort any of the letters but we can rotate, flip and scale them proportionally.
After my designs were approved, I chose to animate "heavy", as I already had a vague idea for it when I when I came up with the design. However, I wasn't sure how to proceed with it - and if the order was correct, so I confirmed with Mr. Shamsul before trying it out.
For our very first exercise we were asked to practice vertical, horizontal and circular strokes on graph paper with calligraphy pens; so that we would able to make more consistent, cleaner strokes before actually practicing our chosen calligraphic hand.
 |
| Fig. 2.1 First attempt doing the vertical, horizontal and circular strokes and the final one |
 |
| Fig. 2.2 Final outcome |
 |
| Fig. 2.3 Practicing letters |
After practicing the letters, we were asked to pick a quote that is around 3-4 lines to be written in our chosen hand. I chose a quote by Marcus Tullius Cicero, "A room without books is like a body without a soul". Here are my several attempts, first in graph paper and then finally, in A4 size paper.
 |
| Fig. 2.4 My first few attempts done in graph paper. I was still adjusting the height of the letter at this point. |
 |
| Fig. 2.5 Attempts on plain A4 size paper. I decided to it on several sheets so I could pick the one with the best alignment and spacing. |
 |
| Fig. 2.6 Final attempt |
Lettering (Week 4 - 5 )
Our first exercise was to create our own lettering which reflects our personality. This is to be animated later on. I had some trouble picking an adjective and tried a combination of many but I finally decided on "easygoing".
 |
| Fig. 3.1 Initial attempts for "easygoing" |
 |
| Fig. 3.2 Selected design traced on Illustrator ("easygoing") |
 |
| Fig. 3.3 Thumbnails of animation process |
 |
| Fig. 3.3 Final result for "easygoing" |
Type Expression (Week 6)
For this exercise, we were given specific list of type families to work with to express the meaning of a few words - sparkle, float, blur, heavy, tall & rage. We were not allowed to distort any of the letters but we can rotate, flip and scale them proportionally.
 |
| Fig. 4.1 Designs for the six type expressions |
After my designs were approved, I chose to animate "heavy", as I already had a vague idea for it when I when I came up with the design. However, I wasn't sure how to proceed with it - and if the order was correct, so I confirmed with Mr. Shamsul before trying it out.
 |
| Fig. 4.2 Final result |
FEEDBACK
Week 2
General feedback: We were told that we needed to make our strokes more consistent and to also adjust the spacing between strokes, which is the thickness of the nib.
Week 3
General feedback: When posting the pictures of our work to the blog, we were asked to take the photos in natural lighting without any shadows and not to edit the photos so much - the exposure should not be so high so the texture of the paper should still be noticeable.
Specific feedback: Mr. Shamsul said my lettering passage looked good overall - the space on the sides where fine and it was centred well and the letters looked neat but I had to adjust spacing at the top and bottom in the passage before submitting it.
Week 4
General feedback: When creating the lettering matching our personality, we were told to stick to just one adjective. Mr. Vinod also told us to capture our photos (for the e-portfilio) in natural light without any shadows.
Specific feedback: I was asked to redo my lettering and make it more loose so that it describes "easygoing" better.
Week 5
General feedback: We were told that the more artboards (or frames) we use, the smoother the animation of our lettering will appear. Mr. Vinod also suggested that any questions we have regarding the softwares we use (i.e Photoshop or Illustrator), could be raised in the respective classes and we should ask those lecturers so we can learn and understand better.
Specific feedback: Since I had trouble with a few frames of my animation due to slight differences in the alignment (that caused it to flicker), Mr. Shamsul said I should stop relying on my laptop's trackpad and start using a mouse or pen tablet more for better accuracy.
Week 6
General feedback: Mr. Vinod told us to check if the embedded links to the documents on our blogs from Google Drive were set to public sharing or not.
Specific feedback: Mr. Vinod and Mr. Shamsul said my designs for the type expression were good, and that they particularly liked "heavy" and "float". However, I made the mistake of doing it in Photoshop instead of Illustrator, so I was ask to redo it. Mr. Vinod said that he particularly liked the slight bounce I added to "a","e" and "v" in my animation of "heavy".
REFLECTION
EXPERIENCES
Week 1: I found myself looking forward to this class very much, and I realised soon that it was nothing like I expected at all. This module would also need lots of consistent hard work and practice.
Week 2: Being my first time using a calligraphy pen, I realised the learning curve was rather steep; or so it appeared to be in my case. I found the exercise very frustrating and tried hard to make my strokes more consistent, only to mess up the spacing.
Week 3: I felt like I had improved since the previous class after practicing the strokes and letters several times.
Week 4: This class was a struggle for ideas. I couldn't pinpoint a word that would describe my personality and I was getting too many ideas that weren't very specific.
Week 5: This was class was a bit tiring - I had to redo the animation of my lettering multiples times since it kept "flickering" and it was rather difficult to perfect it in the end.
Week 6: I had already competed my type expressions and I had an idea in mind for my animation so it wasn't too difficult to get started.
Week 4: This class was a struggle for ideas. I couldn't pinpoint a word that would describe my personality and I was getting too many ideas that weren't very specific.
Week 5: This was class was a bit tiring - I had to redo the animation of my lettering multiples times since it kept "flickering" and it was rather difficult to perfect it in the end.
Week 6: I had already competed my type expressions and I had an idea in mind for my animation so it wasn't too difficult to get started.
OBSERVATIONS
Week 1: The process of documenting our progress sounded rather tedious and I would have to rely on my lecture notes to summarise everything better.
Week 2: I realised how even the smallest things can change how my calligraphy turn out - right from the angle of the pen to the surface I'm working on - wood did not work out best and I was able to make it cleaner working on a smooth surface.
Week 3: When I was doing the calligraphy quote over again - I realised how much of a perfectionist I can be. The second line would be slightly off or the whole paragraph might have shifted a little and not be centred and I would have to start over again.
Week 4: It was either that I couldn't think when I'm stressed, or that I really don't know myself well enough, but I struggled to come up with an idea that I could express.
Week 5: The process of animating something was very difficult for me but in the end it was very satisfying and rewarding to see your work in motion.
Week 6: Despite it being the second animation I was working on, it was still just as difficult and complicated for me - especially because this one had more elements that were in motion and I had to express what I was trying to do clearly.
FINDINGS
Week 1: I began paying a lot more attention to lettering and type I see around me everywhere; especially in logos, and questioned how it would have been different if it were another font or the effect it would have had if it were another colour.
Week 2: I need to relax my body and clear my mind before starting the lettering so I can work steadily.
Week 3: When I was working on my quote, I realised it was easier to work after drawing plenty of guidelines and only after practicing it enough times.Week 4: Though it might have seemed insignificant to me before, I realised how even the way the way lettering was done - tight and straight or loose and curving could make a difference on the word that's being expressed.
Week 5: When animating the lettering of my name, I realised that they were flickering and it would work better if I used a mouse rather rely completely on my trackpad.
Week 6: Type expressions actually turned out to be a lot more interesting than I thought and I liked going through the different ones I found on Pinterest. It was strange how you could express the meaning behind. word with type alone without the aid of visual for graphics.
FURTHER READING
The Fundamentals of Typography by Gavin Ambrose & Paul Harris
I wanted to find out a bit more about typeface anatomy and I found this book in the library. It was also a great way to go through what we had covered in the lecture about typeface anatomy.
The chapter also spoke about various type families including Garamond, Univers, and Times Roman which include all the different weights, widths and italics. To achieve clarity and a uniform feel to a piece of work, many designers restrict themselves to using only two type families to a project, meeting their requirements from the type variations these contain to establish the typographic hierarchy.
The Fundamentals of Typography by Gavin Ambrose & Paul Harris
 |
| Book cover (source - https://www.goodreads.com/book/show/119145.The_Fundamentals_of_Typography) |
 |
Just My Type by Simon Garfield
This book was an interesting and fun read that I felt was relevant to what we were doing in class. I read the chapter on legibility vs readability. It talks about the difference between legibility and readability and their importance. One of the most popular ways of testing the readability of type before was the "blink test" - our eyes tend to blink more when we're fatigued or strained and reading in a familiar typeface can make it more conformable and easier.
The book also talks about how the readability of text is judged - through the overall shape of the combined letters which are aided by paragraphs, margins, acceptable line lengths and fair contrast between the strokes of letters.
Stop Stealing Sheep and find out how type works by Erik Spiekermann
 |
| Book cover (source: https://www.chapters.indigo.ca/en-ca/books/stop-stealing-sheep-find-out/9780321934284-item.html) |
The chapter spoke about typefaces and communication - comparing businesses to the typefaces that they use and how they can be classified that way. For instance, the more technical a profession, the cooler and more rigid its typefaces (Univers, for architects), and the more traditional the business is, the more classical its typefaces (Bodoni for bankers). I also read more Frutiger, which was designed by Adrian Frutiger - which is one of the most popular typeface for corporate use.
Comments
Post a Comment