Labels

Typography - Task 1: Exercises

24/09/24 - 28/10/24 (Week 1 - Week 5) due on week 6
Anggia Tsani Rachmadiyanti, (0368487)
Typography / Bachelor in Design (Hons) in Creative Media / Taylor's University
Task 1: Exercises 1 & 2 (20%)


 CONTENT LIST 


 LECTURES 


 Lecture 1: Typo_0_Introduction &  Typo_1_Development 

In the first lecture, Mr.Vinod introduced us to the typography module. He explained fully about what typography is about, how it is important and where you will need typography skills. After that he explained us on how to start making our blog for our portfolio for this module.

Definition of Typography: "the art & technique of arranging type to make written languages legible, readable, and appealing when displayed."

Important Terms / Notes:

 Typography involves:
- Typefaces
- Point-size
- Line-length
- Line-spacing (leading)
- Letter-spacing (tracking)
- Kernings (space within letters pairs)

Font - Individual font/weight within the typeface, i.e.: Georgia Regular, Georgia Italic, and Georgia Bold 

Typeface -  entire family of fonts/weights that share similar characteristics/styles, I.e.: Georgia, Arial, Times New Roman, Futura.. etc.


(Fig. 1.1) Font vs Typeface
Extra Notes:

- Typography is a fundamental aspect in all areas in any design studies
- Creation of typefaces/typefamilies > can also be in animation
- Typography is important especially when it comes to website/app designs
- Helps the effectiveness of signage designs 
- "understanding where to place words/navigations in physical spaces & where to place information are all aspects of typography and design."
- Typography is not just the 'text' but what you GOT TO DO with the text.
- This module is important when we work on the other design modules later on
- Calligraphy: you write, Lettering: you draw out
- Typography makes something looks user friendly
- bad typography affects comprehension learning across the world


Typography Development / Timeline

  • - 1450 Blackletter → 1475 Oldstyle → 1500 Italics → 1550 Script → 1750 Transitional →1775 Modern → 1825 Square Serif / Slab Serif → 1900 Sans Serif → 1990 Serif / Sans Serif

(Fig. 1.2) Different styles of serifs
- Early letterform development: Phoenician to Roman 

(Fig. 1.3) Phoenician to Roman
- Hand script (3-10th century C.E.)
- Blackletter (1450)
- Oldstyle (1475)
- Italic (1500)
- Script (1550)
- Transitional (1750)
- Modern (1775)
- Square Serif /Slab (1825)
- Sans Serif (1900)
- Serif/Sans Serif (1990)


 Lecture 2: Typo_2_Basic 

In the 2nd lecture, mr.Vinod talked about the basics and describing letterforms. He told us to read a lot of books and visit sites about typography to gain deeper and extra knowledge.

Important Terms / Notes:
  • Baseline - Imaginary line (visual base of letterforms)
  • Median - Imaginary line defining the x-height of letterforms
  • X-height - height in any typeface of the lowercase 'x'
(Fig. 2.1) Typography lines and guides names
  • Stroke - Any line that defines the basic Letterform.
  • Apex/Vertex - point created by joining two diagonal stems
  • Arm - short strokes off the stem of letterform, either horizontal or inclined upward.
  • Ascender height - portion of the stem of a lowercase letterform that projects above the median
  • Barb - half-serif finish on some curved stroke.
  • Bowl - the rounded form that describes a counter. It may be closed/open.
  • Bracket - transition between serif & the stem.
  • Cross Bar - horizontal stroke in letterform that joins two stems together.
  • Cross-stroke - horizontal stroke in a letterform that joins 2 stems together
  • Crotch - interior space where 2 strokes meet.
  • Ear - stroke extending out from the main stem or body of the letterform.
  • Ligature - character formed by the combination of 2 or more letterforms
  • Stress - orientation of letterform, indicated by thin strokes in round forms.
  • Swash - flourish that extends the stroke of the letterform

The font...
  • Full font of a typeface contains more than 26 letters, numerals and few punctuation marks.
  • Always good to select a type family that have good range of typefaces
  • small capitals - primarily found in serif fonts as part of 'expert set'
  • Roman - derived from inscriptions of Roman monuments (lighter stroke is known as 'Book')
  • Italics - sloping letters, Oblique - roman form but tilted
  • Roman - upright and default font type.
  • Condense - roman form but compressed version
(Fig. 2.2) - Italic vs Roman

(Fig. 2.3) Fonts types
(Fig. 2.4) Uppercase vs Lowercase numerals difference




(Fig. 2.5) - Typography cheat sheet and keywords


 Lecture 3: Typo_3_Text_P1 

In the 3rd lecture, Mr. Vinod talked about Text: Tracking, Kernings, Spacings, Texture, Formatting. Sir also demonstrated us how it works in Adobe InDesign.

Tracking: Kerning & Letterspacing
  • Kerning - Automatic adjustment of space between letters. (*Not the same as letterspacing)
  • Letterspacing - Adds space between letters. used when there's large number of words/paragraphs.
  • Tracking - Add / removal of space in a word/sentence.
  • More spacing = less readable/recognized
  • When you add letter spacing you are breaking counter form = breaking readability
  • Not encourage to add spacing in Lowercase.
(Fig. 3.0) -  Normal tracking vs loose tracking
(Fig. 3.1) Before vs After kerning

Formatting Text:
    • 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 text.
    • Gray Value - Value 
    • Centered - Symmetrical: equal value & weight on both ends of any line. 
    • Flush Right/left - Useful for captions and when there's relationship between text & an image.
    • Justified - Centering + symmetrical shape on text. Spaces in between words/letters may be different.
    Texture:
      • Type with a relatively generous x-height/heavy stroke = darker mass compared to smaller x-height/lighter stroke.
      • Sensitivity to these differences in colour is important to create good layouts.
      Leading & Line Length:
        • Type size - Should be large enough to be read easily at arms-length.
        • Leading - text that is set too lightly encourages VERTICAL EYE MOVEMENT (reader can easily loose place). text that is set too loosely creates STRIPED PATTERNS (distracts reader from material).
        • Line Length - Shorter lines = less leading, Longer lines = more leading. 
        • Good rule = keep line length between 55-65 characters. 


         Lecture 4: Typo_4_Text_Part 2 

        This lecture was a continuation of the previous lecture above. Mr.Vinod talked more about 'Indicating Paragraphs', widows & orphans, Highlighting texts, Headline within text, cross alignment. While doing the lecture, he also demonstrated us how it works in Adobe Indesign. 

        Indicating paragraphs Keypoints:
        • Pilcrow (¶) - Used for indicating paragraphs. It's a symbol used to mark new paragraph or section of text.
        • 'Line-space' (*leading) - space between paragraphs. eg: If line space is 12pt, then the paragraph space should be 12 pt. = ensures cross-alignment across columns of text.
        Difference between Line and Leading :
        (Fig. 4.0) Line and Leading

        Widows & Orphans:
        • 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 new column.
        • Solution to widows is to re-break your line endings throughout the paragraph so that the last line is not noticeably short.
        • Orphans need more care - make sure no column of text starts with the last line of the preceding paragraph.
        • Widows and orphans are serious gaffs in justified text. Widows may be pardoned in flushed right but orphans are unpardonable in any cases.
        • Orphans can be solved by making sure no column of text starts with the last line of the last paragraph.
        • When letterspacing/ kerning to solve orphans or widows make sure to not do it more than 3 times.
        (Fig. 4.1) Widows & Orphans
        Highlighting text:
        • Different kinds of emphasis require different kinds of contrast! 
        • Types of highlighting:
          • Italics
          • change colour of text
          • Bold
          • Background colour behind text.
          • Quotation marks - create clear indent, breaking the left reading axis.
        • Sometimes it's necessary to place some typographic elements outside the left margin of a column of type to MAINTAIN STRONG READING AXIS.
        Headline within text:
        • 'A' head indicates a clear break between the topics within a section
        • Hierarchy = putting together a sequence of subheads
        (Fig. 4.2) 'A' Head

        • 'B' head is a subordinate to A heads. B heads indicate a new supporting argument/example for the topic.
        (Fig. 4.3) 'B' Head
        • 'C' head highlights specific parts of material within B head text. They cannot materially interrupt the flow of reading. 
        (Fig. 4.4) 'C' Head
         Lecture 5: Typo_5_Understanding Letterform 

        • Some uppercase letterforms seems symmetrical but upon closer inspection they are actually slightly disproportionate. For example The A in the Univers typeface has a slightly thinner stroke on one of its stem. 
        • This helps create a letterform that is internally harmonious and individually expressive.

        (Fig. 5.0) - 'A' in Univers Typeface

        (Fig. 5.1) - 2 Type of 'a' letterforms

        Maintaining X-height:
        • Letterforms that have a curved stroke have to rise above the median or sink below the baseline in order to appear the same size as the vertical and horizontal strokes stuck to it.
        (Fig. 5.2) - Curved strokes extending over lines

        Form/Counterform:
        • Counterform is important for readability. We should look/analyze existing counterform to between understand how to design a letterform.
        (Fig. 5.3) - Counterform
        Letter/Contrast:
        • Contrast is important to differentiate information in text.
        (Fig. 5.4) - Different types of contrast

         INSTRUCTIONS 




        Task 1: Exercises (20%)

        Express the meaning of four (4) of these words - bloom, spicy, fancy, smoke. Distortion of any of the letters is not allowed, but only rotate, flip or scale them proportionally. No color may be used in the exercises. Use only the 10 typefaces given.

        (a) Type Expression

        • One JPG layout in A4 size (1024 px @300 ppi grayscale) 
          • File > Export > Export As > Format > JPG > Use Artboard (yes) > Color model: Grayscale > Quality 10 > Resolution 300/150 ppi > Ok
        • GIF format (Tutorial given size is 200 x 200 mm)

        (b) Text Formatting

        • Minor exercises on kerning & tracking: Use your name to practice kerning and tracking. You're free to use different fonts, casings and font weights, using all 10 typefaces provided.

        💡Reminders: Always consider the overall presentation of your work! 
        • Main exercises "I am Helvetica" --- PDF & JPG (One layout in A4 size)

        Marking Criteria 
        • Each expression has been explored with a great variety of ideas.
        • All the expressions are perfectly matched in meaning.
        • The typographic solutions are extremely well-composed and balanced.
        • The expression is excellently crafted (technical), memorable and engaging.
        • The textual information is extremely well formatted (font size, line length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sans widows and orphans). 
        Learning Goal:
        • To be able to compose and express using textual information. 
        • To be able to format text for effective communication. 
        • Timeframe Week 1 – Week 5 (Deadline on Week 6)


        Task 1: Exercises 1 - Type Expression


        Brief: We are given 4 words to compose and express. We had to sketch out first as much ideas we have. Once the ideas are selected, we are given a set of 10 typefaces to work with in the digitisation phase. Through iteration, we have to use the appropriate typeface and compose the letters in a manner that allows the meaning of the word to become visible — still and in motion. (2 weeks). 

        Software: Adobe Illustrator and Adobe Photoshop. 


        (Week 1)

        - During the tutorial and practical, Ms. Vitiiyaa introduced us to the module and showed us the instructions and module brief. We were then assigned to set up our e-portfolio blogger, following instructions from the pre-recorded lecture. Afterwards we did a voting in class on what 4 words to pick for Task 1..

        - The class majority voted for these 4 words:
        1. Smoke 
        2. Spicy
        3. Bloom
        4. Fancy. 
        (Fig. 6.0) - Choosing words in class

        She then told us to make ideas and sketch out our ideas of the 4 words. I had to express the meaning of these 4 words - Fancy, Bloom, Smoke, Spicy. Some of the words were quite hard but i'll take the challenge. We were not allowed to distort any of the letters, but only rotate, flip or scale them proportionally.

        (Fig. 6.1) - Above are the 10 fonts given to us


        Process/Sketches ideation....

        My Research & Brainstorm:

        (Fig. 6.2) Research Photos related to the word
        (Fig. 6.3) Sketches of things/objects related to the words


        (Week 2)

        I started drafting many different sketches of my ideas for all the 4 words, so that I can then proceed in digitising my words in Illustrator.

        - General Feedback: During tutorial and practical, Ms. Vitiyaa told us to note down some notes in lecture 2 (Typo_2_Basic). Then, she checked all our sketches and ideas for the 4 words.
        - Specific Feedback: Gave a lot of feedbacks for all my sketches. She said that i need to stop thinking too hard and just think of something simple for eg: combining simple elements that can merge well with the words. Most of my ideas need to get fixed since it doesn't give much feeling of the words. Ms also showed me some examples in google which made me understand better. She then told me to test out all the fonts and choose which one I want to use so that I can manipulate the text faster and easier to visualise. 

        My sketches :

        (Fig. 7.0) - Smoke sketches
        (Fig. 7.1) - Fancy sketches
        (Fig. 7.2) - spicy sketches

        (Fig. 7.3) - bloom sketches

        (Week 3)

        Progress screenshots:

        (Fig. 8.0) - Drafts / ideas and experimenting

        - General Feedback: During tutorial and practical, we finalised and did our finishing touches for submission for the 4 type expression words. We had to save it as both PDF AND JPEG and post it in our blogspot as well as the facebook page for submission. We also watched the 3rd lecture (Typo_3_Text P2) and took notes on our blogspot as well as update our feedbacks and reflections. After we were done ms told us to start experimenting making the animated GIF of one of my words for the 2nd submission. 

        - Specific Feedback: I was happy with my final digitalised design. Ms. Vitiyaa said that many people are doing the similar design so I should try to be more unique. For my spicy text I added a bit of drip below the letters (Fig.4.5 below) to show hot melting effect and I also mirrored my 'i' letter in spicy to show exclamation marks to make it look like it's shouting. I also changed the 'm' in bloom to small letter as it looks more flowy. The rest were fine and I was allowed to finally finish all the 4 words.


        I have digitalized my 4 words: Bloom, Fancy, Spicy, Smoke using Illustrator...

        (Fig. 8.1) Type Expression - Week 3 (8/10/2024) *Not final yet

        Part 2 - Animating Type Expression

        Basic AI shortcuts:
        • Duplicate artboard = Shift+O (to select an artboard, or u can just click the artboard) > Alt+Drag
        How to export GIFs using AI & PS:

        In menu bar of AI, File > Export > Export as > Use artboard (yes) > JPEG || In menu bar, File > Export > Save for Web. Open PS, in the menu bar, File > Scripts > Load files into stacks > Select files || In menu bars, Window > Timeline > Create frame timeline || Put the layers into timeline > Adjust time || In menu bars, File > Export > Save for Web (Legacy) > Preset GIF 128 Dithered

        ------------------------------

        The 2nd part of this task was to animate GIF one of the words we did previously. I chose 'smoke'. We used Adobe illustrator and Photoshop to make the frames...

        (Fig. 8.3) - Animation text progress screenshot

        (Fig. 8.4) - Animation progress screenshot on Photoshop

        FINAL ANIMATED GIF: 

        (Fig. 8.5) - Final Type Expression - GIF animation, Week 3 (9/10/2024)


        (Week 4)

        - General Feedback: During tutorial and practical, ms Vitiyaa told us that many of us used 2 typefaces for each box/word which we shouldn't and she told us not to distort the words so much. So we had to change the typefaces so that each box for each word have only one typeface.Then, we had to update our blog again with our progress, feedbacks and reflections. We also had to watch all the online lecture for our Task 1:Ex. 2 Text Formatting and watch lecture Typo_2_Basic. After that, we were told that we have to finish our task one by week 6, meaning that we can still edit our type expressions too until we are satisfied. We also have to complete and submit our final T1, Ex.2 Text Formatting before the next class.

        - Specific Feedback: I showed ms my final GIF Animation for my 'smoke'. She approved it and said I can go with it. My 'spicy' was okay and my smoke too. For my bloom I distorted my 'O' letters a bit since before this it looked too solid. Ms told me I need to redo my 'Fancy' and tried to make it look simple and use small letters for it. She said that for extras we can use the symbols in our keyboard too. I also changed some typefaces of the words because before this I used 2 typefaces for some of the words.


         

        progress:

        (Fig. 9.0) - Newer version of Fig. 5.5 earlier in week 3 above


        I tried experimenting different 'Fancy' designs and continued working on it at home...

        FINAL JPEG AND PDF:

        (Fig. 9.1) - Final Type Expression - JPEG, Week 4 (15/10/2024)


        (Fig. 9.2) - Final Type Expression - PDF, Week 4 (15/10/2024)


        (Week 5)

        Task 1: Exercises 2 - Formatting Text

         
        Minor exercises on kerning & tracking: 
        • For this exercise, we were given a text called 'I am Helvetica' to edit in InDesign to have proper letterspacing, paragraph spacing, leading, good headline and byline as well as a good layout. Before starting the exercise, I carried out the practice that was in Mr Vinod lecture videos. The lecture videos taught us how to use InDesign.

        Basics of InDesign: 
        • Facing Pages is used in book designing
        • Margins, columns, grids: 
          • Layout > Margins and Columns, e.g. 4 columns, Column Gutter 5 mm
          • Hide/unhide Baseline Grids: Ctrl + Alt + '
          • Hide/unhide Margins and Columns: Ctrl + ;
          • Make text & base grid aligned: Ctrl B > Baseline Options > Offset > Leading; Edit > Preferences > Grids > Baseline Grid > Edit Increment Every (acc.to leading), Horizontal Grid line (acc.to font size), as desired. 
        Adjustments of textbox:
        • Where to check Characters: F8 (Window > Info)
        • How to set to kern in small adjustments? Edit > Preferences > Units & Increments > Kerning/Tracking > 5/1000 em
        • Shortcut to adjust Kerning/Tracking: Selected row of text, press Alt + < to reduce; or > to increase.
        • Ctrl B (Right click text box for Text frame options) > Align > Top/Bottom/etc.
        • Shortcut to achieve cross-alignment: Ctrl I (Paragraph Formatting Controls); Increase in doubles for title size. At the top right corner, click Align to baseline button.
        Pages: 
        • To make 2 pages side-by-side: Pages>Select all the mini pages icons>Right click>Unmark the Allow Seleted Spreads to Shuffle>Drag up the mini pages to arrange

        Name exercises on kerning & tracking: 

        I first practiced kerning and tracking with my name using the 10 typefaces provided.
        (Fig. 10) - Formatting text kernings in Indesign

        (Fig. 10.1) - Name with kerning JPG (21/10/24)

        (Fig. 10.2) - Before (NO) kerning: for example, the T and S is very close together, so I kerned it a bit


        (Fig. 10.3) - PDF Typo_Ex Text Formatting 1:4 - with Kerning & Spacing name exercise



        Task 1: Exercises 2 "I Am Helvetica"


        For this work we had to Format the given text by sir using Adobe InDesign. 


        (Fig. 11.0) - Screenshot of formatting text progress in InDesign


        My 6 Compositions:

        (Fig. 11.1) - 6 composition drafts

        Ms Vitiyaa taught and sketched for me in class on how to apply Golden Ratio rule in text composition. 
        (Fig. 11.2) - Applying golden ratio rule


        (Fig. 11.3) - Golden Ratio
        (Fig. 11.4) - Final Text Formatting Helvetica - JPEG, Week 5 (22/10/2024)


        (Fig.  11.5) - Final Text Formatting Helvetica - PDF, Week 5 (22/10/2024)



        (Fig. 11.6) - Final Helvetica with guides - JPEG, Week 5 (22/10/2024)



        (Fig. 11.7) - Final Helvetica with guides - PDF, Week 5 (22/10/2024)


        Formatting Details

        HEAD LINE

        Typeface: Univers Std

        Font/s: Univers LT Std, Bold Condensed
        Type Size/s: 56 pt
        Leading: 58 pt
        Paragraph spacing: 0

        BODY

        Typeface: Univers Std

        Font/s: Univers LT Std, Light
        Type Size/s: 10 pt
        Leading: 12 pt
        Paragraph spacing: 12 pt
        Characters per-line: 57-58
        Alignment: left justified

        Margins: 12.7 mm top + left + right, 23 mm bottom
        Columns: 4
        Gutter: 9 mm


        Things to look out for when completing Task 1, Exercise 2 Text Formatting:

        • Font size (8–12)
        • Line Length (55–65/50–60 characters)
        • Text Leading (2, 2.5, 3 points larger than font size)
        • Paragraph spacing (follows the leading)
        • Ragging (left alignment) / Rivers (Left Justification)
        • Cross Alignment
        • No Widows / Orphans



        FEEDBACKS

        Week 1:
        Only Introduced to the module, brief and instructions only and the tutor told us to start creating our blog page as well as to start watching the lecture videos posted by Mr. Vinod.
        Week 2:
        - General Feedback: During tutorial and practical, Ms. Vitiyaa told us to note down some notes in lecture 2 (Typo_2_Basic). Then, she checked all our sketches and ideas for the 4 words.
        - Specific Feedback: Gave a lot of feedbacks for all my sketches. She said that i need to stop thinking too hard and just think of something simple for eg: combining simple elements that can merge well with the words. Most of my ideas need to get fixed since it doesn't give much feeling of the words. Ms also showed me some examples in google which made me understand better. She then told me to test out all the fonts and choose which one I want to use so that I can manipulate the text faster and easier to visualise. She said that some letters can represent the object we are expressing.


        Week 3:
        - General Feedback: During tutorial and practical, we finalised and did our finishing touches for submission for the 4 type expression words. We had to save it as both PDF AND JPEG and post it in our blogspot as well as the facebook page for submission. We also watched the 3rd lecture (Typo_3_Text P2) and took notes on our blogspot as well as update our feedbacks and reflections. After we were done ms told us to start experimenting making the animated GIF of one of my words for the 2nd submission. 
        - Specific Feedback: I was happy with my final digitalised design. Ms. Vitiyaa said that many people are doing the similar design so I should try to be more unique. For my spicy text I added a bit of drip below the letters to show hot melting effect and I also mirrored my 'i' letter in spicy to show exclamation marks to make it look like it's shouting. I also changed the 'm' in bloom to small letter as it looks more flowy. The rest were fine and I was allowed to finally finish all the 4 words.


        Week 4:
        - General Feedback: During tutorial and practical, ms Vitiyaa told us that many of us used 2 typefaces for each box/word which we shouldn't and she told us not to distort the words so much. So we had to change the typefaces so that each box for each word have only one typeface. Then, we had to update our blog again with our progress, feedbacks and reflections. We also had to watch all the online lecture for our Task 1:Ex. 2 Text Formatting and watch lecture Typo_2_Basic. After that, we were told that we have to finish our task one by week 6,meaning that we can still edit our type expressions too until we are satisfied. We also have to complete and submit our final T1, Ex.2 Text Formatting before the nextclass.

        - Specific Feedback:  I showed ms my final GIF Animation for my 'smoke'. She approved it and said I can go with it. My 'spicy' was okay and my smoke too. For my bloom I distorted my 'O' letters a bit since before this it looked too solid. Ms told me i need to redo my 'Fancy' and tried to make it look simple and use small letters for it. She said that for extras we can use the symbols in our keyboard too. I also changed some typefaces of the words because before this I used 2 typefaces for some of the words.  



        Week 5:
        - General Feedback: During tutorial and practical I submitted my final ‘I Am Helvetica’ text formatting. We watched lecture ‘Typo_5_Understanding’ and summarise to put in our new blog post for Task 2. We also have to watch video tutorial for Task 2. Ms vitiyaa told us that task 1 deadline will be on monday 28th october night so we have to really finalise and finish all our task 1 in our blog portfolio. Makesure that whatever is required in our portfolio should be there. 
        - Specific Feedback: Ms vitiya found some small mistakes in my Helvetica text formatting such as my kernings and my paragraph spacing. She said that I should use Golden Ratio to work on my layout. She sketched some layouts for me which really helped me. She said that my layout, there should be a part that is empty and the rest are filled with text. I also changed the 'I am' heading to all caps lock since it looks off. She also told me to  fix some of the orphans in my paragraphs so that that is no single word left out at the end of a paragraph. After editing, I finalised it and ms said it looks good already, so i was able to move on to the next task 2.



        REFLECTIONS

        Week 1:
        - In the first class of typography most of us felt so pressured and overwhelmed when we were told many instructions and technical stuffs we were going to do. Some parts at first were confusing, such as the project briefs, but at the end of the lesson I understood it better. Ms vitiyaa showed some examples of the previous students' blogspot and works just to give us some motivation, which is good.


        Week 2:
        - The first task was creating the 4 word expressions based on its meaning. It is an interesting task which i'm finding it quite fun. I found it so difficult at first thinking and coming up with an idea. It was challenging as since there were many students, which means many of us get the same ideas so each of us need to be really unique and creative in coming up with a different idea and concept. When I started drafting in class, the teacher told me that none of the words reveal its meaning, so I got so stressed. She told us not to think too much. After some feedbacks and suggestions, I realised that you shouldn't have to explain much about your design. Your design should speak for you. Personally for me, writing the lecture notes in this blog is a good way to keep me focus and know more of what I learnt in class. As what Mr.Vinod said, reading is important.

        Week 3:
        - In this week I found much more tools and skills using adobe Illustrator when finishing my digitalized 4 type expression work. I edited some text which i'm happier about now that some are altered already to show the meaning more. Im excited about starting the animated version of the text using photoshop. I went back home and watched some videos sent by Mr.Vinod on how to animate the words. I find it a bit hard at first but as I go along i'll eventually get there.

        Week 4: 
        - In class I felt happy that Ms.Vitiyaa approved and liked my final GIF animation for 'Smoke'. But for the 4 type expression words she told me that I can make my words more simple. I was struggling so much on my 'Fancy' word as I found it as the hardest one to do. 


        Week 5:
        - In our final week before submitting all our task 1, I was happy Ms. Vitiyaa told me that my 'Helvetica' work was good already. She taught me new things such as using golden ratio in text compositions to make our work more nicer. Afterwards, we had time until the start of week 6 to submit our task 1 (this) post in blog, so I was just finalising and compiling everything back at home.



        OVERALL REFLECTION :

        1) Experience 
        • These 5 weeks was alright for me. I have gotten use to most of the text formatting tools in indesign, animating text on photoshop too. I manage to learn a lot about the basics of type through this exercise. The exercises or tasks had their own lecture videos which teach us how to do the necessary things needed to complete the task, which is a good thing. All the task that were given in this exercise were give back to back. Maybe it cause I'm not used to it, but that was really stressful most of the times. I was stressed out most of the times as lectures were online so it's easy to miss a point when something important is said. My experience with using Adobe Illustrator was better cause of the lecture videos given. Ive happen to explored so many new things about typography and the details i never knew before. It was overall a good introduction for me in typography.
        2) Observations - 
        • My observation is that I see that in typography you really have to know what feeling you want the reader to feel when they read the text. We have to be really detailed to make all text neat and readable too. text formatting is abit hard. When trying to letterspace and kern our text formatting exercise, I had a hard time trying to fix the ragging to make it look acceptable. I was alternating between typefaces, trying to find one that would work.
        3) Findings - 
        • To sum up, this whole task 1 exercises have made me realise how important and detailed oriented typography is in life and our daily lives. There are loads of things that need to be taken into consideration such as its layout, composition, typeface, leading, and much much more. It is stressful for me at first, but i hope that as we go on deeper, we will get more experience and I hope that ill improve more.

        FURTHER READING...

        1) Website - History of Type Expression

        - I read this website about the full history of typography. I was really amazed by the evolution of fonts through time until today. I learnt that there were numerous modifications and styles of fonts which is really impressive. The website gave some detailed information and pictures which was really interesting. 
        - I learnt more about the different styles of tails in letters back then.....

        (Fig. 12) Styles of tails back then


        2) 'Just My Type' - Simon Garfield

        (Fig. 13) 'Just My Type' book


        - I loved this book so much! This book really tells about the influence typography can affect everything and anything we see in our daily lives.

        - My favourite quote: "26 purely abstract symbols that in and of themselves mean absolutely nothing, but when put together in the right combinations can introduce into the heads of readers an infinite variety of sounds, smells, taste, feelings, places, people, characters, situations, feelings, ideas." -- Chip Kidd. 

        - This book is a story about fonts. It examines how Helvetica & comic sans, and more took over the world and why we are still influenced by type choices made more than 500 years ago. The book reveals what may be the best and worst fonts in the world and what our choice of font says about you. 

        - This book really gave a whole tour for me which explores the rich history & powers of fonts that we see everyday, on street signs, books, posters, buildings, movies, and even products we buy everyday.


        3) 'Typographic Design : Form & Communication' - Rob Carter, Ben Day, Phillip Meggs

        (Fig. 14) 'Typographic Design'

        - This book taught me about working with typefaces and how us designers should use it in an effective way. One of the things talked about here is the page layout. Design of a page involves both the composition of the columns & the margins that form the page grid.  Page design involves both practical considerations & also amount of text on the page where factors like: legibility, aesthetics or expressive factors, differentiation and visual appeal would come to play. 

        - This book talked more on how to have a good, organised, aesthetic and comprehensive layout when playing around with text, similar to what Mr. Vinod taught us in lecture.

        - It speaks about typography as a multidimensional language. A typographic message is verbal, visual and vocal. It's not only read & interpreted verbally but also can be viewed & interpreted visually, heard and audibly. Typography brings new & expressive power to written words.


        4) 'Type Style Finder' - Timothy Samara

        (Fig. 15) Type Style Finder

        - This book teaches how we can find the perfect typefaces for a specific project. The first important thing is classifying types into groups which then can help highlight the differences among the styles and then will help us in selecting appropriate typefaces. Sometimes the historical background / cultural context of the typefaces adds some more relevancy in typographic design. Type styles listed:

        - Oldstyle
        - Transitional
        - Modern
        - Sans-Serif
        - Slab Serif
        - Graphic

        - Choosing the right typefaces for a specific mood or feeling is difficult sometimes. Combining typefaces is also tricky as it should always be the solution for expressing complexity of information that we want to present. Moreover, adding colours to typefaces adds dimension, expression and information clarity. Colours are important as it affects the emotional component of human experience. Warmer colour needs more energy to process them when entering eye and brain. Cooler colours require less energy = soothing & calm effect. A single colour is defined by 4 essential qualities:
        1. hue - identity of a colour
        2. saturation - its intensity
        3. value - aspect of darkness & lightness
        4. temperature - subjective experimental quality
        *CHOOSING THE WRONG TYPEFACE OR TYPE STYLES CAN DESTROY THE EFFECTIVENESS OF A DESIGN.  

        - This book also teaches us the best font & colour combinations in design projects with effective results. 


        5) 'Perfect Typeface combinations' - Tony Seddon

        (Fig. 16) 'Type Team'
        - I read a few pages of this book and I am happy that i've read this. This book guides you to combine different typefaces together to combine a particular effect or mood. The author explains why some typefaces work well together and why some don't. One of my main takeaways from this book is the importance of hierarchy in typography - "Hierarchy introduces levels within text" -- Seddon, 2015. Moreover I learnt that types with different weights & fonts helps readers navigate through the whole layout.

        6) 'Typographic Design: Form & Communication' - Rob Carter

        (Fig. 17) 'Typographic Design' book

        - I read a many pages of this book and this book was recommended by Mr.Vinod. I loved it so much and I read it on a weekly basis. I read about typographic space as it is relevant to this task. The text talks about how to utilise space effectively to achieve dynamic design. It teaches the importance of visual compensation, which is achieved by 'balancing elements against each other, adjusting their sizes, weights, spatial intervals and other visual properties until unity and equilibrium are achieved'. I believe something we often disregard or do not pay enough attention to is void / empty space, and its importance in design. Reading this text has reminded me to keep space in mind as I work on my spread.

        - This is so far my favourite book I have read for typography. It was very well written adn covered every single thing that were taught during class as well in a more detailed way.

        - Takeaways: "A single approach to typographical design, induced by stylistic convention and predetermined formulas, is a routine activity lacking the vitality of meaningful typographic invention."
        - This website was a good reference for extra info on typography. They summarised many keypoints and guidelines using diagrams. They have every single terms summarised for typography. This is a very helpful site for beginners as well when learning the basics of typography. 

        SEM:

        Comments

        Post a Comment