Typography - Task 1: Exercises
24/09/2024 - 29/10/2024 (Week 1 - Week 6)
Shema Goldie Angwen / 0372129
Typography
Bachelor of Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises
TABLE OF CONTENTS
LECTURES
-PRE-RECORDED LECTURES-
The Introduction To Typography (Week 1)
What is Typography?
Typography is a fundamental aspect in any design studies discipline and
applicable to all, whether in animation, graphic design, etc. Typography is
the act of creating letters. In addition, typography is the creation of
typefaces or type families. Typography is also can be animation, for
instance animation is used in the beginning of movie titles or GIF
animations. Wikipedia.com states, Typography is "the art and technique of
arranging type to make written language legible, readable, and appealing
when displayed. The arrangement of type involves selecting typefaces, point
size, line length, line-spacing (leading), letter-spacing (tracking), and
adjusting the space within letters pairs (kerning). The term typography is
also applied to the style, arrangement, and appearance of the letters,
numbers, and symbols created by the process."
Where is Typography used?
In website design, app designs, signage designs, product labels, books, posters, logo, etc.
The Evolution of Typography
Typography has evolved over 500 years, from calligraphy to lettering and then eventually typography. The difference between calligraphy and lettering is that calligraphy is writing the letter while lettering is drawing the circumference of the letter.
Typography Users
- typesetters
- compositors
- typographers
- graphic designers
- art directors
- manga artists
- comic book artists
- graffiti artists
- clerical workers
- newsletter writers
- anyone who do self-publishing materials
Link given: Type History, Alphabet History
Terminologies
- Font: refers to
the individual font or weight within the typeface, l.e.…
Georgia Regular, Georgia Italic and Georgia Bold.
- Typeface: refers to the entire family of fonts/weights that
share similar characteristics/styles, l.e.: Georgia,
Arial, Times New Roman, etc.
Typography Development (Week 1)
Writing Direction
- Pheonicians: from right to left
- The Greeks: developed a style of writing called 'boustrophedon', which meant that the lines of text read alternately from right to left and left to right
The Carved Letterforms
Etruscan (and then Roman) carves working in marble painted letterforms before inscribing them. Certain qualities of their strokes - a change in weight from vertical to horizontal, a broadening of the stroke at start and finish - carried over into the carved letterforms.
The Development of Typography - Timeline
Blackletter to Gutenberg's Type
With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform known as Blackletter or texture gained popularity. In the south, a rounder more open hand gained popularity, called 'rotunda'. The humanistic script in Italy is based on Alcuin's miniscule.
Text Type Classification:
Automatic adjustment of space between letters.
Letterspacing
To add space between the letters.
Tracking
The addition and removal of space in a word or sentence.
When to use kerning and letter spacing?
Generally used for newspaper or book's headline. Letter spacing is usually added when capital letters are used together because the spacing looks too tight.
When to use Adobe Illustrator and when to use InDesign?
Adobe Illustrator is great for graphical illustration, InDesign is preferred for projects with a significant amount of text.
*The white area between letters that make up the particular word are important to consider when doing letterspacing and tracking because they reduces the recognizability of patterns that the words form.
Text Formatting
Present a clear and appropriate presentation of the author's message. Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type. It is important to match the message we carried with the typeface chosen. Different typefaces suit different messages.
*Avoid using script typefaces in capital letters.
Texture
It is important to understand how different typefaces feel as text.
Goal in Setting Text Type
A type specimen book shows samples of typefaces in various different sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length, etc.
If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
Typeface 10 pt, ideally leading (the space between each line of text) would be 12-13 pt, 2-3 point larger than the typeface point size. And the paragraph spacing value should be also the same like the leading. The purpose is because we want to maintain cross alignment.
Figure 3.2: Highlighting Text
What is worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique.
Figure 5.2: References for the word "bloom"
Figure 5.3: References for the word "spicy"
My personal favorites for the word "smoke" would be #6 because I love the idea of how the word "smoke" shapes into a smoke-like form.
For "bloom", #5 stands out to me, it is giving the image of grass and the idea of flowers popping up. Unfortunately, after the feedback session, graphic drawings are not permitted.
For "spicy", #3 is my top choice, it conveys a sense of heat, the idea is that the fire radiating from the word.
For the last word, "fancy", I prefer #4 and #5. The idea is quite simple but for me simplicity speaks luxurious.
And the final choices for digitalization are 'smoke' #6, bloom #4, spicy #3, and fancy #5.
For the word "bloom" I used Univers LT STD. Ms. Vitiyaa suggested me to use Photoshop. Here's the making process:
For the next word, "spicy", I used ITC Garamond Std. I added the fire effect using the Paintbrush Tool on a different layer.
For the word "fancy", I used Bembo Std. I rotated the letter 'a' to make the it look different from the others which carried the "fancy" meaning.
Typo_Ex Text Formatting 1:4
On this exercise, I watched the video that Mr. Vinod Nair uploaded on YouTube: Typo_Ex Text Formatting 1:4. I used Adobe InDesign as what Mr. Vinod Nair used in the video. I wrote my names with 10 different types and I did the kerning and letter spacing as what Mr. Vinod taught in the video.
For this exercise, we were given a text and we should find an image that suits the text. We were instructed to create text formation in Adobe InDesign.
HEAD LINE
Typeface: Univers LT Std
Font/s: Univers LT Std 65 Bold
Type Size/s: 28 pt, 82 pt, 19 pt
Leading: 100 pt
Paragraph spacing: 0
BODY
Typeface: Univers LT Std
Font/s: Univers LT Std 55 Roman
Type Size/s: 8 pt
Leading: 10 pt
Paragraph spacing: 10 pt
Characters per-line: 55-65 characters
Alignment: Left
Margins: 30 mm top, 12,7 mm left, 12,7 mm right, 37 bottom
Columns: 2
Gutter: 9 mm
WEEK 1
WEEK 2
General Feedback
WEEK 5
Observations
Findings
I found that typography is both fun and challenging. Additionally, I realized that Adobe apps are not as hard as what I had imagined if I pay attention to the lecture videos.
The first section starts with the invention of writing over five thousand years ago and ends with the invention of movable type in Europe during the middle of the fifteenth century. The second section focuses on Gutenberg’s invention of movable type to the end of the eighteenth century, a time when printing was done by hand with metal type for about 350 years. The third section, the Industrial Revolution and nineteenth century are revealed as an era of technological innovation and an outpouring of new typographic forms. The fourth section starts in 1900 and shows how typography changed during the 20th century, influenced by modernist design, the need for functional communication, technology progress, and the digital revolution. The final section covers typography in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.
- Pheonicians: from right to left
- The Greeks: developed a style of writing called 'boustrophedon', which meant that the lines of text read alternately from right to left and left to right
Figure 1.1: boustrophedon
The Carved Letterforms
Etruscan (and then Roman) carves working in marble painted letterforms before inscribing them. Certain qualities of their strokes - a change in weight from vertical to horizontal, a broadening of the stroke at start and finish - carried over into the carved letterforms.
Figure 1.2: Late 1st Century B.C.E.,
Augustan Inscription in the Roman Forum, Rome
The Development of Typography - Timeline
1) 4th or 5th century: Square Capitals
- reserved for documents of some intended performance.
- can be found in Roman monuments
- have serifs added to the finish of the main strokes.
- the variety of stroke width was achieved by the read pen held at an angle of approximately 60° off the perpendicular
2) Late 3rd - mid 4th century: Rustic Capitals
- reserved for documents of some intended performance
- the compressed version of square capitals.
- allowed for twice as many words on a sheet of parchment
- took far less time to write but slightly harder to read due to their compressed nature
- the pen or brush was held at an angle of approximately 30° off the perpendicular
3) 4th century: Roman Cursive
- simplified for speed
- for everyday transactions
- the beginning of what we refer to as lowercase letterforms
4) 4th - 5th century: Uncials
- small letters
- incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U, and Q
- 'Uncia' is Latin for a twelfth of anything: as a result, some scholars think that uncials refer to letters that are one inch (one twelfth of foot) high
- the broad forms of uncials are more readable at small sizes than rustic capitals
5) C. 500: Half - Uncials
- mark the formal beginning of lowercase letterforms
- replete with ascenders and descenders
- 2000 years after the origin of the Phoenician alphabet
6) C. 925: Charlemagne
- the first unifier of Europe since the Romans
- The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization, and punctuation which set the standard for calligraphy for a century
Figure 1.3: Timeline of Typography Development
With the dissolution of Charlemagne's empire came regional variations upon Alcuin's script. In northern Europe, a condense strongly vertical letterform known as Blackletter or texture gained popularity. In the south, a rounder more open hand gained popularity, called 'rotunda'. The humanistic script in Italy is based on Alcuin's miniscule.
Figure 1.4: 1300 C.E. Blackletter (Textura)
1) 1450 Blackletter
- the earliest printing type
- forms were based upon the hand-copying styles that were then used for books in Northern Europe
- Examples: Cloister Black, Goudy Text
- based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline minisule)
- the uppercase letterforms found inscribed on Roman ruins, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England.
- Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
- echoing contemporary Italian handwriting
- although originally considered their own class of type, italics were soon cast to complement roman forms
- since the sixteenth century, virtually all text typefaces have been designed with accompanying italic forms
- attempt to replicate engraved calligraphic forms
- not entirely appropriate in length text settings
- Examples: Kuenstler Srcipt, Mistral, Snell Roundhand
- was achieved in part because of advances in casting and printing
- thick to thin relationships were exaggerated, and brackets were lightened
- Examples: Baskerville, Buller, Century, Time Roman
- represents a further rationalization of oldstyle letterforms
- serifs were unbracketed, and the contrast between thick and thin strokes extreme
- Examples: Bell, Bodoni, Caledonia, Didot, Walbaum
- originally heavily bracketed serif, with little variation between thick and thin strokes
- these faces responded to the newly developed needs of advertising for heavy type in commercial printing
- as they evolved, the brackets were dropped
- Examples: Clarendon, Memphis, Rockwell, Serifa
- eliminated serifs altogether. Although the forms
- were first introduced by William Caslon IV in 1816
- its use did not become wide-spread until the beginning of the twentieth century
- Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers
- enlarges the notion of a family of typefaces to include both serif and sans serif alphabets (and often stages between the two)
- Examples: Rotis, Scala, Stone
Figure 1.5: Text Type Classification
Text Part 1 (Week 2)
Kerning Automatic adjustment of space between letters.
Letterspacing
To add space between the letters.
Tracking
The addition and removal of space in a word or sentence.
When to use kerning and letter spacing?
Generally used for newspaper or book's headline. Letter spacing is usually added when capital letters are used together because the spacing looks too tight.
When to use Adobe Illustrator and when to use InDesign?
Adobe Illustrator is great for graphical illustration, InDesign is preferred for projects with a significant amount of text.
*The white area between letters that make up the particular word are important to consider when doing letterspacing and tracking because they reduces the recognizability of patterns that the words form.
Text Formatting
- Flush left: Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value (gray value: text on a white page). It is important to always make the ragging on the right smooth (smooth doesn't mean straight, it means a little bit of curve).
- Centered: Important to amend line breaks so that the text does not appear too jagged.
- Flush right: Useful in situations like captions, where the relationship between text and image might be ambiguous without a strong orientation to the right.
- Justified: Achieved by expanding or reducing spaces between words and, sometimes, between letters. The openness of lines (the gaps) can occasionally produce 'rivers', which is a white space running vertically through the text. As a designers, this is not good, try to avoid using it at all cost.
Present a clear and appropriate presentation of the author's message. Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply if you see the type before you see the words, change the type. It is important to match the message we carried with the typeface chosen. Different typefaces suit different messages.
*Avoid using script typefaces in capital letters.
Texture
It is important to understand how different typefaces feel as text.
Figure 2.1: Typeface Anatomy
- Type size: should be large enough to be read easily at arms length (imagine yourself holding a book in your lap)
- Leading: avoid setting text too tight or too loose
- Line length: a good rule of thumb is to keep line length between 55-65 characters
A type specimen book shows samples of typefaces in various different sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length, etc.
Text Part 2 (Week 3)
Indicating Paragraphs: Pilcrow
A holdover from medieval manuscripts seldom use today.If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
Typeface 10 pt, ideally leading (the space between each line of text) would be 12-13 pt, 2-3 point larger than the typeface point size. And the paragraph spacing value should be also the same like the leading. The purpose is because we want to maintain cross alignment.
Cross alignment is two columns of text sitting next to each other where the text line is aligned.
The difference between line spacing and leading
Line spacing: The descender from one sentence to the descender of the other sentence
Leading: the space between two sentences
Indentation
Another way to indicate paragraph spacing is to create indentation. The indent is the same size of the line spacing/ same as the point size you use for your text. Indentation was used to save space in newspapers. Indentation is best use when the text is justify.
Widows and Orphans
These things must be avoided in our designs.
Widow: a short line of type left alone at the end of a column of text
Orphan: a short line of type left alone at the start of new column
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. Orphans remain unpardonable.
Solution to Widow: rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short. Another solution is to do some kerning (with notes, maximum of 3 points)
Solution to Orphan: make sure no column of text starts with the last line of the preceding paragraph
False Line Break: Shift + Enter
Figure 3.1: Example of Pilcrow, Cross Alignment, Line Spacing, Leading, Widow and Orphan
Highlighting Text:
Some ways to highlight sentence
- Italics
- Bold
- Change the Type Family
- Change the Color of Text (changing the color of body text: only black, cyan, and magenta permitted)
Notes:
- Highlighting text by changing the font family: reduce the point size of highlighted text to match the x-heigh of the new typeface. In the example below, sans serif font has been reduced by 0.5 ti match the x-height of the serif typeface.
- Highlighting text by placing a field of colour: maintaining the left reading axis of the text ensures readability is at its best.
- Highlighting text by placing certain typographic elements (for example: bullet points): it is sometimes necessary to place it outside the left margin of a column of type to maintain a strong reading axis.
Headline within Text
Divided and labeled differently according to the level of importance:
- A Head: indicates clear break between the topics within a section
- B Head: indicates a new supporting argument/ example for the topic at hand. As such they should not interrupt the text as strongly as A heads do.
- C Head: Although not common, highlights specific facets of material within B head text. They not materially interrupt the flow of reading. C heads in this configuration are followed by at least an em space for visual separation.
Figure 3.3: Headline within Text
Cross Alignment
Cross aligning headline and captions with text type reinforces the architectural sense of the page - the structure - while articulating the complimentary vertical rhythms.
Basic (Week 4)
Describing Letterforms
The Font
A well-design typeface doesn't have very strong character. In fact, a well-design typefaces are somewhat ambiguous, they fit into any different type of situation, many different purposes. A good typeface presents the message of the writer.
- 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 (apex above and vertex below).
- Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K,Y).
- Ascender: The portion of the stem of a lowercase letterform that projects above the median.
- Barb: The half-serif finish on some curved stroke.
- Beak: The half-serif finish on some horizontal arms.
- Bowl: The rounded form that describes a counter, the bowl may be either open or closed.
- Bracket: The transition between the serif and the stem.
- Cross Bar: The horizontal stroke in a letterform that joins two stems together (can be seen in the uppercase letterform A and H).
- Cross Stroke: The horizontal stroke in a letterform that joins two stems together (can be seen in lowercase letterform f and t).
- 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: Originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.
- 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. This is something of a catch-all term. Terminals may be flat ('T' above), flared, acute ('t' above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).
Figure 4.1: Letterform's Diagram
- Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
- Lowercase: Lowercase letters, include the same characters as uppercase.
- Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.
- Uppercase Numerals: Also called lining figures, these numerals have the same height as uppercase letters and are all set to the same kerning width.
- Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.
- Italic: The forms in an italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
- Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It is important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.
- Ornaments: Used a flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).
- Roman: The letterform is called so because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.
- Italic: Named for fifteenth century Italian handwriting on which the forms are based.
- Oblique: Conversely are based on roman form of typeface.
- Boldface: Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bold', or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'.
- Light: A lighter stroke than the roman form. Even lighter strokes are called 'thin'.
- Condense: A version of the roman form, often called 'compressed'.
- Extended: An extended variation of a roman font.
A well-design typeface doesn't have very strong character. In fact, a well-design typefaces are somewhat ambiguous, they fit into any different type of situation, many different purposes. A good typeface presents the message of the writer.
Figure 4.2: The 9 Type Families
"You can't be a good typographer,
if you aren't a good reader."
- Stephen Cole
INSTRUCTION
TASK
Exercise 1 'Type Expression'
Research and Sketches (Week 1)
This week, I had to make progress on the 4 words type expression sketches: "smoke", "bloom", "spicy", and "fancy". I began the task by doing research, looking for references in Pinterest and Google.
Figure 5.1: References for the word "smoke"
Figure 5.4: References for the word "fancy"
Here are the ideas that I
sketched on paper:
Figure 5.5: Type Expressions Sketch
My personal favorites for the word "smoke" would be #6 because I love the idea of how the word "smoke" shapes into a smoke-like form.
For "bloom", #5 stands out to me, it is giving the image of grass and the idea of flowers popping up. Unfortunately, after the feedback session, graphic drawings are not permitted.
For "spicy", #3 is my top choice, it conveys a sense of heat, the idea is that the fire radiating from the word.
For the last word, "fancy", I prefer #4 and #5. The idea is quite simple but for me simplicity speaks luxurious.
And the final choices for digitalization are 'smoke' #6, bloom #4, spicy #3, and fancy #5.
Digitized Explorations of the 4 words in Adobe Illustrator (Week 2)
This week, I had to digitize the four type expression words in Adobe Illustrator. Since this was my first time using Adobe Illustrator, I encountered some difficulties because I'm not familiar yet with the software. However, at the end I managed to complete the task by watching Mr. Vinod's video and looking for other YouTube tutorials.
Here are the process of my work:
For the word "smoke" I used Futura Std. I arranged each word to create a smoke-like form, and for the circular part, I used the envelope distort tool (Object > Envelope Distort > Make with Warp > Arc).
Figure 6.1: The Making Process of the Word 'Smoke'
1. Type the word "bloom" in Adobe Illustrator
2. Copy the text
3. Open Photoshop
4. Create a new layer and paste the text as a smart object
5. Resize it
6. Restore the layer
7. Press Command + T (to transform)
8. Choose warp
Afterward, I saved the file and opened it back in Adobe Illustrator. Then, I added three lines using the line segment tool and I curved two of them slightly using the curvature tool.
Figure 6.2: The Making Process of the Word 'Bloom'
Figure 6.3: The Making Process of the Word 'Spicy'
Figure 6.4: The Making Process of the Word 'Fancy'
Animation and Type Expressions Revised Version / Final (Week 3)
Animation
We were instructed to choose one from the four words to create the animation. I decided to choose the word "smoke", which design I love the most. Here is the result:
Figure 7.1: Animation of the word 'Smoke' that need to be revised
Turned out that Ms. Vitiyaa suggested me to change the color. She said grey color is acceptable because before I thought only black color is permitted.
This animation came from the idea that real smoke fades, so I created a gradient transition color from the darkest black to the lightest grey to achieve the fading smoke effect. I made 10 artboards in Illustrator and then using them for the GIF edited in Photoshop.
Figure 7.2: Making Artboards in Adobe Illustrator
Here is the revised version / final result of the type expression animation:
Figure 7.3: Final Outcome Animation of the word 'Smoke'
Type Expressions Final
Meanwhile for the type expressions, I received some feedbacks. Here are the things I need to revise:
1. For the word "spicy", Ms.Vitiyaa mentioned "less is better", the fire drawing is not acceptable and should be omitted.
2. In the word "fancy", the line is unnecessary.
3. The line strokes in the word "bloom" need to be made thinner.
Figure 7.4: Things need to be revised
For the word "bloom", I changed the line strokes to a thinner version.
For the "fancy" word, I deleted the unnecessary line.
For the word "spicy", I needed to change the idea because the previous design was not acceptable.
Here is the revision process:
1. I decided to replace the fire drawing with the text "spicy".
2. I used the envelope distort tool (Object > Envelope Distort > Make with Warp > Flag) to modify the text.
3. I duplicated the text and layered them to create a bold appearance with dimension.
4. I applied the "fire effect" only to the the letter 'S' to avoid making the design looked too much.
Figure 7.5: Revising process of the word 'spicy' (1)
Figure 7.6: Duplicating the text then layering them to create a bold appearance with dimension (1)
Figure 7.7: Duplicating the text then layering them to create a bold appearance with dimension (2)
Here are the final work of my type expressions:.jpg)
.jpg)
Figure 7.8: Final Type Expression (jpeg)
Figure 7.9: Final Type Expression (pdf)
Exercise 2 'Text Formatting'
Typo_Ex Text Formatting 1:4 to 4:4 (Week 4)
On this exercise, I watched the video that Mr. Vinod Nair uploaded on YouTube: Typo_Ex Text Formatting 1:4. I used Adobe InDesign as what Mr. Vinod Nair used in the video. I wrote my names with 10 different types and I did the kerning and letter spacing as what Mr. Vinod taught in the video.
Figure 8.1: Text Formatting Without Kerning & Tracking
Figure 8.2: Text Formatting With Kerning & Tracking
Typo_Ex Text Formatting 2:4 to 4:4A
Important things to take note:
- Adjust margin: Layout > Margins and Columns
- Point size: 8-12 pt (on A3 or A4)
- Point size: 8-12 pt (on A3 or A4)
- Line length: 55-65/50-60 characters (View > Info)
- Leading: 2/2.5/3 pt larger than the font size
- Paragraph spacing: Use the same as leading
- Balance letters in paragraphs: Use kerning (maximum 3)
- When using left justified: Use hypernatkion (as long as not too much)
- Show baseline grid: View > Guides > Baseline Grid
- Have the perfect baseline when using grids: Indesign > Preferences > Grids > Change the 'Increment Every' to the same size as the leading and paragraph spacing
- No Widows / Orphans
- Ragging: Left alignment
- Rivers: Left justification
Here are the 6 layouts I explore:
Figure 8.3: The Layouts
From the 6 layouts, I chose the middle one of the bottom row. The reason I chose this layout over the other is because the use of golden ratio in this layout and I love how this layout looks balanced. Also, the large head line 'Helvetica' immediately draws the reader's attention.
I also got feedback from Ms. Vitiyaa for this layout. She instructed me to align this:
Figure 8.4: Correction
The revised version:
Figure 8.5: The Layout Chosen Without Grid (jpeg)
Figure 8.6: The Layout Chosen With Grid (jpeg)
Figure 8.7: The Layout Chosen Without Grid (pdf)
Figure 8.8: The Layout Chosen With Grid (pdf)
Typeface: Univers LT Std
Font/s: Univers LT Std 65 Bold
Type Size/s: 28 pt, 82 pt, 19 pt
Leading: 100 pt
Paragraph spacing: 0
BODY
Typeface: Univers LT Std
Font/s: Univers LT Std 55 Roman
Type Size/s: 8 pt
Leading: 10 pt
Paragraph spacing: 10 pt
Characters per-line: 55-65 characters
Alignment: Left
Margins: 30 mm top, 12,7 mm left, 12,7 mm right, 37 bottom
Columns: 2
Gutter: 9 mm
FEEDBACK
General Feedback
On 24 September 2024, Ms. Vitiyaa started the class by telling us about the rules and advice for typography class. She also explained us about the Module Information Booklet and told us to join the Facebook Group, where some of our tasks are going to be uploaded there. Then, she introduce us to e-portfolio blog. Ms. Vitiyaa showed us some of the examples of e-portfolio blogs and told us to make one. Mr. Vitiyaa demand us to watch the e-portfolio briefing video as a guide to make our own e-portfolio blog. Before leaving class, Ms. Vitiyaa gave us a task about Type Expression, our class have chose 4 words by voting and we have to do some sketches first then digitalized it with the Adobe Illustrator in the following week. The 4 words chosen are: bloom, smoke, spicy, and fancy.
WEEK 2
General Feedback
On the first day of October 2024, we had our second class of Typography. Ms.Vitiyaa taught us how to download the 10 fonts given since we just got our Adobe apps. Then, Ms.Vitiyaa checked on the progress of our type expression sketches one by one and told us to post it on Facebook if all of the 4 words have already been approved. She also told us to watch the video that was posted in Microsoft Teams as a guide for us to digitize the 4 words in Adobe Illustrator the next week. Ms. Vitiyaa saw most of our design and she emphasize us not to think for spectacular idea but instead just think for a simple one. She told us that simple is better.
Specific Feedback
Ms. Vitiyaa told me that the 'spicy' word of my
type expression sketches seemed boring and told me to explore more and
look for references. She also told me that the 'fancy' word of my type
expression sketches need to be improved because she said that it
didn't look fancy and she told me to find another idea.
WEEK 3
General Feedback
WEEK 3
General Feedback
On 8 October 2024, Ms. Vitiyaa told us to finish the digitalization of the 4 type expression words today, submit it on facebook and blog, and start working on the animation.
Specific Feedback
Specific Feedback
I’m not satisfied with the digitized form of my
‘bloom’ word so Ms. Vitiyaa told me to use photoshop and showed me how
to use warp, skew, and perspective. Then I tried to explore photoshop
by myself and revised the word ‘bloom’ and it turns out I love it more
than the previous one.
WEEK 4General Feedback
On 15 October 2024, Ms. Vitiyaa informed us that many of us did too much distortion on our 4 words type expressions, so we need to revise that. She also assigned us a new task which was the text formatting exercise.
Specific Feedback
Looking at my 'spicy' type expression word, she told me that less is better, the fire drawing is not acceptable and should be omitted. In the word 'fancy', the line is unnecessary. The line strokes in the word 'bloom' need to be made thinner.
General Feedback
Final Submission of e-portfolio is next week. Remember to finish the pre-recorded lectures and also watch the video of the new task that has been uploaded in Teams.
Specific Feedback
Ms. Vitiyaa told me to use the golden ratio for the formatting text exercise.
WEEK 6
General FeedbackThe deadline of the final submission of e-portfolio is tonight. Ms. Vitiyaa reviewed the layouts we created last week, gave critics, and chose the best one from the six layout options.
Specific Feedback
Specific Feedback
She chose layout #5 from my designs and advised me to align the 'c' from "Helvetica" and b from the word "by".
REFLECTION
Experience
Typography class has been quite challenging for me, as I need to come up with creative ideas for every task. At first, I felt quite overwhelmed since I had never used Adobe apps before and didn't understand any of the tools. Thankfully, the videos that Mr. Vinod created were very clear and guide me through the process step by step. An important key for me is keeping up with the weekly instructions uploaded in Teams so that I can managed to complete them on time. Now I feel that I have a better understanding of typography and I have acquired new skills as I have learned some tools in Adobe apps.
I discovered that learning Adobe apps is really important because most of designers use this software. I also discovered that the exercises given have unlocked my skills.
Findings
I found that typography is both fun and challenging. Additionally, I realized that Adobe apps are not as hard as what I had imagined if I pay attention to the lecture videos.
FURTHER READING
Figure 9.1: Typographic Design: Form and Communication by Rob Carter
Chapter 1: The Evolution of Typography
The four timelines in Chapter 1 show how letterforms and typography have evolved over time, from the beginning of writing to present.
The first section starts with the invention of writing over five thousand years ago and ends with the invention of movable type in Europe during the middle of the fifteenth century. The second section focuses on Gutenberg’s invention of movable type to the end of the eighteenth century, a time when printing was done by hand with metal type for about 350 years. The third section, the Industrial Revolution and nineteenth century are revealed as an era of technological innovation and an outpouring of new typographic forms. The fourth section starts in 1900 and shows how typography changed during the 20th century, influenced by modernist design, the need for functional communication, technology progress, and the digital revolution. The final section covers typography in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.
Chapter 2: The Anatomy of Typography
This book introduces the study of letterforms, analyzing their components in detail, including the parts of letterforms, proportions, the optical relationships within a font, etc.
Figure 9.2: Typography's Anatomy
Figure 9.3: A Type Primer by John Kane
This books explains various aspects of typography, including the basics such as describing letterforms, the font, describing typefaces, measuring type, and comparing different typefaces.
Figure 9.4: Basics
This book also covers a timeline of typographic history, text classification, understanding letterforms, and maintaining x-height. Important factors like leading, line length, and the creation of a type specimen book are also discussed.
Most of the explanation here are quite familiar to me because I have watched Mr. Vinod lectures.
Comments
Post a Comment