30/03/2021 - 27/04/2021 (Week 1 - Week 5)
Hussain Waheed (0344802)
Bachelor of Design (Hons) in Creative Media
LECTURES
Week 1 / Introduction to the Module
On our first lecture on typography, we met our lecturers for this subject Mr.Vinod and Mr. Sam. The session was mainly focused on module briefing and E-portfolio. Also we were introduced to the platforms that we will be using for Typography that include the Typography Facebook group, Blogger, Google Drive and Google Sheets. And later, Mr.Vinod explained the basics of Typography and shared material from YouTube to familiarise more with the subject and also on making our e-portfolio on Blogger.
Prerecorded Lecture: What is Typography?
Typography is the act of creating letters ( Typefaces or Type families)
It is heavily used in all forms of design. Some examples include Logos,Books, Animation, web design, application design, signage ...etc.
Typography has evolved over 500 years from Calligraphy to Lettering to Typography. Calligraphy is the writing of letters. Lettering is the Drawing letters.
"Regarding rules, norms, rights and wrongs, no hard and fast rules."
"Learn the rules before breaking them."
"Any discipline would benefit from the understanding of Typography"
"You have to have a good sense of Typography to produce good websites"
Typography is the style and appearance of printed matter" - Oxford Dictionary.
It is the work of typesetters, compositors, typographers... Typography is now something everybody does!
Font: Individual font or weight of a typeface.
Typeface: Entire families of fonts/weights that share similar characteristics / styles.
Figure 1.1 - Examples of fonts within a typefaces - 30th March 2021
Figure 1.1 Font vs Typeface (https://digitalsynopsis.com/) - 30th March 2021
On this pre-recorded lecture by Mr.Vinod we learn about the timeline of typography history from the viewpoint of the western world. We were taught about how the history of type evolved over the years from Phonetician to Roman.
According to the slides, much of the modern letters (arabic, latin...) can be derived from the Phonetician alphabet. The Phonetician (Semitic) people wrote from right to left. The romans then developed their letters to read alternatively from right to left and then from left to right. They also changed the orientation of letters in the process according to direction.
Figure 2.1.1 Greek letterforms / stone engraves - 6th April 2021
Etruscan and Greek stone carvers working on marble, painted letterforms before inscribing them. Certain qualities of their strokes change weight from vertical to horizontal based on the painted letterform and the tools used to carve the letters, and as a result formed the smooth serifs that we see today.
Figure 2.1.2 Augustan Inscription / Rome - 6th April 2021
Figure 2.3 Transition from Phonetician to Roman and then to Greek - 6th April 2021
Square capitals were the written version of Hand script found in Roman Monuments. These forms have serifs added to the ends of the main strokes, and the strokes change in weight due to the fact that the scripts were written using reed pens held at an angle of approximately 60 degrees.
Figure 2.1.4 Square capitals from Roman Scripts - 6th April 2021
Figure 2.1.2 Augustan Inscription / Rome - 6th April 2021
Figure 2.3 Transition from Phonetician to Roman and then to Greek - 6th April 2021
Square capitals were the written version of Hand script found in Roman Monuments. These forms have serifs added to the ends of the main strokes, and the strokes change in weight due to the fact that the scripts were written using reed pens held at an angle of approximately 60 degrees.
Figure 2.1.4 Square capitals from Roman Scripts - 6th April 2021
Rustic capitals (compressed version of square capitals) consumed half the space to write and is easier to write. The pens were held approximately at an angle of 30 degrees. Even thought writing rustic capitals were faster and easier, reading them was difficult compared to square capitals due to tha compressed manner.
Figure 2.1.5 Rustic Capitals from Roman scripts - 6th April 2021
Figure 2.1.5 Rustic Capitals from Roman scripts - 6th April 2021
Cursive letters were used to write everyday writing where as square capitals were used for more important documents. Cursive letters were commonly used to write uppercase letters fast and as a result lowercase letters were developed.
Figure 2.1.6 Cursive letters / Roman scripts - 6th April 2021
Linespace vs Leading: Leading is the space between two sentences. Line space considers the baseline of one sentence to the descender of the other line.
Figure 2.1.6 Cursive letters / Roman scripts - 6th April 2021
Uncials incorporated some aspects of the Roman Cursive hand. The broad forms of uncial are more readable on small sizes than Rustic capitals. They have elements of Capital and lowercase letters.
Figure 2.1.7 Uncials - 6th April 2021
This weeks pre-recorded lecture, Mr.Vinod talks about the basics of letterforms and the terminologies (lexicons) used in typography.
Figure 3.1.0 - Baseline, median and x-height - 13th April 2021
Figure 3.1.1 Stroke - 13th April 2021
Figure 3.1.3 Arms - 13th April 2021
Figure 3.1.4 Ascender - 13th April 2021
Figure 3.1.6 Beak - 13th April 2021
Figure: 3.1.8 Bracket - 13th April 2021
Figure 3.2.4 Em/En - 13th April 2021
Figure 2.4.0 Serif - 13th April 2021
Figure 2.4.6 Swash - 13th April 2021
These are the terminologies used in typeforms. On the next part of the lecture, Mr.Vinod focuses on Fonts (Typefaces) and type families.
*To work successfully with type, you should make sure that you are working with a full font and you should know how to use it.
Figure 2.5.1 Small capitals - 13th April 2021
Then we were taught on some of the names given to typefaces and the reasons for it.
Figure 2.5.6 Description of typefaces - 13th April 2021
Lecturer's Note: The 10 typefaces below represent 500 years of type design perfected to achieve two goals: easy readability and appropriate expression of contemporary aesthetics. They are also the 10 typefaces that we are supposed to use throughout this module.
Figure 2.5.7 10 Types - 13th April 2021
Figure 2.4.8 Recap - Typography terminologies - 13th April 2021
Week 4 / Text / Tracking: Kerning and Letter spacing : Part 1
On this week's pre-recorded lecture by Mr.Vinod, we learn in detail about text and tracking. Previously we learned about individual typefaces and letterforms so now we are getting into text as a whole.
Figure 4.0.0 Kerning - 20th April 2021
Figure 4.0.2 Flush left formatting - 20th April 2021
Figure 4.0.3 Flush Right - 20th April 2021
Type that calls attention to itself before the reader can get to the actual words is simply interference and should be avoided. Simply put, IF YOU SEE THE TYPE BEFORE YOU SEE THE WORDS, CHANGE THE TYPE
Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
Figure 4.0.5 Texture difference - 20th April 2021
Readability: The goal in setting the text type is to allow for easy, prolonged reading.
The colour of the text should be appropriate. Review it on the same material that it is going to be finished.
A type specimen book provide accurate reference for type, type size, line and length...etc.
Figure 4.0.6 Type specimen - 20th April 2021
Compositional requirement: Text should create a field that can occupy a page or screen. Middle grey values give more balanced results
Figure 4.0.7 Grey colour - 20th April 2021
* Useful to enlarge type to 400% to get clear sense of ascenders, descenders on line.
* Nothing replaces looking closely at an actual print out of your work if you are designing for print.
Lecture 4 : Text / Tracking: Kerning and Letter spacing : Part 2
INDICATING PARAGRAPHS:
Figure 2.1.7 Uncials - 6th April 2021
Half uncials mark the formal beginning of lowercase letters to be used along with Capitals. It is a further formalisation of the cursive hand.
Figure 2.1.8 Half Uncials - 6th April 2021
Week 3: Typography Basics / Describing letterforms
Figure 2.1.8 Half Uncials - 6th April 2021
Charlemagne is the first unifier of Europe since the Romans. The monks rewrote the texts using both uppercase, lowercase, capitalisation, punctuation which set the standard of calligraphy for a century.
Figure 2.1.9 Charlemagne - 6th April 2021
Figure 2.1.9 Charlemagne - 6th April 2021
Blackletter (Texture) , a condense strongly vertical letterform gained popularity in Europe after the dissolution of Charlemagne.
Figure 2.2.0 Blackletter - 6th April 2021
Sans serifs eliminated serifs altogether. sans means without and serif means the tweaks of endings of strokes
Figure 2.2.0 Blackletter - 6th April 2021
Gutenberg's type (blackletter) is the first printed letter used in the Bible. The turning point in typography.
We were later taught on various type classifications including blackletter, transitional, italics, modern, sans serifs...etc.
Figure 2.2.1 Gutenberg's letter and the first printed bible - 6th April 2021
Week 3: Typography Basics / Describing letterforms
This weeks pre-recorded lecture, Mr.Vinod talks about the basics of letterforms and the terminologies (lexicons) used in typography.
Figure 3.1.0 - Baseline, median and x-height - 13th April 2021
- Baseline: imaginary line on the base of a letterform
- Median: imaginary line defining the x-height of a letterform
- x-height: the height of a lowercase "x" in any typeface
- Stroke: Any line that defines the basic letterform.
Figure 3.1.1 Stroke - 13th April 2021
- Apex / Vertex: The point created by joining two diagonal stems (Apex = above, Vertex = below)
- Arm: Short strokes off the stem of the letterform (horizontal or Inclined upwards)
Figure 3.1.3 Arms - 13th April 2021
- Ascender: The portion of the stem of a lowercase letterform that projects above the median
Figure 3.1.4 Ascender - 13th April 2021
- Barb: half-serif finish on some curved strokes
- Beak: half-serif finish on some horizontal strokes
Figure 3.1.6 Beak - 13th April 2021
- Bowl: rounded form that describes a counter. Bowl maybe open or closed
- Bracket: transition between serif and the stem
Figure: 3.1.8 Bracket - 13th April 2021
- Crossbar: Horizontal stroke in a letterform that joins two stems together
- Cross stroke: horizontal stroke in letterform that crosses a stem
- Crotch: interior space that 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 stem or the body of the letterform
- Em: Width of an uppercase M
- En: Half the width of an Em
Figure 3.2.4 Em/En - 13th April 2021
- Finial: The rounded non-serif terminal to a stroke
- Leg: Short stroke off the stem of the letterform
- Ligature: character formed by combination of two or more letterforms
- Link: Stroke that connects the bowl and the loop of a lowercase "g"
- Loop: bowl created in the descender of the lowercase "g"
- Serif: right angled or Oblique foot at the end of the strokes
Figure 2.4.0 Serif - 13th April 2021
- Shoulder: The curved stroke that is not part of a bowl
- Spine: curved stem of the S
- Spur: extension in the articulates the junction of the curved and rectilinear stroke
- Stem: significant vertical or Oblique stroke
- Stress: orientation of the letterform indicated by the thin stroke in round letterforms.
- Swash: flourish that extends the stroke of the letterform
Figure 2.4.6 Swash - 13th April 2021
- Tail: curved diagonal stroke at the finish of certain letterforms
- Terminal: self-contained finish of a stroke without a serif.
These are the terminologies used in typeforms. On the next part of the lecture, Mr.Vinod focuses on Fonts (Typefaces) and type families.
*To work successfully with type, you should make sure that you are working with a full font and you should know how to use it.
- Uppercase: Capital letters including certain accented vowels.
- Lowercase: Lowercase letters including same characters as uppercase
- Small capitals: Uppercase letters drawn to the x-height.
Figure 2.5.1 Small capitals - 13th April 2021
- Uppercase numerals: Same height as uppercase letters
- Lowercase numerals: Set to x-height with ascenders and descenders
- Italics: Oblique letterforms referring to Italian cursive handwriting.
- Punctuation: Miscellaneous characters or punctuation marks.
- Ornaments: Used as flourishes in invitations or certificates.
- Roman: derived from inscriptions of Roman monuments.
- Italics: derived from 15th century Italian handwriting
- Boldface: characterized by a thicker stroke than Roman form.
- Light: A lighter stroke than Roman form.
- Condense: Compressed style of the Roman form
- Extended: Extended variation of the Roman form
Figure 2.5.6 Description of typefaces - 13th April 2021
Lecturer's Note: The 10 typefaces below represent 500 years of type design perfected to achieve two goals: easy readability and appropriate expression of contemporary aesthetics. They are also the 10 typefaces that we are supposed to use throughout this module.
Figure 2.5.7 10 Types - 13th April 2021
Figure 2.4.8 Recap - Typography terminologies - 13th April 2021
Week 4 / Text / Tracking: Kerning and Letter spacing : Part 1
On this week's pre-recorded lecture by Mr.Vinod, we learn in detail about text and tracking. Previously we learned about individual typefaces and letterforms so now we are getting into text as a whole.
- Kerning: automatic adjustment of space between letters.
- Letter-spacing: to add space between letters. For smaller sentences / words. Not for large amount of texts.
- Tracking: addition and removal of space in a word or sentence. For smaller sentences / words. Not for large amount of texts.
Figure 4.0.0 Kerning - 20th April 2021
After that, we were briefed about the basics of Adobe Indesign and practiced kerning, tracking and letter spacing on InDesign.
- Normal Tracking
- Loose Tracking
- Tight Tracking
- Flush left: formatting text to mirror asymmetrical experience of handwriting. Most natural way of text formatting. Ragging is the jagged end of left aligned text. Important to be made smooth
Figure 4.0.2 Flush left formatting - 20th April 2021
- Centered: Symmetric formatting of text. Not advisable for large amounts of text.
Figure 4.0.3 Flush Right - 20th April 2021
- Justified: Similar to centering, imposes symmetrical shapes on the text. Varied spacing (rivers) between words to be avoided as much as possible.
Figure 4.0.4 Justified - 20th April 2021
Type that calls attention to itself before the reader can get to the actual words is simply interference and should be avoided. Simply put, IF YOU SEE THE TYPE BEFORE YOU SEE THE WORDS, CHANGE THE TYPE
Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
- Texture: relativity between strokes, leading and x-height of two particular types that affects readability.
Figure 4.0.5 Texture difference - 20th April 2021
Readability: The goal in setting the text type is to allow for easy, prolonged reading.
- Type size: Should be large enough to be read easily at arms length.
- Leading: Vertical spacing between lines. Should be set to for easy reading.
- Line length: Amount of characters in a line.
The colour of the text should be appropriate. Review it on the same material that it is going to be finished.
A type specimen book provide accurate reference for type, type size, line and length...etc.
Figure 4.0.6 Type specimen - 20th April 2021
Figure 4.0.7 Grey colour - 20th April 2021
* Nothing replaces looking closely at an actual print out of your work if you are designing for print.
Lecture 4 : Text / Tracking: Kerning and Letter spacing : Part 2
INDICATING PARAGRAPHS:
- Pilcrow (¶): A glyph most fonts have that indicates a paragraph spacing.
- Leading between paragraphs: A 12pt leading (if the text is 10pt) in lines has paragraph leading the same as leading space (12pt) so that multiple columns have cross alignment in-between.
- Indentation: Spacing on the line before paragraph instead of leading. Ragging should not be there. Best used when justified.
- Extended paragraphs: Creates unusually wide columns of text. There are compositional or functional reasons for choosing.
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 new column
Figure 4.0.9 Widows and Orphans - 20th April 2021
Only solution to widows is a forced line break (or increase letter spacing of not more than 3 clicks).
Orphans require more care. Make sure no column starts with the last line of preceding paragraph.
Highlighting text: Differentiating important text within large amount of texts by using italics, bold, change typeface and make it bold or highlight. or create boxes.
*Change font size when using different fonts to match the x-height.
* reduce aligned figures (numbers) or All capitals by 5 to ensure visual cohesion in short texts.
Figure 4.1.0 Figure size - 20th April 2021
*Sometimes it's necessary to place some typographic elements (bullets, quotation marks... ) outside left margin to maintain strong reading axis.
Figure 4.1.1 maintaining reading axis - 20th April 2021
Hierarchy in Typography: Differentiating headlines, sections within large texts.
Week 5 / Lecture 3 : Text / Tracking: Kerning and Letter spacing : Part 1
Figure 1.1 Facebook poll for type selection - 30th March 2021
I tried my best to keep everything as minimal as possible while maintaining a unique expression behind each typography.
Figure 1.0 First Alphabets from fontology.com - 30th March 2021
The second article called Early evolution of Roman letters also by Allan Haley speaks about how the Romans used to carve their letters on marble and how the process of carving and everyday-written scripts affected the letterform over the years creating multiple variations of the Roman letterforms.
Figure 1.1 Early evolution of Roman Letters from fontology.com - 30th March 2021
https://www.fonts.com/content/learning/fontology/level-1/type-history/early-evolution-of-roman-letters-1
https://www.fonts.com/content/learning/fontology/level-1/type-history/first-alphabets
Week 2: On week two, I read this article, The Evolution of Typography: A brief history by John Siebert. The article briefly brings us through the history of type dating back from the ancient era cave drawings to the Middle-age manuscripts to modern day typography.
Figure 1.2 Evolution of Typography - 6th April 2021
https://www.printmag.com/post/evolution-typography-history
Week 3: On this week, I watched a YouTube video titles Typography, the anatomy of a letter.by Envato Tuts. This video breaks-down the parts of a letterform and describes each part.
Figure 1.3 Type Anatomy - 13th April 2021
Week 4: For this week's additional learning I watched a video Pixels Inc titled 'What is Kerning and Tracking?'. This video talks about the importance of kerning and tracking, and the effect of bad kerning and tracking on design and typography.
Figure 1.4. Kerning and tracking- 20th April 2021
* reduce aligned figures (numbers) or All capitals by 5 to ensure visual cohesion in short texts.
Figure 4.1.0 Figure size - 20th April 2021
*Sometimes it's necessary to place some typographic elements (bullets, quotation marks... ) outside left margin to maintain strong reading axis.
Figure 4.1.1 maintaining reading axis - 20th April 2021
Hierarchy in Typography: Differentiating headlines, sections within large texts.
- A head: A clear break between topics within a section
- B head: a subordinate to the A head
- C head: Lower head
Week 5 / Lecture 3 : Text / Tracking: Kerning and Letter spacing : Part 1
INSTRUCTIONS
TYPE EXPRESSION
Week 1: Visualising Type
For our first exercise on typography, we were given a set of names to choose for our exercise 1. We had a poll on our Facebook group that Mr.Vinod made for which we had to choose our picks so that the most popular words will be selected.
Figure 1.1 Facebook poll for type selection - 30th March 2021
After the poll was over, the most popular words were:
- Slice
- Punch
- Spin
- Wave
- Scream
- Eat
- Point
And we are to visualise the words and sketch our own versions of some of them on a sketchbook.
This is my first sketch for the words that I want to pick.
Figure 1.2 - Typography sketches - 30th March 2021
Week 2: Digitalising sketches
For the second week, we were told to start digitalising the sketches from the previous week. I chose the same four words as the initial sketches, Wave, Slice, Eat and point. I had to change the designs however, based on the feedback I received from my classmates. According to them, the ideas were good but some of the sketches need to be improved. Also on the previous week, we were shared 10 typefaces to design our typography designs on. I kept it in my mind when I was sketching the words. So here is the digitalised versions of my sketches:
Figure 1.1 - Digitalised sketches - 6th April 2021
- For the first word "Wave", I used Futura Bold, and applied a very subtle warp effect horizontally to give it the feel of a wavy motion while maintaining the overall design very still.
- For the second word "Slice", I almost did exactly the same as the initial sketch. The font used is ITC Garamond STC
- For the third word "Eat", I changed things up a bit from the initial sketch. Changed to simple letters and also got rid of the fallen bits and cut a bite only from the letter 'e' as it was difficult to read the word as eat from the previous sketch. The font used is Serifa Std.
- For the fourth word "Point", I replaced the dot from the letter "i" to the location icon and removed the fill from all letters except the location bit to make it stand out more. The font used is Univers LT Std
Here is the pdf file;
* Correction: The font used in Point is Futura*
2. SLICE
3. Wave
For the third word "wave", I decided to show something of a minimal wave going through the letters so that it would resemble an actual wave but more minimal rather than realistic. To achieve that, I explored some methods and decided I would simply use the brush tool to white-out the blank space for each frame. Here is the GIF:
Figure 2.3.1 Wave GIF - 13th April 2021
In terms of artboards, this one was simpler as the amount of frames required to give the look is fewer considering the number of bites and the duration of delay required between each bites. I created 5 artboards on Adobe Illustrator and drew circles for each bite. Here is how the artboards looked:
Week 4:
Figure 4.1.1 Text box - 20th April 2021
After that I examined the places where kerning and tracking is required and then using Opt + Right and Left button, adjusted the spacing between letters such as "u and s" and "h and e" and some others. I felt like the spacing is too much at each click so went to the preferences and changed the unit for kerning and tracking to 5/1000 em.
Figure 4.1.2 Kerning & Tracking - 20th April 2021Then I made duplicates of My name and placed the 10 fonts next to the document to change the fonts respectively using the eyedropper tool. And we were basically told to do kerning and tracking to make the name look with a decent look and place them neatly on the page along with labels of the fonts used for each.
Figure 4.1.3 - 20th April 2021Part 2:4 is about setting the document grid for line spacing and text formatting to practice font size, line length, leading and paragraph spacing. For this task I created a new page on the same documented and split the grid into 4 columns as Mr.Vinod showed. After that I copied a text from the facebook group to do the text formatting according to the tutorial.
Figure 4.2.1 - 20th April 2021"It is important to keep in mind that when choosing a point size, you have to check the number of characters in the column using the info panel. Once the number of characters is between 55 - 65, you are good to go. And you can then increase the leading by usually 2 points. The leading is then used for the paragraph spacing.
Always check the document with eyes half closed to see the colour.
Figure 4.2.2 Info panel - 20th April 2021
Part 3:4 is about text feels, alignment and ragging. First I learned how to place images and different ways to manipulate the image and crop.
Figure 4.3.1 - 20th April 2021
Also learned how to change margins and layout for individual pages.
Figure 4.3.2 - 20th April 2021
The text sizes (column sizes) should not vary as it implies to different text boxes with different information. And when tracking lines to get rid of ragging, it is important to not exceed 3 clicks.
After doing kerning and tracking for separate lines, the whole text started looking very balanced.
Figure 4.3.3 kerning & Tracking - 20th April 2021
Also, if using justified alignment, you must try to avoid rivers between texts as much as possible.
Part 4:4 is about creating and applying the layout.
Figure 4.4.1 Arranging the informations in respective positions - 20th April 2021
Then I created the headline with a decent font size, and the subheading in italics.
Figure 4.4.2 Headings - 20th April 2021
Figure 4.4.3 Aligning text on the baseline - 20th April 2021
Figure 4.4.4 Formatted layout - 20th April 2021Week 5: I was given feedback from Mr.Vinod and my peers regarding the work and it seem like I had made quite a few mistakes. It was mainly issues with ragging and arrangement. So during the break time, I attempted to correct the mistakes and tried to bring some new arrangement style for it.
Figure 4.4.5 rearrangements. - 20th April 2021
Figure 4.4.6 Re-formatted layout - 20th April 2021
FEEDBACK
Week 1
Specific feedback: I was told that there needs to be more idea exploration and sketched to choose from.
General feedback: To explore ideas and upload clean photos without shadow or blur.
Week 2
Specific feedback: Mr.Vinod suggested that the type "slice" is too small on the artboard and that it needs to sit well in the artboard.
General feedback: To have a good composition and alignment within the frame and type.
Week 3
Specific feedback: For my digitalised sketches, Mr.Vinod chose them among the relatively good designs from class works and said it looked good. He noticed the map-like style of the "point" type and gave good feedback for other designs as well.
General feedback: Mr. Vinod told everyone to keep everything as minimal as possible and to avoid use of too much graphical elements.
Week 4
Specific feedback: For my animated GIF, the feedback from my peers was that it was good and that it reflects the idea and form. Also that it needs no improvement. Mr.Vinod also said he loves the first part of the line going through and slicing the type but said that it would be better if the bottom half would just drop down from that point and goes through the floor. Which as good as it sounds, I feel like I am not gonna change to because I feel like it would be too much drama for a single-word GIF and I sort of want to see the sliced part of the word even after it is done and keep it as minimal as I can. But I really do appreciate the feedback and think it is a cool idea.
General feedback: To avoid use of other applications and to try and on the animation, to try and express the idea behind the type.
Week 5
Specific feedback: For my text formatting exercise, Mr.Vinod noted the mistakes on the Facebook post. He said the ragging needs to be smoother, overall arrangement needs to be improved. And that there is tpp much paragraph spacing for the sub headline and the leading is a bit tight. I got similar comments from my peers as well so I made the changes to the file and re uploaded.
General feedback: Keep things simple. Clearly differentiate between headers and body text. And experiment with different layouts and take creative risks.
Week 6
Specific feedback: On this week, Mr.Vinod and Mr.Sam checked the e-portfolios and gave feedback for those who had issues on their e-portfolios. I didn't have any issues apparently which was a huge relief.
REFLECTIONS
Experience: I was very much looking forward to learning Typography in depth as I had previously worked on a number of Type related works. Our first class was exciting and we met our lecturers who were very friendly and helpful. However, as classes progressed, Typography seemed like the toughest subject in terms of the workload but still it was very fascinating and thought provoking. The feedback from Mr.Vinod and my peers are very helpful to go forward with the weekly exercises and assignments.
Observation: I observed that the teaching model is very much different to the study models I've previously had so it was quite challenging to adapt but I am feeling quite positive about it now. Even though we cannot have face-to-face classes, online classes somehow works and is very interactive especially because all our work is also happening in our screen. And the most important thing I observed was the importance of practice and listening to instructions and feedbacks with a clear mind.
Findings: I found that having an e-portfolio was a really helpful thing to have when learning more stuff everyday. Having a good documentation to go back to actually saves a lot of time and struggles. It was new for me but over the course, I am getting very dependant on my e-portfolio. And I also found that I still need to read a lot of books. Reading and watching about the typography history and the origins of calligraphy and type was really an eyeopener.
FURTHER READING
Week 1: On the first week, I read the two articles from Fontology.com which was a website suggested by Mr.Vinod. The first article called "First Alphabets" by Allan Haley Refers to the invention of communication through carved marks or painted symbols that evolved into symbol alphabets and photograms and then to phonetic writing through which our alphabet emerged.Reflections from Digitalising exercise:
I felt like the digitalising process usually takes a bit of time but it gives a lot of creative freedom. You could experiment any style you want but to have a more professional look, the simpler the better. But from what I experienced, to make it look simple and have a good quality to it takes much more time. Having a sketchbook nearby was very handy when it came to redesigning the sketches and get ideas.
REFLECTIONS: I was a bit stressed over the whole module but as weeks progressed, it's starting to settle for better and I'm excited to explore and learn more on the subject.
FURTHER READING: https://www.youtube.com/watch?v=PH7vcZjTSLA
Week 3: Animating Typography
This part of the exercise was a bit tense because I had never attempted animating anything before and I had no idea where to start. But after watching the lecture and practical session, I figured I was going to start with the "Point" typography since it was the idea I liked the most. Here are all 4 GIFs:
1. Point:
On the feedback, Mr.Vinod also mentioned that this type resembles a map due to the pointer graphic used instead of the circle on top of the letter as well as the use of outlines instead of a solid fill to make the whole thing look like a visual map. I had already thought of it that if I have to animate this, the best way to carry it out is by making it look like it's signalling a location just like it does on Map applications. Here is the GIF I created for my first type; "Point".
Figure 2.1.1: Point GIF - 13th April 2021
To achieve the look, I first created a new 1000x1000px artboard on illustrator and then drew circles around the point where I want the "location pointer" to touch on the map (type). But the circles have to be on a ground-like plane so it has to somehow have the proportions right rather than just creating equal-diameter circles. The circles needed to go much further on the x-axis than they go on the y-axis when enlarging each circle. But I didn't draw them perfectly accurate. Just made them look pleasing for the eye. And also, I wanted the circles to go only inside the letters and not outside so I attempted to make clipping masks but that didn't work as I wanted so I improvised and made a box around the artboard and merged it with the letters and created a new frame that would go above the circle-lines. Here's the first artwork.
Figure 2.1.2 Point artwork 1 - 13th April 2021
After aligning the circles well balanced on the letters, I duplicated the artboard 9 times for the 9 circles, and then deleted the unwanted circles from each artboard so that the animation would appear as if it is only one circle getting bigger with each frame. I also moved the location-icon up and down along the timeline. Here are the artboards created:
Figure 2.1.3 Artboards for Point - 13th April 2021
After getting the proper adjustments and checking the frames for any mistakes, I finally exported the frames as screens and imported them onto Adobe Photoshop as Mr.Sam showed us on the practical session. Also followed the steps to create a timeline on Photoshop and import the screens. After that it was pretty easy, hiding and unhiding layers and creating new frames for each screen. I set the delay time for 0.08 seconds because when played (both on photoshop and exported preview) that much delay looked pretty lifelike. After all that done, I exported the file as a Web-safe GIF. It was much easier than I had imagined.
For the second one, I used an idea from the mobile game Fruit Ninja where the player has to swipe on the screen and it chops off fruits with a blade. It has a smooth looking effect of slicing fruits so I tried to apply the same style for my second type "Slice". Here is the final animation:
Figure 2.2.1 Slice GIF - 13th April 2021
To create this look, I joined together the two parts of the word from the first sliced-typography and using the pen tool, drew a line on the sliced line for reference. Then I created an almost spear-like circle to be used for the swipe blade. Then I rotated the blade to diagonally aligned to the reference line and the duplicated everything to create 13 artboards. This GIF has two parts. the swipe-part and the sliding-off part. I used the first 7 artboards to show the swipe. For that I dragged the blade-circle from beginning to end of the reference line and then deleted the reference line from all the artboards. And for the sliding off part, I just moved the bottom part of the word further and further away until it settles in the position of the initial typography done for this exercise. Here are the artboard arrangement:
Figure 2.2.2 Slice Artboards - 13th April 2021
And then I exported the screens to Photoshop and using the timeline as before, created the GIF.
Time delay used for this GIF is 0.1 seconds.
3. Wave
For the third word "wave", I decided to show something of a minimal wave going through the letters so that it would resemble an actual wave but more minimal rather than realistic. To achieve that, I explored some methods and decided I would simply use the brush tool to white-out the blank space for each frame. Here is the GIF:
Figure 2.3.1 Wave GIF - 13th April 2021
To achieve this look I first duplicated around 15 artboards but as the progress went along, I had to create a total of 38 artboards.
Figure 2.3.2 Wave artboards - 13th April 2021
Figure 2.3.3 Wave strokes. - 13th April 2021
4. Eat
Figure 2.3.2 Wave artboards - 13th April 2021
I used a high stroke brush tool and drew on top of the wave letters to erase parts of each letter one-by-one to progress throughout the artboards so that it resembles a wave. It was difficult at first but when I got the hang of it, it wasn't hard to follow but it was time consuming still. Here are all the artboards with strokes.
Figure 2.3.3 Wave strokes. - 13th April 2021
After creating these artboards and strokes, I exported them as screens and imported on to photoshop to create the GIF as previously done.
For the last word "Eat", I designed the word to look like the first letter "e" is half eaten. So to show the expression of that in animation, I tried to animate the individual bites. There were 3 bites on the initial typography but I added one more to make it look better. Here is the GIF I animated for the word "eat":
Figrue 2.4.1 Eat GIF - 13th April 2021
Figure 2.4.2 Eat artboards - 13th April 2021
After doing the artboards, I exported and imported them to Photoshop to do the animation.
Reflections on animations: Overall, this was a really exciting and interesting exercise and I learned a lot through it. I also got lots of ideas to create artworks that I hadn't thought of before and I am excited to do more during my free time and future works.
TEXT FORMATTING
Week 4:
On week 4, we begin our exercises on Adobe Indesign. The week 4 pre-recorded lectures by Mr.Vinod highlighted the importance of editing texts in huge amounts and InDesign is the most common platform for that. The instructions are given on 4 separate video tutorials; Typo_Ex Text Formatting 1:4, 2:4, 3:4 and 4:4.
The first exercise on Video 1:4 was Kerning and Tracking so I first created a new A4 document and wrote my name on a text box on the centre of the document.
Figure 4.1.1 Text box - 20th April 2021
After that I examined the places where kerning and tracking is required and then using Opt + Right and Left button, adjusted the spacing between letters such as "u and s" and "h and e" and some others. I felt like the spacing is too much at each click so went to the preferences and changed the unit for kerning and tracking to 5/1000 em.
Figure 4.1.2 Kerning & Tracking - 20th April 2021
Figure 4.1.3 - 20th April 2021
Figure 4.2.1 - 20th April 2021
Always check the document with eyes half closed to see the colour.
Figure 4.2.2 Info panel - 20th April 2021
Figure 4.3.1 - 20th April 2021
Figure 4.3.2 - 20th April 2021
After doing kerning and tracking for separate lines, the whole text started looking very balanced.
Figure 4.3.3 kerning & Tracking - 20th April 2021
Hyphenation is good for decent looking texts unless there are too many hyphens. Too much hyphens and also widows and orphans must be avoided. Hyphenation comes in handy if using justified alignment.
Figure 4.3.4 Justified - 20th April 2021
Centred alignment and right-hand alignment is used for fairly small amounts of text instead of huge texts.
Figure 4.3.4 Justified - 20th April 2021
Centred alignment and right-hand alignment is used for fairly small amounts of text instead of huge texts.
Part 4:4 is about creating and applying the layout.
Figure 4.4.1 Arranging the informations in respective positions - 20th April 2021
Figure 4.4.2 Headings - 20th April 2021
After that I changed the preferences of the document to match with the cross alignment of both text boxes
Figure 4.4.3 Aligning text on the baseline - 20th April 2021
The formatted layout of the document looks like this
Figure 4.4.4 Formatted layout - 20th April 2021
Figure 4.4.5 rearrangements. - 20th April 2021
FINAL SUBMISSION FOR TASK 1
Figure 4.4.6 Re-formatted layout - 20th April 2021
Week 1
Specific feedback: I was told that there needs to be more idea exploration and sketched to choose from.
General feedback: To explore ideas and upload clean photos without shadow or blur.
Week 2
Specific feedback: Mr.Vinod suggested that the type "slice" is too small on the artboard and that it needs to sit well in the artboard.
General feedback: To have a good composition and alignment within the frame and type.
Week 3
Specific feedback: For my digitalised sketches, Mr.Vinod chose them among the relatively good designs from class works and said it looked good. He noticed the map-like style of the "point" type and gave good feedback for other designs as well.
General feedback: Mr. Vinod told everyone to keep everything as minimal as possible and to avoid use of too much graphical elements.
Week 4
Specific feedback: For my animated GIF, the feedback from my peers was that it was good and that it reflects the idea and form. Also that it needs no improvement. Mr.Vinod also said he loves the first part of the line going through and slicing the type but said that it would be better if the bottom half would just drop down from that point and goes through the floor. Which as good as it sounds, I feel like I am not gonna change to because I feel like it would be too much drama for a single-word GIF and I sort of want to see the sliced part of the word even after it is done and keep it as minimal as I can. But I really do appreciate the feedback and think it is a cool idea.
General feedback: To avoid use of other applications and to try and on the animation, to try and express the idea behind the type.
Week 5
Specific feedback: For my text formatting exercise, Mr.Vinod noted the mistakes on the Facebook post. He said the ragging needs to be smoother, overall arrangement needs to be improved. And that there is tpp much paragraph spacing for the sub headline and the leading is a bit tight. I got similar comments from my peers as well so I made the changes to the file and re uploaded.
General feedback: Keep things simple. Clearly differentiate between headers and body text. And experiment with different layouts and take creative risks.
Week 6
Specific feedback: On this week, Mr.Vinod and Mr.Sam checked the e-portfolios and gave feedback for those who had issues on their e-portfolios. I didn't have any issues apparently which was a huge relief.
Experience: I was very much looking forward to learning Typography in depth as I had previously worked on a number of Type related works. Our first class was exciting and we met our lecturers who were very friendly and helpful. However, as classes progressed, Typography seemed like the toughest subject in terms of the workload but still it was very fascinating and thought provoking. The feedback from Mr.Vinod and my peers are very helpful to go forward with the weekly exercises and assignments.
Observation: I observed that the teaching model is very much different to the study models I've previously had so it was quite challenging to adapt but I am feeling quite positive about it now. Even though we cannot have face-to-face classes, online classes somehow works and is very interactive especially because all our work is also happening in our screen. And the most important thing I observed was the importance of practice and listening to instructions and feedbacks with a clear mind.
Findings: I found that having an e-portfolio was a really helpful thing to have when learning more stuff everyday. Having a good documentation to go back to actually saves a lot of time and struggles. It was new for me but over the course, I am getting very dependant on my e-portfolio. And I also found that I still need to read a lot of books. Reading and watching about the typography history and the origins of calligraphy and type was really an eyeopener.
FURTHER READING
Figure 1.0 First Alphabets from fontology.com - 30th March 2021
Figure 1.1 Early evolution of Roman Letters from fontology.com - 30th March 2021
https://www.fonts.com/content/learning/fontology/level-1/type-history/early-evolution-of-roman-letters-1
https://www.fonts.com/content/learning/fontology/level-1/type-history/first-alphabets
Week 2: On week two, I read this article, The Evolution of Typography: A brief history by John Siebert. The article briefly brings us through the history of type dating back from the ancient era cave drawings to the Middle-age manuscripts to modern day typography.
Figure 1.2 Evolution of Typography - 6th April 2021
https://www.printmag.com/post/evolution-typography-history
Week 3: On this week, I watched a YouTube video titles Typography, the anatomy of a letter.by Envato Tuts. This video breaks-down the parts of a letterform and describes each part.
Figure 1.3 Type Anatomy - 13th April 2021
Week 4: For this week's additional learning I watched a video Pixels Inc titled 'What is Kerning and Tracking?'. This video talks about the importance of kerning and tracking, and the effect of bad kerning and tracking on design and typography.
Figure 1.4. Kerning and tracking- 20th April 2021
https://www.youtube.com/watch?v=DOxMiY6bDvQ
Comments
Post a Comment