Typography | Task 1: Exercises
9/23/2024-10/28/2024 (Week 1-Week 6)
Katherine Alexandra Sutanto , 0373585
Typography
Task 1: Exercises
TABLE OF CONTENT
3.1 Research
3.2 Ideation
3.3 Final Outcome
LECTURES
Week 1: INTRODUCTION
- Typography: A form of art technique where it is arranged and written by texts which are displayed in a legible, readable and appealing way.
- Fonts: A design of letters and contains their style details.
- Typeface: A set of design features for letters and other characters, such as the presence or lack of a serif, the letters' weight and balance, spacing and the height difference between upper and lowercase letters.
Week 1: DEVELOPMENT
1. Early Letterform Development: Phoenician to Roman
- Done by inscribing texts onto clays or stones, mainly with chisels as their tool.
- Throughout the use of tools, it effects the uppercase and lowercase letterforms.
1.1 Evolution of Phoenician Letterform
- As illustrated by the picture of Phoenician writings, the letterforms are simple combinations of straight lines.
1.2 Boustrophedon way of writing
- As demonstrated from the picture above, The Greeks wrote from right to left, then left to right which is similar to the Phoenicians where they wrote from right to left. From there, The Greeks developed their writing style called 'Boustrophedon'.
1.3 Roman Inscription
- The Etruscans and Romans used the technique of painting letterforms before proceeding to the inscribing process.
- Over the period of 900 years, Roman letters are developed from Phoenician and Greek letters.
1.4 Evolution of Letterforms from Phoenicians to Romans
- As a clear example, the illustration essentially depicts how the evolution went whereas it shows the change from fonts to the angle of the letter itself (The letter 'A' has turned 90 °.).
2. Hand Script from 3rd - 10th CE
- Square capitals are the letterform that can be found in Roman monuments which is achieved when the stroke width is written in the pen held position of approximately 60° off the perpendicular.
- Rustic capitals were the compressed version of square capitals, usually written on a sheet of parchment which took far less time to write. However, it is generally harder to read although the technique is faster and easier to write. This letterform is achieved when the pen or brush was held at an angle of approximately 30°)off the perpendicular.
- Cursive hand was the type of letterform where it was simplified due to the result of speedwriting habits in the form of lowercases.
- Uncials incorporated some aspects of the Roman cursive hand. This letterform was in a form of smaller letters and was generally more readable than rustic capitals.
- Half uncial mark the beginning of the lower cases letterform due to the formalization of the cursive hand.
- Charlemagne is introduced to standardize text, uppercase, lowercase and punctuation to develop writing system in a clearer communication.
Week 2: TEXT/TRACKING: KERNING AND LETTERSPACING
1. Kerning and Letter Spacing
- Kerning : Refers to the automatic adjustment of space between letters.
- Letter Spacing : The addition and removal of space between letters in a word or sentence.
- Tracking : When both kerning and letter spacing are applied in a word or sentence.
- Conditions for Kerning : Kerning is not applied to large amounts of text, but is often used in headlines, book titles, and other prominent text.
- Letter Spacing for Uppercase Letters : Designers often add letter spacing to uppercase letters to give them more breathing room.
2. Text Formatting in InDesign
- InDesign : A publishing software used for formatting text.
- Type Tool : Used to select and manipulate text in InDesign.
- Control Bar : Displays settings for text formatting, including point size, kerning, and letter spacing.
- Point System : The measurement used for text size.
- Kerning Shortcut Keys : Option + Left Arrow (Mac) or Alt + Left Arrow (PC) to reduce space between letters.
- Letter Spacing Shortcut Keys : Option + Right Arrow (Mac) or Alt + Right Arrow (PC) to increase space between letters.
- Increasing Text Box Size : Increase the size of the text box to accommodate text that extends beyond its boundaries.
- Reducing Point Size : Use Command + Shift + < (Mac) or Ctrl + Shift + < (PC) to reduce the point size of text.
3. Text Alignment
- Flush Left : Aligns text to the left, creating a ragged right edge.
- Center Text : Aligns text to the center, creating a symmetrical shape.
- Flush Right : Aligns text to the right, creating a ragged left edge.
- Justified Text : Stretches text to fill the entire width of the line, creating even spacing between words.
4. Readability and Text Alignment
- Readability and Letter Spacing : Adding letter spacing to a large body of text can reduce readability.
- Readability and Counter Forms : Letter spacing and kerning can affect the counter forms (negative spaces) between letters, which can impact readability.
- Readability and Uppercase Letters : Letter spacing uppercase letters is generally acceptable, but letter spacing lowercase letters is discouraged.
- Readability and Flush Right : Flush right alignment can be difficult to read, especially for large amounts of text.
- Readability and Centered Text : Centered text can be difficult to read, especially for large amounts of text.
5. Best Practices
- Flush Left Alignment : Generally considered the most natural and readable text alignment.
- Justified Text : Use sparingly, as it can create uneven spacing and reduce readability.
- Centered Text : Use sparingly for small amounts of text.
- Flush Right Alignment : Use sparingly for small amounts of text, such as captions.
- Smooth Ragging : Ensure that the ragged edge of flush left and flush right text is smooth and not too jagged.
6. Key Concepts
- Whitespace : Refers to the spaces between words and letters in justified text. Improper spacing can create "rivers," which are undesirable gaps running vertically through the text.
- Legibility vs. Readability : Legibility is how easily individual characters can be distinguished, while readability refers to how easily words and sentences can be understood. A good designer must balance both to ensure effective communication.
7. Typography Techniques
- Hyphenation : Used to maintain reading rhythm and avoid rivers in justified text.
- Type Alignment : Different alignments (eg, centered, left-aligned) can affect the perception of the text. For example, centered text may be appropriate for invitations but can disrupt readability in larger bodies of text.
8. Typeface Selection
- Script Typefaces : Should not be used in all capital letters, as this can compromise their aesthetics and readability.
- X-height : The height of lowercase letters affects readability. A larger x-height generally improves legibility.
9. Design Principles
- Point Size and Leading : The point size (font size) and leading (space between lines) are crucial for readability. A good rule is to set leading to be 2-3 points larger than the font size.
- Line Length : Ideally, a line should contain 55-65 characters for optimal readability. Lines that are too long or too short can hinder reading flow.
10. Color and Contrast
- Gray Value : The overall color of the text should be a middle gray value, which is visually comfortable for reading.
- Contrast : High contrast between thick and thin strokes in typefaces can affect legibility, especially at smaller sizes.
11. Practical Applications
- Testing Typefaces : Use a type specimen book to evaluate typefaces in various sizes and leading. This helps in making informed decisions about which typefaces to use for specific projects.
- Final Output Considerations : Always assess how text looks in its final format, whether on screen or in print. Zooming in can help identify issues that may not be present visible at normal size.
Week 3: TEXT FORMATTING.
1. Introduction to Text Formatting- The lecture connects to previous content, emphasizing the importance of understanding text formatting for future projects .
2. Key Concepts in Typography
Letter Spacing and Kerning :
- Letter Spacing : Space between letters or words.
- Kerning : Adjusting the space between specific pairs of letters.
- Tracking : Combination of both letter spacing and kerning.
Alignment :
- Flush Left : Text aligned to the left margin.
- Ragged Right : Right edge is uneven; important for readability.
- Justification : Text aligned on both left and right margins; care needed to avoid rivers of white space.
3. Color and Readability
- Tightly set text creates a darker color, while loosely set text appears lighter. Aim for a "middle gray" for optimal readability .
4. Paragraph Indication
- Pilcrow (¶) : Used historically to indicate paragraph breaks.
- Leading : Space between lines of text; typically 2-3 points larger than the point size of the text.
5. Creating Paragraph Spaces
- Paragraph Spacing : Should match leading for cross alignment. For example, if text size is 10 points, leading and paragraph spacing should ideally be 12 points.
- Indentation : Should be the same size as the line spacing or point size of the text. Avoid using indentation with left alignment.
6. Common Typography Issues
- Widows and Orphans :
- Widow : A short line at the end of a paragraph or column.
- Orphan : A single line at the beginning of a new column.
- Both should be avoided to maintain good typography .
TYPOGRAPHIC TECHNIQUES and PRINCIPLES
Line Breaks and Spacing
- False Line Breaks : Use Shift + Enter to create a false line break, which helps in managing text flow without starting a new paragraph .
- Kerning and Letter Spacing : Adjust letter spacing carefully, ideally within a range of +/- 3. Excessive adjustments can disrupt text uniformity .
Widows and Orphans
- Widows : To avoid widows (single words or short lines at the end of paragraphs), break line endings throughout the text .
- Orphans : These require careful attention; reducing line length can help manage orphans .
Highlighting Text
- Methods of Highlighting :
- Use italics for emphasis within large text bodies .
- Increase boldness or change typeface to differentiate important information .
- Use color changes carefully, limiting to black, cyan, magenta, and avoiding yellow for readability .
Typographic Hierarchy
- Headings : Clearly signify the importance of sections using different heading levels (A, B, C) to create a hierarchy .
- A Head : Indicate main topics, often set larger and in bold .
- B Head : Subordinate to A heads, used for supporting arguments .
- C Head : Highlight specific facets within B heads, often in small caps or italics .
Cross Alignment
- Maintain cross alignment between headings and body text to reinforce structure .
- Adjust leading space to ensure alignment; for example, if body text has a leading of 12, use 24 for larger text to maintain alignment .
Quotations and Special Characters
- Differentiate between quotation marks and primes; ensure proper usage in typography .
Conclusion of Typography Principles
- Typography is described as "two-dimensional architecture based on experience and imagination, guided by rules and readability" .
Week 4: BASICS OF TYPOGRAPHY
1. Describing Letterform
- As understood by the lecture given, we are taught to start with the basics. By that, it's crucial to describe letterforms in order to identify typefaces, essentially to understand the components of a letterform.
- Baseline is the visual basis of the letterforms.
- Median is the visual line that defines the height of the 'X-Height'.
- X-Height is the height of the lowercase 'x' in any typeface.
- Stroke is any form of line that defines the basic letterform.
- Apex/Vertex is a point where two diagonal stems are conjoined.
- Arms are the short strokes where it extends from the stem of a letterform.
- The ascender is the portion of a stem lowercase letterform that exceeds the median line.
- Barb is the finish of Half-serif which ends on several curved strokes.
- Beak is the finish of Half-serif which ends on several horizontal arms.
- Bowl is the rounded form that describes a counter.
- Bracket is the transition between the serif and stem baseline.
- Cross Bar is the horizontal stroke in a letterform that connects two stems together. For example, the uppercase letterform of 'A' and 'H'.
- Cross Stroke is the horizontal stroke in a letterform that connects two stems together, For example, the lowercase letterform of 'f' and 't'.
- Crotch is an interior space where two strokes meet.
- Descender: Portion of the stem of a lowercase form that projects below the baseline.
- Ear is the stroke extending out from the main stem or the body of a letterform.
- Em is astance equal to the size of the typeface
- Yes is the half of the 'Em'.
- The final is the rounded non-serif terminal to a stroke.
- Ligatures are two letterforms conjoined which form a singular character.
- Link is the stroke connecting the bowl and the loop of a lowercase 'g'.
- Loop is the bowl created in the descender of the lowercase 'g' in some typefaces.
- The serif is the right-angled or oblique foot at the end of the stroke.
- Shoulder is the curved stroke that is not part of a bowl.
- Spine is the curved stem of the letterform 'S'.
- Spur is the extension that articulates the junction of the curved and rectilinear stroke.
- Stem is the significant vertical or oblique stroke.
- Stress is the orientation of the letterform, indicated by the thin stroke in round forms, usually based on handwriting.
- Swash is the flourish extending a stroke from the letterform.
- Tail is the curved diagonal stroke at the finish of certain letterforms.
- Terminal is a self-contained finish of a stroke without a serif.
2. The Font
- Uppercase & Lowercase
- Small Capital
- Uppercase & Lowercase Numerals
- Italic & Roman
- Punctuation & Miscellaneous Characters
- Ornaments
- Roman & Italic
- Boldface & Light
- Condensed and Extended
INSTRUCTIONS
<iframe src="https://sdtaylorsedu.sharepoint.com/sites/Section_271556275179277088279661/_layouts/15/embed.aspx?UniqueId=2843b65f-a3b5-4065-870d-38bf9e983a92" width="640" height="360" frameborder ="0" scrolling="no" allowfullscreen title="MI_GCD60104_TYPOGRAPHY_BDCM_2024"></iframe>
3. PROCESS
TASK 1: EXERCISE 1
On the first day we were assigned with 4 words, Melt, Burn, Grow, Fade. Which I'd do some research on some references before sketching.
3.1 Research/References
3.2 Ideation
After further research, I've gone with a couple of ideas where I drew 4 sketches for each letter. As a result, he picked with the least elements yet amusing to fit the standard.
3.3 Final Outcome
After further discussion and consideration with Mr. Max's time and consultation, He preferred these drafts in which I've digitized for each words chosen. The melt one was the most preferred.
3.4 Animation process
Proceeding to the animation process, I chose the word 'Melt' since it's the most preferred one. It took 12 fps for a single loop of the GIF.
I took the challenge where I made a second animated GIF as an extra experiment for me to play with Adobe Illustrator and Photoshop. This typography design in particular is not in the 4 final drafts which I'd like to consider this one as an extra.
TASK 1 : EXERCISE 2
Kerning & Tracking
We were introduced InDesign software after our journey in Adobe Illustrator and Photoshop. Therefore, we were also taught by Mr. Max about the basic techniques, such as kerning and tracking.
We were assigned to do 6 designs of the paragraphs based on the passage Mr. Vinod provided. This is what Mr. Max preferred out of the six:
HEAD LINE
Typeface: Bodoni Std
Font/s: Bodoni Std Bold
Type Size/s: 72 pt
Leading: 36 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std
Type Size/s: 10 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment: left justified
Margins: 36 px top, 36 px left + right + bottom
Columns: 2
Gutter: 12 mm
FEEDBACK
Week 1: I was introduced the history and developments of typography which I'd blogged it through my e-portfolio site. With this, I have learned how crucial a stroke from a pen can change the perspective of writing to a form of art which I've experimented with myself.. I was assigned to design 4 action words and I've completed 2 of them with the total of 8 sketches.
Week 2: Mr Max taught us shortcuts and the features of Adobe Illustrator which I found fascinating that this is the software that most advanced artists use and it is crucial to learn every tip even the smaller or less irrelevant ones.
Week 3:
This week is when we showed our 4 sketches of each word to Mr. Max. He then chose 1 each best sketches then we'll proceed to digitalize them.
Week 4:
Mr Max introduced us to photoshop where he taught us how to animate using that software which is another step of our assignment.
Week 5:
Mr Max introduced us to InDesign software whereas he taught us the concepts and techniques of Kerning and Tracking.
Week 6:
We were assigned to finalize our Task 1 exercises and notes of lectures in our blogger as our entire submission. We then also introduced to a new assignment which was Task 2, we were asked to design one headline out of three.
REFLECTION
As I've understood from this module so far, we're needed to understand the imaginative concept of expressing words, even for the simplest expression, starting from a single word, to a sentence, to a headline and to a paragraph. This also made me understand how crucial arranging and designing words are as it's job to keep it looking attractive. It would help me a lot to go through graphic design related stuffs. At first, I may have struggled a little as I'm a type of person who likes to go extra on my artworks, while my assignments require me to go simpler. However as times go by, I'm starting to catch up on the concept of graphic design where it doesn't have to look complex to look attractive.
FURTHER READING
Komentar
Posting Komentar