TYPOGRAPHY - EXERCISES

28/08/2019 - 25/09/2019 (Week 1 - Week 4)
Rifath Ali (0335738)
Typography
Exercises

---

LECTURE NOTES

Lecture 1: Introduction/Briefing
28/08/2019 (Week 01)

During our first class, we were briefed about the module and how to create our e-Portfolios. Step by step instructions was given in regard to how to create and upload content to the blog. We also had a bit of a self introductory round where all of us told the class a bit about ourselves.

The first lesson was a basic introduction to typography. We got an explanation of a few terminologies related to typography. The difference between Fonts, Typeface and Type Family were explained to us. Later on, we also had an exercise where we wrote our name based on one of our personalities.

Lecture 2: Development/Timeline

04/09/2019 (Week 02)

The lecture focused on the history of typography, earliest forms and styles and how these changed over time. In the earliest days, sharpened stick or chisels were used to carve letters into wet clay. An interesting development in typography was when the Greek developed a style of writing called “Boustrophedon”. In this style of writing, the lines of text read alternately from right to left and left to right.

Fig. 1.1: Boustrophedon writing style

During the 3^rd to 10^th century C.E. square capitals were used by the Romans in their monuments. They have serifs added to the end of the main strokes. Given the need to fit more text into parchments, a compressed version of the square capitals were introduced. Although the square capitals were used in official documents, the cursive hand was used for everyday transactions.

Fig. 1.2: 4^th or 5^th century; Square Capitals

 Fig. 1.3: Late 3^rd - mid 4^th century; Rustic Capitals

 Fig. 1.4: 4^th century; Roman Cursive

The Uncials consisted of some similarities with the Roman cursive hand. The broad forms of uncials are more readable at small sizes then rustic capitals. Half-uncials mark the formal beginning of lowercase letterforms. 

 Fig. 1.5: 4^th - 5^th century; Uncials

 Fig. 1.6: C. 500; Half Uncials

Lecture 3: Text

11/09/2019 (Week 03)

This week’s lecture was focused on bodies of text. Very important terminologies were taught during the lecture. They are:

• Kerning: Refers to the automatic adjustment of space between letters. Removing space between lettters
• Letterspacing: To add space between the letters.  
• Tracking: The addition and removal of space in a word or sentence.
• Gray Value: The balance between the letters and the negative space.
• Counterspace: The space between the actual shape of the letters. This has a bearing on readability.

 Fig. 1.7: Without Kerning vs. With Kerning

 Fig. 1.8: Normal Tracking vs. Tight Tracking vs. Loose Tracking

A lot of designers use letterspacing when it comes to uppercase headings. At the same time, this is not very well received when done with lowercase letters within a text. This is because uppercase letterforms are drawn to be able to stand on their own, and which is not the case with lowercase letters.

When it comes to formatting text, there few ways to do it and things to consider:

• Flush Left: Aligned to the left of the page, ragged right. It most closely mirrors the asymmetrical experience of handwriting. The lines start at the left margin of the page but it ends wherever the last word on the line ends. Spaces between words are consistent which results in an even gray value.

•  Centered: Aligned to the center of the page, ragged right and left. As it is aligned to the center of the page, it gives equal value and weight to both ends of any line. Since the starting point and ending point are not even, it may be difficult to read.

• Flush Right: Aligned to the right of the page, ragged left. It places emphasis on the end of the line as opposed to its start. Although this form of alignment is frowned upon as the starting point is not straight.

•  Justified: Fit to the page on both left and right. It is achieved by expanding or reducing spaces between words and sometimes between letters. Sometimes this leads to uneven gaps running vertically through the text which is known as “Rivers”.

As different designers have different styles, the type of formatting each uses may differ. However, always the first job of any designer needs to be ensuring the communication of the intended message. If the first thing people notice is the type before they see the words, it is considered as interference and it needs to be changed.

As designers, it is important to understand how different typefaces feel as text. Different typefaces suite different messages.

The goal in setting text type is to allow for easy, prolonged reading. Text type should be large enough to be read easily at arm’s length.

When the text is set too tightly, it results in vertical eye movement; readers easily lose his or her place on the page. On the other hand, when the type is set too loosely, it distracts the reader from the content of the material at hand.

Another important thing to consider is the line length. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep it between 55-65 characters.

How to correlate, line size:

1. Identify your type
2. Identify the type size; When dealing with printed matter, body text is between 8pt – 12pt
3. Determine the line length + leading; Maintain a 3-point leading

A type specimen book shows samples of typefaces in various different sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length etc. A specimen sheet shows the same typeface with different variables. It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.

 Fig. 1.9: Sample type specimen sheet

Beauty to layout is negative space. 

Lecture 4: Text cont...
18/09/2019 (Week 04)

This week’s lecture was a continuation of the topic from the previous week. We started off with paragraph formatting. First was on different options for indicating a paragraph. The ‘Pilcrow” (¶) was one of the earliest forms of paragraph indication which was used to represent paragraph spacing.

Fig. 1.10: Pilcrow Paragraph Indicator

Another form of indicating paragraphs are by using a “Line space” (Leading) between the paragraphs. Leading is the space between two lines of text, which is different from line space. Line space starts from the end of the text on the top line to the end of the text in the bottom line. It is crucial to know the difference between these two terminologies

Fig. 1.11: Line Space Paragraph Indicator

Indented lines can also be used to indicate beginnings of paragraphs. Typically, the intent is the same size as the line spacing or the same size as the text. Extended paragraphs are also used to indicate new paragraphs.

Fig. 1.12: Indented Line Paragraph Indicator

Next, we were briefed on “Widows” and “Orphans”. A widow is a short line of type left alone at the end of a column of text. Whereas, an orphan is a short line of type left alone at the start of a new column. They are considered as serious gaffes among designers. Therefore, line endings need to be rebreaked in order to avoid widows.

Fig. 1.13: Widows and Orphans

Highlighted text is another important point discussed during the lecture. It creates a hierarchy of information. There are different kinds of emphasis that can be used in contrast to the main body of the text. When bolding a text to create emphasis, it needs to be downsized by 0.5pt. A gray patch can also be used behind the area that needs to be highlighted.

 

 Fig. 1.14 & Fig. 1.15: Bold Highlights and Italic Highlights

 

Fig. 1.16 & Fig. 1.17: Bold San Serif Highlights and Colour Highlights

When it comes to headlines within the text, there are many kinds of subdivision within the text of a chapter. Designers need to make sure the headlines clearly signify the relative importance of the heading to the text to the reader.

A head indicates a clear break between the topics within a section. It can be set to different variations as shown below in fig.

Fig. 1.18: Variations of Main Heading

The subordinate to the head, subheading indicates a new supporting argument and does not interrupt the text as strongly as the main heading does. Following are different methods that can be used for subheadings.

Fig. 1.19: Variations of Sub Heading

Although not common, sub-sub headings can be used to highlight specific facets of material within the subheading text. They do not materially interrupt the flow of reading.

Fig. 1.20: Variations of Sub-Sub Heading

Cross alignment is aligning the heading text to the text within the columns. When the heading text is bigger than the body text, the leading can be doubled to align both bodies of text.

Fig. 1.21: Cross Alignment

---

INSTRUCTIONS

Exercises

Lettering (Week 1 - Week 2)

As part of Lecture 1, we were asked to choose one of our personalities and then come up with five different letterings which represent that personality. As I see myself as a "Free & Independent" person, I decided to find a way to show that in my lettering. I came up with five sketches and after the feedback from Mr. Vinod and Mr. Shamsul, I came up with another sketch with modifications.

Fig. 2.1: Free; Sketch 1 - Wings representing freedom and flight

Fig. 2.2: Free; Sketch 2 - Evenly distributed letters and disconnected letters 

Fig. 2.3: Free; Sketch 3 - Open wings ready for flight

Fig. 2.4: Free; Sketch 4 - Evenly distributed letters with a bit of disconnection

Fig. 2.5: Free; Sketch 5 - Origami style / Paper plane for flight and freedom

Mr. Vinod and Mr. Shamsul found Sketch 5 interesting and gave feedback on trying a different angle to the paper plane and to try a different style for the rest of the letters. 

Fig. 2.6: Free; Sketch 6 - Sketch 5 modified according to feedback (Approved) 

After getting the approval for Sketch 6, I started to digitize it using Adobe Illustrator. I used the grid to keep all the letters in proportion and created them using the Rectangle and Eclipse Tool. I began with the letter R. 

 Fig. 2.7: Free; Creating the letter R with the Rectangle and Eclipse Tool

Fig. 2.8: Free; Letter R

After creating the first letter, I digitized the remaining letters the same way. 

Fig. 2.9: Free; Letters R I F T H

As I replaced the letter A with a paper airplane, I used Pen Tool and Line Tool to create the plane. 

Fig. 2.10: Free; Letter A, Paper Plane

After minor adjustments, I completed digitizing my sketch. 

Fig. 2.11: Free; Final digitization of Sketch 6

For the animation, I wanted the paper plane to fly around in an infinite loop to give more life to the concept of "Free and Independent" personality. To make the plane fly in the shape of an infinity loop, I used two circles to determine how the plane would move from one frame to another. 

Fig. 2.12: Free; Circles representing animation transition pattern

As there are two circles for the plane to rotate around, I made two separate files with the frames for each circle. 

Fig. 2.13: Free; 38 Frames for 1st circle rotation

Fig. 2.14: Free; 38 Frames for 2nd circle rotation

After exporting the total of 76 frames, I imported them into Photoshop to create frame animation. The frames were then made from all the 76 layers. Although, I noticed a duplicated frame and therefore had to remove it from the timeline. Which resulted in using a total of 75 frames to create the animation. 

Fig. 2.15: Free; 75 Frames loaded to the timeline to create the animation

Fig. 2.16: Free; Final Design JPEG

Fig. 2.17: Free; Final Design PDF

Fig. 2.18: Free; Final animation

Type Expression (Week 3)

For this exercise, we were asked to express six words typographically with the use of nine different typefamilies given to us. We had to identify the appropriate typeface for the word, come up with sketches, digitize it and also animate one of the six final designs. The words given to us were Sneeze, Gigantic, Emerge, Clean, Party, and Explode. 

Fig. 2.19: Sketch; Sneeze

Fig. 2.20: Sketch; Gigantic

Fig. 2.21: Sketch; Emerge

Fig. 2.22: Sketch; Clean

Fig. 2.23: Sketch; Party

Fig. 2.24: Sketch; Explode

After getting the feedback from Mr. Vinod and Mr. Shamsul, I digitized the final designs with some changes. Major changes were made to Party & Explode although the concept remained the same. 

Fig. 2.25: Digitized type expressions

Fig. 2.26: PDF; Digitized type expressions

I decided to animate Explode as my choice of type expression. 

Fig. 2.27: Explode; Chosen type expressions

I created 24 frames for the animation. 

Fig. 2.28: Explode; Animation frames

Fig. 2.29: Explode; Frames loaded to frame animation timeline in Photoshop

Fig. 2.30: Explode; Final animation

---

FEEDBACK

Week 1:
General Feedback: We were advised on how to create and manage content for our blogs.

Specific Feedback: -No specific feedback was given this week-

Week 2:

General Feedback: We were instructed on tools that might come in handy when digitizing our sketches. Step by step guide on how to create GIF animation using Adobe Photoshop was also given during class. 

Specific Feedback: Mr. Vinod and Mr. Shamsul approved my 5th sketch for digitization with some amendments. I used a paper plane as letter A in my name, which represents "Freedom". I was asked to try different angles for the airplane. Also, suggestions were given to change the other letters to a less decorative design compared to letter A.

Week 3: 

General Feedback: Mr. Vinod emphasized on labeling all the pictured uploaded to the blog as Figure 1.1 as it would help in referencing to that certain post later. In the Figure label, we were asked to indicate which personality it represents a brief description of the picture. He also asked us to pay attention to the hierarchy of information when posting our exercises on the blog. Regarding week 3 exercise, we were asked to consider how the six boxes are arranged on the artboard. 

Specific Feedback: Mr. Vinod and Mr. Shamsul expressed that it was a good job on the digitization and animation as well. Also, Mr. Vinod suggested making the animation a bit faster. As for the feedback on the blog content, I was asked to mention my personality in every figure description. Since the pictures of my sketches look warm, suggestions were given to recapture them in daylight and replace the existing ones. As per week 3 exercise, I was told that almost all the typographies looked similar in nature. Suggestions were given to be more expressive and try bolder typefaces. 

Week 4: 

General Feedback: Mr. Vinod briefed the class regarding the weekly submissions. He mentioned about the two submissions in type expression, the A4 sheet with six type expressions and the animation of the chosen expression. He also reminded us to document the process of the work that we do. Progression is key for a designer. It’s better to document all the development process and Mr. Vinod and Mr. Shamsul advised us not to delete the process even after the work was finalized. The final artwork is to be exported to a jpeg file. In addition, an embed PDF of the final artwork needs to be uploaded in our blogs as well. Since we have to write reflections for the exercise, we were told that it is okay to combine the weekly reflections to one paragraph for the projects. We are to download and install all the typefaces given to us for the last exercise.  

Specific Feedback: Mr. Vinod and Mr. Shamsul liked my final designs and animation. I was told I did a Good job.

---

REFLECTIONS

Week 1:

Experiences: Creating a blog and learning how to manage it was a new experience.

Observations: The class had an unexpected number of students compared to what I expected. Finding a good seat was tricky.

Findings: I was able to identify one of my personalities and focus my work directly towards it which I found enlightening.

Week 2:

Experiences: Tried out creating my own style of typeface and animation.

Observations: It was clear to me that no matter how much attention we pay to a task there are always ways to improve it better. I noticed many flaws with my design on the way. 

Findings: I found out that a mistake in a single frame when animating can throw the whole thing off balance.

Week 3:

Experiences: Got more in-depth to the frame speed in animations.

Observations: The more frames you have the smoother it is.

Findings: To create a sudden movement, there must be a jump in frames instead of going frame by frames. 

Week 4:

Experiences: Familiarized with InDesign more and got a better understanding of how to apply the contents from the lectures.

Observations: InDesign is much more suitable for large bodies of text.

Findings: It is much more convenient with text formatting for larger text with InDesign. 

---

FURTHER READING

How to Design a Typeface by Design Museum
(Week 1-4)

Fig. 5.01: How to Design a Typeface

Typeface plays a role in the meaning of the words presented. It also brings other layers of association and are most patent element of all. This book highlights on the development and evolution of typography and the factors that need to be considered when developing a typeface. It also includes a case study about Priori typeface, developed by Jonathan Barnbrook.

One of the factors to consider when developing a typeface is legibility. The legibility of a typeface can depend on the size, spacing and the weight of the type. It is said that legibility is in the eye of the beholder as different people see things differently. Which is why the content also matters. Typefaces speaks in different tones of voice depending on the legibility. It can also be a language of its own. Type expresses the dynamic relationship between content and form, language and sign. The layout of the typeface is crucial. It is what implies the hierarchy of information provided.

In the case study, the developers of Priori shared their story of what inspired them to create the typeface and how it is being used today. They also discussed about the different characteristics of the typeface.