Typography - Task 1: Exercises

 

23/09/2024 - 21/10/24 / Week 1 - Week 5

Aquela Zefanya Soares / 0374377

Typography / Bachelor of Design (Honours) in Creative Media / Taylor's University

Task 1: Exercise 1 & 2


TABLE OF CONTENTS


LECTURES

Week 1 

Typography: Introduction

1. Definition

  • The art of creating letters, the creation of typefaces, also can come in animated form. The technique of arranging types to make written language legible, readable, and appealing when displayed. 
  • Typography exists everywhere, such as websites, applications, books, signs, etc.
  • Typography skills are needed in order to communicate better using letters.
2. Evolution of Typograph

  • The process from calligraphy > lettering > typography takes over 500 years.
  • Calligraphy: The writing styles
  • Lettering: The result of drawing out letters
  • Typography: The art and technique of arranging type (on a computer)

3. Who practices Typography?

  • Anyone who arranges words, letters, numbers, and symbols for publication, display, or distribution

4. What is happening now

  • Digitalization opened up typography to new generations of previously unrelated designers and lay users.
  • Now that it is accessible to everyone, which previously had to be done by an expert, has caused   typography to decline in quality throughout the world. 
  • Over the decades, the decline of skilled typographers has also affected effective communication.
  • People tend to overlook the quality as long as the effects are still the same.

5. Type history

  • Communication used to be done through symbols, resulting in difficulties in conveying things correctly.
  • The development of Phoenician alphabets in which words were created using sounds, allowed for more precise communication.

6. Terminology

  • Font: Refers to an individual font or weight within typeface, e.g.: Georgia Regular, Georgia Italic, and Georgia Bold.
  • Typeface: Refers to the entire family of fonts/weights that share similar characteristics or style. e.g.: Georgia, Arial, Times New Roman, Didot and Futura.

Typography: Development and Timeline

Phoenician to Roman

Fig 1.1 Phoenician to Roman

1. Initial
  • Writing: Scratching into wet clay with a sharpened stick or carving into stone using a chisel.
  • Uppercase is formed by a simple combination of straight lines and pieces of circles.
Fig 1.2 Initial writing

2. Further Development
  • The Greeks changed the direction of writing called ‘boustrophedon’ (how the ox ploughs) which meant that the lines of text read alternately from right to left and left to right. 
  • The change of the direction of reading results in the change of the orientation of the letterforms.
  • In this era, Greek still used the ancient Phoenicians way of not using letter space or punctuations.
  • Etruscan (and then Romans) carvers working in marble painted letterforms before inscribing them. The strokes that are created by their skills influence the weight etc and being developed as the letters that people use today.
Fig 1.3 Boustrophedon

3. Hand script from 3rd - 10th century C.E.
  • Square capitals were the written version that can be found in Roman monuments. 
  • This era used slanted reed pens hence the width came from and they also added serifs in the letter.
  • Square capitals develop around 4th - 5th century C.E
  • Rustic capitals is a compressed version of square capitals. Therefore, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write.
  • Although it is easier and faster to write, they are slightly hard to read due to their compressed nature.
  • Both capitals were typically reserved for documents of some intended performance.
  • The development of the lowercase letter was a result of fast writing uppercase letter forms quickly
  • Uncial doesn’t have upper and lower case letter forms. It has both capital and lowercase elements integrated into the writing system.
  • A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, 2000 years after the origin of the Phoenician alphabet.
  • Charlemagne (Charles the Great), ruler of the Carolingian Empire realized that there are too many writing ways and this could result in lost in translation. He issued an edict in 789 to standardize all ecclesiastical texts.
  • He entrusted this task to Alcuin of York, Abbot of St. Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization, and punctuation which set the standard for calligraphy for a century.
Fig 1.4 Hand script from 3rd - 10th century C.E.

4. Blackletter to Gutenberg’s type
  • With the dissolution of Charlemagne's kingdom came regional variations on the Alcuin’s script, people will eventually develop their own styles to suit their own languages and regionals.
  • In Northern Europe, a condense strongly vertical letterform known as Blackletter or textura gained popularity.
  • In the South, a rounder more open hand gained popularity, called ‘rotunda’.
  • The humanistic script in Italy is based on Alcuin’s miniscule. 
  • Gutenberg is a person who invented the modern day printing press. He invented a mechanism that allowed documenting to be done much faster. He developed a machine using his knowledge of engineering, metalsmithing, and chemistry. This machine was able to accurately imitate the work of scribes, as seen in his work, the Gutenberg Bible, printed around 1455.
Fig 1.5 Blackletter (left) and Gutenberg Bible (right)
Humanist script to Roman type 
  • 1460: Lucius Lactantius, Venice.
  • 1471: Quintillian, Nicholas Jenson, Venice.
  • 1472: Cardinal Jonannes Bessarion, Conrad Sweynheym and Arnold Pannartz, Subiaco Press, Rome.
Venetian type from 1500
  • 1499: Colona, type by Francesco Griffo.
  • 1515: Lucretius, type by Francesco Griffo.
The Golden Age of French painting
  • 1531: Illustrissimae Galliaru Reginae Helianorae, printed by Robert Estianne, Paris. Type-cast by Claude Garamond.
Dutch Printing
  • 1572: Polyglot Bible (Preface). Printed by Christophe Plantin, Antwerp.
English type from the eighteen century
  • 1734: William Caslon, Type specimen sheet, London.
Baskerville’s innovation
  • 1761: William Congreve, typeset and printed by John Baskerville, Birmingham.
  • 1818: Giambatista Bodoni, Manuale Tipografico, Parma.
19th century types → The first square serifs → Early twentieth-century sans serif (1923 Bauhaus, Moholy-Nagy, 1959 Muller-Brockman)

5. Text type classification (approximately nearest quarter century)
  • Typeforms have developed in response to prevailing technology, commercial needs, and aesthetic trends. Certain models have endured well past the cultures that spawned them.
The following typeform classification here, based on one devised by Alexander Lawson only covers the main form of text type.
  • 1450 Blackletter: Earliest printing type, based upon the hand-copying styles that were then used for books in Northern Europe, e.g.: Cloister Black, Goudy Text
  • 1475 Old style: Based upon the lowercase forms used by Italian humanist scholars for book copying (themselves based upon the ninth-century Caroline miniscule) and the uppercase letterforms found inscribed on Roman ruins, the forms evolved away their calligraphic origins over 200 years, the forms evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England. E.g.: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino.
  • 1500 Italic: Echoing contemporary Italian handwriting, the first italic were condensed and close-set, allowing more words per page.
  • 1550 Script: Originally and attempt to replicate engraved calligraphic forms, this class of type is not entirely appropriate in lengthy text settings.
  • 1750 Transitional: A refinement of old style forms, this style was achieved in part because of advances in casting and printing. 
  • 1775 Modern: This style represents a further rationalization of old style letterforms.
  • 1825 Square Serif / Slab Serif: Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the needs of advertising for heavy type in commercial printing. 
  • 1900 Sans Serif: These typefaces eliminated serifs altogether.
  • 1990 Serif / Sans Serif: This style enlarges the notion of a family of typefaces to include both serif and sans serif alphabets.

Week 2

Typography: Text (Part 1)

1. Kerning and letterspacing

  • Kerning: Automatic adjustment of space between letters, often mistakenly referred to as "letterspacing".
  • Letterspacing: To add space between the letters.
  • Tracking: The addition and removal of space in a word / sentence.
Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counter form created between letters to maintain the line of reading. 

2. Formatting

Fig 2.1 Typographic alignment
  • Flush Left (Ragged Right): 
    • Most closely mirrors asymmetrical experience of handwriting.
    • Each line starts at the same point but ends wherever the last word on the line ends. 
    • Space between words are consistent throughout the text.
  • Centered (Ragged Right and Left): 
    • Imposes symmetry upon the text (equal value and weight to both ends of any line). Transform fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. 
    • It's important to amend line breaks so that the text doesn't appear to be jagged (because of such a strong shape on the page)
  • Flush Right (Ragged Left): 
    • Emphasis on the end of a line as opposed to its start.
    • Can be useful in situations (e.g.: captions) where the relationship between text and image might be ambiguous without strong orientation to the right.
  • Justified:
    • Like centered, this format imposes a symmetrical shape on the text.
    • This format results in "rivers" which is a long space between the letters because it's a result of expanding / reducing spaces between words and letters, to achieve the symmetrical shape.
3. Texture
  • Refers to the visual weight and density of the text on the page (influenced by the typeface's x-height, stroke width, and the overall gray value it creates).
  • Darker, bolder typefaces can convey strength but may reduce readability in smaller sizes. 
  • Lighter typefaces might appear more elegant but can be harder to read.
  • These factors must be balanced to ensure the overall reading experience.
4. Leading and Line Length

The goal in setting text type is to allow for easy, prolonged reading. At the same time a field of type should occupy the page as much as photograph does.

Fig 2.2 Leading and line length
  • Type size: Text type should be large enough to be read easily at arms length (range is between 8-12). 
  • Leading (2,5 or 3 larger than the typesize):
    • Text that is too tight: Encourages vertical eye movement (readers can easily lose their place).
    • Text that is too loose: Creates striped patterns that distract the reader from the material at hand.
  • Line Length: 
    • Shorter lines require less leading, longer lines more.
    • A good rule of thumb is to keep the line length between 55-65 characters. 
    • Extremely long or short line lengths impairs reading.
5. Type Specimen Book
  • A type specimen book shows samples of typefaces in various different sizes. Without showing samples of different sizes, no one can make a reasonable choice of type.
  • A type specimen book is to provide an accurate reference for type, type size, type leading, type length, etc.
  • It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below.
Fig 2.3 Type specimen

Week 3

Typography: Text (Part 2)

1. Indicating Paragraphs
There are several options for indicating paragraphs:
  • Pilcrow (¶): A holdover from medieval manuscripts seldom use today
  • Line spacing: 
    • Leading (space between each line of text) typically should be 2-3 pt larger than the text (e.g., 10 pt text would have 12 or 12.5 pt leading).
    •  If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text.
    • When there's 2 columns of text sitting next to each other where the text line is aligned to the next columns, cross alignment ensures that the lines in both columns align perfectly. Cross-alignment makes it visually consistent and easy to read.
    • Line spacing vs Leading
Fig 3.1 Leading and line spacing
      • Leading: Space between lines to keep them from touching each other.
      • Line spacing: Include both the height of the text and the space between lines.
      • Based on the bread and jelly analogy:
        • Size of the text: Bread.
        • Leading / space between line: Jelly.
        • Line spacing: Bread + Jelly.
  • Indentation: 
    • Typically, the indent size is set equal to the text's point size (e.g., 10pt text should have a 10pt indent).
Fig 3.2 Standard indentation
    • Indentation should only be used on justified text, not with left-aligned text, because it would ragging on both sides.
2. Widows and orphans
In traditional typesetting, there are two unpardonable gaffes - widows and orphans. Designers must take great care to avoid this occurrence.

Fig 3.3 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.
  • In justified text, both widows and orphans are considered serious gaffes. 
    • Flush right and ragged left text are somewhat more forgiving toward widows.
    • Orphans remain unpardonable.
  • The only solutions to widows is to rebreak your line endings throughout your paragraph so that the last line of any paragraph is not noticeably short.
  • Orphans required more care. Careful typographers make sure that no columns of text starts with the last line of the preceding paragraph.
3. Highlighting Text
Different kinds of emphasis require different kinds of contrast. This can be done using:

Fig 3.4 Highlighting text
  • Reducing sans serif to match the x-height of the serif typeface
  • When highlighting text by placing a field of color at the back of the text, maintaining the left reading axis of the text to ensures readability is at its best.
  • Quotation marks, like bullets can create a clear indent, breaking the left reading axis.
  • Prime ≠ quote, prime is an abbreviation for inches and text. Due to the limited number of keys and a typewriter, they were substituted. They were later known as dumb quotes.
Fig 3.5 Prime and quotation mark
4. Headline within text
There are many kinds of subdivision within text of a chapters. 
  • Typographers need to ensure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other. 
  • A-heads: Indicates a clear break between the topics within a section. Bold, larger, and often in small caps.
  • B-heads: Indicates a new supporting argument or example for the topic at hand. Smaller than A-heads but still bold.
  • C-heads: Although not common, highlights specific facets of material within B-heads text. Even smaller than A-heads.
  • Hierarchy: Putting together a sequence of subheads.
Fig 3.6 Hierarchy of subheads
5. Cross Alignment 
  • Cross Alignment: How headings and captions align with the body text across different columns or text block.
  • Cross aligning and captions with text type reinforce the architectural sense of the page-the structure-while articulating the complimentary vertical rhythms.
Fig 3.7 Cross alignment

Week 4

Typography: Basic

1. Describing letterforms

  • As any craft that has evolved over 500 years, typography employs a number of technical terms. These mostly describe specific parts of the letterforms. 
  • Knowing a letterform's component parts make it much easier to identify specific typefaces.
  • Baseline: The imaginary line the visual base of the letterforms.
  • Median: The imaginary line defining the x-height of letterforms.
  • X-height: The height in any typeface of the lowercase 'x'.
Fig 4.1 Baseline, Median, X-height
  • Stroke: Any line that defines the basic letterform.
Fig 4.2 Stroke
  • Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below)
Fig 4.3 Apex / Vertex
  • Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
Fig 4.4 Arm
  • Ascender: The portion of stem of a lowercase letterform that projects above the median.
Fig 4.5 Ascender
  • Barb: The half-serif finish on some curved stroke.
Fig 4.6 Barb
  • Bowl: The rounded form that describes a counter. The bowl may be either open or closed.
Fig 4.7 Bowl
  • Bracket: The transition between the serif and the stem.
Fig 4.8 Bracket
  • Cross Bar: The horizontal stroke in a letterform that joins two stems together. 
Fig 4.9 Cross Bar
  • Cross Stroke: The horizontal stroke in a letterform that joins two stems together.
Fig 4.10 Cross Stroke
  • Crotch: The interior space where two strokes meet.
Fig 4.11 Crotch
  • Descender: The portion of the stem of a lowercase letterform that projects below the baseline.
Fig 4.12 Descender
  • Ear: The stroke extending out from the main stem or body of the letterform. 
Fig 4.13 Ear
  • Em/en: Originally refering to the width of an uppercase M, and em is now te distance equal to the size of the typeface (e.g., an em in 48 pt). An en is half the size of an em. Most often use to describe em/en spaces and em/en dashes.
Fig 4.14 Em/en
  • Finial: The rounded non-serif terminal to a stroke.
Fig 4.15 Finial

  • Leg: Short stroke off the stem to the letterform, either at the bottom of the stroke (L) or inclined downward toward (K, R).
Fig 4.16 Leg
  • Ligature: The character formed by the combination of two or more letterforms.
Fig 4.17 Ligature
  • Link: The stoke that connects the bowl and the loop of a lowercase G.
Fig 4.18 Link
  • Loop: In some typefaces, the bowl created in the descender of the lowercase G.
Fig 4.19 Loop
  • Serif: The right-angled or oblique foot at the end of the stroke.
Fig 4.20 Serif
  • Shoulder: The curved stroke that is not part of a bowl.
Fig 4.21 Shoulder
  • Spine: The curved stem of the S.
Fig 4.22 Spine
  • Spur: The extension the articulates the junction of the curved and rectilinear stroke.
Fig 4.23 Spur
  • Stem: The significant vertical or oblique stroke.
Fig 4.24 Stem
  • Stress: The orientation of the letterform, indicated by the thin stroke in round forms.
Fig 4.25 Stress
  • Swash: The flourish that extend the stroke of the letterform.
Fig 4.26 Swash
  • Tail: The curved diagonal stroke at the finish of certain letterforms.
Fig 4.27 Tail
  • Terminal: The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat ('T' above), flared, acute, ('t' above), grave, concave, convex, or rounded as a ball or a teardrop.
Fig 4.28 Terminal

2. The font
  • The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.
  • Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
Fig 4.29 Uppercase
  • Lowercase: Lowercase letters include the same characters as uppercase. 
Fig 4.30 Lowercase
  • Small Capitals: Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set. Most type software includes a style command that generates a small cap based on uppercase forms.
Fig 4.31 Small Capitals
  • Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters. 
Fig 4.32 Uppercase Numerals
    • Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used whenever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif typefaces than in serif. 
    Fig 4.33 Lowercase Numerals
      • Italic: Most fonts today are produced with a matching italic. Small caps. however, are always only roman. The forms in an italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of typeface. 
      Fig 4.34 Italic
        • Italic vs Roman
        Fig 4.35 Italic (left) and Roman (right)
            • Roman: The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'. 
          Fig 4.36 Roman
              •  Italic: Named for fifteenth century Italian handwriting on which the forms are based.
            Fig 4.37 Italics Oblique
              • Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.
              Fig 4.38 Punctuation, miscellaneous characters
                • Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).
                Fig 4.39 Ornaments
                  • Oblique conversely are based on roman form of typeface.
                  Fig 4.40 Font

                    3. Comparing typefaces
                    • What is worth noting isn't the similarities but rather the differences, the accumulation of choices that renders each unique.
                    • Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling.
                    Fig 4.41 10 Typefaces
                      • The Rs display a range pf attitudes, some whimsical, some stately, some mechanical, others calligraphic, some harmonious, and some awkward. 
                      Fig 4.42 Comparison



                        INSTRUCTION


                        <iframe src="https://drive.google.com/file/d/1zpL9qSBd5tL0LVeNNwrjchRW5Mg5VLVA/preview" width="640" height="480" allow="autoplay"></iframe>


                        TASK

                        Task 1: Exercise 1 - Type Expression

                        1. Sketches

                        This week, Mr. Vinod gave us a set of words for us to sketch. We're ordered to create a real depiction of those words. The words that i pick are "Wind", "Chop", "Tangle", and "Pull". The app that I use to sketch this design is Ibis Paint.

                        Fig 5.1 Sketches (Before feedback) (30/09/2024)


                        I realized that I missed the point where it is not permitted to use graphical elements and distortion. I need to consider the typefaces that I want to use and need to apply all the rules that are specified. All of these considerations made me redo the design and make new sketches.

                        Fig 5.2 Sketches (After feedback) (06/10/2024)

                        After a lot of consideration, I decided to pick 1 design from each word. The one that I marked using a blue pen is the one that I chose. The weird mark is for the one that I like but needs some adjustment when I start working on digitalization later.


                        2. Digitalization 

                        After revision, the digitization process was carried out in Adobe Illustrator.

                        Fig 5.3 Digitalization (Before feedback) (07/10/2024)

                        After feedback and comparing my work to seniors, I realized that my words doesn't have any impact and I didn't put a good use of the composition, which makes it bland. That is the consideration that I put while making the revision.

                        Fig 5.4 Digitalizaton (After feedback) (14/10/2024)

                        Now that I've done making some adjustments, I quite like how it turned out and have decided to make it my final composition.

                        Final Expression

                        Fig 5.5 Final Expression (14/10/2024)

                        Fig 5.6 Final Expression (14/10/2024)

                        3. Animation

                        After the digitization process, we were given the task of creating an animation based on one of the words from the final expression that we had created.

                        Before feedback: Process

                        Fig 5.7 Animation frames are being processed on Adobe Illustrator (13/10/2024)

                        The inspiration of my animation is how usually cartoon portrayed wind and makes it flow like curve. I didn't know how to make animation before, so I decided to do something simple and only use 8 frames for my animation.

                        Fig 5.8 Images to GIF conversion in Adobe Photoshop (13/10/2024)

                        In the end the animation is too short, choppy, and weird. 

                        Fig 5.9 Animation (Before feedback) (14/10/2024)

                        After feedback: Process

                        Now I know that the wind doesn't really depict reality. That's why I scratched my original idea and decided to make a new one. The inspiration was wind turbines. I want to make the letter "I" move like one and then scatter the other letters like how wind scatters everything. Because the GIF is looping, I want to create a satisfying loop for the GIF by making a smooth ending since it is looping. I want to create a scenario where the letter "I" returns to its original position after spinning.

                        Fig 5.10 Animation frames are being processed on Adobe Illustrator (14/10/2024)

                        In the end, I ended up making 46 frames, and I do think it's too many, so further adjustment will be done in Photoshop.

                        Fig 5.11 Images to GIF conversion in Adobe Photoshop (20/10/2024)

                        ​Because the animation turned out very slow, I decided to delete some of the frames and pick the one that was important. I ended up with only 22 frames and satisfied with the result.


                        Final Animated Type Expression


                        Fig 5.12 Final Animation GIF (21/10/2024)

                        Task 1: Exercise 2 - Text Formatting

                        In this assignment we are given the task of creating a text format by paying attention to kerning, leading and tracking according to the teachings of Mr Vinod's video.

                        Lecture 1/4

                        Fig 6.1 Name formatting without kerning (19/10/2024)

                        Fig 6.2 Name formatting with kerning (19/10/2024)

                        Fig 6.3 Name formatting comparison (with and without kerning) (19/10/2024)


                        Text Formatting

                        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

                        Before Feedback

                        For this assignment, I created 2 main designs, of which I will later choose one after being given feedback.

                        Fig 6.4 Text formatting with and without grid (Design 1) (20/10/2024)


                        Fig 6.5 Text formatting with and without grid (Design 2) (20/10/2024)


                        After Feedback

                        After receiving feedback, I came to the conclusion that I should've created more than two designs since I needed to compare them to determine which was best and consider how the client would feel if I had only produced two. I made the decision to expand my sketches and create seven additional layouts as a result.

                        Fig 6.6 Text formatting sketches (24/10/2024)


                        I left eight of my designs to use as layouts after deciding not to use one of my concepts. 

                        Fig 6.7 Layouts (25/10/2024)

                        In the end, I preferred layout number six and choose to use it for my final type formatting.

                        Fig 6.8 Text Formatting Design 6 (25/10/2024)


                        Final Text Formatting

                        HEAD LINE
                        Typeface: Futura Std
                        Font/s: Futura Std Extra Bold
                        Type Size/s: 72 pt 
                        Leading: 36 pt
                        Paragraph spacing: 0
                         
                        BODY
                        Typeface: Futura Std
                        Font/s: Futura Std Book
                        Type Size/s: 11 pt
                        Leading: 13 pt
                        Paragraph spacing: 13 pt
                        Characters per-line: 57
                        Alignment: Left justified
                        Margins: 23 mm bottom, 12.7 mm top + left + right 
                        Columns: 2
                        Gutter: 5 mm

                        Fig 6.9 Final Text Formatting (25/10/2024)

                        Fig 6.10 Final Text Formatting (25/10/2024)



                        FEEDBACK

                        Week 1

                            General Feedback: Introduction to design class, rules and modules. We were given the task of making an e-portfolio and typography sketches. YouTube video link is provided as directions for doing the task.

                        Week 2

                            Specific Feedback: The use of magnet in the word "PULL" is a good idea but not executed well.

                            General Feedback: Too much distortion to the letter, and it may lose the real typeface form. Graphical elements need to be toned down so that the expression won't be too overwhelming.

                        Week 3

                            Specific Feedback: Mr. Vinod told us that we need to make a bigger impact and consider the composition of our text.

                            General Feedback: The letter "PULL" that I made doesn't work because it doesn't describe its meaning. 

                        Week 4

                            Specific Feedback: Animation assignment submission day and for those whose animation is correct, continue the lesson by watching the exercise 2 video on YouTube.

                            General Feedback: The animation doesn't depict the reality of the letter and is too choppy.

                        Week 5

                            Specific Feedback: Failing to follow instructions by using pictures that aren't related to the text. The layout appears crowded because of the usage of stretched photos. Absence of sketches, making it difficult to select the ideal arrangement. The headline and sub-headline are too close to one another. It is advisable to just have the headlines the same size because separating them breaks the reading flow due to the size difference. Output needs to be in black and white.

                            General Feedback: Many of the mistakes we have in common are the distance between the headline and sub-headline, the type size is not appropriate and there are those who use images containing text which breaks the focus.


                        back to top


                        REFLECTIONS

                        Experience

                        In this module I learned the basics of typography. To be honest, I don't really know much about typography and only found out when a motion graphics video appeared on my YouTube homepage, so I think learning this assignment is quite fun. However, I just found out that there are many rules for producing good typography so I was a bit surprised and had a little difficulty. Nevertheless, I am happy because I can learn new applications such as Illustrator and InDesign. I don't have too much difficulty learning Adobe applications because I have used Photoshop, After Effects, Premiere Pro, and Media Encoder. 

                        In my opinion, the most difficult part is the type expression section because it is quite difficult for me to produce new work when the whole class also uses the same words so there could be similar ideas. Despite the fact that I found doing this assignment is difficult, I enjoyed doing the process because I always learned something new every week.

                        Observation

                        I like observing the results of assignment from upperclassmen and other people in my class, looking at them I feel inspired and want to know how they analyzing the knowledge they receive and applying it to their assignments. 

                        I also noticed how important proper composition is in the various typography examples I saw on the internet.

                        Findings

                        Throughout this assignment, I realized that I wasn't paying enough attention in doing the assignment. I should have done this with the mindset of how I will face my clients in the future and not think this is just a task, and that i finished it. Through Mr Vinod's feedback I realized that although I enjoyed doing the task, I was just treating it as a normal task and was unable to see the bigger picture. I learned many things to improve myself and try to be better in the future.

                        I discovered that typography has many rules and is fun to do. Even though I feel this field is not my expertise, I think it is important to study typography and to know the history behind typography to observe the effects of various evolutions in the development of human thought patterns over the years.


                        back to top


                        FURTHER READINGS

                        To help me understand typography further, I found important essences that I can apply in each task that I got from the 2 books that I read.

                        Fig 7.1 A Type Primer, Second Edition, John Kane (2020)

                        Book cite: Kane, J. (2020). A Type Primer, 2nd Edition. Laurence King Publishing


                        Fig 7.2 Comparing typefaces (Page 12) and Reinforcing meaning (Page 64)

                        These two contents help me to sort out and decide what kind of results are expected from the Task 1 Type Expression assignment.

                        The typefaces comparing helps me decide which one is the suitable one for my works, in the end I'm able to match certain word to the expression thanks to the guides.

                        The reinforcing meaning helps me to see this assignment in a new light. I'm able to understand a good way to express the words and the correct composition in order to make an impact. Even though in the end, I'm not able to fully express what I've learned and observed, nevertheless, I'm grateful now that I have a more understanding of this specific subject.


                        Fig 7.3 Typographic Systems of Design 1st Edition, Kimberly Elam (2007)

                        Book cite: Elam, K. (2007). Typographic Systems of Design 1st Edition. Princeton Architectural Press


                        Fig 7.4 Constraints and Options (Page 11) and Multicolumn Grids (Page 74)

                        These specific contents help me to understand how to do Task 1 Text Formatting better. I still have a bit of confusion about line breaks and leading, and what the need is and the correct way to use them. In the end, by reading and referencing the pictures, I'm able to apply them in my works.

                        Comments

                        Popular Posts