Typography/ Task 1
4/4/23 - 25/4/23 (Week 1- Week 4)
Jessica Tjoe / 0361482
Typography/ BDCM/ Institute of Innovation and Technology
Task 1: creating an E-blog
LECTURE
WEEK 1 -
1000 B.C.E – PhoenicianUppercase letterforms are a combination of straight lines and pieces of circles.
Lines of text written right to left.
900 B.C.E – Greek
‘Boustrophedon’ was developed.
Lines of text written alternately from right to left and left to right.
100 B.C.E – Roman
Estruscan carvers paint the letterforms onto the marbles before inscribing them.
3rd to 10th century C.E.
Square capitals: composed of serifs added to the finish of main strokes.
Rustic capitals: compressed version of square capitals allowing double the amount of words on each sheet of parchment.
Informal lowercase letterforms: developed due to the simplification of square and rustic capitals for speed.
Uncials: Small letters that are one inch high.
Half-uncials: Formal lowercase letterforms replete with ascenders and descenders.
Charlemagne: Issued the standardization of texts by the utilization of majuscules, miniscules, capitalization and punctuation.
1.2 Text Type Classification
Figure 1.1: Text type classifications.
WEEK 2 - 11/4/23
2.1 Kerning and Letterspacing
Kerning : The adjustment of spacing of two particular characters.
Letterspacing: the overall addition of space between letters
Tracking : the addition and removal of space uniformly in a word or sentence.
Normal tracking: Standard space between letters suitable for paragraphs.
Tight tracking: Minimal space between letters reduce readability of paragraph.
Loose tracking: Excessive space between letters reduce readability of paragraph.Letterspacing is preferred when working with uppercase letters to allow a more presentable effect.
Figure 2.1: Types of tracking.
2.2 Formatting Text
Flush Left : Asymmetrical text in which each line starts at the same point but stops at where the last word ends.
Flush Right : Asymmetrical text in which the emphasis is on the end of a line instead of its start with a strong orientation to the right.
Centered : Symmetrical text in which equal value and weight are assigned to both ends of each line.
Justified : Symmetrical text in which the spaces between each word are adjusted in which each line starts and ends at the same point.
2.3 Texture
Different typefaces allow different texture on a page which aids in the overall presentation of a layout.
Typefaces with heavy strokes give a darker mass on a page.
2.4 Leading and Line Length
Type size : The size of a typeface must be sufficiently large to be readable at an arms length.
Leading : The space between lines in a paragraph.
Loose leading: Create striped patterns that distract the reader from material.
Tight leading: Encourage vertical eye movement causing the loss of pace of the reader.
Line Length : The length of each line in a paragraph.
Excessive or minimal line length impairs the readability of a page.
Rule of thumb: 35-65 characters.
WEEK 3 - 18/4/23
3.1 Indicating Paragraphs
Figure 3.1: Ways to indicate paragraphs.
3.2 Widows and Orphans
Widow : Short line of type left alone at the end of a column of text.
Solved by rebreaking line endings throughout the paragraph.
Orphan : Short line of type left alone at the start of new column.
Careful planning of paragraphs to avoid orphans.
3.3 Highlighting Text
Ways to highlight text:
Italic
Bold
Variation of fonts
Coloured text
Placement of a field of colour at the back of text
Bulletin points
“Quotation marks”
3.4 Headline within Text
A head : Indicates a clear break between topics within a section.
B head : Indicates a new supporting argument and does not interrupt as strongly as A head.
C head : Indicates the highlight of specific facets of material within B head text.
Figure 3.2: Types of headlines.
WEEK 4 - 22/4/2023
4.1 Describing LetterformsBaseline
The visual base of letterforms.
Median
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 of connection between two diagonal stems.
Arm
Short horizontal or vertical strokes off the stem of the letterform.
Ascender
The portion of 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.
Bracket
The transition between the serif and stem.
Crossbar
The horizontal stroke connecting two stems in a letterform
Crotch
The interior space where two strokes meet.
Descender
The portion of 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
The distance equal to the size of typeface.
Finial
Rounded non-serif terminal to a stroke.
Leg
Short stroke off the stem of letterform.
Ligature
The character formed by the combination of two or more letterforms.
Link
Stroke connecting the bowl and the loop of a lowercase G.
Loop
Bowl created in the descender of the lowercase G (in some typefaces).
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
Curved stem of the S.
Spur
Extension that articulates the junction of the curved.
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.
4.2 The font
UPPERCASE
lowercase
SMALL CAPITALS
Uppercase Numerals
Italics
Punctuation, Miscellaneous
Ornaments
4.3 Describing/Comparing Typefaces
Figure 4.1: Typefaces.
Lecture 5: Understanding
Most uppercase letterforms are asymmetrical which demonstrates the details taken for a designer to create a harmonious and individual design.
Figure 5.1: The asymmetrical design of uppercase letters of different typefaces, Baserville (left) and Univers (right).
The MOST powerful dynamic in design – CONTRAST
Based on a format devised by Rudi Ruegg
Figure 5.2: Contrast between different typefaces creates dynamic.
Lecture 6: Screen & Print
6.1 Print Type
Designed which emphasizes the intention for reading from physical material.
Typeface examples:
Calson, Garamond, Baskerville.
6.2 Screen Type
Designed which emphasizes the intention for use on the web.
Typefaces are modified to improved readability on digital environments.Increase x-height
Wider letterforms
Open counters
Utilization of hyperlinkClickable word, phrase or image to jump to a new document or new section.
Font Size : 16 pixels
Typeface examples:Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
6.3 Static vs Motion
Static
Minimal characteristic in expression of words.
Used for posters, billboards, magazines etc.
Motion
The dramatization of letterforms to become “fluid” and “kinetic”.
Used for music videos and film productions.
INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/1-Nadfb7pBW1TXk1XhROmJh47C2VM1aLB/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Excersize Type expression
Figure 1.0 typography sketches: Blur (4/11/23)
When I think of blur I usually think of the results of an eye exam. I can't see straight and It shows in the design. I took inspiration from the eye exam and made it pretty minimalist. The last one is inspired by a font created by the Swedish designer Mike Joyce. Mixing Rock music with modern day Swedish design.
Figure 1.1 Typography sketches: Dance (4/11/23)
Dance was fun one to work on. The one on the left was inspired by the spinning motion. People tend to
spin when dancing and this gave me the idea for a tornado like structure. The ones on the right are inspired by the logos used by dance studios where I grew up. People wanted something bold and eye-catching at the same time fun. So I played around with the letters and made them bold so they stand out.
Figure 1.2 Typography sketches: Speed (4/11/23) (retaken under sunlight)
When it comes to speed the first thing that came to mind was sports and the word fast. I took inspiration from brand typography like
nike or adidas. And added some corners in a certain direction to emphasize on fast. On the left I used repeated motion to like you would see in a race, and added speed trails to emphasize that 'this is fast.'
Figure 1.3 Typography sketches: Melt (4/11/23) (retaken under sunlight)
So for melt, I thought of candle wax and blood pooling on the floor.
so I thought it would be fun to try out the old horror font. blood melting from a corpse makes for a very interesting font, while the words melting into a pool of substance is reminiscent of the scene in the wizard of oz where the wicked witch of the west gets water poured on her and melts away.
Figure: 1.4: envelope warp (4/30/23)
For most of my process I used Envelope warp in order to get the perspective and shape I wanted. As you can see here I used the Arc option to get the desired effect.
For Blur I wrote the letters in all caps and spaced them quite far apart. after that I used Gaussian blur to get my desired effect, what I got as a result was something simple yet clear.
Figure 1.6: Dance envelope warp (4/30/23)
I did the same thing I did with speed but I used flag instead of arc.
When I was doing melt I typed the word and then I separated each individual letter, so that they'd be able to fall individually.
I then added ovals on the bottom using eclispe tool to to get the illusion of a puddle.
digitization
figure 1.3 Digitization 4/18/2023
In the Digitization. I'll be honest. I can't grasp the situation much. It's kinda hard to understand. I probably should ask for more critique but its hard to ask the teacher.
figure 1.4 Digitization _final submission (4/30/23)
After class was over I decided to patch up what could be said about dance, I simplified it, and kept the original for contrast.
Exercise 2: Type Animation
Ok to summarize it simply, the task was to take one word from the 4 words we did and animate it. To break down the process I divided the whole thing into 4 steps: Storyboards, Key-Frames, In-betweens, and Exporting.
Step 1: Storyboards
Figure 2.0: Animation story boards
As you can see attached above are the storyboards I made. I split the action into 4 parts and tried to envision what the word would look like animated. And from that I chose the word melt since it would not be so hard to animate, also because I really like it and I think I did a good job on it.
Step 2:Keyframes
Figure 2.3: Melt Keyframes (5)
When I made the frames, I decided that I was going to use 5 keyframes instead of 4 as shown in the storyboards.
Figure 2.4: Melt.GIF_prototype 1
Step 3: In-betweens
Figure 2.5: Keyframes + in-between (9)
It made the animation smoother. as a result.
I had to compare the frames closely with each other. worth it.
The animation became smoother and it was worth it. Totally worth it.
Step 4: Export
Figure 2.6: photoshop frame animation
Once I was done with all the frames I exported it into Photoshop where I put it into frame animation, from there I saved it and exported it into a .GIF
Figure 2.7: Melt2.GIF
The Result was super smooth, obviously not professional level smooth but for my first time animating something on photoshop, It was pretty easy. I had fun doing it.
Figure 2.8: Melt3.gif_Final result 4/30/23
So I patched it up with the critique that Mr. Vinod gave me. It turned out much better.
Kerning and Tracking
The following exercise was done with the following sequence
1. Bembo Std
2. ITC Garamond Std
3. Janson Text Lt. Std
4. Adobe Caslon pro
5. ITC new Baskerville Std
6. Bodoni MT
7. Serifa Std
8. Futura Std
9. Gill Sans MT
10. Univers Lt Std
Figure 2.9: Name excersize (5/1/23)
Figure 3.0: Kerning Process for the first row.
In the beginning I used the raised the size of the font to 72. Then I Kerned it together with Alt, left key.
Formatting
figure 3.1 Layout 1 (5/2/23)
For this format I tried to have a heirarchy to the layout. With the whole layout having a diagonal pattern
figure 3.2 layout 2 (5/2/23)
This one Is the one I followed the tutorial. I may have shifted the title a bit more to the left, but this is the first one I made as I went along with the video.
HEAD
Font/s: Adobe Calson Pro
Type Size/s: 36 pt
Leading: 11pt
Paragraph spacing: 0
BODY
Font/s: Adobe Calson Pro
Type Size/s: 11 pt
Leading: 11 pt
Paragraph spacing: 5 pt
Characters per-line:
Alignment: Align left
Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm
Figure 3.3;Layout 4, 5 & 6 (5/5/23)
I tried these different patterns and experimented with each one, to see if it looks good, I would say the one on the far right looks better then the others.
Final choices
Figure 3.4: my choices for submission (5/8/23)
The two choices I've decided to use in the end were no.3 and no.6. Since they looked the best out of all of them. The first one was formatted in a very neat and tidy form, for the second one I tried cross aligning as per Mr.Vinod's tutorial video, he also gave me some critique which lead me to reposition the captions and fixing all the orphans and widows.
In the end I chose no. 6 with some changes and fixes. I made sure there were no widows and orphans and made sure that all the text were in the columns based on Mr. Vinod's critiques.
Figure 3.5, Kerning and Tracking excersize_Final Submission
<iframe src="https://drive.google.com/file/d/1CdBOWUA1bPEZqkTdbm6zjO_rJ4WStu-f/preview" width="640" height="480" allow="autoplay"></iframe>
Week 1
General...
Specific...
Melt (top left) You don't need to show a lot. sometimes less is more and you can use that to your advantage. Example the bottom left, it works cuz its simple. Also note, don't use graphical elements so much and keep it to a minimum when working on these
Week 3
General...
Digitization went very well over all, Though there could be improvements over all it was smooth. A good reminder to myself would be to make sure that the typography fits together not everything has to be in the centre. Play around with concepts a lot more, experiment and learn that anxiety is something you can overcome.Specific...
Don't distort the letters so much. Dance is an example, best to keep it simple. I feel like speed and melt are fine, maybe could exaggerate speed a bit more. Blur is fine. Week 4
General...
Timing. Have some time before the animation loops back. It ought to give the audience time to take in what happened.
Specific...
Have the letters go all the way down into the pool of ink and later have a small bit of 1 letter pop right back up, A good example would be like a boot coming back up to the surface after the owner sank to the bottom of the ocean.
Week 5
General...
When using justify, revert the formatting back to 0. It's best not to put gutters in the text because they are too distracting. And make sure the tracking is even.
Specific...
the image doesn't associate with the text. there should be a minimun of 5 spaces between the words and lines could be a bit further. There are too many widows and orphans and the font size of the image caption should be on the bottom.
REFLECTIONS
Experience
-The first week was fine since the blog was something easy to create, I wasn't expecting it to become one of my nightmares. But I'm not used to documenting the process so it became a bit harder.
-Typography is fine, I got to come up with Ideas that I can use, I kinda wished I recorded the process more.
-Animation was fun, It was the best part of the week and I recorded the process, would definitely do it again.
-Tracking and Kerning became one of the more harder ones because I had never done it before. Playing with fonts was the fun part but formatting, I'll admit it. It's just nightmare fuel.
Observation
- I need to record my process more. It helps to record everything as proof.
- Keeping a blog is somewhat hard. I can hardly keep a diary for 3 months straight, unless it's an idea journal.
Findings
- Typography isn't as fun as it seems. There are a lot of things that need to be taken into consideration and a ton of lectures to watch...it wouldn't kill to have some bookmarks on the videos, please?
- On the subject of animating, I learned you need more then 10 frames.
- Don't use HB pencils when sketching they don't show up. use 2B - 8B pencils instead.
- Sunlight gives you good quality pictures, but it's hard to find the right timing.
FURTHER READINGS
Force Character design by life drawing by micheal D. Mattesi
Comments
Post a Comment