Typography - Task 1: Type Expression & Text Formatting

30/08/2022 - 03/10/2022 (Week 1 - Week 6)

Ahmad Firas Bin Ahmad Fisal (0345121)

Typography | Bachelor of Design (Hons) in Creative Media | Taylor's University

Task 1: Exercise 1 - Type Expression & Exercise 2 - Text Formatting

LECTURES

Lecture 0: Introduction

Typography can be seen as a creation of a typeface and it is widely used in other different fields such as animations, websites, products, advertisements, etc. Typography is the essence of successful visual communication. The effectiveness of a design is correlated with the skill you have in typography. A bad typography work could lead to miscommunication and leave a bad impression on viewers.

- Lettering is the art of drawing letters in any style.
- Calligraphy is the art of writing letters and is related to the idea of penmanship.
- Typography, is the design, or selection, of letter forms to be organised into words and sentences to be disposed of in blocks of type as printing upon a page.

- Font is a design for characters.

- Typeface refers to an individual weight within a type family.

Lecture 1: Development

As a disclaimer, it is remarked that the western community has monopolised the typography development over the course of history. Our lecturer encourages us to do some self-research to really know what happened to the development of typography unbiasedly. He also put an emphasis on local communities and the minor communities on how they would've affected the development too.

Letterform was early developed by Phoenicians back in the 4th Century B.C.E. The tools and mediums play an important role in how the letterforms would look like. The Greeks also changed the course of history by deciding to change the direction of writing and also initiated the standardisation of typography personalisation. The style of writing that was invented by the Greeks is called, Boustrophedon. The lines of text are read from left to right followed by the right to left.

Letterforms were also only limited to uppercase letters, but speed was needed for certain people to write faster which invented cursive writing. Cursive writing then became the initial development of lowercase letters.

Timeline:

1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750 Transitional ⟶1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1990 Serif/ Sans Serif

Lecture 2: Basic

We were advised to learn more of the jargon in Typography and also the importance of expanding our lexicon for further understanding. By doing that, we should explore more and not be afraid to gain new pieces of knowledge so that we could indirectly force ourselves to gain information.

Learning different typefaces will give us an advantage in the future because we will most likely know what will work for certain design works on different occasions. When we know the rules, we will eventually know how to break the rules to further stylise our work.

Lecture 3: Text Part 1

Kerning and Tracking were a few of the terms introduced to us in the lecture. Kerning refers to spaces in between letters and Tracking is when spaces of a word in a sentence are adjusted.

Uppercase letters were designed to be independent letterforms, whereas lowercase letters, they require a counter form to maintain the rhythm and line of reading. By adding spaces between letterforms, the counter form is broken and readability will be affected. Tracking is not advisable to be increased/reduced by three times.

Paragraph Spacing, Leading and Line Length was also mentioned. These are needed qualities in a text body because if there are none, it would not be a good body text. If four of the main attributes are present in a body text, the formatting of the particular body text is the next important step to ensure that our text product is considered as successful.

Lecture 4: Text Part 2

Back in the day, indicating paragraphs is used with the pilcrow symbol to save space because parchment sheets were used instead of real made paper. It was costly to not use the space of a sheet efficiently.

Indentation could be used to further fix the obvious ragging that is happening to the body text. Ragging, Composition, and Line Spaces are needed to ensure a body text with smoother ragging and good reading rhythm.

Hierarchy of information by positioning headlines and subheadlines within the text appropriately. Cross Alignment by aligning the baseline grid to ensure that it is appealing and reinforces architectural sense to the structure of the page. After text formatting, it is important for us to check for widow or orphan and to make sure that we are able to remove it altogether because these are unpardonable mistakes.

Lecture 5: Understanding

Uppercase letterforms may appear as symmetrical when looking at them from afar but they are not actually symmetrical if looking at them closely. The contrast in thin and thick strokes might create an optical illusion of it

Simplicity should be bared in mind when creating our own font because we wouldn't want our letterforms to be too decorative and ensure that we are able to showcase the unique feature in all of the letter forms consistently.

The letter 's' must always rise above the median line and sink below the baseline in order to appear the same size as the other vertical and horizontal strokes adjacent to them. Letters such as "o" and "s" have lesser real estate touching the median and baseline and will appear smaller. An optical adjustment has to be made to ensure that it looks as balanced as possible.

Lecture 6: Screen and print

Prints cannot be replaced by the traditional way because touch and feel are one of the senses that are used in the process that would create a rather holistic development during the learning process.

Certain typefaces were also highlighted for their suitability. For example, Caslon, Garamond and Baskerville are good typefaces for print because of their readability when set at smaller font sizes. The versatile characteristics make typesetting easier.

Verdana and Georgia are good examples of typefaces designed for screens. It is highly not suitable for on-paper use. However, there is no definite set of rules in typography and it's subjecting to the designer itself. The generic rule of thumbs is there because some typefaces are really not forgiving for certain mediums.

Week 1

[Class Notes]: For our introductory class, the module information booklet was further explained to us to give us an overview of what to expect for the coming weeks of this semester for Typography. We had a session to vote on the 4 words for our Type Expression exercise and also we were given time to complete our E-Portfolio in class.

Week 2

[Class Notes]: We have to showcase our Type Expression sketches that were done manually in class for feedback from our lecturer. I was provided with rather thorough feedback that enables me to further look at my designs from a different perspective al because of that constructive criticism. We were also told that any feedbacks made to students are nothing personal but purely out of the lecturer's intention to better our art skills via criticising the work that we've done. Only then, we can learn to learn from our mistakes or by taking other peers' feedback to our knowledge for the betterment of ourselves.

We were also given time to watch the Digitization of Type Expression videos made by our lecturer at our own pace and continue trying out the Adobe Illustrator (AI) software to digitize our sketches for the progression of our assignment.

Week 3

[Class Notes]: We were expected to use the prepared template to choose our best sketches out of the four words for it to be digitalized with Adobe Illustrator. We had another round of feedback sessions from the perspective of compositions and the sounding of the word with the typefaces and designs that we do.

Next, our next task is to animate one of the four digital words that we have made by using Adobe Photoshop and Adobe Illustrator. This is another way for us to incorporate both software into the field of Typography. We learned proper ways to export different types of work that we would commonly do as a designer in the typography field.

Week 4

[Class Notes]: This week is focused on the GIF making of the chosen digitalised word. Amendments to the frame animation were also made in class upon multiple feedback sessions. We then proceeded with kickstarting the next exercise for Task 1 which is Text Formatting by watching the video and also making a new document on Adobe InDesign.

Week 5

[Class Notes]: We had our first feedback session for the text formatting exercise. There are certain characteristics that we have to make sure that we follow to ensure that our formatting is in great condition. We were also given the time to make amendments before putting them in our portfolio. We have to pay attention to the ragging, alignment, and composition among other things because those are what determine if our page is appealing or not.

INSTRUCTIONS

Task 1: Exercise 1 - Type Expression

In this exercise, we were tasked to create type expressions for these four words voted by the class during Week 1. Those words are:

Distort, Fragile, Box, Accelerate.

We were not able to use any illustrative elements to aid us in this exercise but minor details like lines or dots are allowed in a limited sense. We were also given a setlist of typefaces to accompany us in this exercise. Those typefaces are as listed below:

Adobe Caslon Pro, Bembo Std, Bodoni Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std, Janson Text LT Std, Serifa Std and Univers LT Std.

Figure 1.1 - Sketches (02/09/2022)

I've decided to also do a sketch for the word 'Cozy' after the feedback session because I feel like exploring more with the other word choices.

Figure 1.2 - Sketching for 'Cozy' (02/09/2022)

When picking out fonts for the digital words was a rather fun process because we were able to explore those 10 handpicked fonts by our lecturer to see which of those fonts are suitable for the vision of our designs.

Figure 1.3 shows my first attempt at completing the digitalisation of those four words but it was mentioned by my lecturer during the feedback session that we should be aware of the composition of the word design individually and also as a whole in comparison to the template and neighbouring designs. Balance is something that is needed so that it is pleasing to look at.

Figure 1.3 - Digitalisation of Type Expression (#1) (06/09/2022)

This is what it looks like after those words have been fit into the composition and balance was kept by keeping those bolded words diagonal to each other to balance the weight of the whole design to the template.

Next, is a deeper look into the word 'Cozy' with those minimal lines used to recreate the look of the eyelashes while we are asleep.

Figure 1.4 - Digitalisation of Type Expression (#2) (06/09/2022)

Figure 1.5 - Digitalisation of 'Cozy' (Zoomed) (06/09/2022)

After another round of feedback sessions, I've decided to change the 'distort' design into something else that would fit my updated vision better. The previous 'Distort' design doesn't give the visual communication impact required. Also, I was advised to retry with a different font or typeface because the current one has too much character that the attention might divert to the shadowed design rather than the 'distort' visual message that was initially planned.

Figure 1.6 - Digitalisation of 'Distort' (OLD) (06/09/2022)

I've decided to use Serifa Std in 45 Light because it is indeed much lighter and it doesn't grab too much attention to the font in general but is also able to focus on the distorted reflection going on under the original word. It is some sort of a water-reflected inspired style. Simple but I was able to achieve my desired visual communication, that is what matters most.

Figure 1.7 - Digitalisation of 'Distort' (NEW) (06/09/2022)

It was also noted in the class that it is essential that we consider using the colour grey so when it's exported it will be on a darker scale compared to using the colour black which would make the artwork too dark. Composition, letter kerning and spacing are also important because those attributes among many further dictate the level of visual communication you're more likely to achieve

Final Work (Digitalisation)

Figure 1.8 below is the final digitalisation artwork for Type Expression before going into the process of animating one of these 4 words.

Figure 1.8 - Type Expression (Digitalisation-Final) (13/09/2022)

When we are done with the digitalisation process of those words, it is time for us to pick one of those 4 words and animates it by using Adobe Photoshop and Illustrator as an exercise for us to create moving gifs in the field of typography.

I've decided to go with my first word which is 'Fragile'.

Figure 1.9 - Artboards in Adobe Illustrator for Frame Animation (14/09/2022)

Figure 1.9.1 - Frame Animation Panels in Adobe Photoshop (14/09/2022)

Feedback was given to my animation and it was remarked as a great idea but a few minor recommended changes were given by my lecturer to further enhance the animated gif with the chosen word.

Figure 1.9.2 is the animation before adhering to the recommended ideas. It was my first and raw idea of the word 'Fragile' as it communicates falling and breaking apart in two as the directive to the animation. The next animation would be the one with those ideas given by my lecturer combined with my original rendition. It is better to let the word instantaneously break apart and fall off the imaginary plane to project 'fragility'.

Figure 1.9.2 - Fragile (Animation-Attempt #1) (14/09/2022)

Another in-class feedback session was made and my lecturer commended the 2nd attempt in comparison with the first attempt. However, a slight tweak for the final and third attempt, towards the ending by making it fall flatly to the bottom ground/plane and delay/leave the animation for a second would be better for viewers to digest what is happening to the GIF.

Figure 1.9.3 - Fragile (Animation-Attempt #2) (19/09/2022)

Final Work (GIF Animation)

Figure 1.9.4 below would be the finalised animation for this word after making it fall directly to the bottom and leaving it for a second. I was able to create my final attempt after combining ideas with recommendations from the feedback session with my lecturer.

Figure 1.9.4 - Fragile (Animation-Final) (20/09/2022)

Task 1: Exercise 2 - Text Formatting

We started the new exercise with a little warmup by making ourselves comfortable with Kerning and Tracking by doing this naming exercise as instructed in the Text Formatting lecture videos. Below is my own creation to make myself acquainted with the Adobe InDesign software and also this new exercise.

Figure 2.1 - Kerning and Tracking exercise (26/09/2022)

Moving on, as mentioned in the class lecture videos, there are 4 characteristics that we have to follow to ensure that our type text will be in pleasing condition; Point Size, Line Length, Leading and Paragraph Spacing. These are the major things we have to keep in mind for editorial work.

Figure 2.2 - 4 Attributes of a Type Text (26/09/2022)

After ensuring we have gotten the four properties mentioned, now it is time for us to do further formatting to ensure that the body text has good ragging, layout with good and measured composition, and also cross alignment with the baseline which is really important because these create a good reading rhythm for readers to ensure that they will want to pick up our material and ingest them.

Figure 2.3 - Ragging, Composition, Cross-Alignment (26/09/2022)

We were also taught in a more specific video how to use the Baseline Grid feature and to align them with our information on the page.

Figure 2.4 - Baseline Grid (26/09/2022)

Heading & Image is the other thing that we should take into consideration when doing editorial tasks because this is one of the centres of attention because of the visuals and also sometimes unique and bigger headings to put emphasis.

Figure 2.5 - Heading and Image (26/09/2022)

Final Work (Text Formatting)

Figure 2.6 - Final Work for Text Formatting (Without Grids) (27/09/2022)

Figure 2.7 - Final Work for Text Formatting (With Grids) (27/09/2022)

HEAD

Font/s: Serifa Std

Type Size/s: 65 Bold & 46 Light Italic

Leading: 24 pt and 22 pt

Paragraph spacing: 12 pt

BODY

Font/s: Serifa Std

Type Size/s: 10 pt

Leading: 12 pt

Paragraph spacing: 12 pt

Characters per-line: 59

Alignment: Left Align

Margins: 12.7 mm

Columns: 4

Gutter: 5 mm

FEEDBACK

Week 2: Exercise 1 - Type Expression

General Feedback: Overall, the exploration for the sketches is well-commended but it needs to be more refined to ensure that I put the concept of trying to communicate using the typefaces and fonts better as my goal.
Specific Feedback: The word Fragile (#1) is great and the Fragile (#6) could be arranged to portray fragility by breaking down the letter 'G' instead. The word Accelerate (#4) is fine but could be an idea to play with the weight of the letters to further show acceleration. Distortion to the word 'Distort' (#3) could be redesigned to ensure that it is not too distorted. For Box, try to put the 10 provided typefaces in mind to ensure that the sketches can progress in the next stages of the assignments.

Week 3: Exercise 1 - Type Expression

General Feedback: Put composition into mind, individually and collectively when fitting your work to the frames. Spacing and Kerning are important in expressing our work. However, when including two expressions in one word, might cause clashes in terms of visual communication.

Specific Feedback:
(Digitalisation) - Everything else is excellent except for 'Distort' which was my weakest piece because the font chosen in itself is already heavy with characters. It's conflicting with the distorted effect that I'm trying to go for. The intended visual communication stops at the characteristic of the font and missed out on the distorted effect. Redesigning the word 'Distort' is a favourable idea.

(Animation) - The animation of the word 'Fragile' made sense but an idea was given to make the artwork bigger for composition purposes. The second suggestion would be that the word in the middle would just break and jerk around before falling. Let the bottom pieces break into pieces to put emphasis on the animation.

Week 4: Exercise 1 - Type Expression

General Feedback: The usage of Motion Blur could be utilised in one of the last frames to show an impact-like motion when the word has reached the base.
Specific Feedback: Make the words fall on the bottom base completely and pause for a few seconds after all the words have fallen/reached the base.

Week 5: Exercise 2 - Text Formatting

General Feedback: The work overall is good with great movement and the 4 attributes of type setting were achieved. Little amendments are needed to make it even better.
Specific Feedback: Great movement in the layout, however, the space below the image is a little too big that needs a little tweaking done to it. Crediting an image/ caption is always required. Leading is a little on the tighter side but amendments are not necessary. Ragging, Paragraph Spacing and Cross Alignment are greatly achieved.

REFLECTION

Experience

No doubt, in any class, it is always expected that we would feel a little nervous and anxious because we don't know what to expect from our own lecturer. However, Mr. Vinod is a fun lecturer but only that he is strict when it comes to his students' education.

Observations

I also observed that ever since I was introduced to the foundation of typography and its role in other fields. Classes are usually handled with activity tutorials with Mr. Vinod and we are expected to update ourselves with the pre-recorded lectures for a better understanding of what's being taught.

Findings

I find our feedback sessions every time we have completed a particular exercise really helpful because we are getting a taste of a design critique session to ensure that we are able to know our own mistakes and to learn from them with the help of Mr. Vinod.

Having to document our progress in this E-Portfolio, helped me even more with my progression in class. Seeing my own work documented in such a way really helps me to see my own progress over the weeks.

FURTHER READING

Chapter: Typography on Screen

This chapter focuses on the development of on-screen design and the need to preserve typographic integrity in this environment becomes paramount. However, it is complicated because there's a rapid change in technology: screen sizes, screen resolutions, and new types of interactivity.

Simplicity: Elaborate typefaces when presented at a larger size, may gain legibility but this gain may not compensate for how they can potentially detract from the visual communication intended. It has to be used in a strategic manner while keeping it simple.

Sans serif and serif typefaces: On-screen designs usually put focus on sans serif typefaces because they can achieve a clearer visual presence on the web compared to a design that is using a serif typeface. These sans serif typefaces could achieve the same personality and can be effective when used right. In the serif category, it is well noted that slab serif fonts such as Memphis, Rockwell, Serifa and Museo are one of the best serif typefaces due to their moderate contrast between strokes.

Ahmad Firas Bin Ahmad Fisal (0345121)

Search This Blog

Typography - Task 1: Type Expression & Text Formatting

Comments

Post a Comment