Typography: Task 1

30/Mar/2022 - 28/Apr/2022 (Week 1 - Week 5)
Kim MinJoon (0353248)
Bachelor of Design (Honours) in Creative Media / GCD60104 / Taylor's University
Task 1: Exercise - Type Expression

LECTURES

Week 1

For the first week, Mr. Vinod gave us a module briefing, and showed us around the whole system that works in the typography class. He explained the usage of the social media page Facebook and how to navigate to our own module files and guidelines. He then informed us about the creation of our own E-portfolio, through Blogger.

We were told to update our blogger each week, making changes to the lectures, exercises, feedbacks and reflections whenever was possible. While the instructions were MI (Module Information), we needed to embed the file from the google drives and make it public in order for the viewer to see the file. He walked us through for us to understand what we needed to know before going deeper into the module.

I was one of the people who already had their blogger set up because of the module of design principles in my first semester. The other people who didn't have it set up, were given some time to start setting up their blogger accounts and websites by watching a pre-recorded YouTube video that was made by Mr. Vinod himself.

When Mr. Vinod was talking about some of his works, I understood that we use and type a font that was made by someone. It is not a centralized subject and that there are countless numbers of fonts out in the world. Mr. Vinod created a font when he was younger and when he thought he made a pretty decent font, there was a similar font that had already been made years back.

Then, with our Blogger set up, he gave us a self introduction and a short life story of what he did in the past and how he came to be a teacher.

Week 2

In the second week, Mr. Vinod has given the feedback to the class that has finished the task of drawing sketches of the chosen 3 words with the one compulsory word.

He taught us how to use some tools in illustrator as he was giving us feedback one by one. After the feedback session, he told us to have the rest of the time to start digitizing the sketches into computer software such as Adobe Illustrator.

He has told us to start animation only when you have finished the 4 digitalized words and that we need to research on how we want to animate the words according to the meaning it has.

Week 3

Mr Vinod started off the class by reviewing the collected designs and concepts on the illustrator template that he gave us. He gave us feedbacks and what we could touch up on to get started on the animation on the gifs of our designs.

With the review session done, he told the class to watch a pre recorded session of him explaining the steps on how to start making frames in illustrator.

Figure 1.1: Illustrator demonstration (13.04.2022)

After making each frame, we needed to export the file onto photoshop and make a timeline out of the frames that we made.

These frames were required to be smooth and followed the principles of the meaning of the word. So if the word was squeeze, the word was needed to be somehow squeezed to give the effect of the animation.

Figure 1.2: Photoshop demonstration (13.04.2022)

Week 4

InDesign was getting implemented into the mix of the work we had to do for week 4. We were suggested to watch the pre-recorded lecture sessions on YouTube before we got into the start of the work to get a better understanding of what we were trying to do for exercise 2.

We got into the program Adobe InDesign, as we try to format the text. Mr. Vinod explained it thoroughly in the pre-recorded lectures, and the process to get the settings and the limit of values were done smoothly. He has given us around an hour or so to finish the task of first listing our names in a vertical column respect to the fonts and typefaces that went along with it.

After, we were told to finish our text formatting so that he can tell us what to do and what not to do.

LECTURE NOTES

Week 1

Early Letterform Development: Phoenician to Roman

The video information came from Kane, J (2002), A Type Primer.

Facts taken should be taken in with a pinch of salt.

Typography has a history just like everything else. early form of typography came from roman letterings. It was presented by using sharp object by carving into a rock or stone. It came with a form of simple combination of straight lines and circles. The instruments or the surface that were written on, impacts the unique type of form of letters.

Figure 2.1: Early form of Stone Writing (04.04.2022)

The Greeks has changed the style or the direction of writing. Letters came from right to left, left to right, and was so called 'boustrophedon'. It was a unique type of reading and writing as it went from left to right, then starting from the second line, it went from right to left. with this, they changed the orientation of the letter forms.

Figure 2.2: Reading Style (04.04.2022)

This meant that the Greeks needed to be fluent in both normal and flipped lettered words.

Phenbation letter A goes from the left to the right which is the visible development of the letter. So around a 900 years later it is what we have today on the right which is more refined.

Hand Script from 3rd - 10th Century C.E.

Square capitals were the written version that can be found in Roman monuments.

A compressed version of square capitals / rustic capitals allowed for the words to be compressed and be put in twice as much words in the sheet of parchment.

Both Square and rustic capitals were used for documents of some intended performance. It started to be implemented as a cursive lettering then it started as what we call lowercase letterforms now.

Figure 2.3: Square Capitals (04.04.2022)

Figure 2.4: Rustic Capitals (04.04.2022)

Figure 2.5: Both being implemented (04.04.2022)

Uncials were 'small letters' and were the meaning of 'twelfth of anything' in Latin.

Figure 2.6: Further form of cursive hand (04.04.2022)

Half-Uncials mark the formal beginning of lowercase letterforms.

Blackletter to Gutenberg's type

In northern Europe, a condensed strongly vertical letterform called Blackletter gained popularity. Then in South, a rounder version gained popularity, called 'Rotunda'.

Figure 2.7: Blackletter (04.04.2022)

Glutenberg's skills included engineering, metalsmithing and chemistry.

Text type classification

Figure 2.8: 1450 Blackletter

Figure 2.9: 1475 Oldstyle

Figure 2.10: 1500 Italic

Figure 2.11: 1550 Script

Figure 2.12: 1750 Modern

Figure 2.13: 1775 Modern

Figure 2.14: 1825 Square Serif / Slab Serif

Figure 2.15: 1990 Serif / Sans Serif

WEEK 2

Basic / Describing letterforms

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'.

Figure 3.1: Baseline, Median, X-Height (06.04.2022)

Stroke - Any line that defines a letter form.

Figure 3.2: Stroke (06.04.2022)

Apex / Vertex - Point created by joining 2 diagonal stems.

Figure 3.3: Apex / Vertex (06.04.2022)

Arm - Short strokes off the stem of the letterform either horizontal (E, F ,L) or inclined upwards (K, Y)

Figure 3.4: Arm (06.04.2022)

Ascender - The portion of the stem of a lowercase letterform that projects above the median.

Figure 3.5: Ascender (06.04.2022)

Barb - The half-serif finish on some curved stroke.

Figure 3.6: Barb (06.04.2022)

Beak - The hald-serif finish on some horizontal arms.

Figure 3.7: Beak (06.04.2022)

Bracket - The transition between the serif and the stem.

Figure 3.8: Bracket (06.04.2022)

Cross Stroke - The horizontal stroke in a letterform that joins two stems together.

Figure 3.9: Cross Stroke (06.04.2022)

Crotch - The interior space where two strokes meet.

Figure 3.10: Crotch (06.04.2022)

Ear - The stroke extending out from the main stem or body of the letter form.

Figure 3.11: Ear (06.04.2022)

Em/en - Referring to the width of an uppercase M, and em is the distance equal to the size of the typeface.

Finial - The rounded non-serif terminal to a stroke.

Figure 3.12: Finial (06.04.2022)

Ligature - The character formed by the combination of two or more letterforms.

Figure 3.13: Ligature (06.04.2022)

Serif - The right-angled or oblique foot at the end of the stroke.

Figure 3.14: Serif (06.04.2022)

Spine - The curved stem of the S.

Figure 3.15: Spine (06.04.2022)

Spur - The extension the articulates the junction of the curved and rectilinear stroke.

Figure 3.16: Spur (06.04.2022)

Stress - The orientation of the letterform, indicated by the thin stroke in round forms.

Figure 3.17: Stress (06.04.2022)

Swash - The flourish that extends the stroke of the letterform.

Figure 3.18: Swash (06.04.2022)

Terminal - The self-contained finish of a stroke without a serif. They may be flat, flared, acute, grave, concave, convex, or rounded.

Figure 3.19: Terminal (06.04.2022)

Basic / Font

Uppercase - Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and the o/e ligatures.

Figure 3.20: Uppercase (06.04.2022)

Lowercase - Lowercase letters include the same characters as uppercase.

Figure 3.21: Lowercase (06.04.2022)

Small Capitals - Uppercase capitals letterforms draws to the x-height of the typeface. Small caps are found in serif fonts as sometimes often called expert set.

Uppercase Numerals - called lining figures, they are the same height as uppercase letters, and all are set to the same kerning width.

Lowercase Numerals - Also known as old style figures or text figures, same x-height with ascenders and descenders.

Italic - Fifteenth century Italian cursive handwriting.

Punctuation, Miscellaneous Characters - they can change from typeface to typeface. Important to be acquainted with all the characters available in a typeface before choosing appropriate type for a particular job.

Ornaments - Used as flourishes in invitations or certificates. Only a few traditional or classical typefaces contain ornamental fonts.

Basic / Describing typefaces

Roman - Uppercase forms are derived from inscriptions of Roman monuments.

Figure 3.22: Roman (07.04.2022)

Italic - Oblique conversely are based on roman form of typefaces.

Figure 3.23: Italic (07.04.2022)

Boldface - Characterized by a thicker stroke than a roman form. Depending on stroke widths, can be called 'semibold', 'medium', 'Black', 'Extra bold' or super.

Light - A lighter stroke than roman form. called 'thin'.

Condense - a version of the roman form but extremely condense and they are often called 'compressed'.

Extended - An extended version of the roman font.

Figure 3.24: categories of Typefaces (07.04.2022)

Basic / Comparing Typefaces

Figure 3.25: 10 Typefaces (07.04.2022)

The typefaces above will be given out to be used and they represent around 500 years of design. All the people, men and women who rendered these typefaces sought of 2 goals; easy readability and an appropriate expression of contemporary esthetics.

Week 3

Text / Tracking: Kerning and Letterspacing

The term 'Kerning' refers to the automatic adjustment of space between letters. It is mistaken as 'letterspacing' sometimes. 'letterspacing' is to add space between letters, and the addition and the removal of space in a word or sentence is called 'tracking'.

Figure 4.1: Kerning (13.04.2022)

Figure 4.2: Tracking (13.04.2022)

Uppercase letters are able to stand on their own, while lowercase letters requires the counter form created between letters.

Figure 4.3: Tracking (13.04.2022)

Text / Formatting text

Flush left - Format that mirrors asymmetrical experience of handwriting. lines starts on the same point but ends where the word on the line ends. Spaces between words are consistently the same.

Figure 4.4: Flush Left (13.04.2022)

Centered - format that imposes symmetry in the text. giving both sides of the text equal value and weight. transforms fields of text into shapes, adding a pictorial quality to them.

Figure 4.5: Centered (13.04.2022)

Flush right - Format where the text is placed on the opposite side of where it starts. Useful in situations where the relationship between text and image might be ambiguous.

Figure 4.6: Flush Right (13.04.2022)

Justified - Like centering, this imposes symmetrical shape to the text. It is done by reducing spaces between spaces of words, and sometimes letters. This can produce 'rivers' where white lines are visible throughout the text.

Figure 4.7: Justified (13.04.2022)

Text / Texture

Figure 4.8: Texture (13.04.2022)

Figure 4.9: Adobe Caslon & Baskerville (13.04.2022)

Figure 4.10: Bembo & Adobe Garamond Pro (13.04.2022)

Figure 4.11: Bauer Bodoni & Adobe Jenson Pro (13.04.2022)

Text / Leading and Line Length

Type size - Text type should be large enough to be read easily at arms length. (like holding a book)

Leading - Text that is set tightly encourages vertical eye movement, therefore the reader losing their place. Type that is too lose can create distractions to the reader as well.

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. A good rule of thumb is to keep line length between 55-65.

Text / Type Specimen Book

Shows samples of typefaces in various sizes. A type specimen book is to provide an accurate reference for type, type size, type leading, type line length and etc.

Figure 4.12: Type specimen Sheet (13.04.2022)

Often Useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and the ascenders on the line below.

Text / Indicating Paragraphs

There are several ways to indicate paragraphs. The first example is a 'Pilcrow'. A holdover from medieval manuscripts seldom use today.

Figure 4.13: Pilcrow (13.04.2022)

Next is an example of a 'line space' (leading) between the paragraphs. So if the line space is 12 pts, then the paragraph space will be 12 pts as well.

Figure 4.14: Line Space (13.04.2022)

Figure 4.15: Line Space vs Leading (13.04.2022)

Figure 4.16: Indentation (13.04.2022)

Figure 4.17: Extended Paragraphs (13.04.2022)

Text / Widows and 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 a new column

Figure 4.18: Widows and Orphans (13.04.2022)

Both widows and orphans are considered serious gaffes. Widows are sometimes forgiving but orphan are unpardonable.

Solution is to rebreak the line endings throughout the paragraph so that the last line of any paragraph is not noticeably short.

Text / Highlighting Text

There are different types to highlighting texts. Different kinds of emphasis require different kinds of contrast.

Figure 4.19: Highlighting Texts (typefaces) (13.04.2022)

Figure 4.20: Highlighting Texts (colors) (13.04.2022)

Figure 4.21: Highlighting Texts (background color) (13.04.2022)

Opposing to indenting, sometimes, it is better or necessary to place certain typographic elements outside the left margin to ensure strong reading axis.

Figure 4.22: Highlighting Texts (placing typographic elements) (13.04.2022)

Quotation marks, like bullets, creates a clear indent, breaking the left reading axis. This can be shown from the comparison below.

Figure 4.23: Highlighting Texts (Quotation) (13.04.2022)

Text / Headline Within Text

A head indicates a clear break between the topics within a section.

Figure 4.24: A head examples (13.04.2022)

B heads indicate a new supporting argument or example for the topic at hand. should not interrupt the text as strongly as A head does.

Figure 4.25: B head examples (13.04.2022)

C heads, highlights specific facets of material within B head texts. They are not interruptive as the other 2 to the text, but not commonly used.

Figure 4.26: C head examples (13.04.2022)

Putting together a sequence of subheads = hierarchy. Although Hierarchy cannot be described very well through words, its possibilities are virtually limitless.

Figure 4.27: C head examples (13.04.2022)

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 .

Figure 4.28: Cross alignment #1 (13.04.2022)

Figure 4.29: Cross alignment #2 (13.04.2022)

Week 5

Letters / Understanding Letterforms

Figure below looks like the A is symmetrical but in fact, it is not. It is visible that each stroke has a different weight from each other. Also, each bracket connecting the serif to the stem has a unique arc.

Figure 5.1: Baskerville font (18.04.2022)

the uppercase letter forms may appear symmetrical, but when seen close-up, the width of the left slope is thinner than the right stroke. This shows careful and meticulous care that went into designing the letterform.

Figure 5.2: Univers font (18.04.2022)

The complexity of each individual letterform is neatly presented by examining the lowercase 'a' of 2 seemingly similar sans-serif typefaces - Helvetica and Univers.

Figure 5.3: Helvetica and Univers font (18.04.2022)

Letters / Maintaining x-height

the x-height is generally described as the size of the lowercase letterforms. However, curved strokes such as in 's', must rise above the median / sink below the baseline in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Figure 5.1: Maintaining x-height (18.04.2022)

Letters / Form / Counterform

recognizing the counterform of the letterform is just as important. When letters are joined to form words the counterform includes the spaces between them.

Figure 5.4: Counterform (18.04.2022)

One of the most rewarding way to understanding the form and the counter is to examine them in close detail.

Letters / Contrast

Contrast is one of the most powerful dynamic in design and is very important when applying directly to typography.

Week 6

Typography / Different Medium

Print type vs screen type

Type for print

A good typeface for print - Caslon, Garamond, Baskerville.

They are the most common typefaces used for print because of their characteristics to which they are elegant, and intellectual while being highly readable when even set at a small font size.

They are versatile, easy-to-digest classic typeface that has neutrality and versatility that makes typesetting with it a breeze.

Figure 6.1: Print Type (25.04.2022)

Type for screen

Typefaces that are used for the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height ( or reduced ascenders and descenders ), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs.

Another adjustment that can be made for typefaces for smaller sizes, is to have more open spacing. This improves character recognition and readability digitally.

Hyperactive link / hyperlink

A word, phrase, or image that you can click on to jump to a document or a new section within the current document. They are found in nearly all web pages, allowing users to click their way from page to another.

Font Size for screen

The font size which is imbedded onto books are usually 10 pts. But if you'd want to read them from arms length, you would need them to be at least 12 pts. Which is almost equivalent to 16 pixels on screen.

System Fonts for Screen / Web safe fonts

Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino and Garamond is some of the fonts that can be used in both platforms.

Pixel differential between Devices

Text that is seen in digital devices alters as the resolution and the size changes.

Figure 6.2: Pixel Difference (25.04.2022)

Static vs Motion

Static typography has minimal characteristics when expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expression potential of dynamic properties.

Motion Typography allows typographers to 'dramatize' type to make them become 'fluid' and 'kinetic'. This makes them bring to life through animation. This type is set onto music videos and advertisements, following the beat and the rhythm.

INSTRUCTIONS

Task 1: Exercise - Type Expression

Week 1

We were given out words to choose from to recreate and design an expression to make the words give a meaning to why it is designed in such a way. We could give give it a twist, change the boldness, thickness, length, size and manipulate the proportions to make the words have a visual explanation with its meaning.

The words that I chose was Explode, Pop, and Explore. The word Cough was a compulsory choice where it was needed to be done by everyone.

There was an illustrator template that I could have worked with, but with no illustrator on my laptop, I decided to draw it free-hand on a blank canvas in photoshop.

Figure 7.1: Sketch of 4 words (05.04.2022)

Week 2

With our sketches done and shown to Mr Vinod, we were told to digitalize these in the software illustrator by the third week. I didn't really have any knowledge on the software, so I tried my best with how I created the works. I watched some of Mr Vinod's short illustrations and demonstrations during the classes and I took the time to get used to the functions as much as possible. Even after quite a while, I still didn't mange to get it perfect but I got some results on the first attempt on the cough.

Figure 7.2: First Attempt (06.04.2022)

Mr Vinod has told us that it is alright to use the pen tool to draw out harder parts such as the tongue on the C in the word 'Cough' as there were no objects that could take the form as easily as a pen tool. I drew in some more lines to make the other letters frightened, by the cough the C makes, and added some slanted effects to make it really feel like they are scared.

Figure 7.3: Explode Attempt (06.04.2022)

Before I continued on with the words of Cough, I decided to take on the other words first so that I can get a better feeling of the tools and functions. I drew in the word Explode and I was not too proud of what I got for the design as it seemed way too simple and uncreative. So I tried stretching out the letters a little bit more so that they seemed to be flying outwards as a individual letter and not as a whole.

Figure 7.4: Pop attempt (06.04.2022)

As I progressed through my digitalization of my words, I tried out the concept of the 'Pop' by drawing out some lines to make the O convey a shape of a bottle cap. I wanted to make the cap have a motion to it so I made the second P the bottle that gets opened and the O is flying off the bottle. I couldn't quite make the second P a bottle shape with the actual letter, so I drew in lines to represent the letter directly (which went against the rules).

Figure 7.5: Grow attempt (06.04.2022)

This was the first attempt of the word grow, wanting to make a centered G, then expanding outwards to make the whole words, letter by letter. The W however, was not really quite getting into the shape I wanted, so I altered it to make the protruding ends upwards to fill up the gaps as well in the canvas.

Figure 7.6: Final attempt (06.04.2022)

Week 3

In week 3, I showed Mr. Vinod the designs that I had for all of the 4 words in the review session early in the morning. He reviewed all the peoples' designs in the Facebook post's comments. When he got to mine, he didn't quite like how it turned out so I needed to renew the designs following his instructions.

Figure 8.1: Final Attempt 2 (13.04.2022)

After amendments made into the final attempt, I continued on with the animation process.

I thought of an animation that is best suited for the words and I decided to go with the word 'POP' since it felt like it could really be produced with a simple animation but yet smooth and satisfying.

I started off with a reference of the actual word's design in the first frame then made my way to the other frames by drawing the transition bit by bit in the new canvas, following Mr. Vinod's YouTube Video.

Figure 8.2: Illustrator frames (Explode) (13.04.2022)

After the frames were made and drawn out to have that same effect of the expression in the sketch, it was exported from Adobe Illustrator to PNG files, then was imported as a whole to photoshop. With all the images in a new layer, I created a timeline to make it into an animation.

Figure 8.3: Photoshop Timeframe (POP) (13.04.2022)

I created 2 separate gifs or animations for 2 different words, 'POP' and 'Explode'. The Explode was made the second time, but I didn't like how it turned out since there were way too much randomness and it had to get to a specific spot to fit the original design. So the POP was for me the better option.

Figure 8.4: POP first attempt (13.04.2022)

Figure 8.5: EXPLODE attempt (13.04.2022)

As Mr. Vinod told me to try to make the POP not be buoyant and be bouncy, I tried to make a gif that didn't that that effect but rather come out to the person.

Figure 8.6: POP second attempt (13.04.2022)

For this attempt, I used the same files as the first POP attempt but cut out the bouncing part at the end and elongated the frame of the fully bloomed word to give it a second to actually tell what has happened in the gif.

The second attempt seemed a lot more clean and less disturbing but also quite minimalistic. I don't know if it should have other details to make it more enlightening but I believe that it shows the expression that it needs to show and I love that simplicity of it.

Task 1: Exercise 2 - Formatting texts

Week 4

For this week, we were required to start using the program Adobe InDesign to start manipulating and formatting texts.

In the lecture, Mr. Vinod has mentioned of things to look out for when doing the exercise, which are;

- Font Size (8-12)

- Line Length (55-65 / 50-60 Characters)

- Text Leading (2, 2.5, 3 points larger than font size)

- Ragging (Left alignment) / Rivers (Left Justification)

- Cross alignment

- No Widows / Orphans

We started with using the ten typefaces that was given out and as we watched through the pre-recorded lecture, we typed in our names 10 times following the typefaces.

Figure 9.1: Progression 1 (20.04.2022)

I first typed in the fonts' names to navigate easily then typed in my name afterwards. It was an easier process since I could change the font of my name a lot easier with the eyedropper tool than to change them manually.

Figure 9.2: Progression 2 (20.04.2022)

After, we needed to change adjust the kerning and tracking to make sure the text looked neat and tidy. This was to remove or adjust the spaces between the letters that seemed off or not even placed with the other letters.

Figure 9.3: Progression 3 (20.04.2022)

Figure 9.4a: Progression 4 Without Kerning & Tracing (20.04.2022)

Figure 9.4b: Progression 4 With Kerning & Tracing (20.04.2022)

There isn't too much to be seen but there is slight changes to between the 2 and it is visible to be seen that the second image is slightly more compact than the first. It is due to the adjustment of spaces between the letters.

By familiarizing with InDesign with the exercise, we proceeded to the actual exercise to format the given text or article about 'Helvetica'.

Figure 9.5: Draft 1 (20.04.2022)

Font(s): Univers LT Std (Roman and Condensed Oblique)

Font size: Heading (30 pt), Subheading (18pt), Body (10pt)

Leading: 11pt

Characters / line: ~50

Columns: 4

Alignment: left

Margins: Top (12.7mm), Left (12.7mm), Right (12.7mm), Bottom (50mm)

Gutter: 4.233mm

Paragraph Spacing: 11 pts / 3.881 mm

Figure 9.6: Draft 2 (22.04.2022)

Font(s): Futura Std (Light and light oblique), Univers LT Std (Roman)

Font size: Heading (30 pt), Subheading (18pt), Body (10pt)

Leading: 11pt

Characters / line: ~55

Columns: 4

Alignment: left

Margins: Top (12.7mm), Left (12.7mm), Right (12.7mm), Bottom (50mm)

Gutter: 4.233mm

Paragraph Spacing: 11 pts / 3.881 mm

Figure 9.7: Draft 3 (22.04.2022)

Font(s): Futura Std (Light and light oblique), Univers LT Std (Roman)

Font size: Heading (30 pt), Subheading (18pt), Body (10pt)

Columns: 4

Alignment: left

Margins: Top (12.7mm), Left (12.7mm), Right (12.7mm), Bottom (50mm)

Gutter: 4.233mm

Paragraph Spacing: 11 pts / 3.881 mm

Figure 9.8: Draft 4 (22.04.2022)

Font(s): ITC New Baskerville Std (Roman), Futura Std (Light)

Font size: Heading (30 pt), Subheading (18pt), Body (10pt)

Leading: 11pt

Characters / line: ~60

Columns: 4

Alignment: left

Margins: Top (12.7mm), Left (12.7mm), Right (12.7mm), Bottom (50mm)

Gutter: 4.233mm

Paragraph Spacing: 11 pts / 3.881 mm

By making drafts and small changes to see which suits to be the final design it was easy to indicate through.

As I do like the 4th draft as it has a better visualization of the topic of Helvetica I still liked the 3rd draft of arrangements of texts so I tried combining those 2 to make the final draft.

Final Text Formatting

Figure 9.9: Before edits to text (24.04.2022)

By the look of the draft, the texts are uneven and does not really come handy when it comes to reading them, so I altered the kerning between the texts to ensure flexible visibility and increase readability.

Figure 9.10: Difference in Texts after kerning change (24.04.22)

Since many of the paragraphs were ragged and sticking outwards, adjustments were made as shown to smooth out the right-end of the paragraphs.

Figure 9.11: Final Text Formatting (24.04.2022)

Font(s): ITC New Baskerville Std (Roman), Futura Std (Light)

Font size: Heading (30 pt), Subheading (18pt), Body (9pt)

Leading: 11pt

Characters / line: ~65

Columns: 4

Alignment: left

Margins: Top (12.7mm), Left (12.7mm), Right (12.7mm), Bottom (50mm)

Gutter: 4.233mm

Paragraph Spacing: 11 pts / 3.881 mm

FEEDBACK

Week 1

Week 2

During the second week, Mr Vinod has reviewed our sketches of the design of the required task that was due that day (06/04/2022). He especially focused on how to illustrate the words and what not to use. He told the class to not use too much graphic elements to really bring out the letters than the whole added on design.

He gave a feed back on the sketch work that I did and he told me to go for the first 'pop'. He did not know what it was at first but after telling him that it was a soda pop, he understood that the 'o' in the word was indicating a bottle cap immediately.

Even though I put in effort for the first 2 in the category of 'Explode', Mr Vinod accepted the simplest one, the 3rd 'Explode'.. :(

He told me to have some more designs and sketches into the 'Explore' category as it seemed too uncertain of what it was trying to illustrate.

Week 3

After showing him the work of the final attempt of the template, he noticed some mistakes that I had put up on the words and he wasn't pleased with the results. He told me that I hadn't followed the instructions on not using illustrations into the designs. So I redid them in the same class and showed it to him, which he liked better than the first one.

After the reworked version, I made the animation for the word 'POP'. and he told me that he liked it, but I could try to make the word pop and not have this buoyancy to it and just let it come out smoothly.

Week 4

For week 4, we were told as a group of the class, to start finalizing the e-portfolios as they were due the next week.

We also needed to get started on keeping up with documenting our progress throughout the semester as that will be a heavy workload if delayed. This also improves efficiency and accuracy in the e-portfolio as they is more time to work on it.

Week 5

For the last review of the blog, I was told to make sure I;

- Complete the lecture notes from the pre-recorded lecture

- have the leading size on 2 - 3. So need to change the exercise 2.

- Need to post the jpg as a 300 dpi.

- Have the further readings done.

- have the correct requirements in the format list (margins and such).

- Have the pdf of the margins and grids on exercise 2.

REFLECTION

Experience

After using blogger for the first semester, I got a bit of knowledge for the website. But still with imperfections, I hope I could learn a bit more about it and get through the course well.

When we were needed to make designs for the different words that we have chosen and that really helped bring out my imaginations on how to bring the words to have a visual effect.

From the concept designs, we made them digitalized through illustrator and I think it was a helpful step to take to start learning the program and although it was quite tough leaning a new program in such a short week, I think it was pretty fun to do.

Having to use another adobe program and having absolute no experience of it was really difficult to progress through. But it was a good try out and was a good exercise to familiarize myself with it.

Observations

I found the class to be tense in some way, maybe it was because I wasn't familiar with the whole typography stuff, and I never really put in too much thought on the subject itself but I believe this c an help me broaden my mind a little bit.

I tried on the sketches of the word expressions and I realized that I wasn't thinking too open-mindedly. I was too busy on thinking of how I can familiarize myself to the simple sketches and work around that instead of trying out newer versions of a totally unrelated wording.

I found that Adobe Illustrator is pretty much a vector image drawing program which is usually for logo designs and such. I was more familiarized with Photoshop then, so it was quite confusing to not draw in ragged shapes. Illustrations were also not acceptable in Mr. Vinod's terms so when I did that in one of my digital artwork, it did not go so well..

I found myself stuck when it came to formatting the text and getting the customizations right in the preferences, especially with the grid options. It didn't work a few times so as I tried different options it worked eventually.

Findings

I found that typography isn't just about fonts or typefaces that completes a word or sentences but something that is unique in a particular way and has a very important role in the subject of language. Typography is found and used everyday in our world without being noticed most of the times.

Although the designs were fun to think about, a lot of the designs were not very original as they already have the concept of being the imagination of majority of the people when they hear the word directly.

The fact that adobe programs are compatible with each other made me very happy as it was very easy to navigate through. The making of the gif was quite new to me but it was sort of like a stop motion video so with that in mind, it went better than I expected.

Although confusing at times, it was really easy to navigate and get the exercise done all thanks to online searching and Mr. Vinod's prerecorded lectures.