Week 1
Jordan Matthew Susanto (0352661) BDCM
Typography
Task 1: Type Expression & Text Formatting
Lecture
This is my first class and Mr. Vinod explain us about how important e-portofolio for BDCM student. After that he put a polling for us what words we would like to use for excersise 1. The words are Cough (mandatory), Squeeze, Pop, Explode, Grow, Wink
We have to watch the video on youtube (Lecture Playlist) that Mr.Vinod provide us. We learn about history of typefaces and
Development
Phoenician to roman
Initially writing meant scratching wet into clay with sharpen stick or carving into stone with chisel. The forms of uppercase letter forms can be seen to have evolved out of these tools and materials, The greels developed a style of writing called boustrophedon. the text read from right to left and left to right. Etruscan carver working in marble painted letterform before inscribing them. certain wualities of the strokes is changing in weight from vertical to horizontal
Hand Script from 3rd-10th Century C.E.
Square capitals
were the written version that can be found in roman monuments. These letterforms have serifs added to the finish of the main strokes.
Rustic capitals
a compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet parchment and took less time to write
Roman Cursive
Both square and rustic captals were typically reserved for documents of some intended performancr. we can see here the beginning of what we refer to as lowercase letterforms
Uncials
Incorporated some aspects of the roman sursive hand
Half-Uncials
Charlemagne, The first unifier of europe, issued an edict in 789 to standarize all ecclesiastical text. rewrote the texts using both majusculrs, minuscuke, capitalization and punctuation
Blackletter to gutendberg's type
With the dissolution of charlemagne;s empire cae regional variation upon alcuin's script. A rounder more open hand gained popularity, called rotunda. Humanistic script in italy is based by Alcuin Minuscule
Basics
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, vertex below)
Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upwards (K, Y)
Ascender: The portion of the stem of a lowercase letterform that projects over the median
Barb: The half-serif finish on some curved strokes
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 (uppercase A and H)
Cross Stroke: The horizontal stroke in a letterform that joins two stems together (lowercase f and t)
Crotch: The interior space where two strokes meet (K and V)
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.
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 downwards (K, R)
Ligature: The character formed by the combination of two or more letterforms
Stress: The orientation of the letterform, indicated by the thin stroke in round forms
Kerning and letter spacing
Kerning is refers to the automatic adjustment of space between letter
Flush left is the dormat that most closely mirrors the asymmetrical ecperience of handwriting
Centered is the format that imposes symmetry upon the text, assigning equal value and weight to both ends of any line
flush right is the format that place the emphasis on the end of a line as opposed to its start
Justified is just like centering, imposes a symmetrical shap on the text,
Type Size should be large enough to read easily and at arms length
Leading text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place.
Line Length appropriate leading for text is as much a function of the line length as it is a question of type size and leading
Instruction
Excersise 1: Type Expression
1. Sketches
For this week Mr. Vinod gave us a challange and the challange is type expression. We must to choose 4 out of 6 word that Mr. Vinod gave us and sketch it.
I decided to go with cough (Mandatory), explode, squeeze, grow. And then, i looking for idea and start to sketch the type expression. I do the sketch on procreate.
Fig 1.1 Cough Sketch
Fig 1.2 Explode Sketch
Fig 1.3 Squeeze Sketch
Fig 1.4 Grow Sketch
2.Digitisation
I'm making a digital version of my sketches in illustrator. Some of the words design are different from my sketches because, i decided to change the idea. When i do the digitisation i got some new ideas to express the words.
Fig 2.1 Digitisation on Illustrator
Fig 2.2 Digital Version of Squeeze
This is the my digital version for squeeze words. I'm using a Univers Lt Std (93 Extra Black Extended) to make this type of expression. I have to wrap the text with envelope distort tools to make this kind of text. I decided to go with this design because i think its resembles with the "Squeeze" word.
Fig 2.3 Digital Version of Explode
I know its kinda look messy. I make the type expression like this because, i imagine like the effect after the explosion would look like. I'm using Univers Lt Std (85 Extra Black) Font to make this type expression. There some words that i have to distort so it fit the square.
Fig 2.4 Digital Version of Grow
For grow i stick to my sketch and make the digital version of it. I'm using Univers Lt Std (59 Ultra Condensed). I'm using that font because, i feel Univers Lt Std (59 Ultra Condensed) It's Really fit with this type of expression. I try to making a chart look alikr for this type expression.
Fig 2.5 Digital Version of Cough
In this "Cough" type expression i trying to make a the c its like a mouth and then the other words resembles some kind of droplets or a virus that come out from the mouth. For this type of expression i'm using the Futura Std (Bold) for the C letter and (Heavy) for the o, u , g, h letter.
knkmkpmp
Fig 2.6 Final Result of Digitisation Process
Fig 2.7 Final Result of Digitisation Process - PSD
3. Animation
For the animation progress i'm not using frame animation but, i'm using animation timeline. I'm using the animation timeline because, i feel with using the animation timeline we can produce smoother version of animation and i think it's much more easier to use it. I understad how the frame animation work and i already learn it but, I decided to use animation timeline.
Fig 3.1 Animated Squeeze Type Expression
I using a distortion effect on squeeze. I imagine this like a thing if you press the other side it will get bigger and this is the result
Fig 3.2 Process of Animated Squeeze
This is the process of how i make it on timeline. As we can see, i start with normal squeeze word and then i distort it to the left side and i make it like a jelly effect. after that i distort it to the right side and turn it to normal squeeze word to make the loop effect.
Fig 3.3 Animated Grow Type Expression
For grow animated expression, my idea is to make like a growing chart. so i make every letter is growing higher and higher.
Fig 3.4 Process of Animated Grow
In this process, I make every word pop up sequentially. so the G pop up first and then, R, O, W. For the process of this type expression is very simple and not too complicated.
Fig 3.5 Animated Explode Type Expression
I get inspored by the cartoon type of explotion. So i make this type expression like bigger very fast and i add the slowly gone effect. You know in a cartoon when the character bomb something after an explotion there are like some smoke and it gone away.
Fig 3.6 Process of Animated Explode
The process of this typeface is kinda complicated. Not that complicated but still, complicated. So, i have to make the explode text really small until it not visible and make it on the center of the box. And then, i make it growing big really fast. After that, i add the "bigger smaller" effect (i don't know what this kind of effect name) to make more shock effect. and then i make it gone slowly.
Fig 3.7 Animated Cough Type Expression
I try to make the c is like a person who cough. You know when someone cough the head is going forward and the back to normal position. I try to make some kiind of that movement. and the the O, U , G , H letter is kinda the droplets or a virus that come out from the mouth.
Fig 3.8 Process of Animated Cough
This is the process of Cough Type Expression. Just a simple steps, nothing complicated in this process. So, what i'm doing is i make 3 movements for the c so the first one is sleep posiition, Extended cough position, and normal position. For the O, U, G, H i make it like come out from the C letter.
Final Animation of Type Expression
Fig 3.9 Final Animation of Type Expression
Excersise 2: Text Formatting
1. Kerning & Tracking
So, in excersise 2 we learn about kerning & tracking and i get really excited becuase, we have to do iy on InDesign and i never use InDesign before so, i get excited to learn how to use it. At the beginning we have to practice kerning & tracking by typing our own names and we have to use the 10 typefaces that Mr. Vinod gave us. Like most of all adobe application we need to make a new document first. We have to use A4 Document size and we can setting margin point in InDesign. After i make a new document, i start type my name in it and start kerning and track it and this is the result
Fig 4.1 Result of Kerning & Tracking Typefaces
1. Text Formatting Layout
after i done with kerning & tracking i begin to do the text formatting. It's pretty make me a bit frustated because we really need pay attention to the detail. We learn a lot about InDesign in this part. I start to follow the tutorial video that Mr. Vinod gave us on the lecture playlist. I learn about how to make a proper layout that. One of the most important thing that i learn in this excersise is now i know we have to make sure the text is on the same order so, the readers is not missing any text and not get confused beacuase of the text not in the same order. This is a couples of layout that i make for this excersise
Fig 5.1 First Attempt of Layout Formatting
Fig 5.2 Second Attempt of Layout Formatting
Fig 5.3 third Attempt of Layout Formatting
Final Text Formatting Layout
Fig 5.4 Final Result of Text Fromatting Layout
Fig 5.5 Final Result of Text Formatting Layout - PDF
Font: ITC Garamond Std
Typeface: ITC Garamond Std Book & Book Italic (Title) & Book (Body)
Font Size: 36 (Heading), 12 (Sub-Heading), 9 (Body)
Leading: 12pt
Paragraph Spacing: 12pt
Line Length: 57-65
Margins: 36pt (Top, Left, Right), 300pt (Bottom)
Gutter Size: 10pt
Alignment: Justify Left Align
Feedback
Week 1
General feedback: none
Specific feedback: none
Week 2
General feedback: Mr Vinod said there are some of my design that i can use but, i need to do more expression exploration for each words
Specific feedback: Mr. Vinod give a feedback to our type expression sketches (each word)
Cough: Need to do more exploration
Explode: Some of it might work
Squeeze: one of it funny but too much graphic
Grow: Too much graphic. One of it might work
Week 3
General feedback: all of my type expression is okay
Specific feedback: I show my works to Mr. Vinod that i do in photoshop. I have to do it on Illustrator.
Week 4
General feedback: Need to improve my blog
Specific feedback: Need to finish lecture report
Week 5
General feedback:
specific feedback:
Reflection
Experience
At first, I felt quite boring on this first assignments but, after i try do the works it turns out that this task is quite challanging to me and i really excited when i doing this assignments. From this task i learn about simplicity cause, in the excersise 1 we cannot use any graphical elements in it and i have to make with only 10 typefaces. Those 10 Typefaces are very basic fonts and beacuase of that make me realize that everything have to be back to the basic. For fomatting excersise, i quite enjoying when doing that. Now i know the basic of Adobe InDesign and maybe i need that skillset in the future (no one knows what's comin haha).
Observation
I learn a lot by observing my classmates work on our feedback session. I start to acknowledge what should we do on our feedback session. for me feedback session is a good thing because, we can learn together from our mistakes and fixed it.
Finding
What i found is typography have an really strict rules. But because of that rules we can explore something new.
Further Reading
Fig 7.1 Complete Manual of Typography
Font Formats
it can refer to the platform for which the font was designed. For example, two fonts with the same data for the same typeface may have different file formats depending on whether they’re designed for use on an Apple Macintosh or a Windows pc.
Another kind of font format reflects how the typographic information itself is described and organized. The three leading font formats today are PostScript, TrueType, and OpenType.
Quick Links
Comments
Post a Comment