Typography - Task 1: Exercise 1 & 2
Typography / Bachelors of Design (Honors) in Creative Media / Taylor's University
Task 1: Exercise 1 & 2
JUMPLINKS
LECTURES
Lecture 1: Typo_0_Introduction
What I generally get from Mr. Vinod's on this lecture is the definition of typography, some of the origins and the terminologies within typography. Typography is the act of making and creating letters which can be interpreted as the creation of typefaces.
Furthermore, Mr. Vinod stated that typography came in many forms from digital images to physical objects. For example, animations, website designs, apps, signs, products, posters, books, essentially everywhere. In conclusion, typography is a very important skill to learn since it is applicable to all of the modules that will be studied later on.
He also tells us that typography couldn't be learned in a matter of hours. It is a skill that needs to be studied by lots of practice, observation, and reading. Then he breaks down the definitions of calligraphy, lettering, and typography.
Mr. Vinod also went through a whole section explaining the difference between the terminology of font & typeface. Basically, Font refers to the different scale and weight of typefaces, whereas typeface is a family of fonts that share similar styles that comes in different shapes and forms.
|
|
Fig. 1.1.1, left: different kinds of Georgia fonts; right:
different kinds of typefaces, (25/09/24)
|
Lecture 2: Typo_1_Development
During the early days of writing, people used sharpened stick to write on wet clay or chisel to carve symbols on a stone.
|
|
Fig. 1.2.1, left: Phoenician votive stele Carthage, Tunisia;
right: Evolution from Phoenician letter to Latin, (25/09/24) |
|
|
Fig. 1.2.2, Boustrophedon, Greek writing style, (25/09/24) |
|
| Fig. 1.2.3, Early letterform development of the letter A from Phoenician to Greek to Roman, (25/09/24) |
From the 3rd - 10th century C.E., people used ink and pen with a broader edge to write square capitals. Square capitals are the written forms that can be seen in Roman monuments. Serifs were added at the end of every main strokes.
Rustic capitals is a condensed version of square capitals. It allows twice as many words and takes less time to write on a sheet of parchment. However, due to its condensed nature, it was a little harder to read compared to square capitals.
|
|
|
Fig. 1.2.4, left: Square capitals on the 4th or 5th century; right: Rustic capitals on late 3rd to mid 4th century, (25/09/24) |
Square and rustic capitals were used for documents. Meanwhile, people used cursive for daily use like transactions since it is faster and more efficient to write. Then there is uncials, which integrated elements of Roman cursive such as A, D, E, H, M, U and Q. Moreover, the broad forms of uncials are easier to read at small sizes than rustic capitals.
|
| Fig. 1.2.5, left: Roman cursive in lowercase; right: Uncials, (25/09/24) |
The first unifier of Europe since the Romans, Charlemagne issued an edict to standardize all ecclesiastical texts. Alcuin of York, Abbot of St Martin of Tours was entrusted to this task. The monks rewrote these texts with majuscules (uppercase), miniscules (lowercase), capitalization and punctuation which set the standard for calligraphy for the next 100 years.
|
| Fig. 1.2.6, C. 925: Caloline miniscule, (25/09/24) |
These are some examples of text type classifications:
|
|
|
1. Kerning and Letter Spacing
|
|
|
|
|
Fig. 1.3.2, Counterforms, (02/10/24)
|
Flush left: each line on this format starts at the same point. However, it ends wherever the last word on the line ends. Spacing between words are consistent, allowing the type to form even grey values.
Centered: This format transforms fields of texts into shapes, which adds a picture-like quality to the material. Since centered type creates such a powerful shape, it is compulsory to alter line breaks so the text does not appear to jagged.
Flush right: By focusing the end of a line instead of the start, flush right format can be useful in situations like captions, where the relationship between text and image is a little ambiguous without a strong orientation to the right.
Justified: Justified format imposes a symmetrical shape on the text. this is achieved due to the expansion or reduction of spaces between characters. 'rivers' of white space can be seen due to the openness of lines in this format which should be avoided as a designer.
|
| Fig. 1.3.3, Four types of text formatting, (02/10/24) |
3. Textures
|
|
Fig. 1.3.4, Anatomy Of A Typeface, (02/10/24) |
Having an understanding on how different typeface feels as a text is very important. the different textures of typefaces need to be put into consideration, too.
4. Leading and Line Length
A field of type should occupy the page as much as photograph does, while maintaining the easy and prolonged reading from the text type.
Type size: Text should be large enough to be easily read at arms length.
Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. If it is set too loosely its gonna mess with the readability of the text.
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.
5. Type Specimen Book
Compositional requirement: Text should form a space that can occupy a page or a screen.
|
|
Fig. 1.3.5, Type Specimen Book, (02/10/24) |
Lecture 4: Typo_4_Text_P2
1. Indicating Paragraphs
Pilcrow (¶): previously used to indicate paragraph space, rarely used nowadays.
Leading: A vertical spacing between paragraphs. The size of leading needs to be the same as the typeface to maintain the same value between paragraphs and leading.
Indentation: Also used for indicating paragraphs. Typically the same size as the line spacing or the text point size. It was invented for the purpose of saving up space on newspaper.
Extended Paragraph: generally used in academic writing, but rarely used in general writing due to its subjectively unpleasant looking column of texts.
|
| Fig. 1.4.1, Pilcrow, leading, indentation, and extended paragraphs, (09/10/24) |
2. Widows and Orphans
A widow is a short line of type left alone at the end of a column of text. Alternatively, An orphan is a short line at the start of a new column. The solution to widows is to rebreak the line endings so the last line does not look noticeably short.
|
| Fig. 1.4.2, Widows and orphans, (09/10/24) |
3. Text Highlighting
Highlighting text can be done with various kinds of methods like using italicized and bolded typefaces, changing its color, or even add solid colors behind the text to emphasize the selected text.
|
| Fig. 1.4.3, Univers reduced by 0.5 to match Times New Roman, (09/10/24) |
Keep in mind that when using two or more typefaces, adjusting the leading and point size is crucial as typefaces can vary in size, therefore can create imbalance if not adjusted. Not to mention, when highlighting text by placing solid color at the back of the text, maintaining the left axis of the text ensures readability at its best.
In certain scenarios, it is necessary to place some typographic elements outside the left margin of a column of type. By doing so, it can maintain a strong reading axis. In addition, quotation marks can leave a clear indent, resulting in the left axis broken.
|
|
|
4. Headline Within Text
Subdivision within texts come in many varieties. It is also a typographers job to ensure the heads signify to the reader the importance within the text. The following visuals will be marked as A, B, and C according to the level of importance.
A head specifies a clear break in between topics.
|
| Fig. 1.4.5, A heads, (09/10/24) |
|
| Fig. 1.4.6, B heads, (09/10/24) |
C head highlights specific features within the subject of B.
|
|
Fig. 1.4.7, C heads, (09/10/24) |
5. Cross Alignment
|
| Fig. 1.4.8, Cross Alignment, (09/10/24) |
Lecture 5: Typo_2_Basic
During the 500 years of typography evolution, humans have developed terminologies to describe specific parts of the letterform. In this lecture, Mr. Vinod skimmed through various terms revolving typography. Here are some of the terms that were explained by him.
1. Describing Letterforms
Imaginary Lines and Optical Adjustment
Baseline: The line that visualize the base of letterforms.
Median: The imaginary line that determines the x-height of letterforms.
X-height: The height of the lowercase "x" any typeface.
|
| Fig. 1.5.1, Imaginary lines and optical adjustments (24/10/24) |
Not to mention, there are also cap height, which is the line defining the max height for a capital letter, descender height, and ascender height. Mr. Vinod also explained that ascender height is actually a little higher compared to cap height to give an impression of equality in size. This is what we call an optical adjustment.
Stroke: Lines that defines a shape of a letter or character.
Apex/Vertex: The point that face upwards where two diagonal lines meet, while vertex is the point facing downwards.
Arm: The short strokes off the stem of the letterform.
Bark and Beak: Barb is the half-serif finish on curved stroke while beak is the half-serif finish on horizontal arms.
Bowl: Bowl is the rounded form that describes a counter. It may be either open or close.
Bracket: Bracket is the transition between a stem and a serif.
Cross Bar and 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 stroke extending out from the main stem or body of the letterform.
Em/en: Referring to the width of an uppercase M. 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, either at the bottom of the stroke (L) or 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: In some typefaces, the bowl created in the descender of the lowercase G.
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 the articulates 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 stroke without a serif.
.png)
|
| Fig. 1.5.2, Describing letterforms, (24/10/24) |
Small capitals: Uppercase letterforms that were drawn to the
X-height of the typeface. They are usually found in serif fonts and
are usually called expert set. One of the usage of small caps is to
make uppercase letters on a paragraph stand out less.
|
|
|
Lowercase numerals are numbers set to x-height with ascenders and descenders.
Italics were available in most of the recent fonts. Small capitals, however does not come with an italic form. Italic forms refers back to 15th century Italian cursive handwriting.
Ornaments are usually used as flourishes in invitations and certificates. Only a small amount of traditional and classic typefaces contains ornamental fonts as part of the entire family.
.png)
|
| Fig. 1.5.4, Describing fonts1 |
2. Describing Typefaces
Italics: Named for the 15th century Italian handwriting. Conversely, Oblique are based on roman form of typefaces.
Boldface: Characterized by a thicker stroke than a roman form. The name can vary depending on the thickness of the stroke widths, e.g., semi-bold, medium, extra bold, etc.
Light: A lighter stroke than the roman form. Thin is an even lighter stroke of light.
Condense: A more compressed version of the roman form. Extremely condensed s+tyles are usually called 'compressed'.
Extended: An extended version of the roman form.
|
| Fig. 1.5.5, Describing typefaces, (24/10/24) |
|
| Fig. 1.5.6, Comparing typefaces, (24/10/24) |
INSTRUCTIONS
TASK
TASK 1: Exercise 1 - Type Expression
1. Sketches
Before I started sketching, I used a few reference from Pinterest. These are several references I used.
|
| Fig. 3.1.1, Referenced used for the first sketches, (26/09/24) |
After looking for a few references on pinterest, I then started sketching some of my ideas onto my sketchbook. These are the first sketch I came up with for these words.
|
| Fig. 3.1.2, Initial sketches for fancy, smoke, bloom, and spicy, (26/09/24) |
Fancy For sketch #1, I use a lot of exaggerated lines to make the text look like sparkles which emphasizes the elegance of the word Fancy. Sketch #2 has a simpler design since I focus more on the tail of the Y glides under to underline the whole word.
Smoke I chose to make silhouettes of smoke for both sketches. Then, I draw the letters and fill the silhouettes.
Spicy I sketched Spicy with flames and chili-shaped text to emphasize the spiciness of the word.
Week 2
2. Digitalization
Before jumping to digitalizing my sketches, I was given a couple of feedbacks on my initial sketches. Then, I opened up Adobe Illustration to execute the digitalization process. Here are the finalized version for Fancy, Spicy, Bloom, and Smoke.
|
|
Fig. 3.2.1, Digitalized versions for every type
expressions, (03/10/24)
|
Week 3
3. Animation
I have decided to pick the word Smoke to turn it into animation. With this animation, I tried to capture the movement of smoke forming in the air by covering the whole type with a gradient rectangle, slowly uncovering the type from bottom to top using Adobe Illustrator.
|
| Fig. 3.3.1, Frames used for the smoke animation, (11/10/24) |
|
| Fig. 3.3.2, The process of animating smoke, (11/10/24) |
|
| Fig. 3.3.3, Smoke animation, (11/10/24) |
Week 4
After receiving feedbacks from Ms. Vitiyaa, I quickly added the
square border. Also, i added more frames to make a seamless transition
from frame to frame for the animation.
|
| Fig. 3.4.2, Revision for the smoke animation frames, (15/10/24) |
|
| Fig. 3.4.2, Finalized smoke animation, (15/10/24) |
TASK 1: Exercise 2 - Text Formatting
Exercise 2 focuses more on kerning and formatting text. In total, we are provided with 5 lecture videos with the last one being an extra for shortcuts on cross-alignment to guide us through these small exercises.
1. Kerning and Tracking (Letter Spacing)
The first video is all about kerning and letter spacing, so we were required to write our name on 10 different fonts and add kerning to all of the fonts.
|
| Fig. 3.4.2. Text without and with kerning, (17/10/24) |
|
| Fig. 3.4.3. Both text with and without kerning overlayed with each other, (17/10/24) |
2. Font Size, Line-Length, Leading & Paragraph Spacing
Video 2/4 familiarize us into understanding more about sizing fonts, leading, spacing the paragraphs and more. A good length for a line is around 60 characters per line. Mr. Vinod also said that we should keep the point size around 8-12 points and the ideal leading size is supposed to be around 2-3 points larger than the point size.
|
| Fig. 3.4.4, Text formatting exercise 2, (17/10/24) |
3. Alignment, Paragraph Spacing, Text Fields & Ragging
How to insert image, methods of aligning text and ways to smoothen out ragging was explained on video 3. We were then suggested to set the increments for kerning/tracking into 5/1000 em. He also brought up the rule of thumb when kerning and tracking is not to exceed 3 clicks of the same arrow key.
|
| Fig. 3.4.5, Text formatting exercise 3, (17/10/24) |
The final part of the 4 videos explains all the usage of about baseline grid for cross-aligning. The purpose of the baseline grid is to ensure each line sits on the baseline grid. By doing so, the text will achieve cross alignment.
After watching all 4 videos, now it is time for me to create my own layout using In Design. I created 6 layouts in total, before deciding on which one I like the best.
|
| Fig. 3.4.6, Six layouts, (18/10/24) |
Week 5
After working on all 6 different layouts, I feel like Layout 3 looks the cleanest. Therefore, I decided to use layout 3 for my final layout.
.png) |
| Fig. 3.5.1, Final layout, without and with grid, (21/10/24) |
HEADLINE
Font: Serifa Std 65 Bold
Type Size/s: I am: 20; Helvetica:60 pt I am: 20; Helvetica: 60
Leading: 62 pt
Paragraph spacing: 0
BODY
Font: Univers LT Std
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 55-65 characters
Alignment: Left aligned
Margins: 12.7 mm (top, left, right), 50 mm (bottom)
Columns: 2
Gutter: 5 mm
CAPTION
Font: Univers LT 45 Light Oblique
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Week 6 (Revision)
On this week, Ms. Vitiyaa gave several feedbacks for the layouts I have made last week. She said it was already good. However, for the final layout she said it would be better if I get rid of the image on then bottom and drag the text on the left down. Therefore, I need to do a little bit of revision on my layout.
.jpg)
|
| Fig. 3.6.1, Final layout, with and without grid, (29/10/2024) |
FEEDBACKS
Week 2
Ms. Vitiyaa asked us to continue working on our type expressions, but before we need to watch Mr. Vinod's lecture to further grasp the concept of Adobe Illustrator and typography in general.
My sketch for Fancy is already good. However, I need to work more on Bloom. Ms. Vitiyaa said that all I need to do is to work on the idea more, to expand the idea. Moreover, the other two words, the sketch for smoke and spicy didn't make the cut at all, since Ms. Vitiyaa said the design I came up with looks to generic.
Week 3
This week, Ms. Vitiyaa tasked the class to complete our 4 type expressions we had been doing for the past 4 weeks. Moreover, we also need to post our digitalized type expressions on the Facebook group.
The works that I have done can be developed further into the next stage, which is the animation process.
Week 4
General Feedbacks
Some of us did not use the 10 fonts that was given to us on week 1. Ms. Vitiyaa also added that we need to revise some of our type expressions if they appeared too distorted. Not to mention, the animation for one of the type expressions.
Specific Feedbacks
I was reminded to add a square frame on the animation. Ms. Vitiyaa also asked me if I was satisfied with the result of the animation. After giving it some thought, I decided to add more frames to smoothen the animation more.
Week 5
General Feedbacks
The finalization of the "I am Helvetica" text layout needs to be finalized by this week. We were also told not forget to complete our E-portfolio before the deadline on next Monday. Then, Ms. Vitiyaa told us to watch the lecture video for this week as usual.
Specific Feedbacks
I was struggling to pick an image that suits my layout, so Ms. Vitiyaa suggested some keywords I can use to find them.
Week 6
General Feedbacks
The 6 finished layouts need to be printed and checked by Ms. Vitiyaa. Also, the layouts need to be printed in A4 paper. Then, Ms. Vitiyaa also asked us to bring A4 graph paper and bring 3 different markers next week (Week 7).
Specific Feedbacks
When Ms. VItiyaa checked on my layouts, she said that she liked my 3rd layout, but I need to remove the image on the bottom since it made the layout looked crowded. She also asked me to drag the text on the left down to make it look cleaner.
REFLECTIONS
Experience
Overwhelmed is an understatement for the first day of Typography class. At that point, all I have at that time was a very minimal experience of using Adobe Photoshop. I was very stressed out over working on the assigned tasks, especially when we were obligated to update our E-portfolio every week.
However, as time goes by, I started to get the hang of it after having several group study with my friends since we were able to give feedbacks on each others works. I also realized that I feel way less stressed whenever I do my assignments on campus compared to when I work from my room.
Observations
Since we have to update our work and designs every week, and receive feedbacks from the lecturer the following week, I noticed that typography class is the most different out of the three subjects on this semester. This is a very versatile way of learning, because the constant update and feedbacks we receive is consistent throughout the whole course.
All of the assignments were done step by step once a week. With every week we need to update our e-portfolio and submit our works on the Facebook group, lecturers are able to keep track on how far our progress have gone.
Findings
What I generally got from this subject is how good typography can affect how people view brands or products. A good typography can also express words and feelings just by the design alone. I also realized that me and my friends started paying attention to text whenever we hang out, sometimes even make jokes and actual feedbacks despite only knowing typography from the lecture videos Mr. Vinod provided and some of the books we read.
FURTHER READING
Thinking With Type by Ellen Lupton
Thinking With Type by Ellen Lupton (often stylized as 'thinking with type') is a guide for utilizing typography in various medias. It also covers various aspects of typography such as typefaces, type family, tracking, kerning, and so much more. On the first few pages, it is already stated that this book is not about fonts, instead this book teaches how to use fonts properly.
Week 1
Chapter 1 explains terminologies related to type, such as font, typeface, and emphasizing the importance of choosing the right type to deliver messages effectively. It encourages the reader to pay more attention to the detail when choosing fonts and other typographic related aspects because it can set the tone and convey different meanings with different designs.
Week 2
Chapter 2 discusses various typographic elements such as letterforms, type classifications, and their history. It explains the differences between serif and sans-serif typefaces, the anatomy of letters, e.g., like ascenders, descenders, and x-heights, and how they influence the impact on readability and visuals too. Not to mention, It also describes the importance of choosing the right typeface for specific design projects to create a balance between aesthetics and functionality.
Week 3
From what I remember, Chapter 3 explores concepts such as kerning, tracking, and leading, emphasizing their role in creating clear and readable text. It highlights the importance of these adjustments in achieving visual harmony and coherence in design layouts. The book explains that precise control over spacing is crucial in guiding the reader’s eye and ensuring the text’s message is effectively communicated.
Week 4
The book emphasizes the importance of typography in visual communication in chapter 4. It categorizes typefaces into groups such as serif, sans serif, script, and decorative, highlighting their distinct characteristics and appropriate uses. A central theme of the chapter is the concept of hierarchy, where the size, weight, and spacing of text guide readers’ attention and improve clarity.
.png){kind=link}
Comments
Post a Comment