The history and development of typography have evolved significantly throughout history. It began with the basic practice of carving text onto natural surfaces and has progressed to the complex digital typography we use today. This evolution owes much to the influence of ancient cultures, such as the Phoenician alphabet and the Greek establishment of left-to-right writing.
Etruscans introduced the practice of painting letterforms on stones before permanent carving, leading to various typography styles. Square Capitals, created with reed pens at a 60° angle, allowed for diverse strokes and serifs, while Rustic Capitals, at a 30° angle, facilitated faster writing but with slightly reduced legibility.
The image above illustrates the evolutionary development of the letter 'A' from its early Phoenician form in 1000 B.C.E. (Left) to the Greek form in 900 B.C.E. (Middle) and ultimately to the well-known Roman version in 100 B.C.E. (Right).Cursive handwriting introduced lowercase letterforms for speed, and Uncials combined both uppercase and lowercase features. Formal lowercase, known as half uncials, emerged over time.
Hand script from 3rd - 10th Century C.E |
Figure 1.6: 4th or 5th century: Square Capitals || 14/08/23
|
 |
| Figure 1.7: Late 3rd – mid 4th century: Rustic capitals || 14/08/23 |
 |
Figure 1.8: 4th century: Roman cursive || 14/08/23
|
 |
| Figure1.9: 4th – 5th century: Uncials || 14/08/23 |
 |
Figure 1.10: 500: Half-uncials || 14/08/23
|
 |
| Figure 1.11: 925: Caloline miniscule || 14/08/23 |
 |
Figure 1.12: 1300: Blackletter (Textura) || 14/08/23
|
 |
| Figure 1.13: 1455: 42 line bible, Johann Gutenberg, Mainz || 14/08/23 |
Charlemagne's standardization of upper and lowercase, capitalization, and punctuation simplified communication. After his empire's dissolution, regional writing styles emerged.
Johannes Gutenberg's printing press revolutionized typography by using brass matrixes, increasing book production and reducing costs.
Modern typefaces often digitize classic handwriting, classified into categories like Blackletter, Oldstyle, Italic, Script, Transitional, Modern, Square/Slab Serif, Sans Serif, and Semi Serif, each tailored to specific needs.
 |
Figure 1.14: Text type classification || 14/08/23
|
In typography, uppercase and lowercase letters, small capitals, numerals, and miscellaneous characters all play essential roles. Typeface styles, including Roman, Italic, Boldface, Light, and others, offer diverse typographic choices for readability and expression.
This rich history reflects both technological progress and cultural influences that have shaped typography into what it is today.
Lecture 2: Typo_3_Text_P1
1. Tracking: Kerning and Letterspacing
 |
| Figure 1.15: Tracking: Kerning and Letterspacing || 08/09/23
|
 |
| Figure 1.16: Normal tracking, loose tracking and tight tracking || 08/09/23 |
Typography involves precise control of spacing and alignment, with key elements being kerning and letter-spacing. Kerning refers to automatic letter spacing adjustments, often confused with manual letter-spacing, which involves adding space between letters. Both of these activities fall under the broader concept of tracking, which encompasses adjusting space within text.
Tracking involves adjusting space within a word or sentence, while letterspacing adds space between letters, especially in uppercase usage. Modifying letter spacing between words can impact pattern recognition and reduce recognizability. People tend to focus on the counter form of space between strokes while reading. Normal tracking enhances readability, while loose and tight tracking can diminish it.
The goal is to create a visually appealing and cohesive text field. Designers often enlarge type for a closer look at the spacing between letters. Precision in kerning, letter-spacing, and tracking is vital for achieving well-composed and readable typography.
2. Formatting text
Flush Left Format:
Resembles handwriting asymmetry.
Consistent spacing between words for an even gray value.
Centered Format:
Imposes symmetry, creating equal value at both ends.
Transforms text into shapes, adding a pictorial quality.
Requires careful line break adjustments to avoid jagged appearance.
Flush Right Format:
Emphasizes the end of a line.
Useful in situations (like captions) where a strong right orientation is needed.
Justified Format:
Imposes a symmetrical shape on the text.
Achieved by adjusting spaces between words and letters.
Careful attention needed to avoid 'rivers' of white space through the text.
3. Texture
 |
| Figure 1.17: Anatomy of a typeface || 08/09/23 |
4. Leading and Line Length
 |
Figure 1.18: Leading and line length || 08/09/23
|
 |
| Figure 1.19: Tight leading Vs. Loose leading |
Setting text type aims to enable effortless and prolonged reading while ensuring the text field fills the page akin to a photograph. The type size should be sufficiently large for comfortable reading at arm's length, such as when holding a book. Leading, or line spacing, is crucial; tight spacing prompts vertical eye movement, risking loss of place, while excessive spacing creates distracting patterns. Appropriate leading is determined by line length, with shorter lines needing less and longer lines requiring more.Effective typography balances readability with efficient use of space. Key considerations include type size, leading (line spacing), and line length. Text should be easily readable, leading should guide the reader's eye without distraction, and line length should typically fall within 55-65 characters for optimal reading.
5. Type specimen book
 |
| Figure 1.20: Sample type specimen sheet || 08/09/23 |
A type specimen book displays typefaces in various sizes, essential for making informed choices. Without printed samples at different sizes, decisions are made on-screen only for the final version. This book serves as a precise reference for type, size, leading, line length, etc.
Lecture 4: Typo_4_Text_Part 2
1. Indicating Paragraphs
 |
| Figure 1.21: Pilcrow (¶) || 18/09/23 |
 |
| Figure 1.22: Leading* || 18/09/23 |
|
 |
| Figure 1.23: Standard indentation || 18/09/23 |
|
| Figure 1.24: Extended paragraphs || 18/09/23 |
One way to signal paragraphs is through the use of the 'pilcrow' symbol (¶), although this practice is rare in modern times and has its origins in medieval manuscripts. Alternatively, paragraph spacing can be achieved by adjusting line spacing (leading*), with the paragraph space matching the line space when set at 12 points. This approach ensures consistent alignment across text columns. Another common method involves standard indentation, where the indent size typically matches either the line spacing or the text point size. For more expansive text columns, extended paragraph indentation can be employed. Despite some issues associated with this approach, there may be valid reasons for choosing it.
2. Widows and Orphans
 |
| Figure 1.25: Widows and orphans || 18/09/23 |
In traditional typesetting, particularly in the realm of conscientious commercial publishing, two significant layout concerns are widows and orphans:
Widow: A widow refers to a short line of text left alone at the end of a text column.
Orphan: An orphan denotes a short line of text left alone at the beginning of a new text column.
In justified text, where both sides align evenly, widows and orphans are considered serious problems. Flush right and ragged left text layouts, where only one side aligns, are somewhat more tolerant of widows but still not ideal. However, orphans are always deemed unacceptable. The primary solution for addressing widows is to adjust line breaks within a paragraph to ensure that the last line doesn't appear noticeably shorter. Orphans require more careful attention. Diligent typographers make sure that no column of text starts with the last line of the preceding paragraph to prevent the occurrence of orphans.
3. Highlighting text
Here are a few straightforward examples of how to highlight text within a text column. Different types of contrast call for different types of emphasis.
 |
| Figure 1.26: Highlighting text by italics, bold and coloured texts || 18/09/23 |
 |
Figure 1.27: Highlighting text by placing a field of colour || 18/09/23
|
Maintaining the left reading axis (see right example) of the text guarantees readability is at its finest when highlighting text by placing a field of colour towards the back of the text.
 |
Figure 1.28: Highlighting text with bullet points || 18/09/23
|
To maintain a strong reading axis, it is occasionally necessary to position certain typographic elements outside the left margin of a type column (extending as opposed to indenting).
Figure 1.29: Highlighting text with quotation marks || 18/09/23
Elements like quotation marks, similar to bullets, can create a noticeable indent, disrupting the left reading axis. For reference, you can compare the indented quote at the top with the extended quote at the bottom.
4. Headlines Within Text
Headings serve as markers that distinguish different sections within a text.
 |
Figure 1.30: A head || 18/09/23 |
A head denotes a distinct division between the subjects of a section. The letters 'A' are capitalised, bold, and set off from the text in the examples that follow. The fourth illustration features a "extended" A head to the left of the text.
 |
Figure 1.31: B head || 18/09/23 |
The A heads in this situation are superior to the B heads. B heads suggest a fresh justification or illustration of the subject at hand. As a result, they shouldn't disrupt the text as forcefully as A heads do. Here, the B heads are displayed in small caps, italic, bold serif, and bold san serif.
 |
Figure 1.32: C head || 18/09/23 |
Even though they are uncommon, the C heads draw attention to particular aspects of the B head text. They don't significantly disrupt the reading's flow. These C heads are displayed in small caps, italics, serif bold, and san serif bold, just like B heads.
5. Cross alignment
 |
Figure 1.33: Cross alignment || 18/09/23 |
While expressing the complementary vertical rhythms, cross-aligning headlines and captions with text type strengthens the architectural sense of the page—the structure. In this illustration, three lines of text are cross-aligned with four lines of caption type that are led at 9 points.
Lecture 5: Typo_2_Basic
Describing letterforms
 |
Figure 1.35: Baseline, Median, and X-height || 19/08/23
|
|
 |
Figure 1.36: Stroke || 19/08/23
|
Figure 1.37: A Type Primer (2003). Page 2 & 3 || 19/08/23
Typography involves a comprehensive understanding of letterforms and typefaces, each with its unique characteristics. Letterforms have distinct elements, such as the baseline, which serves as the visual foundation for letter shapes, the median, representing the x-height of the letters, and the x-height itself, determined by the lowercase 'x.' Strokes define the primary lines of letterforms, and apex or vertex points are created at the intersection of diagonal stems. Arms are short strokes extending from the main stem, either horizontally or upward, while ascenders are portions of lowercase stems projecting above the median. Descenders, conversely, extend below the baseline. More features that contribute to the intricacies of letterforms are discussed below:
- Apex / Vertex: the point created by joining two diagonal stems
- Arm: short strokes off the stem of the letterform (horizontal: E, F, L; inclined upward: K, Y)
- Ascender: the portion of the stem of a lowercase letterform that projects above the median
- Barb: the half-serif finish on some curved stroke
- Beak: the half-serif finish on the same horizontal arms
- Bowl: the rounded form that describes a counter
- Bracket: the transition between the serif and the stem
- Cross Bar: the horizontal stroke in a letterform that joins two stems together
- Cross Stroke: the horizontal stroke in a letterform that joins two stems together
- Crotch: the interior space where two strokes meet
- Descender: the portion of the stem of a lowercase letterform that projects below the baseline
- Ear: the store extending out from the main stem or body of the letterform
- Em/en: originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface; an en is half the size of an em
- Finial: the rounded non-serif terminal to a stroke
- Leg: short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R)
- Ligature: 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 (in some typefaces)
- 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.
 |
| Figure 1.38: Uppercase letters || 19/08/23 |
 |
| Figure 1.39: Lowercase letters || 19/08/23 |
 |
| Figure 1.40: Uppercase numerals || 19/08/23 |
|
 |
Figure 1.41: Lowercase numerals || 19/08/23
|
 |
| Figure 1.42: Punctuation, miscellaneous characters || 19/08/23 |
In the context of fonts, uppercase letters consist of capital characters, accented vowels, and ligatures like c cedilla and n tilde. Lowercase letters mirror the uppercase but in smaller form. Small capitals are uppercase letters adjusted to the x-height and are typically found in serif fonts as part of an expert set. Numerals in uppercase (lining figures) match the height of uppercase letters and maintain uniform kerning width, while lowercase numerals (old style figures) align with the x-height and include ascenders and descenders. Italics are often produced alongside fonts and are derived from fifteenth-century Italian handwriting, while boldface variations feature thicker strokes compared to the standard roman form. Typeface characteristics also include light and heavy strokes, where the boldest rendition may be referred to as 'Poster.'
 |
Figure 1.43: Describing typefaces || 19/08/23
|
In typography, the term 'Roman' denotes a basic letterform style, with uppercase forms derived from inscriptions on Roman monuments. It is always referred to in lowercase, and a slightly lighter stroke than Roman is termed 'book.' 'Italic' is named after fifteenth-century Italian handwriting, forming slanted characters. 'Boldface' features a thicker stroke than the Roman, with variations like 'semi-bold,' 'medium,' 'black,' 'extra bold,' or 'super.' The boldest rendition is termed 'poster.' 'Light' has a lighter stroke than Roman, and even lighter strokes are termed 'thin.' 'Condensed' represents a narrower version of the Roman, with extremely condensed styles often labeled as 'compressed.' On the other hand, 'Extended' is a variation with broader proportions than the Roman form.
 |
Figure 1.44: Comparing typefaces || 19/08/23
|
Overall, the intricacies of letterforms and typefaces contribute to the rich world of typography, allowing designers to create visually appealing and coherent text compositions. These elements play a crucial role in enhancing readability and aesthetics in written communication.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1-eBJpewe3DfMrMJqL1YLtcAc97J_ymgH/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1:
Exercise 1: Type Expression
In Exercise 1, four words were chosen from the list: Melt, Vibrate, Glitch, Roll, Scream, and Sleep. Creative concepts for each word were brainstormed to start with. After selecting the concepts, the digitization phase was entered, utilizing the ten provided typefaces. Through a series of iterations, the appropriate typeface was employed, and the letters were arranged in a manner that allowed the meaning and motion of each word to be visually conveyed, both in still and dynamic form.
I have chosen to work with Melt, Roll, Sleep and Glitch. Below are the researches and sketches for my chosen words.
Research:
Achieving a greater impact in type expression without the use of illustrations is a consideration, taking into account the rule that "The best ideas have simple but memorable solutions" while actively searching for inspiration during my research.
Melt
Figure 2.0: Melt visualisation || 20/09/23
Roll
 |
Figure 2.1: Roll visualisation || 20/09/23
|
 |
Figure 2.3: Glitch visualisation || 20/09/23
|
Sleep |
Figure 2.4: Sleep visualisation || 20/09/23
|
Sketches
Subsequently, I created digital sketches of the selected words to further hone my skills in pattern and design before proceeding to create the final digitalized type expression. This process proved instrumental in shaping a more refined and improved result.
 |
| Figure 2.5: Sketches of Glitch || 18/09/23 |
 |
| Figure 2.6: Sketches of Melt || 18/09/23 |
 |
| Figure 2.7: Sketches of Sleep || 18/09/23 |
 |
Figure 2.8: Sketches of Roll || 18/09/23
|
 |
| Figure 2.9: Mixed word sketches || 18/09/23 |
Digitisation
Afterward, I proceeded to create digital type expressions using Adobe Illustrator, utilizing various fonts provided, until I achieved my four final type expressions. Exploring various styles enables us to arrive at the optimal final type expression. I created six type expressions for each word, aiming to digitize my conceptual and visual understanding. The goal was to provide meaningful and expressive type representations for the words.
 |
| Figure 2.10: Digitisation process for all four words || 20/09/23 |
Melt |
Figure 2.11: Digitalisations for Melt || 20/09/23
|
For the word "melt," my concept aimed to visually convey the idea of melting. I experimented with different forms, incorporating melting droplets and melted letters. Initially, I favoured the second "MELT," where the letter E is larger and appears to be melting, considering it as my final choice. However, after receiving feedback from Mr. Vinod, he preferred the fifth "MELT," where all the letters are melting. I found this change to be a good idea as the fifth version more accurately expresses the concept of melting.
Roll |
Figure 2.12: Digitalisations for Roll || 20/09/23
|
For the word "roll," my concept aimed to visually convey the idea of rolling. I experimented with different forms, incorporating motion lines and rolling letters. Initially, I favoured the fifth "ROLL," where the letters O, L and L appears to be rolling down the curvy extended part of R, considering it as my final choice. However, after receiving feedback from Mr. Vinod, he preferred the sixth "ROLL," where all the letters are rolling in a tire like shape with some motion line to highlight the idea of rolling. I found this change to be a good idea as the sixth version more accurately expresses the concept of rolling.
Glitch
 |
Figure 2.13: Digitalisations for Glitch || 20/09/23
|
For the word "glitch," my objective was to visually capture the concept of glitching. I explored diverse forms, incorporating elements like lines and inverted letters. The quest for the most suitable font to achieve a glitching effect led me to experiment with various options. Ultimately, I leaned towards the first "GLITCH," featuring a black background with white letters, subtle shadows, and faded lines to convey the glitch effect. This version, accentuating the glitchy atmosphere, was chosen as my final preference.
Sleep |
Figure 2.14: Digitalisations for Sleep || 20/09/23
|
For the word the word "sleep," my goal was to visually capture the essence of sleeping or feeling sleepy. I explored various forms, introducing elements like sleeping bubbles and playful, tilted letters to depict a sequence. To enhance the sleep-friendly atmosphere, I experimented with darker backgrounds. Ultimately, I preferred the fourth "SLEEP," featuring a black background with white letters and sleeping bubbles incorporated into the Es. This version, emphasizing a darker room, was considered my final choice.
Final Type Expression:
Ultimately, after creating multiple digital type expressions in Adobe Illustrator, I carefully evaluated and selected four of them as my final choices. These four type expressions were deemed to best represent my intended design and message.
 |
Figure 2.15: Final digitisation || 20/09/23
|
Final digitisation PDF <iframe src="https://drive.google.com/file/d/1VSLknKnKvE4VyO9qGygFeDVBdjYeBQ-Z/preview" width="640" height="480" allow="autoplay"></iframe>
Work process:
Melt
 |
| Figure 2.16: Final digitisation of Melt || 22/09/23 |
|
My concept for the word "MELT" centers around visually depicting the letters as if they are in the process of melting. I aim to create a typographic representation where the characters appear to gradually liquefy or soften, evoking the sensation of a melting substance. This concept seeks to convey a sense of transformation and fluidity within the typography, aligning with the inherent meaning of the word "MELT."
Working steps:
1. I used the font 'Gill Sans Std (Shadowed)' and text size was 103.58 pt to type the word "MELT"
2. Then I added the melting effect all over the four letters using the 'Curvature' tool.
3. I adjusted the color of the added curves to correspond with black in the shadowed area and white in the illuminated area.
Sleep
 |
| Figure 2.17: Final digitisation of Sleep || 22/09/23 |
I intend to create the word "SLEEP" in a manner that conveys a sense of sleepiness, ensuring it is easily understood by all viewers. My focus will be on achieving a recognizable and effective sleeping effect within the design.
Working steps:
1. I typed the letters S, L and P using the font 'Gill Sans Std (Ultra Bold Condensed)'.
2. I typed the letter E using the font 'Univers LT Std (59 Ultra Condensed)'.
3. I set the letters S, L and P to 78.25 pt, E to 73.82 pt.
4. i elongated L's lower part using the 'line segment tool'
5. i rotated the letter E horizontally till the looked like the are sleeping on L and then added some sleeping bubbles on the E's using the 'Curvature' too as if they are snoring.
Glitch
 |
Figure 2.18: Final digitisation of Glitch || 22/09/23
|
For the word 'GLITCH,' my concept involves making a deliberate alteration to one of the letters. This alteration includes leaving certain portions of the letter blank, creating a font that appears somewhat incomplete, while still maintaining readability without becoming too obscure.
Working steps:
1. I type the word 'GLITCH' using the font 'Gill Sans Std (Light Shadowed)' and set the size to 60 pt.
2. I duplicated the word and pasted it twice in the background with reduced opacity to enhance the glitchy effect.
3. I made the background black using the 'Rectangle' tool.
4. Finally, I applied the glitch effect throughout the word using the 'Line Segment' tool, adjusting the line colors to include white, black, and grey elements.
Roll
 |
Figure 2.19: Final digitisation of Roll || 22/09/23
|
My concept involves arranging the word 'roll' in a way that aligns with its actual shape. This concept draws inspiration from real-life examples of 'roll' items such as chocolate rolls, spring rolls, roti rolls, and more, aiming to capture the essence of their physical form in the typographic layout.
Working steps:
1. I made a the black circle using the 'Ellipse' tool.
2. I made another smaller while circle using the 'Ellipse' tool and placed it inside the black circle to make it look like a tire.
3. I type the letters R, O, L and L (each 3 times) using the font 'Serifa Std (55 Roman)' and set the colour to white.
4. I set the size of all the letters to 47.16 pt
5. I tilted each letters accordingly to fit in the circle.
6. Finally, I added some curved lines using the curvature tool depicting the rolling effect.
Type Expression Animation
For our type expression animation project, we are required to select one word out of four. Before commencing the animation, we need to follow the tutorial provided by Mr. Vinod. In the tutorial, he guides us through the step-by-step process of creating animation using Adobe Illustrator and Photoshop.
For my animation, I've chosen the word "Sleep". My initial idea was to make the words look tired and fall asleep on each other and then the light turns off. On my first attempt I used 20 frames only.
 |
| Figure 2.20: Timeline of the animation (first attempt) || 23/9/2023 |
 |
Figure 2.21: First attempt of Animated Type Expression "Sleep"- GIF || 23/9/2023
|
|
Following Mr. Vinod's feedback, it appeared that the animation gave the impression of falling rather than sleeping. Taking his suggestion into account, I decided to employ a different type expression, particularly focusing on enhancing the depiction of sleeping bubbles.
 |
Figure 2.22: Second attempt of Animated Type Expression "Sleep"- GIF || 26/9/2023
|
For my second attempt at the animation, I noticed that the letter "P" seemed to be moving independently without a real cause. Consequently, I opted to make some modifications to address this issue.
 |
Figure 2.23: Timeline of the animation (final attempt) || 26/9/2023
|
 |
Figure 2.24: Final Animated Type Expression "Sleep"- GIF || 26/9/2023
|
In the end, I utilized a total of 38 frames to achieve the final animation. The final concept involves portraying the letters "E" as sleepy characters hurrying towards the bed symbolized by the letter "L." Meanwhile, the letter "P" advances only when "L" extends to transform into a bed, creating an automated system where "P" is gently pushed by "L" to make space. Eventually, they settle down and doze off, with sleeping bubbles emanating from them as a whimsical sign of slumber. Lastly, the light turns off which is depicted by the black background at the end.
Exercise 2: Text Formatting
In Exercise 2, our task involves crafting a definitive layout for text formatting, utilizing various aspects such as typefaces, type size, leading, line length, etc. Prior to this, our focus is on understanding and practicing kerning and tracking.
Kerning and Tracking:
Following the first tutorial, I systematically incorporated the 10 font demonstrations, carefully selecting between light, bold, and italic variations to achieve a balanced visual. Our task is to employ kerning and tracking in formatting our names using the 10 provided typefaces. We have the flexibility to utilize various fonts and type sizes within a typeface. The text formatting exercise was carried out using InDesign. Kerning involves adjusting the space between individual letterforms, while tracking involves adjusting the overall space of the letterforms. The technique employed involves squinting to evaluate spacings, ensuring that positive and negative spacings are evenly distributed. A shortcut for this process is Option + Left/Right arrow.
 |
| Figure 2.5: Text Formatting before kerning & tracking || 23/09/23 |
I enhanced my text formatting exercise by introducing changes to certain font styles, aiming to add a more vibrant and visually appealing touch.
 |
Figure 2.6: Text Formatting after kerning & tracking || 23/09/23
|
Final Outcome: |
Figure 2.7: Final outcome after kerning & tracking || 23/09/23
|
|
Final outcome after kerning & tracking PDF |
|
<iframe src="https://drive.google.com/file/d/1dUEMQu3__Bw4Z8GWNrdo8O7k-XTPA8am/preview" width="640" height="480" allow="autoplay"></iframe>
Layout Exercise:
Moving forward to the Text Formatting Task, we were given a Word file in our Teams File that progressively introduces larger amounts of text. Our task is to generate a layout using the given text. Our responsibility is to manage various aspects of text formatting, encompassing type choice, type size, leading, line length, paragraph spacing, forced line breaks, alignment, kerning, widows and orphans, and cross-alignment. Limited to the 10 provided typefaces, we are required to incorporate a black and white photograph into the layout, accompanied by a caption.
Before finalizing one layout, I created four different layouts for this exercise. The process involved exploration and experimentation, emphasizing the idea that the more you engage and play around, the better your outcomes become.
Considerations for designing the overall layout include maintaining a character length of 55-65, using a font size between 8-12, ensuring paragraph spacing is the same as leading, setting leading to follow the point size or be 2 points larger. Cross alignment can be achieved by maintaining leading as multiples of 2 with the baseline grid turned on.
Layout 1:
 |
Figure 2.8: First layout || 23/09/23
|
|
Head
Fonts: Bodoni Std Bold (headline), Univers LT Std 55 Oblique (byline)
Type Sizes: 36 pt (headline), 10 pt (byline)
Leading: 22 pt (headline), 11 pt (byline)
Body
Font/s: Univers LT Std 45 Light (body text), Univers LT Std 45 Light Oblique (caption)
Type Size/s: 9 pt (body text), 9 pt (caption)
Leading: 11 pt (body text), 11 (caption)
Paragraph spacing: 11 pt (body text)
Alignment: Left aligned (body text & caption)
Margins: 12.7 mm (top, left, right), 50 mm (bottom)
Columns: 4
Gutter: 5 mm
Layout 2:
 |
Figure 2.9: Second layout || 23/09/23
|
Head
Fonts: Bodoni Std Roman (headline), Gill Sans Std Light Italic (byline)
Type Sizes: 40 pt (headline), 14 pt (byline)
Leading: 22 pt (headline), 11 pt (byline)
Body
Font/s: ITC Garamond Std Light (body text), Futura Std Light Oblique (caption)
Type Size/s: 9 pt (body text & caption)
Leading: 11 pt (body text & caption)
Paragraph spacing: 11 pt (body text)
Alignment: Left aligned (body text), Right aligned (caption)
Margins: 12.7 mm (top, left, right), 50 mm (bottom)
Columns: 4
Gutter: 5 mm
Layout 3:
 |
Figure 2.10: Third layout || 23/09/23
|
|
Head
Font/s: Bodoni Std Bold (headline), Gill Sans Std Light Italic (byline)
Type Size/s: 50 pt (headline), 14 pt (byline)
Leading: 44 pt (headline), 11 pt (byline)
Body
Font/s: ITC Garamond Std Book (body text), Futura Std Light Oblique (caption)
Type Size/s: 9 pt (body text), 9 pt (captions)
Leading: 11 pt (body text), 11 pt (captions)
Paragraph spacing: 11 pt (body text)
Alignment: Left aligned (body text), Right aligned (caption)
Margins: 12.7 mm (top, left, right), 80 mm (bottom)
Columns: 4
Gutter: 5 mm
Layout 4:
 |
Figure 2.11: Fourth layout || 23/09/23
|
Head
Fonts: Bodoni Std Roman (headline), Univers LT Std 55 Oblique (byline)
Type Sizes: 36 pt (headline), 10 pt (byline)
Leading: 22 pt (headline), 11 pt (byline)
Body
Font/s: Univers LT Std 45 Light (body text), Univers LT Std 45 Light Oblique (caption)
Type Size/s: 9 pt (body text), 9 pt (caption)
Leading: 11 pt (body text), 11 (caption)
Paragraph spacing: 11 pt (body text)
Alignment: Left aligned (body text), Right aligned (caption)
Margins: 12.7 mm (top, left, right), 50 mm (bottom)
Columns: 4
Gutter: 5 mm
Final outcome:
After careful consideration of multiple layouts, Layout 3 emerged as the most visually appealing. It employed a thoughtful combination of fonts, type sizes, and leading for both the heading and body sections.
 |
Figure 2.12: Final Text Formatting (without grids) - JPEG || 30/09/23
|
 |
Figure 2.13: Final Text Formatting (with grids) - JPEG || 30/09/23
|
PDF without Guides and Grids
<iframe src="https://drive.google.com/file/d/1HAtfp5-QwUBh2cy_OxUbLFGNxlQ3QRi1/preview" width="640" height="480" allow="autoplay"></iframe>
PDF with Guides and Grids
<iframe src="https://drive.google.com/file/d/1Ir6gS8JiqZSf9s3jdv0fBbcn-TS3jSKJ/preview" width="640" height="480" allow="autoplay"></iframe>
FEEDBACK
Week 1
Specific Feedback: Module not registered (Absent)
General Feedback: Module not registered (Absent)
Week 2
Specific Feedback: Module not registered (Absent)
General Feedback: Module not registered (Absent)
Week 3
Specific Feedback:
Set up the E-portfolio
Install Adobe Software: Illustrator, photoshop & inDesign
Watch all the lectures and start with task-1
General Feedback:
Follow the instructions properly and update the tasks on time to avoid work pile up.
Every week or regularly after reading, update "further readings." If you can, read the entire book or just a paragraph—either is acceptable.
Week 4
Specific Feedback:
Add dates with the picture captions
Update research and work process
General Feedback:
Add figure no before submission
Pay attention to the overall layout of the four boxes
The four components that make up your artwork should work together as a whole. It must provide careful thought to the composition, contrast, and balance. You want to give them a sense of community without giving them a unique vibe.
It might be advisable to change the font for your name and student ID to Univers regular.
Week 5
Specific Feedback:
Change the final outcome choice of the digitalised type expression: Melt & Roll
Glitch not too interesting, try improving
Gif looking more like falling and not sleeping, start from baseline and add the sleeping bubble instead
Try making the lines more evenly curved for exercise 2
Add a hyphen when its oddly necessary
General Feedback:
Download PDF and JPEG with both grids and without grids for proper verification of the work, failure to do so shall deduct marks.
REFLECTIONS
Experience
During the typography module, discovering the intricacies of typographic anatomy proved to be a revelation. Initially, concepts such as serifs, ascenders, and descenders felt overwhelming, like deciphering a code only programmers could understand. Gradually, I realised that these ostensibly insignificant details have a substantial effect on the readability and aesthetic appeal of text. The first task revealed latent creative potential within me, awaiting exploitation. Mr. Vinod has made learning typography a stimulating and enlightening experience. Mr. Vinod presented the basic principles of typography.The novel and novel experience of the typography class intrigued me. However, I also experienced uncertainty regarding the originality of my sketch concepts. Mr. Vinod continued to actively mentor us during the second week, emphasising the significance of regular progress reporting. Mr. Vinod evaluated the our portfolios and provided invaluable feedback. Observing the various approaches students took to their assignments was enlightening. Under his direction, we began refining our Adobe Illustrator type design skills. This was followed by an investigation of Adobe Illustrator skills and a project involving animated type. Attending Mr. Vinod's class was comparable to attending a valuable, no-cost seminar. I appreciate the opportunity to delve into this module and uncover the nuances of typography.
Observation
In typography, the interaction of letter forms and the spaces between them creates a visual language that fuses precision and artistry with seamlessness. Mr. Vinod elucidated this intricate ballet of form and function, fostering in me discipline and organisation. His teachings not only prepared me for challenges but also imparted confidence. Mr. Vinod enforced weekly e-portfolio updates, which stimulated personal growth. The external application of his recommendations reduced tension levels. Adopting the practise of not procrastinating was an eye-opening revelation that I am anxious to incorporate into my daily routine. Typography's influence extends beyond the surface, shaping how readers interact with content on conscious and subconscious levels. Elements such as font choices, spacing, line height, and alignment carry the power to elicit emotional responses, impacting readability, comprehension, and information retention. For instance, a clear, legible font can convey a sense of clarity and professionalism, establishing trust and confidence in the reader.
Findings
The choice of typefaces, sizes, and spacing transcends ordinary aesthetics because it can evoke emotions, establish hierarchy, and improve readability across a variety of communication channels, from print to digital media. Throughout this voyage, I have realised the significance of documenting and recording our processes, not only in design but in every aspect of our endeavours. This practise permits us to revisit and expand upon prior work, thereby directing it in new directions. The universal truth of data backup applies not only to the digital domain, but also to our daily work, projects, and routines. Through personal experiences and keen observations, it becomes apparent that typography permeates and significantly influences our daily lives. Its role extends beyond aesthetics, impacting consumer choices and the effectiveness of communication. Furthermore, typography serves a pivotal role in branding and marketing, strategically utilizing specific typefaces and design choices to evoke desired emotional responses in the audience. The contrast between bold, playful fonts in children's products and sophisticated, elegant typography in luxury brands exemplifies its versatile impact.
FURTHER READINGS
Week 1
 |
Figure 3.1: A Type Primer by John Kane - Cover Page || 30/08/23
|
Having delved into "a type primer," I've acquired a more profound comprehension of typography and its foundational principles. The book has imparted several noteworthy lessons, including:
Typography Basics: The book likely provided insights into the fundamental elements of typography, encompassing aspects like fonts, typefaces, point size, line spacing, and kerning. These form the cornerstone for anyone engaged in text and design work.
Establishing Hierarchy and Emphasis: I probably learned strategies for crafting visual hierarchy and emphasizing key information within text. This involves manipulating font weight, size, and style to ensure critical content stands out, a pivotal skill in design and communication.
Alignment and Layout Considerations: The book might have delved into the significance of text alignment and layout design, elucidating how different alignment choices impact readability and the aesthetic appeal of documents or web pages.
Real-world Typography Examples: I might have encountered practical illustrations of typography in action, both in print and digital media. This exposure serves to underscore typography's role in diverse contexts.
Typography Rules and Best Practices: The book likely delved into typography's rules and best practices, including guidance on avoiding widows and orphans, implementing proper text spacing, and managing special characters. Such knowledge contributes to elevating the quality of written and visual content.
Typography's Influence on Communication: Understanding how typography shapes the overall message and tone of a text or design is paramount. Different typefaces and styles can evoke distinct emotions and convey specific messages, impacting the effectiveness of communication.
Week 2
 |
Figure 3.2: A Type Primer by John Kane - Page 8 || 08/09/23
|
|
|
Within a single type family, you can often discover a diverse range of letterform styles, which include:
Roman: Roman serves as the foundational and fundamental letterform style. Its uppercase letterforms are rooted in inscriptions found on ancient Roman monuments, providing a classic and timeless appearance to the typeface.
Italic: The Italic style, on the other hand, draws its inspiration from 15th-century Italian handwriting. This style imparts a distinctive slant to the letters, creating an elegant and cursive appearance that contrasts with the upright Roman style.
Boldface: Boldface, sometimes referred to as 'Semibold', 'Medium', 'Black', 'Extra bold', or 'Super' depending on the width of the letter strokes, introduces a significant level of weight and thickness to the characters. This bold style is often employed to emphasize and highlight text, making it stand out prominently in a document or design.
Light: In contrast to boldface, the Light style is characterized by thinner strokes and reduced letterform weight. It is used to convey a sense of delicacy and subtlety, often found in contexts where a more delicate and refined appearance is desired.
Condensed: Condensed typefaces are designed with narrower letterforms, which is achieved by reducing the space between characters. This style is ideal for situations where space is limited, such as narrow columns or headings where a compact appearance is necessary.
Extended: Conversely, the Extended style features wider letterforms, creating a more expansive and open appearance. This style is used to enhance readability in large displays or for decorative purposes.
In summary, a comprehensive type family often incorporates a combination of these styles, allowing for a versatile and adaptable range of letterforms to suit different design needs and contexts.
Week 3
 |
Figure 3.3: Typographic Design - Form and communication - Cover Page || 12/09/23
|
The art of typographic design is intricate and multifaceted. In this chapter, we delve into the fundamentals of typography, placing emphasis on letterforms—the foundational elements of all typographic communication. The exploration covers terminology, measurements, and the fundamental characteristics of typographic fonts and families. The evolution of modern typography is indebted to a historical journey that originated with handwritten marks. At the heart of shaping letterforms is the linear stroke, with each letter originating as a unique mark.
The Evolution of Typography: The Evolution of Typography is depicted as a timeline, tracing the progression from handwritten forms to mechanical methods and finally digital practices. It begins with the invention of writing over five thousand years ago, culminating in the fifteenth-century invention of movable type in Europe. The subsequent sections cover the eras of handpress and hand-set metal types, the Industrial Revolution and nineteenth century, the twentieth century marked by modernism and the digital revolution, and the current twenty-first-century focus on typographic design expanding to mobile devices and digital production.
The Anatomy of Typography: "The Anatomy of Typography" delves into the intricate realm of typographic design, emphasizing the need for a comprehensive understanding to engage in informed practice. The chapter thoroughly examines letterforms, the foundational elements of all typographic communication, covering aspects such as nomenclature, measurement, and the characteristics of typographic fonts and families.
It highlights the alphabet as a series of elemental visual signs arranged in a fixed sequence, representing spoken sounds. Each letter encapsulates a singular meaning—its elementary sound or name. The power of the twenty-six characters lies in their capacity to form hundreds of thousands of words, serving as a visual record of spoken language. Writing and typography are described as the magic that renders "thoughts made visible" and "frozen sounds."
The implements of the trade, including brushes, reed pens, and stone engravers' chisels, played a pivotal role in shaping the early alphabets. As illustrated in section 2.1, reed pens utilized in Rome and monasteries were adept at creating strokes of varying thickness through tilting. Capital letters in Greek and other cultures evolved from basic geometric shapes like squares, circles, and triangles.
Since ancient Greece, capital letters have adhered to simple shapes such as squares, circles, and triangles, as depicted in 2.2, showcasing their fundamental forms: a split square, a circle, a triangle, an inverted triangle, and two small circles.
As evidenced in 2.3, early capital letters carved in stone exhibited few curved lines due to the difficulty of carving curves. In contrast, lowercase letters, written with reed pens, featured more curves to facilitate quick writing and reduce strokes for various characters.
 |
Figure 3.4: Typographic Design - Form and communication - Page-32 || 12/09/23
|
|
Week 4
 |
Figure 3.5: Typographic Design - Form and communication - Page-32 || 20/09/23
|
The Parts of Letterforms: Over time, a specialized nomenclature has emerged to identify the distinct components of individual letterforms. Familiarity with this vocabulary enables designers and typographers to develop a deeper understanding and sensitivity to the visual harmony and intricacies of the alphabet.
In medieval times, horizontal guidelines were employed to confine and align each line of lettering. Today, letterforms and their elements are drawn on imaginary guidelines to ensure consistency in typography. Optically, all characters align on the baseline, with the body height of lowercase characters aligning at the x-height, and the tops of capitals aligning along the capline. Achieving precise alignments requires typeface designers to make optical adjustments, ensuring visual uniformity and harmony in typography.
This glossary provides key terms related to the vertical alignment of letters in typography:
Capline: Imaginary line atop capital letters and ascenders of lowercase letters.
Meanline: Imaginary line determining the height of the body of lowercase letters.
x-height: The distance from baseline to meanline, often measured using the height of lowercase "x."
Baseline: Imaginary line serving as the base for each capital letter.
Beard line: Imaginary line along the bottoms of descenders.
 |
Figure 3.6: Typographic Design - Form and communication - Page-37 || 28/09/23
|
|
Unity of design in the type font: Achieving unity in type font design involves managing the significant diversity of form present in the twenty-six capitals, twenty-six lowercase letters, numerals, punctuation, and other graphic elements. The goal is to integrate these elements into a cohesive system that can be seamlessly combined to create numerous words. Using the example of Times Roman Bold font, the visual similarities in letterform combinations demonstrate how repetition of curves, verticals, horizontals, and serifs brings both variety and unity to typographic designs. This principle of repetition with variety is a key feature of well-designed type fonts, contributing to the overall cohesiveness and visual harmony in typography.
 |
Figure 3.7: Typographic Design - Form and communication - Page-38 || 28/09/23
|
Historical Classification of Typefaces: The advent of digital typography has brought forth a diverse range of typefaces, each with a lineage spanning centuries. To categorize this diversity, various classification systems have emerged, encompassing the following types:
Old Style Typeface: Influenced by Roman capitals and 15th-century humanistic writing, it features rounded letterforms with angled serifs, particularly on lowercase letters.
Italic Typeface: Slanted to the right, early italics were condensed and tightly spaced.
Transitional Typeface: Originating in the mid-18th century, it exhibits greater contrast between thick and thin strokes compared to Old Style and is typically wider, with more horizontal lowercase serifs.
Modern Typeface: Developed in the late 1700s from transitional styles, it showcases extreme contrast between thick and thin strokes, often reducing thin strokes to hairlines. Serifs evolve into horizontal hairlines, with strong geometric qualities.
Egyptian Typeface: Characterized by heavy square or rectangular unbracketed serifs and minimal curvature in stroke stress.
Week 5
 |
Figure 3.8: Typographic Design - Form and communication - Page-43 || 03/10/23
|
Spatial Measurement: In typographic design, spatial measurement extends beyond typefaces to encompass the intervals between typographic elements. The designer considers interletter spacing (traditionally known as letterspacing), which denotes the space between letters; interword spacing, also referred to as wordspacing, representing the space between words; and interline spacing, the interval between two lines of type. In traditional metal typography, interletter and interword spacing involve the insertion of metal blocks, called quads, between pieces of type. These quads, such as the square em and the half-em en, do not print as they are shorter than the type itself. The term "leading" is traditionally used for interline spacing, referring to thin lead strips placed between lines of metal type to increase spatial intervals. Various metal spacers, including fractions of the em, are employed for letter- and word-spacing, paragraph indentations, and aligning lines of type.
 |
| Figure 3.9: Typographic Design - Form and communication - Page-44 || 03/10/23 |
|
In design, the width of the em in a condensed typestyle can be narrower than a square, while in an expanded typestyle, it can be wider. This is demonstrated in em quads from the Univers typeface family. Digital typesetting utilizes a unit system, where the unit value determines the width of each character. Tracking, adjusting units to expand or contract space between letters, influences typography tone. Kerning addresses awkward spatial relationships between specific letter combinations. Modern typesetting software often includes automatic kerning pairs, with manual adjustments available. The unit value of each letter in the word "Design" is showcased.
 |
| Figure 3.10: Typographic Design - Form and communication - Page-45 || 03/10/23 |
|
The Type Family: A type family is a collection of related typefaces distinguished by shared design characteristics. Within a family, each typeface is distinct, created by modifying visual aspects of the parent font. Early type families typically included a regular roman face, a bolder version, and an italic. For instance, the Baskerville family showcases the transformation of stroke weight for boldness and stroke angle for italics (Figure 2-43). Bold fonts enhance typographic impact in titles and headings, while italics are commonly used for emphasis.
Creating Type Variations: Apart from changes in weight and angle, additional typefaces within a family can be crafted by altering proportions or through design elaboration. Weight changes involve adjusting stroke width relative to letter height, producing a range from extremely light to very bold alphabets. A classification standard in England includes eight weights, such as extralight, light, medium, and bold, though most families use four weights for practicality (Figure 2-43). The Avant Garde family demonstrates how stroke weight is the sole variable in five fonts.
Proportion Alterations: Proportions contribute to type family diversity by adjusting letterform width, either expanding or condensing. Terminology for proportion changes includes ultraexpanded, extraexpanded, expanded, regular, condensed, extracondensed, and ultracondensed. However, variations in terminology can lead to confusion, with names like normal, roman, book, lightline, slim, hairline, black, elephant, massive, heavy, narrow, contracted, elongated, compressed, extended, wide, and stretched used across different type families.
Comments
Post a Comment