Typography Task 1 Exercises

Blogspot! :)

---

2023-09-26 -  2023-10-24 (Week 1 - Week 5)

Jolin Ceria [Student ID 0363784]

Bachelor of Design and Creative Media in Taylor's University

Typography Task 1 (Type Expression and Text Formatting)

---

Lecture Notes :D

Lecture 1 (2023-09-26)

Face-to-face lecture:

First week, meaning there is not much to note as far as I'm aware, although I have to go off my memory since there was unfortunately no audio from Ms. Hsin's recording of the lecture. It's not the end of the world since it's only the first week after all, but still a bummer. :(

As I re-checked Microsoft Teams I realized it slipped my mind that I could have watched Mr. Vinod's video, oops.

In this lecture, Ms. Hsin and Mr. Vinod gave us a rundown of what to expect from this module, from what we are learning for this module, how our work was graded, what fonts to use for this module, down to the effects of attendance and such. We also set up our e-portfolios during this lecture. Since Mr. Vinod had posted a video containing instructions on setting them up prior to this, we were to start setting up our blogs during this lecture, re-watching said videos if needed.

[Typo_0_Introduction]

In this video lecture, Mr. Vinod describes the concept of typography itself, as well as how typography is present in our day to day life. 

Typography has always been a pivotal part of our lives, dating back to 500 years ago, as calligraphy, described as the practice of writing with a deliberate and artful style. Calligraphy  eventually evolving into lettering, which is described as the art of drawing letters instead of writing them as an art form, and eventually evolving into typography. Today, typography has evolved into something that can be found inherently everywhere in our day to day life, even when we don't realize it, be it animations, movie titles, website and app designs, building and street signs, labels, books, posters, etc., and has evolved into something that everybody does at present time.

Typography as a general concept is the process of creating letters, typefaces and type families using geometrical shapes, although it could also be described as:

→ The style and appearance of printed matter (Oxford)
→ The art and technique of arranging type to make written language legible, readable and appealing when displayed (Wikipedia)

This type arrangement involves multiple steps being:

→ Selecting typefaces
→ Point size
→ Line length
→ Leading (Line spacing)
→ Tracking (The space between every character within a word), and

→ Kerning (The space between specific individual characters by themselves)

The difference between tracking and kerning is that tracking is uniform, so every letter is spaced out equally to provide a good visual balance; Whilst for kerning, the amount of space between every letter is different depending on the type of character used and is used for the purpose of making every character in text legible.

Fig 1.1 Leading v.s. Tracking v.s. Kerning

With that said, it is important to differentiate fonts and typefaces, as those are terms in the typography world commonly used interchangeably.   
→ Typeface: Refers to the entire family of fonts/weights that share similar characteristics/styles. Some examples include Times New Roman, Arial, Montserrat, Bebas Neue, etc.
→ Font: Refers to the individual weight within a typeface. The most common font types are Regular (Or referred to as Book in Serif typefaces) Bold and Italicized fonts, although some typefaces may include more such as condensed, light, obliques, smallcaps, etc.

[Typo_1_Development]

Early letterform development: Phoenician to Roman

Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. At their core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required. 

Fig 1.2 4th century B.C.E. Phoenicians votive stele Carthage  

Fig 1.3  Evolution from Phoenician letter.

Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style 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.

Fig 1.4 Boustrophedon reading style

Fig 1.5 Stone Engraving

Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them. Certain qualities of their strokes—a change in weight from vertical to horizontal, a broadening of the stroke at start and finish—carried over into the carved letterforms.

Fig 1.6 Letterform Evolution (Left to right: Phoenician (1000 B.C.E.), Greek (900 B.C.E.), Roman (100 B.C.E.))

Hand script from 3rd – 10th century C.E.

Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes. The variety of stroke width was achieved by the reed pen held at an angle of approximately 60° off the perpendicular.

Fig 1.7 4th or 5th century: Square Capitals

A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen or brush was held at an angle of approximately 30° off the perpendicular. Although rustic capitals were faster and easier to, they were slightly harder to read due to their compressed nature.

Fig 1.8 Late 3rd – mid 4th century: Rustic capitals

Both square and rustic capitals were typically reserved for documents of some intended performance. Everyday transactions, however were typically written in cursive hand in which forms were simplified for speed. We can see here the beginning of what we refer to as lowercase letterforms.

Fig 1.9 4th century: Roman cursive

Uncials incorporated some aspects of the Roman cursive hand, especially in the shape of the A, D, E, H, M, U and Q. ‘Uncia’ is Latin for a twelfth of anything; as a result, some scholars think that uncials refer to letters that are one inch (one twelfth of foot) high. It might, however, be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals. 

Fig 1.10 4th – 5th century: Uncials

A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig 1.11 C. 500: Half-uncials

Charlemagne, the first unifier of Europe since the Romans, 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.12 C. 925: Caroline miniscule

Blackletter to Gutenberg’s type

After the dissolution of Charlemagne’s empire, regional variations upon Alcuin’s script came up. In northern 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’. The humanistic script in Italy is based on Alcuin’s miniscule.

 

Fig 1.13 C. 1300: Blackletter (Textura)

Gutenberg marshaled his skills to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform.

Fig 1.14 C. 1455: 42 line bible, Johann Gutenberg, Mainz. (Rotunda)

Text type classification

The dates of origin have been approximated to the nearest quarter century.

1450 Blackletter was the earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe. Some examples included Cloister Black and Goudy text

 

Fig 1.15 Blackletter text type 

For the 1475 Oldstyle text type, the forms were found to have evolved away from their calligraphic origins over 200 years, as they migrated across Europe, from Italy to England. This was based upon 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. Some examples include Bembo, Caslon, Dante, Garamond, Janson, Jenson and Palatino

Fig 1.16 Oldstyle text type 

The 1500 italics text type seems to echo contemporary Italian handwriting. They were originally more condensed and close-set so as to allow for more words per page. They used to be considered their own class of type, but then were soon cast to complement roman forms. Most, if not all text typefaces have been designed with accompanying italic forms dating as far back as the 16th century.

Fig 1.17 Italics text type

The 1550s script was once created as an attempt to replicate engraved calligraphic forms, and thus resembled calligraphic handwriting. It was considered inappropriate to use within lengthy text settings, but were widely welcomed in shorter applications. Forms now range from the formal and traditional to the casual and contemporary. Some examples of this text type include Kuenstler Srcipt, Mistral and Snell Roundhand. 

Fig 1.18 Script text type

The 1750s transitional text type was made as a refinement of oldstyle forms, and was achievable thanks to casting and printing. The main difference between the transitional and oldstyle text types was that for transitional text types, thick to thin relationships were exaggerated, and brackets were lightened. Examples of this include Baskerville, Bulmer, Century and Times Roman

Fig 1.19 Transitional text type

Much like the transitional text type, the 1775 modern text style represents a further rationalization of oldstyle letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes pushed further towards the extremes. English versions of this text type are also known as Scotch Romans and more closely resemble transitional forms. Some examples of this include Bell, Bodoni, Caledonia, Didot, and Walbaum.

Fig 1.20 Modern text type

The 1825 Square Serif / Slab Serif, which was originally referred to as the heavily bracketed serif, consists of little to no variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. The brackets were eventually dropped as this type style evolved. Examples of this included the Clarendon, Memphis, Rockwell and Serifa.

Fig 1.21 Slab Serif text type

Serifs were eventually eliminated altogether by the 1900 Sans Serif. Although the forms were first introduced by William Caslon IV in 1816, its use did not become wide-spread until the beginning of the the 20th century. Variation tended toward either humanist forms (Gill Sans) or rigidly geometric (Futura). Occasionally, strokes were flared to suggest the calligraphic origins of the form (Optima). Sans serif is also sometimes referred to as grotesque (from the German word grotesk) and Gothic. Examples of this include Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica , Meta, News Gothic, Optima, Syntax, Trade Gothic and Univers.

Fig 1.22 Sans Serif text type

Serifs were eventually re-implemented along with Sans Serif typefaces in approximately 1990. These typefaces often staged between the two.

Fig 1.23 Sans Serif/Serif text type

Lecture 2 (2023-10-3)

Most of our activity this week was receiving feedback from the lecturers. We were asked to take note of the feedback we have received, and some that applied to the others. Mr. Vinod has also posted instructional videos in regards to digitizing our type expressions.

[Typo_2_Text_P1]

Types of spacing

→ Tracking refers to theaddition and removal of space in a word or sentence
→ Kerning refers to the automatic adjustment of space between letters

Fig 1.24 The difference of kerning usage

Fig 1.25 Example of normal, tight and loose tracking with the Univers 55 typeface

Fig 1.26 A demonstration of the usage of normal and loose tracking

Fig 1.27 A demonstration of the usage of tight tracking

Types of text formatting

→ Flush left: Each line starts at the same point but ends wherever the last word on the line ends. 
→ Centered: Assigns equal value and weight to both ends of any line. It transforms fields of text into shapes and gives  a pictorial quality to material that is non-pictorial by nature.

→ Flush right: Places emphasis on the end of a line as opposed to its start.
→ Justify: Expands or Reduces spaces between words and letters to impose symmetry.

Fig 1.28 Example of text flushed left

Fig 1.29 Example of centered text

Fig 1.30 Example of text flushed to the right

Fig 1.31 Example of justified text

Texture

Typefaces with a relatively generous x-height (The height of the lowercase ‘x’ within a typeface) and/or relatively heavy stroke width produces a darker mass on the page than typeface with a smaller x-height and/or lighter strokes. This is considered a crucial, as sensitivity to the color differences are a part of creating a successful layout.

Fig 1.32 Anatomy of a typeface, which are the aspects of texture.

Things to consider within a layout:

→ 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; a reader can easily loose his or her place. 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. Extremely long or short lines lengths impairs reading.

Lecture 3 (2023-10-10)

[Typo_3_Text_P2]
Ways to indicate a paragraph

→ A Pilcrow (¶) is a holdover to separate paragraphs mainly used during the medieval era. It is considered mostly obsolete and seldom used today.

Fig 1.33 Usage of a pilcrow to separate paragraphs.

→ Leading or line space can also be used to separate paragraphs. The paragraph space will directly correlate to the amount of leading used, meaning a 12pt leading will mean a 12pt paragraph space and so on. This is done to ensure cross-alignment.

Fig 1.34 Usage of leading to separate paragraphs.

Fig 1.35 Leading vs. Line space

→ Indentation is the empty space at the beginning of a line to signal the start of a new paragraph. It is usually proportional to the size of the line spacing or the point size of your text.

Fig 1.36 The usage of indentation to indicate paragraphs. Notice how the first paragraph isn't indented.

→ Paragraphs can also be extended, although this may cause wide columns of text. There can be strong compositional or functional reasons for doing this.

Fig 1.37 Reverse indentations?

Things to look out for

→ Widows are short lines of type left alone at the end of a column of text. 

→ Orphans are short lines of type left alone at the start of a new column of text.

Both widows and orphans are considered serious gaffes in justified text. Flush right and ragged left text formats are somewhat more forgiving towards widows, but orphans remain unpardonable. 

The only solution to widows is to rebreak your line endings through out your paragraph to balance the line lengths.

Orphans, you might expect, require more care. One must be careful to make sure that no column of text starts with the last line of the preceding paragraph.

Fig 1.38 Widows and Orphans

Ways to highlight text

Text can be highlighted through italicizing or using bold fonts.

Fig 1.39 The usage of italics and bold text to highlight certain lines

One can also consider using different typefaces, but they must be careful to match the size of the different typeface to match with the rest of the text. Color can also be a way to highlight text

Fig 1.40 The usage of typefaces and colors to highlight text

Colorblocking can also be a way to ensure readability of text.

Fig 1.41 Colorblocking text to highlight it

Headings

Multiple types of headings can be used depending on importance, those being:

→ Type A indicating a clear break between topics. 
→ Type B being subordinates of type A headings, indicate supporting arguments within a topic.

→ Type C, the rarest type of headings, are intended to highlight specific facets of material within B head text

Fig 1.42 Demonstration on the usage of different types of headings, all in bold.

Lecture 4 (2023-10-17)

[TYPO_4_BASIC]

Basic terms in typography include:
→ 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’.
→ Stroke: Any line that defines the basic letterform

A good type family should have:
→ A complete set of upper and lowercase letters
→ Smallcaps
→ Upper and lowercase numericals
→ Italics
→ Punctuations

Types of type family styles:

→ Roman: The typical regular type family style. So called because the uppercase forms are derived from inscriptions of Roman monuments. A lighter version of the roman style is called the Book
→ Italics: A type style based on the fifteenth century Italian handwriting on which the forms are based.
→ Oblique: The slanted form of the roman type style.
→ Boldface: A heavier variation of the roman font. Can also consist of multiple variations such as semibold, medium, black, extrabold or super, and the poster variant for some fonts
→ Light: A lighter variation of the roman font. Extreme versions of this variant is referred to as Thin
→ Condensed: The horizontally squished version of the roman type style. Extreme versions of this variant is referred to as Compressed.
→ Extended: The horizontally stretched version of the roman type style.

Fig 1.43 Demonstration of the mentioned font styles

Comparing typefaces:

Typefaces should be compared based on their differences, not their similarities, from the x-height, line weight, stroke widths, and most importantly, the feeling

Fig 1.45 Comparison between 10 typefaces

Fig 1.46 The differences of lowercase a and uppercase r in each of the 10 typefaces

Lecture 5 (2023-10-24)

[TYPO_5_UNDERSTANDING]

Letterforms are extremely complex, and there are details that people may fail to notice, for example, symmetry (Or lack thereof), intentionally left by typographers. Take note of these two uppercase A's for example.

Fig 1.47 Baskerville stroke form. Note the two different stroke weights and different bracket arcs.

Fig 1.48 Univers stroke form. Note the different slope widths of the left and right sides.

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. Although they look similar in first glance, further inspection will give away some notable differences.

Fig 1.49 Differences between lowercase a characters between helvetica (left) and univers (right). The difference lies in the stems of the letterforms and how the bowls meet the stems

The x-height must also be maintained, but curved strokes (such as s and r) should either stay above the median or sink below the baseline to seem more consistent.

Fig 1.50 The demonstration of the curved strokes protruding the median or baseline, compared to the completely straight lowercase z

Take note of the counterform (The negative space outside of the letterforms) as well, as the way that it is handled will affect readability of each letterform.

Fig 1.51 Visual guide on counterforms and demonstration with the word 'scream'

One way to help understand them is by examining them in close detail. This is done to understand how the balance between the letterforms and counterforms, which helps with the process of letter-making.

Fig 1.52 Demonstration of examining the letters s with the helvetica black typeface and g with the new baskerville typeface. Note how the letter s manages to stay recognizable while the letter g loses it's identity due to the examination of individual elements.

Contrast, as one of the base principles of graphic design, is also important and can be directly applied to typography. It can create unique dynamics and produce variation within a text form.

Fig 1.53 The many ways of implementing contrast. From left to right and up to down: Light/Bold, Condensed/Extended, Organic or handwritten/Machine, Romans/Italics, Small/Large, Negative/Positive, Serif/Sans serif, Ornate/Simple and Red/blue

Instructions! :0

---

HTML stuff

Cool beanz

---

Exercise 1!

We were tasked to make an expression from four out of six given words of our choice, with those six words being:

• Bounce
• Chaos
• Crush
• Dive
• Float
• Spring

I have chosen the words Crush, Spring, Dive and Chaos for this exercise, although I initially wanted to do Float instead of Dive at first, I changed my mind and switched to Dive last minute. I did not use Bounce because it felt inherently way too similar to Spring.
After making said expressions, we were to choose one type expression to animate.

Phase 1: Sketching!

The timespan for this phase was week 1 - week 2. I created these sketches for the words I have chosen in Clip Studio Paint.  I will probably add more later on

Fig 2.1 Type Expression Sketches

Phase 2: Digitizing!

The timespan for this phase was week 2 - week 3. In accordance to the instructions we were given, I have digitized my text using the artboard file we were given. Following Ms. Hsin's feedback, I have chosen to digitize the following sketches:

Fig 2.2 A look at the sketches I have used

For Crush, I used the Futura Std typeface. I learned how to utilize the knife tool to create cracks within the text. I have also utilized the character properties to manipulate the text width and height to my liking.

Fig 2.3 Crush result

For Dive, I used the Gill Sans Std typeface. I decided to use the regular lowercase characters for the letter 'i' and used smallcaps for the rest of the word. This was mostly due to personal preference, as I preferred the look and how the letters look proportionately sized that way. I used the pen tool to create a motion line for the letter 'i' diving into the word for emphasis, lowering the opacity and using the width tool to make a sharp point for the motion line.

Fig 2.4 Dive result

For the word spring, I used the Serifa Std typeface and used smallcaps for the text. Spring was the easiest one to do in my opinion. I created outlines out of the typefaces to make them easier to individually modify, as opposed to using the character settings menu for the text. I have skewed and squished/stretched my text accordingly and tried to follow my sketch as much as possible.

 Fig 2.5 Spring result

For the word chaos, I once again used the Gill Sans Std typeface. This one is my personal favorite, although it took the most time, as it involved creating a lot of outlines, and even occasionally using individual letters to visualize a messy space. I made the word white with a black outline as a way to highlight the focus word. There were way too many objects used in this process... By the time I was done I counted at least ten objects, but it was necessary for the process so as to create the proper expressions.

 Fig 2.6 Chaos result

 Fig 2.7 Send help

This is the overall result of my digitization before receiving feedback, subject to change, as I do not see any of these as final, except for maybe dive, as it was already simple and concise enough: 

 

Fig 2.8 Type Expression - JPEG (10/9/2023)

Although I am pretty inexperienced when it comes to type expression, I feel like the overall results are not too shabby. My personal favorite out of all of these is Chaos, although Dive is a pretty close second. 

After receiving feedback, I was advised to use a different typeface for the word spring to better convey expression, as although it looked fine on it's own, a serif typeface was not the most optimal font to use. It was fine, though, as the only reason I decided to use the Serifa Std typeface was to try to use a variety of fonts, as I did not want to only stick to one font for this task. Ms. Hsin recommended using the Univers LT Std typeface, so I did, and also used a variety of font settings to emphasize the variety.

 
Fig 2.9 Spring post-feedback

I personally think this typeface looks better, but this could just be my personal bias towards non-serif typefaces as I almost always avoid using serif fonts and typefaces like a plague in my work (Take this entire blog, for example, they were done using the Outfit and Josefin Sans fonts, which are both sans-serif typefaces).
 
I have also decided to look at 'Chaos' again with a fresher pair of eyes, and after some thinking, decided that although I liked it, maybe it could use some work as I was not as satisfied with it anymore as I was when I first finished it (Although one could probably already guess that I made changes judging by the screenshot above). So, I modified it with my own discretion:

Fig 2.10 Chaos post-rehashing

Most of the changes involved the pile of text, especially with the one instance of the word chaos just sitting at the bottom right corner. I decided to remove the letters c and o from the chaos sitting there as they were sort of redundant and adjusted the remaining ones accordingly. I also decided to follow my initial sketch more closely by lowering the text opacity nearing the top of the pile (Well, less towards changing the opacity, and moreso just using a variety of grays...). The text had outlines at first, but after Mr. Vinod noticed my work, he advised me against using those so I removed it, and honestly I think it also looks better without them. My first thought upon finishing this was; "I definitely am not going to animate this," since it would be extremely complicated.
 
I have also decided to modify 'Crush', albeit slightly. I felt like there should be maybe a little less emphasis on the crushing crush, since it seemed to outweigh the crushed crush a bit too much for me.

Fig 2.11 Crush post-rehashing

I decided to lower the opacity slightly and add a thin outline for the big crush (This time, without using multiple grays like I did for chaos and actually using the opacity feature). That was honestly the only change I made, as I was fine with everything else, and was NOT willing to go through the process of cutting up the letters with the knife tool again (Trying to get the letters to have proper cuts, determining where you want the breaks and cracks to be, it was very arduous). 

I decided to not modify 'dive' any further like I did with the rest, as I was already satisfied with it. 

This is the overall result of my digitization after receiving feedback and rehashing my work under my own discretion:

 Fig 2.12  Type Expression - JPEG (10/17/23) 

Final Phase: Animation! (Please help)

The timespan for this phase was week 3 - week 4. After digitizing them in the previous week, I was instructed to choose a type expression to animate. I have decided to animate 'Dive', as I already had an idea on how I wanted it to be animated. The idea was that the letter 'i' would jump into the space between the letters 'd' and 'v', then swimming back up afterwards.

I got started by making four separate artboards so I could make the keyframes. The purpose of making the keyframes instead of animating it as I go was to get a better idea on how I wanted the final animation to look like, and so I could achieve a more consistent result.

 Fig 2.13 Keyframes

After making the keyframes, I decided to try and make the in-between frames for the animation. Unfortunately, this proved to be difficult, since I wasn't sure if I would manage to go at it without looking at the previous frame (I mean, that is the reason why a lot of animation programs have onion skin in the first place). With that, I proceeded to delete the other artboards and move the keyframes to the first artboard instead. I then proceeded to make the rest of the animation on that same artboard.

Fig 2.14 All the frames I have (Singular extra frame I added at the end of the process not included)

I then exported the artboards as separate JPEG files so I could actually compile them. I won't lie, I at first thought we were going to be using After Effects for this task, so imagine my surprise upon finding out we were going to use Photoshop to put the animation together! I didn't even know it had a video timeline feature even though I've used Photoshop for a little while, but I guess I just didn't pay attention to the features. Nonetheless, after a three (or four?) hour break (And after doing my laundry), I did my work and created the animation with Photoshop. 

Fig 2.15 Animation process (And a video of someone reviewing a visual novel for background noise)

Fig 2.16 Initial animation

This was the initial animation, although I ended up realizing that the other letters were moving when they weren't supposed to and that the animation quality was not the best. I ended up spending about thirty minutes trying to find the source of the problem, only to realize that I had been exporting it in 72 ppi instead of 300 ppi (Trust me, you need to start exporting stuff in 300 ppi; It increases the resolution and quality by a huge margin). I ended up re-importing the stack of files I had from Illustrator and re-making the animation, making sure I get the timings right. This was the animation after I had tweaked it.

Fig 2.17 Dive 2 - Electric Boogaloo

Honestly, I was overall pretty happy with the result. A few hours of work (With breaks) and I managed to get a result that was, at the very least, satisfactory, although I knew that I would probably need to tweak it some more after receiving feedback and whatnot, and I could head to sleep at 3 AM (Please don't do this, it's not very good for your body and the only reason I'm able to do this is because I have 2 PM classes).

Ms. Hsin mentioned that whilst I animated it very well and it looked smooth, the motion looked less like diving and more like flying at first glance (And honestly, I showed it to my sister who's a senior and she also agreed that it kind of does). I spent a really long while thinking about what I could do to fix it, only to realize that all I needed was to move the letter 'i' upwards and tweak it in some frames just a little. It honestly made such a huge difference in regards to smoothness and I found myself really liking the end result.

Fig 2.18 Final result! :D (10/17/23)

Exercise 2!

Using Adobe InDesign, we were tasked to create a final text layout consisting of an article, title and an image related to said article. This is done by using typefaces, kerning, type size, leading, line length to create the most appealing layout possible. Although, to adjust to this process, we were tasked to use our names for practice so as to adjust to this process by applying these properties to our names beforehand. 

Phase 1: Kerning and Tracking Exercise!

The timespan for this phase was week 4 - week 5. We were asked to practice implementation of kerning and tracking in text using the ten typefaces provided with our names, which although feels sort of restricting, on the bright side, you're allowed to use whichever type of font from said typeface you preferred (yay!). Before we start, let's see what the text would look like with zero kerning.

Fig 2.19 Kern't (10/23/2023)

As you can tell, the spacing of the letters feels sort of unevenly distributed. Even if you might not notice it at first glance, you can definitely tell once you get a closer look at it. I did receive feedback for this, but I unfortunately did not manage to document my work before receiving feedback. As such, here is the finalized result of implementing kerning.

Fig 2.20 With Kerning, and comparison of kerning and no kerning (10/23/2023)

After doing this exercise, we were to create a text layout from an article about the 'Helvetica' font family. This was to practice cross-alignment. I have made four different layout options, which I find to be pretty simple, yet still concise.

Fig 2.21 Layout 1

Fig 2.22 Layout 2

Fig 2.23 Layout 3

Fig 2.24 Layout 4

I had intended to use font size 11 for these layouts at first, but they were too large. After receiving feedback, I had two options; I was to choose between layout 1 and layout 2, the reason being layout 1 was very straightforward and conveys the design intentions well, while layout 2 looked like submission, and can be improved by moving the second half of the article up and shrinking the image to stimulate cross-alignment better. In the end, I settled on submitting layout 2, as while layout 1 was indeed straightforward, I personally felt like layout 2 was more interesting, compared to layout 1 which was more simple in comparison.

Fig 2.25 Final layout (10/24/2023)

Fig 2.26 Final layout with margins and baseline grids (10/24/2023)

Fig 2.27 Final layout in PDF format (10/24/2023)

Fig 2.28 Final layout in PDF format with margins and baseline grids (10/24/2023)

HEAD
Font/s: Futura Std Heavy, Futura Std Medium
Type Size/s: 33, 22 pt
Leading: 27.5 pt
Paragraph spacing: N/A

BODY
Font: Futura Std Heavy
Type Size: 9.5 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 63 max
Alignment: Left Justify
 
Margins: 50 mm top, 12 mm left + 15 mm right + 15 mm bottom
Columns: 2

Gutter: 5 mm

This is the end of Task 1; Hopefully there were no mistakes here (Otherwise I will cry)

Feedback :T

---

Week 1

As this was the first class for me, we were only tasked to get started with our e-portfolios and such. There was no feedback given.

Week 2

There were multiple pointers Ms. Hsin has given, those being:

→ The necessity to import images with the JPEG format instead of Google HTML; This is done so the files do not expire or go missing in case something happens to the google HTML file, as changes may occur and the file may break.

→ Making sure the sketches have proper contrast; It is recommended for the background to be pure white (#FFFFFF or R: 255 G: 255 B: 255) and for the expression sketches to be pure black (#000000 or R: 0 G: 0 B:0). This is so the type expression can be properly discerned.

→ Taking into account the ten typefaces while sketching; Although I did not follow this at first, it makes it easier to digitize as you have determined the font of the type expression you are going for, along with taking into account what ideas you can implement for each typeface.

→ Using graphical elements and distorting the typeface while necessary; I was told to not rely on them too much, but I have learned that the use of graphical elements could be helpful. Mr. Vinod has shown quite a few examples of type expressions using graphical elements and even distorting the typeface, and told us that doing so was okay as long as you retained the integrity of the letters themselves,

→ Doing further reading; This is so that we have more references outside of our classes/lectures

There was also feedback given specifically to me, being:

→ Taking notes for the lectures; This was honestly the main criticism I have received regards to my blog, and understandably so. While I was on track when it came to the components of the blog itself, my lecture notes themselves were lacking.

→ Proper handwriting for labelling/descriptions; This was the main criticism I have received for my sketches. While my sketches themselves were okay, the description was rendered somewhat unreadable due to the really tight space and my handwriting being messy. For next time, I will have to either put more effort into neatening my handwriting, or typing out the descriptions if that isn't possible. I am leaning towards the former, putting the extra work into my handwriting won't hurt, after all. :P

Week 3

Most of the feedback given were emphasis on the feedbacks for prior weeks, with the main point being:

→ Do not rely too much on graphical elements; We were advised to try our best to not overly modify or distort the text for the typefaces. 

Week 4

The feedback I received for the animation was:
→ My animation was done really well; But the motion looks more like a person flying rather than actually diving.

→ Try to use references when following motions; Animating something mostly free-hand, especially motions like jumping, running, diving, etc. Without references may cause a viewer to misunderstand/misinterpret the animation

Week 5

The feedback I received for the kerning exercise was:
→ Letter spacing; The kerning for "Ceria" is already good, but the spaces between the letters "Jolin" is too far between the letters 'J', 'O', 'L'; but too tight between 'L' and 'i'  in some typefaces.

The feedback I received for the text formatting was:

→ Taking into account the x-height of the fonts; The x height is the height of the lowercase ‘x' in a typeface. Since some typefaces have taller x-heights than others, what font size you use must be taken into account; A taller typeface should have a smaller font size, and vice versa. I had used the font size of 11pt at first to match my leading (Which was also 11pt), but since it looked way too big, I was asked to settle for 9.5pt instead.

Reflections :v

---

Experience
Having an older sister who was also taking the same major, I had already received a rundown of what to expect from her, with what I was going to learn for the first semester, what she learned, her experience with her lecturer (*Coughs* Mr. Vinod *Coughs*), etc.. But I do realize that no two people will have the exact same experience, and I soon realized that after we both found out that I would have had a different lecturer entirely (Hi Ms. Hsin :D). 

Honestly, university (At least right now) feels easier to handle and manage than high school ever did. I struggled immensely with ADHD I was diagnosed with which caused me to struggle a lot with staying committed to doing my work and paying attention in classes. As a result, my motivation to do schoolwork, let alone to finish it, was basically non-existent. It was so bad to the point where I had not turned in at least half of my assignments during online classes.

I feel like after taking this module, I have been better when it comes to submitting assignments (Well, I mean submitting assignments, I still tend to do a lot of things the day before, which is a pretty bad habit still, and fall behind with my e-portfolio and stuff) and hope to improve further in the future.

Observation
Something pretty silly thing that I've noticed is that I'm not the only one struggling with tardiness when it comes to schoolwork, because back in high school, it felt like I was the only one who couldn't get anything done on time. It's pretty bad, but it feels relieving to know that I'm not alone.

Findings
I feel like I have started to pay much more attention to reading the text around me, whether consciously or not. Besides some difficulties (AKA the text in my blogspot constantly glitching out. COUGHS.), I honestly feel like I've been genuinely enjoying this module so far and I hope this feeling improves or stays the same within the coming weeks, LOL

Further Reading B)

---

Fig 3.1 The Viginelli Canon

There are the intangibles that consist of:

• Semantics
• Syntactics
• Pragmatics
• Discipline
• Appropriateness
• Ambiguity
• Design is one
• Visual Power
• Intellectual Elegance
• Timelessness
• Responsibility
• Equity

And the tangibles that consist of:

• Paper size
• Grids, margins, columns and modules
• A company letterhead
• Grids for books
• The basic typefaces
• Paragraph alignments
• Type size relationships
• Rulers
• Contrasting type sizes
• Scale
• Texture
• Color
• Layouts
• Sequence
• Binding
• Identity and Diversity
• White space