Typography - Task 1: Exercises

 24 Sept 2024 – 28 Oct 2024 / Week 01 – Week 06

Sara Patel / 0362876

Typography / Bachelors in Creative Media Design / Taylors University

Task 1 : Exercise 1

---

TABLE OF CONTENTS

• Lectures
• Instructions
• Process Work
• Feedback
• Reflections
• Further Readings

---

LECTURES

Week 1:This lecture reflected a comprehensive exploration of typography's history which is shaped by the Western perspective, encouraging us to voice our opinions in the wider range of voices.We then studied into the evolution of  the tools and materials of that time to shape letterforms. The transformation from Phoenician to modern Latin and early Arabic was discussed. The Greeks introduced "boustrophedon," a style of writing where lines were alternately read from right to left and left to right, with the orientation also changing accordingly. The Etruscans and Romans carved in marble painted letterforms before inscribing them.

Fig 1: Transformation of letterforms

The transition of letterforms from Phoenician to Roman (1000 B.C.E. to 100 B.C.E.) was outlined, followed by handscripts from the 3rd to 10th C.E. Square capitals from this period had serifs added to the main strokes, with stroke widths created by a reed pen held at a 60° angle and then there were Rustic capitals, a compressed version of square capitals, which were written at a 30° angle. Although these were quicker and easier to write, their compressed nature made them harder to read.Than lowercase letterforms evolved as a faster alternative to uppercase. After that Uncials combined elements of both uppercase and lowercase, while half-uncials marked the beginning of fully developed lowercase letters. Charlemagne later standardized the writing system, introducing capitalization and punctuation. However, after the dissolution of his empire, regional variations emerged.

After that Gutenberg used his skills to invent printing press which made it easier to publish book by mimicking the work of scribes. Following this, we went through the classification of typefaces, based on Alexander Lawson's main form . These included:

Blackletter (1450) this was the earliest printed type used for books in Northern Europe.

Oldstyle (1475) which was based on lowercase forms.

Italic (1500) which was designed to complement Roman typefaces.

Script (1550) which was only suitable for short applications.

Transitional (1750) which exaggerated contrasts between thick and thin strokes and lighter brackets.

Modern (1775) which was rationalized evolution of the letter form.

Square Serif/Slab Serif (1825) which were characterized by heavy brackets and minimal variation between thick and thin strokes, eventually evolving to styles without brackets.

Sans Serif (1900) which removed serifs entirely.

A typeface combining both serif and sans-serif elements.

The lecture concluded with a quote: "If you don’t know history, then you don’t know anything. You are a leaf that doesn’t know it is part of a tree," showing us the importance of understanding the history behind what we study.

Week 2: This weeks lecture focused on textual information and text formatting. We began by learning about kerning, which refers to adjusting the space between individual letters and letter spacing, which refers to adding space between letters in a word. When both kerning and letter spacing are applied to a word, it is called tracking. We explored when to apply kerning and letter spacing, and how to use both in InDesign software. We also learned shortcuts to speed up the work and the differences between loose, normal, and tight tracking, and their effects on readability.

Fig 2: Kerning

Uppercase letters are more frequently letter spaced as it can stand independently, while lowercase letters rely on the counterform between letters to maintain readability. Adding letter spacing to lowercase letters can reduce readability, so it’s generally discouraged.

Next, we covered various types of text alignment/text formatting:

• Flush left: Each line begins at the same point but ends wherever the last word of the line ends. This creates consistent word spacing and an even "gray value" (the visual balance between text and white space). If grayness is too dark there is not enough leading or have given letter space or kerning to the text. if its too light there is too much letter spacing or leading. The right side of flush-left text creates a ragged edge, which should have a smooth curve, not a straight line.

• Centered text: This balances the text on both sides with equal value and weight on both sides, creating a strong visual shape on the page. It is recommended for short passages since its varied starting points make long texts difficult to read.

• Flush right: Text is aligned to the right, with a ragged left edge which is adviced to be smooth. Like centered text, it is best for short texts due to readability concerns.

• Justified: Both left and right edges are aligned, creating a symmetrical block of text by adjusting word and letter spacing. It is acheived by expanding or reducing spaces between words and letters. This openness can lead to "rivers" of white space, which should be avoided for better readability.

Designers choose text alignment based on several factors, including personal preferences, cultural influences, and the need to convey meaning. The primary goal is to present text in a clear and appropriate way, balancing creativity with readability. If we see the type before the text its adviced to change the type of the text.

We also discussed that beyond understanding history and unique characteristics of each typeface its important to understand how different typefaces are used for different messages and how typefaces influence readability, with factors such as x-height (the area between base line and the line above which is the median line) impacting legibility. X-height being larger than the  descender and ascender improves readability. We explored examples of different typefaces and their gray values to understand how they affect readability and appearance. The goal as a designer is to allow easy, prolonged reading.

Three key factors determine readability and legibility are:

1. Type size: Text must be large enough to be easily read at arm's length.
2. Leading space: The space between lines should allow for smooth vertical eye movementof the readers, typically 2-3 points of leading for large bodies of text.
3. Line length: This includes rule of thumb in which sentences should have no more than 55-65 characters per line, as increase in the letters in a line reduce readability.

 These three elements are interrelated and must be considered together one after the other. We also examined leading in different typefaces and discussed the importance of judging readability and legibility based on the medium of the final output be it print or screen.

Final ly, we learned that a type specimen book serves as a reference for type size, leading, line length, and other details. An ideal composition has a "middle gray value" for optimal readability. The concluding quotefor this lecture was "The devil is in the details," highlighting that typography is all about attention to detail.

Week 3: This lecture continued on the previous one, focusing on various methods of indicating paragraphs. 

• One method discussed was the use of the "pilcrow" (¶), a symbol found in most fonts, historically used to mark paragraph breaks. 
• Another example was the use of "line space" between paragraphs to ensure consistent alignment across columns of text. It was explained that if the line space is 12pt, the paragraph spacing should also be 12pt for consistency, particularly in long paragraphs. 
• We also covered the use of indentation to indicate paragraphs, with the indent typically matching the line spacing or the point size of the text. This method was traditionally used in newspapers to save space and works best with justified text. 
• Another technique mentioned was the "extended paragraph" which creates unusually wide columns of text but may have strong compositional or functional purposes, particularly in academic writing.

The lecture clarified the difference between "line space" and "leading".  While leading refers to the space between two lines of text, line space is the distance between the descender of one line and the descender of the next. The term "leading" originates from the historical practice of using strips of lead in typesetting.

Next, we learned about the importance of avoiding widows and orphans in typography. A widow refers to a short line of text left at the end of a column, often seen as a single word or short phrase starting a new column. This is something to avoid. An orphan, on the other hand, occurs when the last line of the previous column starts a new column, which is even more undesirable.

Widows, while sometimes forgivable in ragged-left or flush-right texts, are considered a serious error in justified text. Orphans, however, are seen as unacceptable. To avoid widows, the solution is to rework the line endings throughout the paragraph or adjust by kerning or letter spacing. We also examined examples of how to emphasize text within a column, recognizing that different levels of emphasis require different techniques. Emphasis can be achieved by using italics, increasing the boldness of the text within the same typeface, changing the typeface altogether, changing the color, or placing the text within a box. Additionally, we reviewed how reducing the point size can help highlight specific text or numbers effectively. Bullets or quotations are other useful ways to highlight text, while maintaining the reading axis.

We also distinguished between prime marks and quotation marks, understanding their different uses. Furthermore, we learned about the importance of creating a clear typographic hierarchy to ensure visual clarity, and we explored cross-alignment between headlines and body text, focusing on maintaining complementary vertical rhythms in the layout.

We ended this lecture with the quotation " Typography is two dimensional architecture, based on experience and imagination, and guided by rules and readability."

Week 4: In this lecture we discussed on the basics of typography in which we started from decribing letter forms. In which we had:

• Baseline: which is the imaginary line at the base of the letterforms.
• Median: which is the imaginary line defining the x-height of letterforms.
• X-height: which is the height in any typeface of the lowercase 'x'.

Fig 3: Letterform Basics

• Stroke: is any line that defines the basic letterform.
• Apex / Vertex: it is the point created by joining two diagonal stems. 
• Arm: are the short strokes off the stem of the letterform, either horizontal or inclined upwards.
• Ascender: the portion of the stem of a lowercase letterform that projects above the median.
• Barb: when the half-serif finish on some curved stroke.
• Beak: when the half-serif finish on the same horizontal arms.
• Bowl: when the rounded form that describes a counter either open or closed.
• Bracket: it is the transition between the serif and the stem.
• Cross Bar: the horizontal stroke that connects two stems together in a letterform.
• Cross Stroke: the horizontal stroke in a letterform that joins two stems together.
• Crotch: it is the interior space where two strokes meet.
• Descender: it is the portion of the stem below the baseline.
• Ear: the stroke extending out from the main stem of the letterform.
• Em/en: The width of an uppercase M, em is the distance equal to the size of the typeface and an en is half the size of an em.
• Finial: it is the rounded non-serif terminal of a stroke.
• Leg: it is short stroke off the stem.
• Ligature: it is the character formed by the combination of two or more letterforms.
• Link: the stroke that connects the bowl and the loop of a lowercase G.
• Loop: the bowl created in the descender of the lowercase G.
• Serif: the right-angled or oblique foot at the end of the stroke.
• Shoulder: the curved stroke that is not part of a bowl.
• Spine: the curved stem of the S.
• Spur: the extension that articulated the junction of the curved and rectilinear stroke.
• Stem: the significant vertical or oblique stroke.
• Stress: the orientation of the letterform, indicated by the thin stroke in round forms.
• Swash: the flourish that extends the stroke of the letterform.
• Tail: the curved diagonal stroke at the finish of certain letterforms
• Terminal: the self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop.

We then understood why its good to have a type family that has a good range of typefaces. These include:

• Uppercase letters: Capital letters including certain vowels
• Lowercase letters: include the same characters as uppercase.
• Small capitals: It is the uppercase letterforms drawn to the x height of the letterform and is used in paragraphs haved repeating acronyms to avoid letters sticking out. Its primarily found in serif fonts as is often called expect set
• Uppercase numerals: It's of the same kerning width and height as uppercase letters.
• Lowercase numerals: It is also known as old style figure or text figure and are set to x-height with ascenders and descenders.
• Italics: It is not found in small capitals and refers to the cursive handwriting.
• Punctuation / miscellaneous characters: Although punctuations are standard for all typefaces but miscellaneous characters might change so its important appropriate typeface.
• Ornaments: These are used in some type families to flourish the text. 

Next there are different letterforms:

• Roman: so called because the uppercase letters are derived from inscriptions of Roman monuments. Slightly lighter stroke to it is called "Book".
• Italics: named for Italian handwritting and Oblique are based on roman form.
• Boldface: Characterized by thick strokes, depending on its width are called semi bold, meduim, black extra black and super. In some typefaces the boldest rendition is called Poster.
• Light: It is lighter than roman and even lighter is called thin.
• Condense: It is a version of roman form extremely condense and often called compressed.
• Extended: It is an extended variation of roman.

Fig 4: Letterform Types

The concluding quote for this lecture was:"You are not a good typographer, if you aren't a good reader". 

Week 5 & 6: Refer TASK 2

---

INSTRUCTIONS

https://drive.google.com/file/d/1f0kiJIT5Sn4de2G9lpkcDqyDf5cUfsM5/view?usp=sharing

---

Task 1: Exercise 1 – Type Expression

We were given 4 words (bloom, fancy,smoke and spicy) to sketch out ideas and then once ideas are selected digitalise it using the 10 fonts given to us. 

Sketches

Sketched out few ideas for the 4 words given to us. 

Fig 7: Sketchwork of 4 words ( 24/09/24 )

Digitization draft work

I digitised few ideas of the 4 words to further enhance and explore. Tried different fonts for different words and created a draft of words. 

Fig 8: Digital Exploration ( 01/10/24 )

After getting reviewed i got to know that it was too distorted so had to work on it all over again and finalized on these 4 words to work further on.

Fig 9: Final Exploration ( 08/10/24 )

Than finalized on 2 from these 4 to work further and decide on how to get it animated. Lastly tried different ideas and drafted 2 animations.

Fig 10: Draft Animation 1 ( 08/10/24 )

Fig 11: Draft Animation 2 ( 08/10/24 )

I tried animating both but the first one seemed clumsy and distored. So i tried adding gradiant and different idea to animated which got me till this draft.

Fig 12:  Animation 1 ( 08/10/24 )

Didn't really like this animation so started working on the second one and after alot of trial and errors got it to the draft.

Fig 13:  Animation 2 ( 08/10/24 )

Finalized this as my final animation as it was looking better than all the other trials.
 

Final Animation

Fig 14:  Final Animation ( 08/10/24 )

Task 1: Exercise 2 – Text Formatting

We became familiar with several typographic elements such as typefaces, font size, leading, cross-alignment, kerning, paragraph spacing and the handling of widows and orphans, through four practical exercises which we had to complete before the actual assignment. We also learned to use a new software which was InDesign and that enabled us to format text appropriately. After the practice we got a text to format according to our understanding and knowledge so far.

Kerning & Tracking

Our first practice exercise was to use both kerning and tracking on our name in 10 different fonts to better understand the concept and its use in different typefaces.

Fig 15: Original Text ( 15/10/24 )

Fig 16: Kerned Text ( 15/10/24 )

Practice Layout

Next practice videos provided practice tutorial for layout designing.

Fig 17: Practice Formatting ( 22/10/24 )

After understanding the technicalities and the formatting of the texts, started exploring different layouts for the final assignment

Fig 18: Exploration Formatting ( 22/10/24 )

After getting my layouts reviewed and making minor adjustments i found the 2nd design more alligned so decided to go with that as my final layout.

Final Layout

Final Text Formatting:

HEAD

Font/s: Univers LT Std (Bold Condensed)

Type Size/s: 58 pt

Leading: 45 pt

Paragraph spacing: 12

BODY

Font/s: Univers LT Std (Roman)

Type Size/s: 10 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 51

Alignment: left justified

Margins: 24 mm top + bottom, 7 mm left + right

Columns: 2

Gutter: 10 mm

Fig 19: Final Layout ( 29/10/24 )

Fig 20: Final Formatting Layout PDF ( 29/10/24 )

Fig 21: Final Formatting Layout with grids ( 29/10/24 )

Fig 22: Final Formatting Layout with grids PDF ( 29/10/24 )

---

FEEDBACK

Week 1 Specific Feedback : I started watching lectures and started setting up my e-portfolio. Along with that I tried sketching out ideas for the 4 words but none of them were approved as i used a lot of additional elements in sketches. I was also asked to watch the lecture videos first and then work on the sketches to get a better idea on how to work on it. General Feedback : It was our first class of the semester. Ms. Vitiyaa explained us through the MIB and the provided instruction for the module. She taught us through with through how the module is going to go and what all we should expect further. She showed us some examples of typography words and them made us choose 4 words which we are supposed to use for our first assignment. We were also asked to watch lectures and start working on the sketch works for the chosen words. Week 2 Specific Feedback : Ms. V. reviewed my sketches and told that it was good but wasn't sure how i would execute those sketches in the 10 fonts given to us. So she asked me to experiment the sketches with the fonts given and update the portfolio along with watching videos. General Feedback : We went through what we need to do for this week which included updating the feedback sheet, updating the e-portfolio till lecture 3and watch the 2 videos given to us to understand better how to digitalize the sketches on AI. Along with these start exploring the sketches using the 10 fonts which were already assigned to us. Week 3 Specific Feedback : I started upgrading my digital words as Ms. V. told that it was good but too general and needed more emphasis. Tried exploring different ideas but nothing was up to the mark yet so have to improve further throughout the week and even had to start animating before next week. General Feedback : We were asked to update our feedback sheet and e - portfolio till week 3. We also had to complete the digital artwork of the words which i was already done with and we had to start animating once we were done digitalizing. At last we were asked to combine all our digital work and comment it under the Facebook post. Week 4 Specific Feedback : Ms. V. went through my work and told to redo it as it was too distorted. I tried exploring different fonts and ideas and finally decided on final 4 words and starting animating it all over again along with updating the blog. Also went through the videos and exercises in it. General Feedback : We were asked to update our feedback sheet and e - portfolio till week 4. We had to watch 5 videos on type formatting and the lecture video for this week for better understanding. Week 5 Specific Feedback : I couldn't install InDesign on my laptop due to technical errors so couldn't review the formatting but got the eportfolio reviewed and approved. Also went through the lectures and practice videos to get an idea of what has to be done. General Feedback : We were asked to update our feedback sheet and e - portfolio till week 5 along with completing our work and finalizing the task 1(ex1) for submission next week.

---

REFLECTIONS

Experience: My experience throughout Task 1 was both enjoyable as it was a new experience and highly challenging as it took me time to understand how and where to use the texts to make it look perfect. I gained a deeper understanding of the use of typography in many aspects of life, whether it be in advertising, publishing, or everyday digital interfaces, typography plays a crucial role in shaping how information is perceived. This realization heightened my appreciation for the subject and motivated me to approach it with much more curiosity and sincerity. One of the highlights for this assignment was the first part, exercise 1, although it was quite challenging and frustrating, as I had to redo it many times. However, it made me view ordinary text in a more fascinating way. The limitations of using just fonts encouraged creativity, as we had to convey a single word in various ways. In terms of technical execution, I felt relatively confident using Adobe Illustrator, Photoshop and InDesign. I was able to experiment with tools and features freely, allowing me to focus on refining my designs. The interactive discussions and feedback sessions helped me view typography from different perspectives, which greatly contributed to my learning process. Additionally, the weekly lectures provided a strong theoretical foundation, which was extremely helpful.

Observations: During our weekly classes with Ms. Vitiyaa and also the lecture videos, where we got the opportunity to review each other's work and go through samples, I made some valuable observations that significantly shaped my learning experience. One of the most striking realizations was how a single product such as a specific body of text could result in a wide range of outcomes. It was fascinating to see how, despite working with the same set of words, each of us approached the task with a completely different mindset and interpretation. Some designs were simple but opened my eyes to the endless possibilities that typography offers, where one person emphasized on clarity and structure, another prioritized abstract representation. Observing these differences helped me realize that typography is highly subjective.

Findings:In this assignment, I developed a deeper understanding for typography and its advantages across various formats. I had never observed text in such detail before, but now I appreciate the details of typography and its ability to convey messages through visual representation. Initially, I found this task challenging and even overwhelming but with time i started enjoying the exploration. My approach to typography had been always based on personal taste and intuition rather than on established rules and principles. This assignment introduced me to the technical aspects of typography, such as typefaces, kerning, and letter spacing, which have provided me with a more structured approach. I believe this foundation will be invaluable as I continue exploring typography. Additionally, the weekly tutorials and lectures helped me learn new insights and expand my knowledge. This continuous feedback has greatly improved my understanding and skill in typography.

---

FURTHER READINGS

I decided to read and summarise few parts of 2 books suggested by "Mr. Vinod" to better understand the concepts and gain more knowledge on Typography.

Fig 7: Reference Books

The Letters

Individual letters have distinct characteristics that define type families and can combine to create bold configurations. Their visual impact relies on the relationship with surrounding white space, enhancing typographic expression.

Fig 7: Examples

The Words

conveys ideas independently, with careful management of letter forms and spacing essential for clarity. The internal rhythms and patterns of letters create meaning, as exemplified by the word "Camerata."

Fig 7: Word Type

The Lines

Line arrangement is crucial, with clear relationships between lines and space. Alignments (justified, flush left/right, centered) contribute to rhythm and unity, supported by appropriate punctuation.

Fig 7: Line Usage

Column and Margin

Columns and margins interact to create visually pleasing layouts. Key factors include height-to-width ratio, texture, and tone, guiding the reader’s eye through effective organization.

Fig 7: Sample column/margin

Alignments

Flush left alignment is preferred for practicality, centered alignment suits formal contexts, and justified alignment offers structure but can seem artificial.

Fig 7: Sample Alignments

Type Size Relationship

Type sizes based on column width (e.g. 8 on 9 pt for up to 70 mm). Use a maximum of two sizes, often with headings twice the body size. Focus on consistency and elegance, avoiding decorative elements.

Fig 7: Different Type sizes

Rulers

Rulers establish text hierarchy, with bold lines marking sections and lighter lines for subdivisions, allowing creative interpretation within established principles.

Colors

Color acts as a signifier, primarily using a palette of red, blue, and yellow, selected to convey specific messages and enhance communication.

Fig 7: Color Sample