Typography | Task 1

25/8/2021 - 22/9/2021 / Week 1 - Week 5

Shofwa Alyadiena / 0350019

Typography / Bachelor of Design in Creative Media

Exercises

LECTURES

Week 1

25/8/2021

After Mr. Vinod and Mr. Charles introduced themselves in our first meeting, they briefed us on how our classes will go for the coming weeks. Mr. Vinod asked all of us to perfect how we document our exercises through our blogs by watching his e-portfolio tutorial video. I've used the template for my previous posts as well. He then explained that after all e-portfolio requirements are fulfilled, further reading is advised.

Further reading is information we get outside of class. Any source is allowed but getting information from books is recommended. He also recommended us to take notes on how our seniors organized their blogs, but warned us that even if seeing other's work helps us understand something better, it lowers the chances of creating something new.

Our next materials were conducted through pre-recorded lectures. They have already been organized in a neat playlist for us to study from. The first lecture I viewed is about the development and timeline of typography. He reminded us that no matter how detailed his lecture about typography development is, it won't be able to cover the entire history, mostly because most of the recorded history we know of today are centered in western cultures, and many typography history from Asia are either overlooked or not yet translated. Through his presentation I can conclude that many of our modern language were formed from the phoenician alphabet, as seen in the image below.

Fig. 1.1 Alphabets from Phoenician to Other Letters

To summarize, the language we use today is the product of multiple unique handwritings constantly being renewed and reformed. No two handwritings are the same, which creates changes from uppercase to lowercase, large to compressed, then various forms of italic letters.

The second lecture explains the basics of typography and describes letterforms. I learned a lot of new words related to typography from this video, however it is a long list, and easier to understand through a visual sheet.

Fig. 1.2 Summarized Basic Typography

All of letterform anatomy is important, but what I found most notable is the use of spacing, the baseline, and the x-height. The x-height is exactly how it sounds, it is the height in any typeface of a lowercase 'X'. The baseline is imaginary, but is what provides the visual base for the letterforms. Spacing matters because how well it's done can improve the readability for the readers. If there aren't any spacing involved, it would be tricky to differentiate a letter from another, and would be much too compressed to be able to read consistently without causing a headache.

Week 2

Our class started off with the students handing in their work as a form of participation and for weekly evaluation. After everyone submitted their type expression exercises, the lecturers Mr. Vinod and Mr. Charles selected a few to review and comment on. They gave feedback based on four questions:

Since there wasn't enough time to comment on the student's work one by one, he put us into breakout rooms. In it we had to criticise and give feedback to one another so that we can improve. We discussed about the lack of certainty in what was and wasn't an acceptable distortion before leaving the breakout room.

Coincidentally, Mr. Vinod said that certainty isn’t what we should be looking for, if we were certain of the rules we would want to work in the safe area, which creates lack of risks or exploration. What's important is to give clear directions. Furthermore, we shouldn't give too much feedback, because it can end up influencing the actual project, and once we become dependent on it, it will be harder to follow our own creativity. There will be little originality.

He continued to review our tasks and our e-portfolio. Although last week he advised us not to add too much distortion, there was still a large number of type expressions that needed them, so he showed us how to properly distort a text in Adobe Illustrator. He moved on and reviewed most of our blogs afterwards.

1. Are the explorations sufficient?
2. Does the expression match the meaning of the word?
3. On a scale of 1–5, how strong is the idea?
4. How can the work be improved?

He advised us that generally we would want to widen the spaces in between uppercase letters so it would be more presentable. On the other hand, it would be easier to read lowercase sentences if they were proportionately closer together.
As the video continues, I got to understand the uses of text alignments. There are flush left and right, centered, and justified alignments or formatting.

I wanted to continue watching the lectures Mr. Vinod provided, titled "Typo_3_Text_P1". In this pre-recorded lecture, I learn that most headlines would use letter spacing to have their words feel less crowded. The automatically adjusted space between letters is called 'Kerning'. He showed us how to change that spacing between certain letters in Adobe InDesign by using the hotkeys 'command + shift + >' to make the spacing wider or 'command + shift + <' to become smaller. We can also use 'option/alt + left/right arrow' to adjust the spacing of an entire word.

Flush left alignment tends to emphasize the start of a text, influenced by the flow of how we normally would read from left to right. Each word in a new line has the same starting point and consistent spacing, however it does end up with a ragged right.

As opposed to a flush left alignment, flush right is used to emphasize the end of a text, for the same reasons why flush left is mostly seen as a start of a text. The spacing between each words are also consistent, but instead we have a ragged left and a straight right.

Centered alignment is used to create a sense of stability. the length of the left and right side are equal, and the spacing between each word is the same. However, there are no straight sides to this alignment as it is balanced.

A justified alignment is the one I use most. Even though spacing between words are inconsistent, the left and right sides end on the same points and creates just as much stability as a centered alignment does. Justified alignments look neater and personally much more pleasing to the eye.

The next topic is leading and line length. In the presentation we are informed of how we could maximize the readability of a text. Type size should be big enough that we can read from arm's length. Leading or spacing between paragraphs or lines shouldn't be too close together or too separated that readers would be distracted by the letters itself. As for line length, Mr. Vinod says, "a good rule of thumb is to keep line length between 55-65 characters." I understand from this lecture that one of the best ways to figure out if our text spacings are good is if we see a gray area once we zoom out.

Another thing pointed out in this lecture is that we have to choose our typefaces carefully. Using typefaces relevant to the topic we want to show is necessary.

Week 3

Week three's briefing is where we had our work reviewed the second time, hopefully finalizing our previous drafts so we may move on to animating our type expressions. Majority of the briefing was giving feedback and the last half of our hours used for breakout rooms and discussions. Those who did not have access to illustrator joined rooms with ones who do.

The lecture I'll be visiting today is titled "Typo_4_Text_Part 2". This lecture is also pre-recorded and is a continuation of "Typo_3_Text_Part 1" from last week. For the first section Mr. Vinod shares a recap of what was explained in the first part, to help us as audiences refresh our memories.

What I learned from this specific lecture is the history of paragraph spacing. The first example is the pilcrow (¶). Though not as often as it was before, we use it for the same reason we did back then, and the symbol itself exists through different typefaces alongside the trademark (™) or copyright (©) symbol. Paragraph in modern times is indicated by the size of spacing. Paragraph spacing should generally be larger than line spacing.

The difference between line spacing, line of type and leading is

Leading is the space between the top sentence's descent

line and the bottom sentence's ascent line.

Line of type is the space that's occupied by a sentence,

From the ascent to the descent line of a sentence.

Line spacing would be what we describe as the space

of leading and line of type combined.

On the topic of paragraphs, most formal ones would use indentation. Indentations serve a similar purpose to a pilcrow, but specifically to mark the start of a paragraph. Something else we should keep in mind is the widow and orphan. A widow is a sentence left behind at the end of a paragraph, not reaching end to end. An orphan is when a column is created and the last sentence of the previous paragraph show up at the top of the new column. In paragraphs, orphans should be avoided as much as possible.

Inside a paragraph there may be some words or sentences that we want to highlight. Highlighting can be done by using italic fonts, bold fonts, underlining the highlights, or using "quotation marks". All of these can be used to emphasize or make the readers understand what's more important.

Headlines within texts tend to be overlooked. Hierarchy in typography is just as important as hierarchy in visual designs. Headlining is somewhat similar to highlighting, only that it is the first thing we have to see before all else.

Week 4

For this week's lecture, I continued by watching 'Typo_5_Understanding'. In this lecture we learn about letters and understanding letterform. In short, many typefaces use asymmetrical letterforms for example in the typeface Univers, an uppercase 'A' is asymmetrical as both stems have different stroke widths, but create the illusion of symmetry. The asymmetric element to this are used to create a sense of dynamism and delicateness.

An example of false similarity is through different fonts. For example, Helvetica compared to Univers. A lowercase 'a' looks similar but the stems end differently and the bowls connect differently as well. Mr. Vinod pointed out that although its simple, it is effective when we're designing a typeface.

On the topic of letters, we are also informed of ways people use to maintain the x-height of a font. Generally, when we have a curved letter aligned to the x-height, it would look smaller, so to tackle this problem designers have curves placed a little outside the x-height. That way, curved letters look the same size as the lowercase 'x'.

A good way to check our typeface readability, we use counterforms. To me, counterforms is the negative space of a letter. If they are still recognizable through counterforms, then it is good for a design in the sense that readers are able to comprehend it. Something else we could do is apply contrast; in scale, color, ec to our typefaces and see how it will go from there.

Week 5

The last lecture is about different mediums in typography. Mr. Vinod explains how vast the changes and improvements have been made for type, and how it is useful everywhere. Firstly, he talked about "Print Type Vs Screen Type". For print typing, the options are Caslon, Garamond, and Baskerville for the reason that they look elegant and intellectual while maintaining readability at a small size.

Screen type is commonly used for websites. Some web safe fonts include; Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, and Garamond. Most typefaces intended for a website is often modified. I have been using hyperlink several times. Hyperlink is basically creating a word, sentence, or picture to click and move onto another website.

Unfortunately like most digital things, there are problems we'll face in creating digital typography.

INSTRUCTIONS

Task 1 - E1: Type Expression

A. Type Expression

Our first exercise in this class is to create type expressions. From my understanding, type expression is manipulating the appearance of a word to make it look like what it's describing. Based on a poll my class took, we had to options to create a type expression out of 7 words, only 4 is necessary, and one is mandatory. Terror is the mandatory word, and for the other three I chose to make one of the words 'shiver', 'light', and 'error'. Below are the sketches I've done digitally for them.

Fig. 2.1 'Terror' sketches (27/8/2021)

By common knowledge, terror is described as an emotion close to fear, or an act done by people to scare others. It was harder to come up with an idea that would visualize the feeling of terror, but then ideas of how to visualise terror as an act flowed into me. I imagine the lowercase 't' as a person holding a long gun to strike fear, and thought it would fit to replace the letter 'o' with an illustration of a bomb. However, using lowercases doesn't feel terrifying to me, so i had to come up with another idea that could use the uppercase letters instead. I thought the bowls of the letter 'R' could look like bullets, and replaced the letter 'O' again with a bullet hole to keep the theme.

Fig. 2.2 'Error' sketches (26/8/2021)

Fig. 2.3 'Error' reference

When I saw that I was allowed to choose the word error, images had already appeared in my head about what i could do with it. I always understood error as making a mistake; so with the top left sketch i thought about writing it incorrectly and adding the zigzag line underneath as if i was being corrected. Same goes for the bottom right, but with an extra textbox suggesting the correct way to type the word. For the top right, I imagine error would be to describe a computer glitching; so i tried to give it that feel by taking away parts of it and moving them slightly to the left or right. Similar to that concept, the bottom left sketch is somewhat a reference to when my laptop or computer gets an error, it creates multiple windows that I have to manually delete.

Fig. 2.4 'Shiver' sketches (27/8/2021)

For the word 'shiver', I only know of one definition- it's to shake slightly when there's cold wind, or maybe out of fear, but it's subtle. I wasn't able to think of many different ideas for it, other than to re arrange the angles of the letters or moving pieces of it slightly like what I did with the word 'error'. The top left feels most accurate to me personally, because the letters look as if they are shaken or blown by a gust of air, and the 'i' is replaced with a human figure that's shivering.

Fig. 2.5 'Light' sketches (26/8/2021)

The final word I chose was light. As far as I know light means an object that has little weight or the reason we are able to see. The top left sketch is supposed to be the word 'light' on a scale, being lighter than anything else. The rest of the sketches are similar. Top right sketch creates the illusion that the 'hole' in the letter 'g' is a window for the light coming from the letter 'i' to shine through. The bottom left sketch, in my head, looks like how light appears through windows at night. Lastly, the bottom right sketch has the letter 'i' as the source of light again, making the rest of the letters visible in the dark background.

When Adobe Illustrator finished downloading, I started working on my final four. I asked my classmate Rebecca to help me with the app, which she gladly agreed to. With her guidance I managed to organize my workspace layout and get this exercise rolling.

Fig. 2.6 Illustrator Workspace (4/9/2021)

I added my draft on the left and tried matching the sizes of the square. The original sketches were made in Autodesk, so i didn't use the 10 typefaces for it, and I had to figure out which ones would look closest to the original.

Fig. 2.7 Some Problems I faced (4/9/2021)

Some problems I faced was getting the shining light to look right. I tried using the brush tool at first, then moved to the pen tool. Of course the pen tool was much neater and I ended up using that. However, I couldn't figure out how I could fill in the empty space within the lines, so I searched up a tutorial so I could get a visual. This video (click here!) helped me understand how to do it. The rest of the words had little to no problems, so here is how they ended up looking.

Fig. 2.8 Second Draft Type Expression (4/9/2021)

After receiving feedback I tried to apply them as well as possible. First was our mandatory word 'terror', which I needed to have the rest of the words thickened. I first used the same typeface as i did for 'light', but felt that changing it would add more variety. I spent the most time on 'light' as both the transparent graphic and typeface was harder to figure out. I had to make sure the i had a rounded dot and the g had only one bowl. 'Error' needed to be a bit bigger in my opinion, and using a font that makes it look as if it was written on a typewriter was most preferred. Last, I worked on 'shiver'. From my classmate's feedback I understand that most of my changes weren't visible, so I lowered the number of sections and enlarged the word.

Fig. 2.9 Final Submission: Type Expression JPEG (8/9/2021)

Fig. 2.10 Final Submission: Type Expression PDF(8/9/2021)

After receiving the feedbacks given to us on our third class, I adjusted the words. Light had already been enough, but the rest had more potential. I removed the gradient and fire spark from 'Terror', added sentences around 'error', and replaced shiver entirely. Our next step was to animate one word we choose.

B. Type Expression Animation

Going off of the feedback I received from Typography's facilitators and my classmates, I wanted to animate the 'Light' type expression. It's fairly simple but isn't effortless either. The first problem I encountered was that I had to use shapes as to color the backgrounds; and using it in illustrator resulted in a very wobbly GIF animation. I don't have the proof of it saved, since it was done in the practical hour and in a rush. My temporary solution was to change the color of the artboard, which I learned how to do from the video below (fig. 3.1).

Fig. 3.1 Artboard Color Changing Tutorial

Fig. 3.2 Illustrator Frames (12/9/2021)

As shown in figure 3.2, there's a total of sixteen (16) frames used. I wanted the light to look as if it were flickering, so the first and last two frames are the exact same image with one lights' opacity lower than the other. My original idea is to have the light look as if it was moving, and ending where it could shine itself through the bowl of the letter 'g'.

Fig. 3.3 Exporting and Loading Layers (14/9/2021)

Originally I had the layers exported as JPEGs. However, doing so resulted in the layers having white backgrounds instead of the dark grey I preferred. I had no idea how to fix this properly so instead I exported them as PNGs, so the layers can be adjusted freely and I could add the background manually in photoshop.

Fig 3.4 Frame Organizing Process (14/9/2021)

There was a lot of things I had to adjust once moved to photoshop, most painfully the letters that kept wiggling while the animation preview was playing. I moved them to look consistent from start to finish. I proceeded to work on the flickering bit as it was the main thing I wanted to have happen in the animation. Luckily, after fixing a few frames the later layers had little to no changes needed, and I was able to finish the animation.

Fig. 3.5 Final Submission: Type Expression Animation (14/9/2021)

Task 1 - E2: Text Formatting

Part 1: Kerning and Letter Spacing Practice

Once we finish with type expressions, our next exercise is 'Text Formatting". For this exercise we first start with a sheet in Adobe InDesign and type our names down using the ten typefaces we have previously used.

Fig. 4.1 Page Layout (21/9/2021)

I started off by placing words of the font used on the left to keep track of what typefaces I can or can't use. From there, I wrote my name in all 10 typefaces. My original idea is to make the entire page look better by having the last typeface be visually heavy and gradually getting lighter until the top typeface. However, it didn't work out as expected as I realize the last font's heaviest is too big with consistent size, and too small when made smaller. Instead, I chose what version of a font I liked best and worked on it from there.

Fig. 4.2 Aligning Text (21/9/2021)

After I was happy with choosing what I wanted, I changed my mind about having the texts be flushed left. I decided flush right looked better and gives more space for the font names to be seen.

Fig. 4.3 No Kerning or Letter spacing (21/9/2021)

Without kerning, I wasn't actually able to see anything wrong with it at first, and thought that only tracking would be needed to help make the entire page look nicer. However, after closer inspection I could see that there was surprisingly a lot of things I could change.

Fig. 4.4 With Kerning and Letter Spacing (21/9/2021)

Overall it needed more space mainly between A and L and less space around O. It was consistent through all the typefaces.

Part 2: Leading and Paragraph Spacing

Moving on, when I finished my practice for text formatting I started to work on the main task.

Fig. 4.5 Workspace (21/9/2021)

After following the first few steps, I placed the texts and separated headings from content. As I watched the video I realized I wanted to use a different font, based on the practice i did (figure 4.4). I marked the page with what I decided I will use for the paragraph.

Fig. 4.6 Deciding Fonts (21/9/2021)

Fig. 4.7 Applying Fonts (21/9/2021)

I applied the fonts I chose before resizing and adjusting spacings. I checked every line to make sure the characters are around 55-65 on average.

Fig. 4.8 Adjusting Leading (21/9/2021)

Part 3: Alignment and Ragging

Fig. 4.9 Laying Texts (21/9/2021)

Before I get working on aligning the texts, I laid down the elements I was going to use to get a better idea of what I want to do. The Images being added helped in adding variety. I attempted ragging in most of the texts to make it all neater. Just as Mr. Vinod says in his tutorial video, a good rule of thumb is to use tracking or kerning as much as three times to a sentence, so to not distort the text's order.

Fig. 4.10 Adding Images and Captions (21/9/2021)

I wanted the first part of the text to be lower than the second, mainly because I want the picture to be seen right after headings. I split the image in half and used the second half to add onto the bottom right of the page.

Part 4: Cross Alignment and Layout

Once I finished with aligning, I honestly did not expect there to be more. However, as I watched more I was able to find out about cross aligning next. I was able to learn about using baselines that are depending on leading, and about having the right leading sizes.

Fig. 4.11 Cross Alignment Check (21/9/2021)

Checking and adjusting the paragraphs more helped a lot in making the paragraph more pleasing to look at. Below (figure 4.12 and 4.13) is the file exported as jpg and pdf.

Fig. 4.12 FInal Submission: Text Formatting JPEG (21/9/2021)

Fig. 4.13 Final Submission: Text Formatting PDF (21/9/2021)

Feedbacks

General Feedback

Mr. Vinod tells us to organize our e-portfolio as neatly as possible, and helped us to learn how to embed the information booklets. He explained that we should use shift+enter for a forced line break and enter <hr /> in the html format to give lined page breaks.

For type expressions, we were informed that since it is typography, we shouldn't rely on graphics to tell the expression of a word. For every word we should have as much variety as possible, and the less graphics used the better.

From the briefing in week three, Mr. Vinod gave us a few pointers on what and what not to do. two of them are to fill in the negative/white space when possible or when there isn't a purpose to that space, and to never distort perspective, pathing or size manually. There are tools specifically for them.

Specific Feedback

By the lecturer, he told me that what I have done for type expressions is enough, but there are several adjustments I could do to really make it great. Just like most of the class, I am more of a visual person and joined design for that reason- but in typography especially I needed to lessen the use of graphics. He suggested I remove the human figure in the word 'terror' and use a bold font to balance the thickness and weight of the bomb. He also suggested for one of the sketches for 'light' that I move the word to a corner or enlarging it so there's less empty space.

In the breakout room my classmates Adriel, Jodiann, and Zetie pointed out that the changes in my 'shiver' sketches were barely visible, and I genuinely agree. They also agreed on the second design for 'terror' the better version. I was pleased to know most people thought my error designs were good enough. For my blog, I received feedback to label and date the images I used, which I have now updated.

During the third week I received feedback from Mr. Vinod, telling me that I should take out the detail for the graphics in 'terror'. Another suggestion is that I add sentences to the 'error' type expression so that it would look as if the word being misspelled is natural.

Thankfully, I did just enough for my type expression animation.

Reflections

Experience

I greatly enjoyed organizing my e-portfolio and I'm happy to know there are some rules of how it should be structured. In the topic of typography, I like it a lot. Giving myself a challenge is exciting. Luckily, after being challenged multiple times I still find joy in what I do for this class.

Observations

I realize that many people and I had relied a little too much on using graphics to convey the emotions we want our type expressions to express. There is a number of problems with this, as typography is an art on its own and needs not an excessive amount of imagery attached.

Findings

I see it a little clearer how much I have skipped over in typefaces. There are a lot of things to learn about in everything, and typography is no exception. Going off of what I said previously, I learned from Mr. Charles that one way to judge our type expressions is to envision the feeling or vibes that it gives. If the type expression itself doesn't feel like what we want it to, then it's not done well enough.

Shofwa Alyadiena (0350019)

Search This Blog