23/9/2024-28/10/2024 (Week 1- Week 6)
Gabriella Grace
Christyanti / 0371915
Typography / Creative Media / School of
design
Task 1: Exercises.
1. Lectures
2. Instructions
3. Process Work
3.1 Research
3.2 Ideation
3.3 Digitization
3.4 Final Type Expression
3.5 Animation
4. Feedback
5. Reflection
6. Further Reading
1. LECTURES
WEEK 1: TYPO_1_ DEVELOPMENT
Introduction
- Typography – the art and technique of arranging type to make written language legible, readable and appealing when displayed.
- Font – the individual font or weight within the typeface
- Typeface – the entire family of fonts/weights that share similar characteristics/styles.
Typography has changed significantly over the past 500 years. In this lecture, we’ll focus on Western typography, particularly looking at Roman letters and how they originated from the Phoenician alphabet.
Early Letterform Development : Phoenician to Roman
In the past, people wrote on wet clay or stones. They used sharpened sticks to carve into the clay, and chisels to carve into the stones. Because of these mediums, uppercase letters were made of simple straight lines and curves, and these letter shapes remained common for about two thousand years. The way people wrote back then still influences the letters we use today. The simple shapes of uppercase lettershave carried over into modern writing, and even though we now use different materials, the basic forms from that time are still part of our alphabet.
Etruscan and Roman marble carvers developed a technique of painting letterforms onto the stone before inscribing them, which helped preserve certain qualities in the carved letters. This process, evolving over 900 years from Phoenician and Greek influences, allowed them to maintain a distinct change in the weight of strokes, transitioning from vertical to horizontal. They also broadened the strokes at the start and finish of the letters, ensuring a more consistent and refined appearance once carved.
Rustic capitals, a compressed version of square capitals, were faster and easier to write, often used on parchment. They were achieved by holding the pen at a 30-degree angle off perpendicular, but their compressed form made them harder to read.
Uncials incorporated elements of the Roman cursive hand, particularly influencing the shapes of letters like A, D, E, H, M, U, and Q. While the term "uncia" refers to one-twelfth or an inch, uncials are more accurately understood as broader, smaller letterforms. These letters were more readable at smaller sizes compared to rustic capitals.
Half-uncials mark the formal beginning of lowercase letterforms, introducing the use of ascenders and descenders. This development emerged as a further formalization of the cursive hand, around 2,000 years after the origin of the Phoenician alphabet.
Half-uncials – C.500
Charlemagne, the first unifier of Europe since the Romans, issued an edict to standardize all ecclesiastical texts, entrusting this task to Alcuin of York, Abbot of St. Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), minuscule (lowercase), capitalization, and punctuation, setting the standard for calligraphy for the next century.
After the dissolution of Charlemagne's empire, regional variations of Alcuin's script emerged. In northern Europe, a condensed and strongly vertical letterform known as Blackletter or textura gained popularity, while the south preferred the rounder, more open style called rotunda. In Italy, the humanistic script was based on Alcuin's minuscule. Gutenberg, skilled in engineering, metal smithing, and chemistry, used his movable type to replicate the Blackletter script of northern Europe, producing his Bible in a highly efficient manner.
Text type classification
- 1450 Blackletter: The earliest printing type, based on hand-copying styles used in books in northern Europe at the time.
- 1475 Oldstyle: Based on lowercase forms used by Italian humanist scholars for book copying, and uppercase letterforms found on Roman ruins.
- 1500 Italic: Condensed and close-set, now not considered a separate typeface.
- 1550 Script: An attempt to replicate engraved calligraphic forms.
- 1750 Transitional: A refinement of Oldstyle forms, with exaggerated thick and thin contrasts and lightened brackets.
- 1775 Modern: Serifs are unbracketed, and the contrast between thick and thin strokes is extreme.
- 1825 Square Serif / Slab Serif: Unbracketed, with little variation between thick and thin strokes.
- 1900 Sans Serif: Eliminated serifs entirely.
- 1990 Serif / Sans Serif: Includes both serif and sans serif alphabets.
WEEK 2: TYPO_3_PART 1
1. Kerning and Letter Spacing
- Kerning: Adjusts space between specific letters to improve visual harmony, crucial in headlines or short phrases.
- Letterspacing: Adds space between letters, particularly in uppercase text to ensure readability. It should not be applied to large amounts of text or lowercase fonts, as it disrupts the natural flow of reading.
-
Tracking: Adjusts the overall space in a word or sentence,
affecting its density and texture. While useful for uniform adjustments,
excessive tracking can reduce letter recognizability by altering their
familiar shapes.
2. Text Formatting
- Flush Left: Reflects the natural, asymmetrical rhythm of handwriting. Each line starts at the same point on the left, creating a ragged right edge. This should be used most often due to its readability and balanced gray value (the visual density of text).
- Centered: Creates visual symmetry by giving equal weight to both ends of each line, often transforming text into a shape on the page. This style is suitable for small blocks of text, requiring careful line breaks to avoid overly jagged edges.
- Flush Right: Aligns text to the right with a ragged left edge, emphasizing the line's end. It’s best for specific uses, like captions, where the relationship between text and imagery needs clarity.
- Justified: Aligns text evenly on both the left and right edges by adjusting word spacing. While it creates a tidy block, it can produce 'rivers' of white space that hinder readability and should be used sparingly.
3. Texture
The choice of typeface influences the perceived darkness or lightness of the text on a page, which can significantly impact readability.
4. Leading and Line Length
- Type Size: Text should be set at a size that is easily readable at arm's length, ensuring that it remains comfortable for prolonged reading without straining the eyes.
- Leading: Refers to the vertical space between lines of text, typically set to around +2 points of the type size. Proper leading supports smooth vertical eye movement and prevents the reader from losing their place. Tight leading encourages vertical movement, while loose leading can create disruptive patterns.
- Line Length: Aim for 55-65 characters per line, as this range supports comfortable reading. Shorter lines require less leading, while longer lines need more. Extremely long or short lines can disrupt reading flow.
5. Type Specimen Book
A type specimen book (or its digital equivalent) displays samples of typefaces at different sizes, leading, and line lengths. It serves as a reference for making informed typographic choices in both print and digital projects.
WEEK 3: TYPO_4_PART 2
1. Indicating Paragraphs:
-
Pilcrow (¶): A symbol from medieval manuscripts, rarely used today to mark paragraph breaks.
-
Line Spacing (Leading): Typically, line spacing should be 2-3 points larger than the text size (e.g., 10pt text with 12pt leading). The leading and paragraph spacing should match to ensure cross-alignment, which helps keep lines aligned across multiple text columns.
-
Indentation: Often used in justified text, where the indent size matches the text's point size or line spacing. It's not recommended for left-aligned text to avoid uneven edges.
-
Extended Paragraphs: These create wider columns of text and are less common, but can be useful for specific design needs.
2. Widows and Orphans
Widow: A short line of text left alone at the end of a column.
To avoid widows, adjust line breaks throughout the paragraph so that the last line is not noticeably short. In some cases, flush right or ragged left text is more forgiving towards widows.
Orphan: A short line of text left alone at the beginning of a new column.
Orphans are generally unpardonable. To prevent them, ensure that no new column starts with the last line of the preceding paragraph.
3. Highlighting Text
-
Italics and Bold: Italics add subtle emphasis, while bold increases the weight of the text for stronger emphasis.
-
Changing Typeface: Switching to a bold variant or a different typeface can highlight text. When changing from a serif to a sans serif font, reduce the point size (e.g., by 0.5 points) to maintain visual balance, as sans serifs generally appear larger than serifs.
-
Text Color: Altering the text color can draw attention, with black, cyan, and magenta being commonly recommended for emphasis. Ensure that any color changes maintain readability.
-
Adding a Highlight or Box: Placing a colored field behind the text can create a visual distinction. When using boxes, align them with the text above to maintain a consistent reading axis.
-
Quotations and Bullets: Using quotation marks or bullet points can create clear indents and emphasize parts of the text. These elements may be placed outside the left margin to maintain a strong reading axis.
4. Headline Within Text
-
A Head:
Indicates a clear break between topics within a section, serving as the primary divider of content. Typically set larger than the body text, often in bold, small caps, or even extended slightly to the left for emphasis. It provides a strong visual signal of a new section or topic.
-
B Head:
Subordinate to A Heads, providing support or additional detail to the topic at hand. Smaller than A Heads and does not interrupt the text flow as strongly. It can be formatted in small caps, italics, or bold serif/sans-serif. B Heads introduce new arguments or examples without the weight of a major section break.
-
C Head:
Used less frequently, C Heads highlight specific facets or details within B Head text. They are even smaller, maintaining the flow of reading without significantly disrupting the structure. Often set in small caps or italics, C Heads may be followed by an em space for visual separation.
5. Cross Alignment
Cross aligning headlines, captions, and text type reinforces the structural integrity of a page, creating a consistent vertical rhythm and enhancing readability. This technique ensures that different text elements, like headings and body text, align cleanly across lines and sections, making the overall layout appear organized and cohesive.
To maintain cross alignment, a common approach is to adjust the leading (line spacing) proportionally. For instance, if the leading for smaller text is 13pt, the larger text's leading should be set to 26pt. This helps ensure that multiple lines of smaller text align neatly with fewer lines of larger text, preserving visual harmony and structure.
WEEK 4: TYPO_2_PART 1
- Baseline: The imaginary line on which letters sit, providing a consistent foundation.
- Median: Determines the height of lowercase letters through the x-height.
- X-height: The height of the lowercase 'x,' important for readability across different typefaces.
- Stroke: Lines that define the basic shapes of letterforms.
- Apex/Vertex: Points where diagonal stems meet; apex is above the median, and vertex is below.
- Ascender: The part of a lowercase letter that extends above the median.
- Descender: The portion of a lowercase letter that extends below the baseline.
- Bowl: The rounded part of a letter that creates an enclosed counter space.
- Bracket: The curved transition between a serif and the stem.
- Cross Bar/Cross Stroke: Horizontal strokes that connect or intersect vertical stems.
- Crotch: The interior space where two strokes meet.
- Ligature: A single character formed by the combination of two or more letters.
- Em/En: Measurement units; an em is equal to the typeface size, while an en is half that.
- Terminal: The end of a stroke without a serif, which can have various shapes, like flat, rounded, or teardrop.
- Arm: Short strokes extending from the stem, either horizontally or inclined upward.
- Barb: The half-serif finish on some curved strokes.
- Beak: The half-serif finish on certain horizontal arms.
- Ear: A small stroke extending from the main body of a letterform, like on the lowercase 'g'.
- Finial: The rounded end of a stroke that doesn’t have a serif.
- Leg: A short stroke off the stem, either at the base or inclined downward.
- Link: The stroke connecting the bowl and the loop of a lowercase 'g'.
- Loop: A bowl created in the descender of a lowercase 'g'.
- Shoulder: The curved stroke that is not part of a bowl, like in 'n' or 'h'.
- Spine: The main curved stroke of the letter 'S'.
- Spur: The projection that defines the junction between a curved and a straight stroke.
- Stress: The orientation or angle of contrast within a letterform, which affects the design's overall character.
- Swash: An ornamental flourish that extends the stroke of a letterform.
- Tail: The descending, curved stroke in certain letterforms, like 'Q' or 'j'.
A complete font includes more than just basic letters and numbers. Here’s what makes up a full font:
- Uppercase Letters: Capital letters, including accented characters like c cedilla and n tilde.
- Lowercase Letters: Smaller versions of uppercase letters with matching accented characters.
- Small Capitals: Uppercase forms resized to match the x-height, often found in serif fonts. They provide emphasis without dominating the text.
- Uppercase Numerals: Numbers that match the height of uppercase letters, ideal for use with capitalized text.
- Lowercase Numerals: Numbers that align with the x-height, featuring ascenders and descenders, blending well with mixed-case text.
- Italics and Oblique Styles: Italics come from 15th-century cursive handwriting, while oblique styles are slanted roman forms.
- Punctuation and Miscellaneous Characters: Standard punctuation is consistent, but other characters like math symbols can vary between typefaces.
- Ornaments: Decorative details used for embellishing invitations or certificates, typically found in traditional typefaces.
- Roman: Originates from Roman monument inscriptions. A lighter variation is known as 'Book'.
- Italic: Inspired by 15th-century Italian handwriting.
- Oblique: A slanted version based on Roman typefaces.
- Boldface: Features thicker strokes than Roman type, with variations like 'semibold' or 'black'.
- Light: Lighter strokes than Roman, with even lighter versions called 'Thin'.
- Condensed: A narrower form of Roman type, with extreme versions called 'Compressed'.
- Extended: A wider variation of the Roman style.
Comparing Typefaces
When analyzing typefaces, focus on their differences in weight, x-height, and overall form. These variations influence readability and expression, making the choice of typeface crucial for effective communication.
- While uppercase letterforms often suggest symmetry, a closer examination reveals they are not truly symmetrical. This is a deliberate choice by type designers to create balance and visual appeal.
- For instance, in the Univers typeface, the letter "A" appears balanced at first glance, but the left stroke is slightly thinner than the right. This subtle difference ensures harmony in the overall design.
- The complexity of individual letterforms becomes more apparent when comparing similar sans-serif typefaces like Helvetica and Univers. In these typefaces, differences can be seen in how the stems of the lowercase 'a' meet the bowl, illustrating the unique characteristics and expressive qualities of each design.
Maintaining X-Height:
- X-height refers to the height of the lowercase letters without ascenders or descenders (like 'x'). It plays a crucial role in defining the legibility and visual balance of a typeface.
- When designing or choosing a typeface, it is important to ensure that curved strokes, such as those in the letter 's', rise slightly above the median line (the top of the lowercase letters) or dip below the baseline (the bottom of the letters). This adjustment compensates for the visual difference in size between curved and straight lines.
- Without these adjustments, curved strokes can appear smaller than their straight counterparts, leading to uneven text appearance. Proper handling of x-height ensures a more consistent and harmonious line of text.
Form and Counterform:
- Form refers to the actual shape of a letter, while counterform (or counter) describes the space inside and around the letterforms. Understanding both is vital for effective typography.
- Counterform is especially important when letters are joined together to form words, as it includes the spaces between the characters. These spaces help determine the overall readability of the text.
- For example, when working with letters like 'o' or 'p', the counter (the enclosed space within the loop of the letter) can significantly influence the appearance of the typeface. In contrast, letters like 'r' have open counters, which affect how they interact with other characters.
- Analyzing the form and counterform of letters in detail can provide insight into the nuances of letter-making, helping typographers achieve balance between positive (form) and negative (counter) space.
Contrast:
- Contrast is one of the most powerful elements in typography and plays a critical role in creating visual hierarchy. It helps distinguish different types of information within a design.
- In typography, contrast can be achieved in multiple ways, such as through variations in size (small vs. large), weight (light vs. bold), or style (serif vs. sans-serif).
- For example, using a bold typeface for headlines and a lighter weight for body text can help guide the reader's eye and make a design more readable. This approach also contributes to the tone and feel of the design, from formal to casual.
- Contrast not only enhances the clarity of the information but also adds visual interest, allowing designers to convey a specific message or mood through their choice of type
3.2 Ideation
- Burn: For burn, I had a few design ideas. I wanted to add some smoke to the letters to give the impression that they were burning. I explored a few different ways to visualize this concept and sketched out my ideas as best as I could in Procreate.
- Melt: Melt was a bit more challenging for me because I figured many people might have similar ideas. To make sure I at least have some ideas that stands out, I came up with more concepts for melt compared to the other words. My idea was to have the letters appear as if they were dripping, while ensuring that the design didn't become too distorted.
-
Fade: For fade, my idea was to have the letters gradually
fade out. To achieve this, I used a blur effect and lowered the
opacity of the letters.
- Grow: For grow, I wanted to convey the idea of growth by making one of the letters longer or larger than the others. This would create the effect of that letter expanding while the surrounding letters appeared to be squished.
Mr Max's feedbacks on the designs:
-
Burn: Mr. Max preferred the second design (with the univers
LT Std font)
but mentioned that the smoke effect could be more realistic. He suggested adding elements of the smoke from the fourth version, aiming for a more lifelike appearance.
- Grow: He liked the fourth sketch for the Grow concept but encouraged further improvements.
- Burn: Creating the Burn design was the most time-consuming of the three because its much more complex. I made a consistent effort to cross-reference my design with photos of real smoke to ensure it looked as realistic and lifelike as possible. The Curvature Tool in Adobe Illustrator was very helpful throughout this process, as it allowed me to create smooth, natural-looking lines that mimicked the fluidity of smoke.
- Melt: For the Melt design, I kept most of the original concept intact. However, I adjusted some of the droplet shapes and their positions to make the design easier to animate for the final assignment. These changes will help ensure smoother movement and a more seamless animation process later on.
- Fade: For the Fade design, I changed the background color from white to black and adjusted the text color to white. This contrast made the fading effect much clearer and more visually striking, allowing the gradual disappearance of the text to stand out more effectively.
- Grow: To emphasize the impact of the "R" on the other letters, I adjusted the design by squishing the "g," "o," and "w." This change makes them appear as if they're being pushed or compressed by the larger "R," creating a sense of interaction with the surrounding box and enhancing the overall effect of growth.
3.4 Final Type Expression
3.5 Animation
After digitizing and finalizing our word designs, we were instructed to select one to turn into a short animation. After watching a tutorial on animating typography and receiving additional guidance from Mr. Max, I decided to choose Melt for the animation. I felt that animating the water droplets would be a fun and creative challenge. My goal was to make the droplets appear to slowly drip down, creating the effect that the word Melt is gradually melting away.
Kerning and Tracking
.jpg){kind=tracking}
HEADLINE
4. FEEDBACK
Week 1 General Feedback: We created a blog for our Typography project after a brief introduction on how to use the platform. We drafted the blog, submitted its link with the Typography label, and voted on the four words to use for our task.
Week 2 General Feedback: After completing our sketches, we consulted Mr. Max for feedback. Some of our designs were rejected, requiring us to create new versions. He also gave us a detailed explanation of how to use Adobe Illustrator.
Specific Feedback: Mr. Max selected the designs he liked most and suggested making the smoke in 'Burn' look more realistic and improving the 'Grow' design.
Week 3 General Feedback: All four word sketches were approved, so we began digitizing them in Adobe Illustrator. Mr. Max hoped we could complete the digitization in class but allowed more time if needed.
Specific Feedback: Mr. Max showed me how to convert lines into shapes, making it easier to apply gradients for the smoke's fading effect in the Burn design.
Week 4 General feedback: Mr. Max explained how to create animations in Adobe Illustrator and transfer them to Photoshop. He also assisted some of us in selecting which word to animate and taught us about using the artboard functions in Illustrator.
Specific feedback: Mr. Max approved my finalized digital design and suggested that I make the water drops in my Melt animation disappear once they fall out of frame.
Week 5 General feedback: Mr. Max provided a detailed, step-by-step explanation on how to use the InDesign app effectively, focusing on essential skills like adjusting kerning and tracking. He guided us through each function, ensuring we understood how to manage the spacing tools.
5. REFLECTIONS
Experience
This past week, I’ve learned a lot about the various apps we’re using for our typography assignment. Initially, I found some tools in Adobe Illustrator and InDesign challenging, especially since I hadn’t used many of them before. While I had some experience with Illustrator, I had never used InDesign. However, with Mr. Max’s help and guidance, I was able to understand how to use these apps effectively, and his feedback helped me make steady progress. Starting from the basics of typography, I worked up to creating more complex layouts. The feedback sessions were particularly valuable, as they helped me identify areas for improvement. Additionally, for our portfolio, Mr. Max guided us on using the Blogger website to document our learning journey.
Observation
Through my observations in this module, I’ve come to realize how essential it is to use references effectively and understand their role in shaping ideas. Additionally, I noticed that typography requires a keen eye for detail, as even small adjustments can significantly impact the overall design. To enhance my own projects, I decided to explore Pinterest more thoroughly for inspiration and reference material, which helped me visualize ideas and gain fresh perspectives. I also made a conscious effort to focus on details throughout each stage of my work, aiming to minimize the need for corrections later. This approach allowed me to develop a more polished final product and has reinforced the importance of careful planning and precision in design.
Findings
I discovered that minor adjustments can greatly enhance the overall impact of a design. I also realized that while typography can be challenging to master, it becomes fascinating once you get the hang of it. This module has deepened my understanding of composition and has given me a better grasp of the historical evolution of typography. Through this, I've come to appreciate the ways that design elements and typography history influence modern styles and approaches.
-
Typographic Grids: Learned about various grid layouts from the "Typographic Grid" chapter, which I applied in my layouts for Exercise 2 to improve organization and structure.
-
Typographic Evolution: Explored the history of typography, from early hand-carved symbols to Gutenberg's movable type and the digital fonts of today. Gained insight into the significance of serif and sans-serif styles across cultures and eras.
-
Justified vs. Unjustified Text: Discovered that left-aligned (unjustified) text often improves readability, as ragged right edges give natural stopping points and avoid "rivers" of white space that can disrupt flow in justified text.
-
Anatomy of Typography: Studied font characteristics like weight, width, posture, x-height, ascenders, descenders, and stress. I also learned the origins of common measurement terms like "Em" and "En."
-
The Typographic Message: Learned how typography acts as a powerful visual language capable of informing, persuading, and creating emotional impact. Designers, particularly those in activist movements, have used typography to highlight societal issues.
-
Practical Guidance: Pages on readability, legibility, and paragraph alignment offered useful tips for my projects, making the book both a historical and practical resource
Comments
Post a Comment