Task 1 - Typography
Insha Thahirah Rajab - 0360671
Typography - Section 01
Bachelor's Degree in Creative Media (Honors) - Taylors University
Task 1
CONTENTS
Task 1
LECTURES
Lecture playlist: https://www.youtube.com/playlist?list=PLZk01iRkmnlUF8tRLTTAogutYcraV6DFR
Week 1: Introduction
Calligraphy: The Writing/ Writing styles
Lettering: Drawing the letters out
Typography: The creation of typefaces/ type families. (Used in Website Design, App Design, Animation, Signage Design, Logotypes Packaging, Publishing, etc.)
.png)
|
| Figure 1.1 Lettering vs Calligraphy vs Typography |
Typography needs to be legible, readable, and appealing. This is the work of "Typesetters" (or graphic designers, art directors, anyone working with them, etc.). The correct arrangement of type involves selecting typefaces, point size, line length, line spacing, and letter spacing. We also learned the difference between:
Font: Refers to the individual font or weight within the typeface (Bold, Italics, Regular)
Typeface: a typeface refers to the entire family of fonts/ weights that share similar characteristics/ styles (Times New Roman, Arial)
❗takeaways:Week 1.2: Typographic Timeline and Early History
Lecture 2 (Typo_1_Development) dives into Typography's timeline and early history. It focuses on Roman lettering and/or other developments from this stream.
Initial forms of writing
This involved scratching onto wet clay with sharpened sticks/stones, which led to Uppercase letterforms for nearly 2000 years.
|
| Figure 1.2 Development of Phoenician Letters |
Phoenicians (much like other Sematic people), wrote from right to left. However, the Greeks changed this formatting and went from left to right ("Boustrophedon") and changed the orientation of the letterforms.
|
|
Figure 1.2.1 Example of Boustrophedon format |
Etruscans (later on Romans), painted letterforms before inscribing them. There was a change in weight from vertical to horizontal in their strokes due to painting beforehand. This would affect the letterforms in the carving process.
Hand Script (3rd - 10th century C.E)
Square Capitals: These are characterized by Sharp, Straight Lines, Supple Curves, Thick and Thin Strokes, Angled Stressing, and Serifs added to the finish of main strokes.
Rustic Capitals: Compressed version of Square Capitals, allowed for twice as many words on a sheet. However, they were slightly harder to read.
Roman Cursive: Used to record everyday transactions which were simplified for speed. This developed the beginning of lowercase letterforms.
Uncials: (Latin for a twelfth of anything) Incorporated forms of Roman Cursive. Better known as small letters, and more readable in its broad form in comparison to Rustic Capitals.
2000 years after the development of the Phoenician alphabet, Half-Uncials formalized the cursive styles and solidified the era of lowercase letters.
Charlemange issued an edict in 789 to standardize all Ecclesiastical (referring to the church) text. The monks rewrote the texts using both majuscules (uppercase), minuscule, capitalization, and punctuation which set the standard for Calligraphy.
In Nothern Europe, Blackletter/ Textura (highly condensed) letterforms gained popularity, and in the south, Rotunda (rounder, more open). Gutenberg (The inventor of the Printing Press) was skilled in engineering, metalsmithing, and chemistry. The metal matrices he created perfectly imitated that of a scribe's hand.
|
| Figure 1.2.3 Typographic Timeline |
1450 Blackletter: The earliest printing type, its forms were based upon the hand-coping styles that were used back then for books in Nothern Europe.
1475 Oldstyle: Based upon lowercase forms used by Italian humanist scholars for book copying, and the uppercase letterforms found inscribed on Roman ruins.
1500 Italic: Echoing contemporary Italian handwriting, the first italics were close-set and condensed, allowing for more words per page. They were soon cast to complement Roman forms.
1500 Script: An attempt to replicate engraved calligraphy, appropriate mostly for shorter-length applications.
1750 Transitional: A refinement of Oldstyle, this was achieved due to casting and printing. Thick-to-thin relationships were exaggerated, and brackets lightened.
1775 Modern: Represents a further rationalization of old style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes was extreme.
1825 Square Serif/ Slab Serif: Originally heavily bracketed serif, with little variation between thick and thin strokes these phases respond to newly developed advertising for heavy type in commercial printing. As they evolved, the brackets were dropped.
1900 Sans Serif: These typefaces eliminated serifs altogether. Introduced in 1816, but became widespread during the beginning of the 20th century.
1900 Serif/ Sans Serif: Enlarges the notion of a family of Typefaces to include both Serif and Sans Serif alphabets. (ofthen stages between the two)❗takeaways:
- All information presented is taken from the Western world. Further reading can be done for a more holistic perspective.
Week 2: Text Formatting
Tracking: Kerning and Letterspacing
Kerning: Automatic adjustment of space between letters
Letterspacing: To add space between letters
Tracking: The addition and removal of space in a word
|
| Figure 1.3 leading, kerning, and tracking |
|
|
Figure 1.3.1 Types of Tracking |
- Flush left
- Centered Text
- Flush right
- Justified Text
|
|
Fig 1.3.2 Anatomy of a Typeface |
❗takeaways:
- Correct use of these can greatly influence readability. Uppercase letters are more commonly spaced out, whereas lowercase more close together.
- Kerning is often mistaking for Letterspacing, however are much different.
- Type that calls attention to itself before the reader can get the actual words is simply interference, and should be avoided.
- Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle grey value and not a series of stripes.
- Although leading can be determined by screen, for print processes, the physical copy is the best way
Week 3: Text Formatting pt2
Indicating Paragraphs
Pilcrow (¶): A flow over from medieval manuscripts rarely used today
|
| Figure 1.4 Early Pilcrow Formatting |
The leading and the paragraph spacing should be of equal size. This ensures cross-alignment across columns of text.
|
| Figure 1.4.1 Line spacing vs Leading |
Indent: Create a visual separation between paragraphs. Typically the same size of point size (or leading) of text. Used to save space and best used with justified with no ragging.
May cause unusually wide columns of text.
Widows & Orphans
Designers must take great care to avoid these circumstances.
Widow: Short line of type left alone at the end of a column of text
Orphan: Short line of type left alone at the start of a column of a text
|
| Figure 1.4.2 Examples of Widows and Orphans |
- Increasing weight - Medium, Bold of text or using Italic. Different kinds of emphasis = different kinds of contrast.
- Colour printing - can change colour of text (CYK).
- Creating a field of colour behind the text
|
| Figure 1.4.5 Example of bulleted lists existing outside left margin |
|
| Figure 1.4.6 A, B, C headlines within text |
❗takeaways:
- Orphans are unforgivable in text formatting and must be avoided at all costs.
- To rebreak your line endings - Shift + Enter on InDesign Or Alt + Left arrow (kerning)
- 3 is the max change that should be done with kerning
- When changing the weight of a font family drastically, you may want to reduce the point size slightly. Numbers may be naturally bigger than letters, which stick out ruining alignment.
|
| Figure 1.4.7 Differences between each symbol presented |
Week 4: Basic Typography Letterforms
|
| Figure 1.5 Describing Letterforms |
|
| Figure 1.5.1 Letterform Vocabulary |
|
| Figure 1.5.2 Typography Terms |
INSTRUCTIONS
TASK
Task 1 - Exercise 1: Type Expression
Using only the 10 typefaces provided, 3 words must be selected from the choices: Time, Swim, Open, Spark, Swing, Dash, Kick. Each type expression must personify each word chosen, primarily focusing on the font, with little to no graphical elements included.
For my designs, I narrowed it down to the words open, swim, swing, and kick.
: sketches
|
|
Figure 2.0 Sketches of Type Expression, Week
2 |
: digitization
|
| Figure 2.1 Final Digitized Type Expressions, Week 3 |
| Figure 2.2 Final Digitized Type Expressions PDF, Week 3 |
: rejected designs
|
|
Figure 2.3 Digitized Draft #1, Week 3 |
|
| Figure 2.4 Digitized Draft #2, Week 3 |
: animation
|
| Figure 2.5 "Time" Type Expression Animation: First Draft, Week 4 |
|
| Figure 2.6 Artboards of the Animating Process, Week 4 |
|
|
Figure 2.7 "Kick" Final Type Expression Animation, Week
4 |
Task 1 - Exercise 2: Text Formatting
: kerning with fonts
|
| Figure 2.8 Basic Text Formatting, Week 5 |
|
|
Figure 2.9 Adjusting kerning, Week 5 |
|
| Figure 3 Final Font kerning exercise, Week 5 |
: article layout
|
| Figure 3.1 First Attempt at Article Layout, Week 5 |
|
|
Figure 3.1 Draft #1 of Article Layout, Week 5 |
|
|
Figure 3.3 Draft #2 of Article Layout, Week 5 |
|
|
Figure 3.4 Draft #3 of Article Layout, Week 5 |
|
|
Figure 3.5 Draft #4 of Article Layout, Week 5 |
|
|
Figure 3.6 Draft #5 of Article Layout, Week 5 |
|
|
Figure 3.7 Draft #6 of Article Layout, Week 5 |
 |
| Figure 3..8 Final Text Formatting Layout |
: final text formatting layout
FEEDBACK
Week 1
General Feedback: Watch the lecture videos (0), and (1) and make an e-portfolio along with lecture notes. You will require a laptop for class.
Week 2
Specific Feedback: Follow the standard format of the e-portfolio. Draw as many sketches as possible and make sure the font is readable.
General Feedback: For sketches, you are to digitize the 2nd and 3rd options for Open, 1st, and 2nd options and 3rd options for Swim, 2nd and 3rd options for Swing, 1st, 2nd, and 4th options for Kick. Good job!
Week 3
Specific Feedback: The draft looks okayy. In Mr Vinod video I think he has introduced the pathfinder to remove certain parts cleanly. You can use shape tools to make overlapping shapes and use pathfinder or shape builder tool to help you.
General Feedback: Start digitizing the words using adobe illustrator in order to animate in the next class
Week 4
Specific Feedback: Digitize fewer words for animation. Swing doesn't feel like swing too much, but the other three are alright.
General Feedback: Make sure the animation is simple, yet effective. You will only need to animate one of the four words.
Week 5
Week 6
REFLECTIONS
Experience: Task 1 was such an experimental process for me. I am always excited to learn new apps (especially Adobe). I was already pumped up for this module as I found typography fascinating, but needed to prepare for the workload. I started this module quite slowly and put my undivided attention on the first exercise, however, gradually, as I grew more familiar with the applications, I was able to work quickly and effectively. I struggled with the animation a bit and found it a challenge to make the typeface feel interesting, and I found the kerning practice the easiest, as I was able to play around with different fonts. I enjoyed the first exercise the most, as I was granted creative freedom with few rules. Mr Max was very supportive, providing good feedback in and out of class hours, and guiding me through my learning process.
Observations: I observed that I am more productive when I use my previous project adjustments as my drafts, instead of curating ideas purely to make them drafts. If I start work with the intention of it being a finished product, the quality of work is improved. I am a slow worker, so adapting had to be done, figuring out which sections deserved to be prioritized in my work. I also preferred learning on the go and could not concentrate on lectures and further reading if I was not simultaneously working/ learning/ experimenting along with the instructions. By finding inspiration from others and especially past pupils, I also found a lot of direction with my work and also opened my mind to other perspectives and unique ideas which stir up inspiration.
Findings: Through physical learning, and online videos, I understood the importance of making typefaces feel visually pleasing and convey a message through the use of font. Typography was a subject that made students view letters in a visual manner, and apply these visions to our work. I need to improve on my time management, as I found myself spending hours perfecting drafts instead of focusing on the final product. Too much stress also makes me sick, as I fell quite ill on the final submission week (how unlucky). Taking care of my physical and mental health, along with managing my time wisely is something I need to improve on.
FURTHER READING
|
| Figure 3.0 Early Evolution of Roman Letters 1 |
From this site, recommended by Sir Vinod in the first lecture, the author (Allan Haley, Director of Words & Letters at Monotype Imaging) dives into the early evolution of Roman Letters. In this article, much like Lecture 2, he dissects the three styles developed through early writing styles: Square Capitals, Rustic Capitals, and Roman Cursive.
|
|
Figure 3.1 Typographic Design, Bob Carter, Phillip B.
Meggs, Ben Day, Sandra Mass, Mark Sanders (2015) |
Chapter 1: The Evolution of Typography
This chapter traces the history and development of typography from its early beginnings with the invention of writing systems and the printing press to modern digital typography. It covers key historical milestones, influential typographers, and significant changes in typographic technology and design practices.
Chapter 2: The Anatomy of Typography
This chapter delves into the fundamental components of typography, including typefaces, fonts, and the various parts of letters (such as x-height, ascenders, descenders, and serifs). It explains how these elements contribute to the overall look and readability of text.
Chapter 3: Typographic Syntax and Communication
Here, the focus is on how typography communicates meaning beyond just the words themselves. The chapter explores the relationship between form and content, typographic hierarchy, and how different type choices can affect the tone and clarity of a message.
Chapter 4: The Typographic Grid
This chapter introduces the concept of the grid system in typographic design, explaining how it can be used to organize content, create consistency, and enhance visual structure. It covers various grid types and how to effectively implement them in design projects.
Chapter 5: Legibility and Readability
This chapter addresses the crucial aspects of legibility and readability in typographic design. It discusses factors that affect how easily text can be read, including type size, line length, line spacing, and contrast, and offers guidelines for improving the readability of text.
Chapter 6: Typographic Design Process
This chapter outlines the step-by-step process of creating effective typographic designs. It covers everything from initial concept development and research to design execution and final production, emphasizing the importance of iteration and critique in the design process.
Chapter 7: Typography in Different Media
Here, the book explores how typography is used across various media, including print, web, and mobile platforms. It discusses the unique challenges and opportunities presented by each medium and offers strategies for creating typographic designs that are effective and adaptable.
Chapter 8: Experimental Typography
This chapter looks at the more creative and unconventional side of typography. It showcases examples of experimental typographic work and discusses how breaking traditional rules can lead to innovative and impactful designs.
Chapter 9: Contemporary Typographic Practice
The final chapter examines current trends and practices in typographic design. It highlights recent developments in technology, design thinking, and cultural influences that are shaping the future of typography.
This book provides a comprehensive overview of the principles and practices of typographic design, making it a valuable resource for both students and professionals in the field.
❗takeaway:
- This book aims to provide a concise yet comprehensive overview of the information, vocabulary, tools, and methods used in effective typographic design practice.
Comments
Post a Comment