TYPOGRAPHY - Task 1 Exercises
- September 24, 2024
24.09.2024 – 29.10.2024 / Week 1 – Week 5
Yong Sun Lu / 0376945
Typography / Bachelor of Design (Honours) In Creative Media
Task 1: Exercises 1 & 2
TABEL OF CONTENTS
1. Lectures
2. Instructions
3. Feedback
4. Reflection
5. Further Reading
LECTURES
Week 1: Introduction / Development
- Lecture: Typo 1 Development
Introduction to Typography
- The development of typography spans 500 years, emphasizing the importance of diverse cultural contributions. Acknowledging and researching non-Western influences is crucial for a holistic understanding of design.
Phoenician to Roman
- The evolution of uppercase letter forms can be traced back nearly two thousand years, originating from simple combinations of straight lines and curves.
- These forms were crafted based on the tools and materials available at the time.
- The Greeks innovated writing by alternating text direction, which changed not only how letters were read but also their orientation.
Hand script from 3rd to 10th century C.E
- Square capitals were the written version that can be found in roman monuments. These letterforms have serifs added to the finish of the main strokes.
- The introduction of lowercase letters is the result of shifting in writing style which is writing uppercase in a fast motion, evolving from cursive hand and improving the speed of written communication.
- Uncials incorporated some aspects of the roman cursive hand, especially the letter A, D, E, H, M, U and Q. 'Uncia' in latin means the twelfth of anything and refer to letters that are one inch (one twelfth foot) high.
Blackletter to Guttenberg's type
- The dissolution of Charlemagne's Empire, leading to the creation of distinct scripts like black letter and rotunda.
- Gutenberg's invention of the printing press revolutionized the production of texts, allowing for quicker dissemination of information and making books more accessible.
- Before the printing press, the labor-intensive process of book writing was limited to religious orders and royal scribes, making books rare and expensive, enabling mass production, changing the landscape of literature and knowledge sharing.
Humanist Script to roman type
- 1460: Lucius Lantantius, Venice
- 1472: Cardinal Jonnanes Bessarion, Conrad Syeynheym and Arnold Pannartz, Subiaco Press, Rome
- 1471: Quintillian, Nicholas Jenson, Venice
Venetian Type from 1500
- 1499: Colona, type by Francessco Griffo
- 1515: Lucretius, type by Francessco Griffo
The golden age of french printing
- 1531: Illustrissimae Galliaru Reginae Helianorae, printed by Robert Estianno, Paris. Type - cast by Claude Garamond
Dutch Printing, c. 1600
- 1572: Polygot Bible (preface). Printed by Christophe Plantin, Antwerp
English type from 18th century
- 1734: William Caslon. Type specimen sheet, London.
Baskerville's innovations
- 1761: William Congreve, typeset and printed by John Baskerville, Birmingham
- 1818: Giambatista Bodoni, Manuale Tipografico, Parma
Text type classification
1450 Blackletter
- The earliest printing type
- Lowercase forms used by italian human scholars for book copying and the uppercase letterforms found inscribed on roman ruins.
- A refinement of oldstyle forms, transitional fonts like Bodoni and Baskerville represent advancements in type design, moving away from mimicking handwritten scripts to more refined styles.
- This style represents a further rationalization of oldstyle letterforms.
- Originally heavily bracketed serif, with little variation between thick and thin strokes.
- As the name implies, these typefaces eliminated serifs altogether.
- A recent development, this style enlarges the notion of a family typefaces to include both serif and sans serif alphabets
Week 2: Text
- Lecture: Typo_4_Text_Part 2
Text / Indicating Paragraphs
- The use of the pilcrow symbol for indicating paragraph breaks demonstrates the historical evolution of typography.
- A common guideline is to set leading 2 to 3 points larger. Software like InDesign, it's important to avoid using double ENTER for paragraph spacing. Instead, a specific value for paragraph spacing should be set.
- Different alignment styles, such as non-aligned and aligned numerals, affect how text is perceived. It helps create a visually coherent reading experience, guiding the reader's eye smoothly across the text.
Text / Headline within Text
- There are many kinds of subdivision within text of a chapters. In the following visuals these have been labeled (A, B and C) according to the level of importance.
- A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other.
- Effective hierarchy within text helps readers navigate content more easily. Spacing is crucial in maintaining a clean layout.
- Cross alignment of text elements creates a visually appealing structure. Aligning subheads with body text reinforces the organization and flow of information on the page.
- The importance of hands-on learning in typography is emphasized. Practical examples in software like InDesign facilitate a better understanding of text alignment concepts.
- Using proper leading can enhance cross alignment in typography, making the text visually cohesive. This is essential for maintaining readability and aesthetic quality in design.
- In traditional typesetting, there are two unpardonable gaffes widows and orphans. Designers must take great care to avoid the occurrence of the the above mentioned.
- Widow is a short line of type left alone at the end of a column of text.
- Orphan is a short line of type left alone at the start of new column.
Fig. 2.1, Widows and orphans
- In justified text both widows and orphans are considered serious gaffes. Flush right and ragged left text is some what more forgiving towards widows, but only a bit.
- The only solution to widows is to rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.
- Orphans, you might expect, require more care. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.
Week 3: Text / Tracking
- Lecture: Typo 3 Text P1
Kerning and Letterspacing
- Kerning involves adjusting the space between specific letters to improve visual harmony.
- Letter spacing, distinct from kerning, involves adding space uniformly between all letters in a word.
Fig. 3.1, Kerning and Letterspacing
- Proper letter spacing is crucial for maintaining readability, especially with lowercase letters. Mismanagement of spacing can lead to significant difficulty in reading and comprehension.
Fig. 3.2, Kerning and Letterspacing
- Designers always letterspace uppercase letters, but there has long been strong resistance within the type community to letterspace lowercase letters within text.
- Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counter form created between letters to maintain the line of reading.
- Kerning and tracking adjustments can affect the visual patterns of words, making them more challenging to decipher when not properly managed.
Text / Formatting Text
- Flush left: This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends.
- Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line.
- Flush right: This format places emphasis on the end of a line as opposed to its start.
- Justified: Like centering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters.
- The x-height is the area between the baseline and the mean line, significantly affecting how text is perceived.
Fig. 3.3, Texture
- Different typefaces have different x-height characteristics, affecting their readability. For example, Baskerville tends to have a larger x-height than other typefaces.
Text / Leading and Line Length
- Type size: Text type should be large enough to be read easily at arms length imagine yourself holding a book in your lap.
- Leading: Text that is set too tightly encourages vertical eye movement, a reader can easily loose his or her place.
- Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading longer lines more.
Text / Type Specimen Book
- Type specimen books serve as important tools for assessing typefaces in various sizes. They help designers make informed decisions based on actual print or screen outputs.
Compositional requirement:
- Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value not a series of stripes.
- It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.
- The difference one point leading can make a difference that is unrecognizable at 100% on most monitors.
Week 4: Basics
- Lecture: Typo_2Basic
- Knowing a letterform's component parts makes it much easier to identify specific typefaces
Fig. 4.4, Letterforms
- Baseline: The imaginary line, the visual base of the letterforms.
- Median: The imaginary line defining the x-height of letterforms.
- X-height: The height in any typeface of the lowercase 'x'
- Stroke: Any line that defines the basic letterform
- Apex / Vertex: The point created by joining two diagonal stems.
- Arm: Short strokes off the stem of the letterform.
- Ascender: The portion of the stem of a lowercase letterform that projects above the median.
- Barb: The half-serif finish on some curved stroke
- Bowl: The rounded form that describes a counter.
- Bracket: Transition between the serif and stem.
- Beak: Half-serif finish on some horizontal arms.
- Cross Bar: Horizontal stroke in a letterform that joins two stems together.
- Cross Stroke: Horizontal stroke in a letterform that joins two stems together.
- Crotch: Interior space where two strokes meet.
- Descender: Portion of the stem of a lowercase form that projects below the baseline.
- Ear: Stroke extending out from the main stem or the body of the letter form.
- Em: Distance equal to the size of the typeface.
- En: Half of the em.
- Finial: Rounded non-serif terminal to a stroke.
- Ligature: Character formed by the combination of two or more letterforms.
- Link: Stroke connecting the bowl and the loop of a lowercase G.
- Loop: Bowl created in the descender of the lowercase G (in some typefaces).
- Serif: Right-angled or oblique foot at the end of the stroke.
- Shoulder: Curved stroke that is not part of a bowl.
- Spine: Curved stem of the S.
- Spur: Extension the articulates the junction of the curved and rectilinear stroke.
- Stem: The significant vertical or oblique stroke.
- Stress: 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: Self-contained finish of a stroke without a serif.
- Lecture: Typo_5_Understanding
Letters / Understanding Letterforms
- The importance of recognizing differences in stroke weight can affect design decisions significantly. As minor details like stroke widths can influence the perception of a typeface.
Fig. 5.5, Understanding Letterforms
- Baskerville and Universe typefaces illustrate meticulous design, balancing harmony and individuality. Optical sensitivity plays a crucial role in type design.
Fig. 5.6, Letters
- Comparing Helvetica and Univers demonstrates differences in character through the finishing of letter stems and the shape of bowls. The connection between bowl and stem strokes varies significantly between typefaces, impacting both aesthetics and readability.
Letters / Form / Counterform
- Just as important as recognizing specific letterforms is developing a sensitivity to the counterform the space describes, and often contained, by the strokes of the form.
Fig. 5.7, Form / Counterform
- Contrast is a fundamental design principle that helps to differentiate information and create visual interest
Fig. 5.8, Contrast
INSTRUCTIONS
Task 1: Exercises
Fig. 7.0, Module Information Booklet (MIB)
(https://drive.google.com/file/d/1iS0bwxp7AvDjuK1ON9jbEEbGkYEwxd9p/view?usp=sharing)
Task 1: Exercises 1 - Type Expression
Sketches:
This week, the lecturer introduce us to typography, after a brief explanation the lecturer assigned us a task to choose 4 words to make an expressive typography on. The words chosen are, Chop, Shake, Jump, Fish.
Fig. 7.1, Sketches (01/10/2024)
My personal favorite sketch will be most likely the first sketch on chop (top left corner), because other than that the sketches were rather disappointing to say the least.
This week, after we have done our sketches the lecturer asked us to digitize one of each from the 4 words and upload them to the TDS facebook group.
Fig. 7.2, Digitization (01/10/2024)
After some more tries, i came up with some of these designs.
Fig. 7.3, "Chop" Expression (01/10/2024)
Since i initially only have 4 sketches, i picked this as my best looking sketch from all the chop sketch.
Moving on to the next sketch which is "jump"
Fig. 7.3, "Jump" Expression (01/10/2024)
This particular sketch is inspired by an anime called Naruto, the "M" represents the ninja and the rest of the letters represented as trees.
The next sketch is "fish"
Fig. 7.4 "Fish" Expression (01/10/2024)
As for this sketch, i typed the word "Fish" and add a tail as a minor detail. After that i distorted the tail and the word using "Warp Style: Fish" effect.
As for the final sketch is "shake"
Fig. 7.5, "Shake" Expression (01/10/2024)
This final one is confusing for me to pick because both of them did not meet my expectations, but the second sketch is more representing as "Shake" and it was inspired by the Boba Milk Tea drink.
Fig. 7.6, Final Expressions (15/10/2024)
Since the lecturer asked us to animate one of the 4 final sketches, i decided to pick "Chop" as my animated expression
Fig. 8.7, Animated Expression 76 Frames (15/10/2024)
At first, i initially have 76 frames since i want to make it as smooth as possible, when i exported it, i realize it was to slow so i cut some of the dead frames to make it shorter and quicker. Thus there are 26 frames from the initial 76 to make it move faster.
It looks choppy and stiff, but nevertheless i am satisfied with the results.
Final Animated Expression
Fig. 9.10, Final Animated Expression (15/10/2024)
Task 1 - Exercise 2 - Text Formatting
"This will be your first minor assignment which is text formatting (Formatting Text 1/4 - 4/4A), in this assignment you will be formatting a certain text that will be given from microsoft teams and learn about type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment".
Fig. 10.1, With Kerning (22/10/2024)
Layouts
After watching all of the tutorials provided, i started doing my work
.png)
.png)
.png)
.png)
After some further thinking and adjustments, i decided to pick this one as my selected layout
For me, this layout is the cleanest from the previous layouts i made.
Final Text Formatting Layout
HEAD
Font/s: Bembo Std (Bold)
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0
BODY
Font/s: Bembo Std (Regular)
Type Size/s: 8 pt
Leading: 10 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: Justify With Last Aligned Left
Margins: 123 mm top, 26 mm left, right, bottom
Columns: 2
Gutter: 10 mm
Fig. 11.3, Final Text Formatting Layout (25/10/2024)
Fig. 11.4, Final Text Formatting Layout (PDF), (25/10/2024)
Fig. 11.5, Final Text Formatting Layout, With Grids (25/10/2024)
Fig. 11.5, Final Text Formatting Layout, With Grids (PDF), (25/10/2024)
FEEDBACK
Week 1:
General Feedback: This week, i learned about typography and was given a task about making 4 sketches with 4 words using 10 fonts given
Week 2:
General Feedback: This Week, i received some very useful feedback from my lecturer while updating my sketches and improved the design of my sketches
Week 3:
General Feedback: This Week, my lecturer asked us to digitalize our sketches and pick the best looking sketch to update it to our e-portfolio using the template given to us. In this case i picked "Chop" as my best pick
Week4:
General Feedback: This Week, we were given some feedbacks from the module leader, he states that some of our work is too distorted so we have to redo the work and resubmit it to the Facebook group
the lecturer also gives us some feedback regarding our animation of one of the 4 words we chose.
Specific Feedback: My lecturer said that i need to fix some minor details about my work, specifically my "chop" sketch, i need to remove some details i added and redo the animation and update my e-portfolio
Week 5:
General Feedback: I have done my minor assignment which is the text formatting and the lecturer walked around to see our work
Specific Feedback: I was told to watch and carefully read the instruction because i put the picture in colour instead of black and white, after i changed the picture i also tried some new layouts
Experience
From the first week, i knew this class wasn't going to be an easy one but, when i arrived at the class it was surprisingly an easy going class. After the teacher gave us a brief explanation about typography she handed out our first assignment, at first impression i thought this was something new to me and because of that i asked a lot of questions to the teacher but i was able to get the hang of it. There were some challenges i have to face for example, software like InDesign is very new to me since i am used to AfterEffects. Despite that, i was able to overcome it with ease since i have a friend that is experienced in the software. When i was overwhelmed with these tasks, my friends came and helped me with it so that i could finish quicker.
Observations
For each week that had passed, i noticed some things that i can use to improve myself in order to dive deeper in the world of typography. Everyday things like advertisements can be an idea for me, not to mention some of my friends works or even an anime can be inspiring.
Findings
From Task 1, i realized that typography is something that i can find visually appealing even for someone that almost have no interest in art, this specific lesson i can say it makes me interested and want to learn more about it. Although, for the second exercise i do not find it enjoyable because it was much harder and confusing but even so when i got the hang of it and receiving some feedbacks, i can see why people say this is one of the technicalities of typography.
FURTHER READINGS
Fig. 12.1, Detail In Typography by Jost Hochuli (1996)
This is a book that i found online in which can maybe help me to understand more about Typography
Fig. 12.2, The Letters (10-21 pp)
The author emphasizes the significance of letterforms in conveying meaning and the emotional impact of different typefaces. Primarily focus on the anatomy of letters and the importance of their shapes in typographic design.
In order to help me to learn more about the second exercise, i read the Linespacing and column section.
Fig. 12.4, The Qualities type (54-57 pp)
Comments
Post a Comment