Typography / Task 1: Exercise 1 & 2

27.8.2021 - 24.9.2021 (Week 1 - Week 5)
Britney Chow Pei Jun / 0350043 / BDCM
Typography
Task 1 / Exercises 


LECTURES

Week 1 (27/08/2021): Introduction and Briefing to the Module
    This week we were introduce to the Module by Mr. Vinod and Mr. Charles by showing us the MIB (Module Information Booklet). We were also guided by both lecturers to set up our e-portfolio. Soon after that, we were brief by the lecturers about our first task, and we were also told to watch the lecture videos recorded by Mr. Vinod. 

~Typo_0_Introduction
    In this video, Mr. Vinod had explained to us the concept of typography is an act of creating letters from geometrical shapes.
    He had also explained the difference between calligraphy and lettering:

Calligraphy: The writing styles (eg: Black Letter, Round Hand)

fig 1.0; Black Letter Calligraphy

fig 1.1; Round Hand Calligraphy; sauce: (https://en.wikipedia.org/wiki/Round_hand)

Lettering: When you draw it out

fig 1.2; Lettering; sauce: (https://en.wikipedia.org/wiki/Lettering)

_Terminology of Typography
Font: The individual font or weight within the typeface (Eg. Georgia Regular, Georgia Italic and Georgia Bold.) 
Typeface: The entire family of fonts/weights that share similar characteristics or styles (Eg. Georgia, Arial, Times New Roman, etc.)

fig 1.3; Fonts

fig 1.4; Typefaces

~Typo_1_Development
    In this lecture video, Mr. Vinod explained to us the development and timeline for typography. 

Early letterform development: Phoenician to Roman
  • Writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel.
  • Uppercase form are simple combination of straight lines and pieces of circle. 
fig 1.5; 4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia

fig 1.6; Evolution from Phoenician letter.
  • Phoenicians, like Semitic peoples, wrote from right to left.
  • The Greeks changed the direction of writing by developing a style of writing call 'Boustrophedon' (how the ox ploughs). 
  • The lines of text read alternately from right to left and left to right.
fig 1.7; Boustrophedon writing style

fig 1.8; Boustrophedon Script Example
  • Greeks, like the Phoenicians did not use letter space or punctuations. 
  • Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them as to decrease the cost if made a mistake. (Certain qualities of their stokes are carried over into the carved letterforms)
fig 1.9; Evolution from Phoenician to Roman

Hand script from 3rd – 10th century C.E.
  • Square capitals were the written version that can be found in Roman monuments.
  • Have serifs added to the finish of the main strokes.
  • Pen held at an angle of approximately 60° off the perpendicular.
fig 1.10; 4th or 5th century: Square Capitals

fig 1.11; Close up picture of the Lyon Tablet (Bronze tablet from after A.D. 48); sauce: (https://en.wikipedia.org/wiki/Roman_square_capitals)
  • Rustic Capitals, a compressed version of square capitals.
  • Allowed twice as many words on a sheet and took less time to write.
  • Angle at approximately 30°, slightly harder to read. 
fig 1.12; Rustic Capitals

fig 1.13; Rustic Capitals with the poet Virgil; sauce: (https://en.wikipedia.org/wiki/Rustic_capitals)
  • Both square and rustic capitals were typically reserved for documents of some intended performance.
  • We can see the beginning of what we refer to lowercase letterforms, however came from everyday transactions and were written in cursive hand in which forms were simplified for speed.
fig 1.14; Roman Cursive; sauce: (https://en.wikipedia.org/wiki/Roman_cursive)

  • Uncials incorporated some aspects of the Roman cursive hand (A,D,E,H,M,U and Q)
  • More accurate to think of uncials simply as small letters
  • Broad forms of uncials are more readable at small sizes than rustic capitals.
fig 1.15; 4th-5th century Uncials

fig 1.16; Uncials script example; sauce: (https://en.wikipedia.org/wiki/Uncial_script)
  • Half-uncials, a further formalization of the cursive hand mark the formal beginning of lowercase letterforms. 
fig 1.17; Half Uncials

fig 1.18; Uncials and Half Uncials; sauce: (https://www.britannica.com/topic/half-uncial)

  • Charlemagne, the first unifier of Europe since the Romans, standardize all ecclesiastical texts.
  • He entrusted this task to Alcuin of York, Abbot of St Martin of Tours.
  • Rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation.
fig 1.19; Carolingian Miniscule; sauce: (https://en.wikipedia.org/wiki/Carolingian_minuscule)

Blackletter to Gutenberg's type 
  • Regional variations on Alcuin's script with the dissolution of Charlemagne's empire.
  • In nothern Europe, a condense strongly vertical letterform know as Blackletter or Textura gained popularity.
  • In the south, a rounder more open hand gained popularity, called 'Rotunda'.
fig 1.20; 1300: Blackletter (Textura)

  • Gutenberg's skills included engineering, metalsmithing, and chemistry. 
  • His type mold required a different brass matrix, or negative impression, for each letterform. 
fig 1.22; Gutenberg Bible

fig 1.23; Gutenberg Bible Example; sauce: (https://en.wikipedia.org/wiki/Gutenberg_Bible)

Text type classification
  • 1450 Blackletter
  • Earliest printing type, based on hand-copying styles that were used for books in nothern Europe.
  • Eg: Cloister Black, Goudy Text
fig 1.24; Blackletter
fig 1.25; Goudy Text; sauce: (https://en.wikipedia.org/wiki/File:Goudy_Text.png)
  • 1475 Oldstyle
  • Based upon the lowercase forms used by Italian humanist scholars for book copying.
  • Eg: Bembo, Caslon, Janson, Jenson, Palatino
            fig 1.26; Oldstyle; 

fig 1.27; Janson; sauce: (https://en.wikipedia.org/wiki/Janson)

fig 1.28; Bembo; sauce: (https://en.wikipedia.org/wiki/Bembo)
  • 1500 Italic
  • The first italics were condensed and close-set, allowing more words per page.
  • Although originally considered as their own class of type, italics were soon cast to complement roman forms.
  • Since the sixteenth century, all text typefaces have been designed with accompanying italic forms.
fig 1.29; Italics
  • 1550 Script
  • Originally and attempt to replicate engraved calligraphic forms.
  • Not entirely appropriate in lengthy text settings.
  • Forms now range from formal and traditional casual and contemporary.
  • Eg: Kuenstler Script, Snell Roundhand, Mistral.
fig 1.30; Script

fig 1.31; Kuenstler Script; sauce: (https://en.wikipedia.org/wiki/Kuenstler_Script)
  • 1750 Transitional
  • A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing. 
  • Thick to thin relationships were exaggerated, and brackets were lightened. 
  • Eg: Baskerville, Bulmer, Century, Time Roman
fig 1.32; Transitional

fig 1.33; Baskerville; sauce: (https://en.wikipedia.org/wiki/Baskerville)
  • 1775 Modern
  • Represents a further rationalization of oldstyle letterforms. 
  • Serifs were unbracketed, and the contrast between thick and thin strokes extreme. 
  • English versions are also known as Scotch Romans and more closely resemble transitional forms
  • Eg: Bell, Bodoni, Caledonia, Didot, Walbaum
fig 1.34; Modern

fig 1.35; Bodoni; sauce: (https://en.wikipedia.org/wiki/Bodoni)
  • 1825 Square Serif/Slab Serif
  • Originally heavily bracketed serif, with little variation between thick and thin strokes. 
  • Responded to the newly developed needs of advertising for heavy type in commercial printing. 
  • Eg: Clarendon, Memphis, Rockwell, Serifa
fig 1.36; Square Serif/Slab Serif

fig 1.37; Serifa; sauce: (https://en.wikipedia.org/wiki/Serifa)
  • 1900 Sans Serif
  • Eliminated serifs altogether. 
  • The forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the the twentieth century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). 
  • Sans serif is also referred to as grotesque (from the German word grotesk) and Gothic. 
  • Eg: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura
fig 1.38; Sans Serif

  • 1990 Serif/Sans Serif
  • Recent development
  • Enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.
  • Eg: Rotis, Scala, Stone
fig 1.40; Serif/Sans Serif

fig 1.41; Rotis; sauce: (https://en.wikipedia.org/wiki/Rotis)

~Typo_3_Text_pt 1

Text/Tracking: Kerning and Letterspacing
  • Kerning: The automatic adjustment of space between letters
  • Letterspacing: To add space between the letters
  • Tracking: The addition and removal of space in a word or sentence

fig 2.1; The differences between kerning and without kerning

fig 2.2; The differences between normal, loose and tight tracking

Text/Formatting Text
    • Flush left
    • Mostly mirrors the asymmetrical experience of handwriting. 
    • Spaces between words are consistent throughout the text, allowing the type to create an even gray value. 
    fig 2.3; Flush left example;

    • Centered
    • Imposes symmetry upon the text, assigning equal value and weight to both ends of any line. 
    • It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature.
    • Centered type creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged.
    fig 2.4; Centered example;
    • Flush right
    • Places emphasis on the end of a line as opposed to its start. 
    • It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.
    fig 2.5; Flush right example
    • Justified 
    • Imposes a symmetrical shape on the text like centering. 
    • Achieved by expanding or reducing spaces between words and, sometimes, between letters. 
    • The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. 
    • Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.
    fig 2.6; Justified example

    Text/Texture
    • Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.
    fig 2.7; Anatomy of a typeface

    fig 2.8; Different typefaces example

    fig 2.9; Different typefaces example 2

    Text/Leading and Line Length
    • Type size: Text type should be large enough to be read easily at arms length imagine yourself holding a book in your lap.
    • Leading: Text that is set too tightly encourages vertical eye movement. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.
    • Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters.
    fig 2.10; Leading example

    fig 2.11; Leading example 2

    Text/Type Specimen Book 
    • A type specimen book shows samples of typefaces in various different sizes. 
    • Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. 
    • You only determine choice on screen when its final version is to read on screen. 
    fig 2.12; Sample type specimen sheet

    ~Typo_3_Text_pt 2

    Text/Indicating Paragraphs
    • Pilcrow (¶): A holdover from medieval manuscripts seldom used today.
    • Line space (leading): Gap between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
    fig 2.13; Line space vs leading

    Text/Widows and Orphans
    • Widow: A short line of type left alone at the end of a column of text. 
    • Orphan: A short line of type left alone at the start of new column.
    fig 2.14; Widows and Orphans example
    • Widows solution: Rebreak your line endings through out your paragraph so that the last line of any paragraph is not noticeably short.
    • Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.
    Text/Highlighting text
    • Different kinds of emphasis require different kinds of contrast.
    fig 2.15; Highlighting text example 1

    fig 2.16; Highlighting text example 2
    • In this example the sans serif font (Univers) has been reduced by .5 to match the x-height of the serif typeface. 8 ≠ 7.5
    fig 2.17; Highlighting text example 3
    • Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. 
    • Compare the indented quote at the top with the extended quote at the bottom.
    Text/Headline within text
    • There are many kinds of subdivision within text of a chapters. 
    • In the following visuals these have been labeled (A, B and C) according to the level of importance:
    fig 2.18; Headline within text example 1
    • A head indicates a clear break between the topics within a section. 
    • In the following examples ‘A’ heads are set larger than the text, in small caps and in bold. 
    • The fourth example shows an A head ‘extended’ to the left of the text.
    fig 2.19; Headline within text example 2
    • The B head here is subordinate to A heads. 
    • B heads indicate a new supporting argument or example for the topic at hand. 
    • They should not interrupt the text as strongly as A heads do. 
    • Here the B heads are shown in small caps, italic, bold serif, and bold san serif.
    fig 2.20; Headline within text example 3
    • The C heads although not common, highlights specific facets of material within B head text. 
    • Not materially interrupt the flow of reading. 
    • C heads are shown in small caps, italics, serif bold and san serif bold.
    • C heads in this configuration are followed by at least an em space for visual separation.
    fig 2.21; Headline within text example 4 
    • Putting together a sequence of subheads=hierarchy.
    • Obviously there is no single way to express hierarchy within text
    Text/Cross Alignment
    • Cross aligning headlines and captions with text type reinforces the architectural sense of the page (the structure) while articulating the complimentary vertical rhythms.
    fig 2.22; Cross alignment example 1 

    fig 2.23; Cross alignment example 2

    ~Typo_4_Basics


    This lecture is provided by Mr. Vinod. 

    ~Typo_5_Understanding

    fig 2.24; Baskervile Letter A
    • Suggest symmetry, but in fact it is not symmetrical. 
    • Easy to see the two different stroke weights of the Baskerville stroke form 
    • More noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc
    fig 2.25; Univers Letter A
    • May also appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. 
    • Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive. 
    fig 2.26; Helvetica and Univers Letter a;
    • A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.
    fig 2.27; The word "razors";
      • X-height generally describe the size of the lowercase letterforms. 
      • Keep in mind that curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin. 
      fig 2.28; Form or Counterform Examples;
        • When letters are joined to form words, the counterform includes the spaces between them.
        • To understand the form and counter of a letter is to examine them in close detail. 
        ~Typo_6_Screen and Print

        fig 2.29; Typography in different medium;

        fig 2.31; Typography in different medium 2;
        • In the past, was viewed as living only when it reached paper. 
        • Once a publication was edited, typeset and printed, it was done, nothing changed after that. 
        • Good typography and readability were the result of skilled typesetters and designers.
        • Exists not only on paper but on a multitude of screens.
        Print Type Vs Screen Type

        Type for Print
        • Was designed intended for reading from print long before we read from screen. 
        • It’s the designer’s job to ensure that the text is smooth, flowing, and pleasant to read.
        • A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print because of their characteristic which are elegant and intellectual but also highly readable when set at small font size. 
        fig 2.32; Print vs Screen Type

        fig 2.33; Print vs Screen Type 2

        Type for Screen
        • Intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. 
        • Include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles.
        • Another important adjustment is more open spacing. 
        • Serve to improve character recognition and overall readability in the non-print environment, which can include the web, e-books, e-readers, and mobile devices.
        Hyperactive Link/ hyperlink
        • It's a word, phrase, or image that you can click on to jump to a new document or a new section within the current document. 
        • Found in nearly all Web pages, allowing users to click their way from page to another. 
        • Text hyperlinks are normally blue and underlined by default. 
        Font Size for screen 
        • About the same size as text printed in a book or magazine
        • Accounting for reading distance, because we read books pretty close, they are typically set at about 10 points. 
        • If you were to read them at arm’s length, you’d want at least 12 points, which is about the same size as 16 pixels on most screens
        fig 2.34; Font size for screen example

        System Fonts for Screen/ Web Safe Fonts
        • Each device comes with its own pre-installed font selection, which is based largely on its operating system. The problem is that each differs a little bit.
        • ‘Web safe’ ones, however, appear across all operating systems, they’re the small collection of fonts that overlap from Windows to Mac to Google
        • However, no longer an issue.
        Pixel Differential Between Devices
        • Are not only different sizes, but the text you see on-screen differs in proportion too, because they have different sized pixels. 
        • 100 pixels on a laptop is very different from 100 pixels on a big 60″ HDTV.
        fig 2.35; Pixel difference between devices;

        Static Vs Motion
        • Has minimal characteristic in expressing words. 
        • Traditional characteristics such as bold and italic only offer a fraction of the expressive potential of dynamic properties.
        • From billboards to posters, magazines to fliers, we encounter all forms of static typography with wide ranging purposes. 
        • Whether they are informational, promotional, formal or aspirational pieces of designs, the level of impression and impact they leave on the audience is closely knitted to their emotional connection with the viewers.
        fig 2.36; Static vs Motion example;

        INSTRUCTIONS

        For Task 1 Exercise 1: Type Expression
        1. Choose 4 words out of the top 7
        2. Make an idea sketch for the 4 words
        3. Digitalize them in illustrator

        fig 3.0; Task 1 word list (27/08/2021)

        I've chosen "Glitch", "Broken", "Bark" and "Terror" is a mandatory word.

        Week 2 (03/09/2021) Reviewing Idea Sketches:
            Mr. Vinod started the class by asking us to post our idea sketches at Facebook's comment section. After we finished posting the idea sketches, Mr. Vinod and Mr. Charles look through most of them and gave insightful feedbacks.
            Next, he divided us into 10 breakout rooms and asks us to give feedbacks to our peers instead. He guided us through this by giving us questions to think about when looking at one's idea sketches.
        1. Are the explorations sufficient?
        2. Does the expression match the meaning of the word?
        3. On a scale of 1–5, how strong is the idea?
        4. How can the work be improved?
            After the session end, he continued to give us feedback for our e-portfolio.


        EXERCISES

        Progression of Task 1 Exercise 1: Idea Sketches

        fig 4.0; Britney's Idea Sketches #1
        • For the word "broken", I want to give out an impression of how the surface of something (this can be interpret by the viewer, be it a heart or glass or memories or whatever) is broken and it's falling slowly. A sad broken, and a torn broken is what I want to show in this sketch.
        • For the word "bark", I make the alphabet "A" here as a dog's snout, and the word itself is mirrored, while the background is just barks! all over it. The idea for this is that I often see dogs don't only bark once or twice, but many times to either alert their owner, or just being noisy.  
        fig 4.1; Britney's Idea Sketches #2
        • For this idea sketch, I'm basically trying out new stuff, just like the word "glitch". To me, glitch comes in all sorts of forms, and thus the reason why I made the letters all seem different.
        • As for the word "terror", I want to make it seem like people are terrified of something, or trying to run away from something they are scared of.
        • In this sketch, I tried to make bark a bit playful, as dogs are usually seen as cute and fluffy, friendly type of creatures. For "broken", I want to make it a sad-depressing type, maybe someone who is heartbroken from a relationship or lose someone important.

        Progression: Digitalizing


        fig 4.2; Type Expression created with Illustrator
        • The idea over here compare to my idea sketches different by a lot, however I combine some of them together. 
        • For the word "broken" I tried to make it look as if the sentence, or rather the word here is broken and slowly falling down like glass shards. 
        • As for the word "glitch", I got the reference from my own TV. Like when someone isn't watching it, there's the word "no signal" keep appearing and popping out wherever it wants to, and thus I tried to do, and I also remove the letter "t" from the glitch too.
        • I want to express noisy in the word "bark" as I got this idea by watching my neighbor's dog keep barking. The dog doesn't really stop barking until it is tired and thus the reason why I put lots of barks in it.
        • When I thought about terrifying stuff, I always feel my heartbeat beats faster, because I'm scared. And thus I tried to create the heartbeat with the word "terror" to signify I feel scared in these type of situations. 

        Final Task 1 Exercise 1: Type Expression

        fig 4.3; Final Type Expression (16/9/2021)

        fig 4.4; Final Type Expression in PDF form (16/9/2021)

        Type Expression Animation:

        fig 4.5; Type animation first attempt

        This is my first attempt at trying to make a gif using both Adobe Illustrator and Photoshop. I tried to make as if it is really barking by adding the motion lines.

        fig 4.6; Type animation in Adobe Illustrator

        fig 4.7; Type animation in Adobe Photoshop

        I made the first half of the animation in Adobe Illustrator and the second half in Photoshop as taught by Mr. Vinod in the recorded lecturers. I made 9 frames for the animation as I think that this could make the animation gif look smoother instead of feeling very rushed. 

        Final Task 1 Exercise 1: Type Expression Animation

        fig 4.8; Final Type Expression Animation (16/9/2021)

        For Task 1 Exercise 2: Type Formatting
        We're required to watch the lecture videos recorded by Mr. Vinod to do this exercise. In the videos, we're taught on how to do kerning and tracking, here is my progress on this:
        fig 4.9; Text formatting without kerning and tracking

        fig 4.10; Text formatting after kerning and tracking

        As I continued to watch the lecture videos, I gained a lot of knowledge. 

        The notes I've taken down:
        1. The font size should be between 8 to 12 points.
        2. The line-length should be from 55 to 65 characters.
        3. The leading should be plus 2 points depending on your font size.
        4. The paragraph spacing should be the same value as your leading. 
        5. The alignment choice suggested is either left align or left justify. (The problem with left justify: if kerning is not good, there would be excessive amount of spacing between words)
        6. The ragging could be adjusted with kerning, does not have to be a straight line exactly.
        7. Hyphenation is recommended to be turned off or if it is on, make sure that there are not too many or else you will have to make more adjustments.
        8. One should avoid widows and orphans and always maintain cross alignments. 
        Below is my progress on it:

        fig 4.11; Before hyphenation and kerning

        Before hyphenation and kerning, there's quite a lot of ragging and personally I think it makes it hard to read and it is not neat at all. 


        fig 4.12; After hyphenation and kerning

        According to the lecture videos recorded, the kerning should not be over 5 em over 20, and it should follow the rule of thirds. Fig x.x is the result after I tried kerning and turn off hyphenation. Although it may not look perfect, I personally think that it looks tidier than before. 

        fig 4.13; Screenshot of hidden characters and base line grid

        With showing the hidden characters, one can easily see what their mistakes are and can correct them accordingly. 

        Final Task 1 Exercise 2: Type Formatting

        fig 4.14; Final form of type formatting (23/9/2021)

        fig 4.15; Final form of type formatting in PDF (23/9/2021)

        Fonts: Janson Text LT Std (75 Bold, 76 Bold Italic, 55 Roman)
        Point size: 10 pt (body text), 10 pt (captions), 10 pt (sub-heading), 20 pt (heading)
        Leading: 12 pt (body text), 24 pt (heading)
        Paragraph spacing: 12 pt
        Line length: 58 (Average)
        Alignment: Left align


        FEEDBACK

        Week 1 (27/08/2021):
        General Feedback: (For the e-portfolio) Students were told to not make too much customization on the blog and is recommended to do so towards the end of semester. Instead, it is better to make it default.
        Specific Feedback: (For the e-portfolio) The overall format is okay, however, I made a mistake of using jump break instead of horizontal rule (forced line break).

        Week 2 (03/09/2021):
        General Feedback: Watch out for the distortion as it doesn't have the typeface, less is more. 
        Specific Feedback: My idea sketches has too much illustration, one should keep it simple but interesting instead of relying too much on the illustration. (Breakout Room): There's still room to explore, add more variations, do implement more hierarchy.

        Week 3 (10/09/2021):
        General Feedback: Only black and white could be use, and do not depend too much on graphical elements.
        Specific feedback: The lecturers has suggested to remove some elements on the word "terror", the word "broken" and "glitchy" is not expressed well and the letter "k" at the word "bark" is fine, however, there's no point in putting so many "bark", the word itself should also not be in italics. It's all about simplicity.

        Week 4 (17/09/2021):
        General Feedback: Make the animation even more smoother by either extending the time or adding more frames.
        Specific Feedback: Could explore more like adding more movements for the other letters. My original one lacks impact and action and I do not need to italic the word.  


        REFLECTIONS

        Experience: By completing this exercise, I have learned the basics of typography and how to use apps related to it. In my first progression for the type expression (idea sketches), I was confused as to what to do with it because I'm not exactly familiar with the 10 typefaces and I keep rely on the graphical elements or illustrations. I find it especially challenging as I couldn't come up with much ideas for it and I was afraid that my ideas are not good at all. It took me some time to get used to Illustrator as we have to use it to do both the type expression and animation. I think the animation part is the most challenging one as I do not know a lot of the functions and it took most of my time trying to research them. For task 1 exercise 2, type formatting, it may seem easy to others but personally I feel that it isn't as easy as one thinks because there are a lot of things that one have to look out for such as the font size, leading, paragraph spacing and more. Although the whole task in my opinion, is pretty challenging and difficult, I still have a lot of fun doing it.

        Observations: After completing the task, I have observe that typography isn't easy at all as one have to consider the design elements like hierarchy and visual weight when designing something. I also observed that one should always explore more and choose the correct typeface to better express the word, because the typefaces are more important than what the majority thinks.

        Findings: I've learned the terminology of typography by watching the recorded lectures provided. It is also important to be strict on criticizing so that we or others could improve their own work and that we also shouldn't be afraid when giving out comments. During the process of this task, I've familiarized myself with the typefaces such as Gill Sans, Futura Std, Janson text and more. I also know that one should always considers a lot of things when designing something and also always think outside of the box. 


        FURTHER READING

        fig 5.1; A Type Primer by John Kane 

        Basic: Describing Letterforms

        • Typography employs a number of technical terms
        fig 5.2; A Type Primer page 13

        fig 5.3; A Type Primer page 14

        fig 5.4; A Type Primer page 15

        DISCLAIMER: All pictures and information in the LECTURES section is taken from Mr. Vinod unless mentioned otherwise. Thank you.

        Comments

        Popular posts from this blog

        Design Principle: Project 2

        Collaborative Design Practice // Task 1: Empathy Map and Problem Statement

        Advanced Typography / Task 1: Exercises