Typography Task 1/ Exercises

13/04/20 - 08/05/20 / Week 1 - Week 5

Mohamed Shaayif Shakir / 0332075

Typography / Bachelor of Design (Hons) in Creative Media / Taylors University

Task 1 / Exercises

LECTURES

Week 1: 17/04/20 Introduction/ Briefing

First lecture was an introduction about typography and basic knowledge about the module. We also were briefed about the E-portfolio and how blogger works, like making labels under different modules and some basic tips such as formatting. Next we went on to instructions on our first exercise which was type expressions. Basically we chose 6 words on a poll and we have to express these words using 9 given type families. For next week we must come up with some sketches of our ideas and a rough digital illustration.

Week 2: 24/04/2020 Typographic Development

Today's lecture focused on history and how typography developed over the years in a western point of view as most mainstream media focus around western countries. So the focus is lost on Asian or other regions. It covered how the letters developed from Phoenicians to the roman alphabet we use today, and different scripts and the brush and stroke techniques used while forming them. Next we move onto how text was classified into type families and type faces. These are basically the fonts we use on a daily basis.

Week 3: 01/05/2020 Text

This weeks lecture was about text formatting and how text is presented in a body of text. It started with the explanation on uses of kerning and tracking and the differences between the two. We were shows the differences and tips in Adobe In Design and different situations where both are used. Next we moved on to text formatting. This part emphasizes on different types of formatting and how tracking is used when formatting a text in a certain where to make it appear more pleasing to the reader. Next we moved onto textures which showed how different typefaces give different appearance to a body of text. This part shows how some typefaces have more contrast or gradient compared to others as a result of the differences in stroke sizes. This parts leads into leading and line length which is basically another way to improve the readability of a text, although it is subjective.

Week 4: 08/05/2020 Text 2

This weeks lecture was part 2 of text. First the lecturer went into detail about paragraph spacing and leading and how these work. Basically the leading should be 3 or 3 points bigger than the letter size. So if the text is 10pt, the leading should be 12 or 13pt. Then he explained what widows and orphans are and how they can be avoided. Widows are the ending words of a sentence transferred to a new line because the space ran out. and orphan is when the last part of a line moves to the next page. Although widows are pardoned, orphans should be avoided always. Ways to avoid these are to make the text boxes bigger or to use force line breaks. The next part is text highlighting. Text can be highlighted using italics, bold, color or using a box. When using color the color should be black, cyan or magenta. When using a box to highlight, the box can be aligned to the text body or it can extend outside so that the only the text is aligned. It depends on preference or the situation. The last part the lecturer explained was headlines. There are 3 different types of headlines. A heads, B heads and C heads. A heads have a break of the text body. B heads don't have a major interruption from the body and C heads are basically within the text body without any interruptions. All these headlines can be highlighted using italics, bold or using different type faces.

Week 5: 15/05/2020 Letters

This weeks lecture was about letters and the understanding of the complexity of fonts or type families. First point to note is that although letters may seem symmetrical they are usually not. From afar it may seem so but when inspected up close they mostly 90% symmetrical. Next we moved on to comparing letters from different typefaces, Emphasizing on the difference of strokes and curves on the letters. They mostly very minor changes which show a major difference. The lecture also touches on the height, counter forms and the contrast between typefaces, and why this occurs.

INSTRUCTIONS

Exercises

Type Expressions (Week 1)

We chose 6 words using a Facebook poll to express using 9 given typefamilies. The words were Loud, Drown, Fly, Disappear, Push, Hidden or Kill/Love. Initially we must make sketches for each word and roughly digitize them in Adobe Illustrator.

Figure 1.00 - Rough sketches / different ideas for each word

Figure 1.10 - Sketches for push

Figure 1.11 - Sketches for drown

Figure 1.12 - Sketches for disappear

Figure 1.13 - Sketches for loud

Figure 1.14 - Sketches for fly

Figure 1.15 - Sketches for kill

I picked the ones I felt were the best to digitize and went ahead with making them on Adobe Illustrator. I used the .AI file given as a frame. I picked fonts which seemed appropriate for the font as i was doing so that I could see how the word looked in that certain font.

Figure 1.16 - I picked a font which was bold and tall enough to fill the box vertically

Figure 1.17 - I went with slimmer font and used a free png from google to make the ocean

Figure 1.18 - Italic font used and reduced the opacity of each letter in increments of 10

Figure 1.19 - Rotated the letter P to make it seem like it was pushing the letters against the frame

Figure 1.20 - Raised the word fly and added a shadow using oval tool to give the illusion of it flying

Figure 1.21 - Used an Italic font and crossed it out with the rectangle tool to give it a tally marks feel.

After I finished digitizing the type expressions i added the font caption below every frame and finalized it.

Figure 2.22 - Rough digitized type expressions

After getting feedback in week 2 class, I made the changes advised and here is the final one. The lecturer mentioned that ''loud'' and the captions for the type expressions looks stretched, but checking from illustrator it seems it is not stretched. Both the horizontal and vertical scale are at 100%.

Figure 2.23 - Final digitized work

Figure 2.24 - pdf file of the final.

Type Expression Animation (Week 2)

For week 2 we must animate a typeface from the ones we have done. The animation is to be done in Adobe Illustrator and Adobe Photoshop. The type expression of my choice is ''push''.

Figure 3.0 I started by making the P straight putting the word close to the middle

Figure 3.1 I made the P rotate slowly and then moved the letters to the edge and squished them.

Figure 3.2 - I exported everything from illustrator and brought them into photoshop to animate, I had about 28 frames

Figure 3.4 - First animation exported. I noticed the letters were squishing to the wrong direction

Figure 3.5 - Second animation. I fixed the letters by moving them separating instead of using the option in the text tool

Text Formatting (Week 3)

This weeks exercise was learning the basics of text formatting and a practice task using Adobe In Design.

Figure 4.1 - Step one and two

First step of this exercise was to Make a business card using text formatting to align everything make it look clean. We were to choose a font that fits ourselves and then use kerning and tracking to fine tune the text of our information. Step 2 was to make different compositions of this business card by changing the alignments.

Figure 4.2 - Final step one and 2

The next step is to take one of the compositions and use as a letter head. We wrote a 200 word description of ourselves to be used as a letter. Then we adjusted the positions of the letter and letter heard using grids to align everything and checking different compositions. The letter text was also adjusted with word spacing to give it shape.

Figure 4.3 - Step 3 process

Figure 4.4 - Step 3 final

I ended up losing the files for this exercise so I am unable to upload a PDF for this exercise. The redone PDF is inserted under the week 4 exercise.

Text formatting part 2 (Week 4)

This exercise is a continuation of last weeks exercise. First part was applying the name card/ business card from part one into an envelope template provided. Since I lost the file for last exercise, I made a new one to be used.

The next part was to make some grids, and getting used to the grid system/ tools in Adobe In-design. We made 3 pages with different grids. Manipulating the margins, columns, and rows.

Figure 5.0 - Envelope

Figure 5.1 - 3 different grids, 3 pages in a row by disable shuffle page

Then we followed the tutorial stream to create a 2 grid body of text. Which includes a heading, name and a sub text part. For the main body of text I used a random text generator since I did not have the text body from last weeks exercise. I wanted to keep up with it in class so I did not have time to write another body of text.

Figure 5.2 - 2 grid text composition

As you will notice there are 4 grids. That is just so we can align the subtext in the first column. But ultimately this is a 2 column grid.

Figure 5.3 - First composition jpeg

For the second compositions we used a 3 column grid, with header and a name. We also included a picture. Since the columns are more narrow I used a smaller font because i wanted to fit it in the line length of 35-75 characters.

Figure 5.4 - 3 column grid

Figure 5.5 - second composition jpeg

The last compositions was to be our own composition. I went for a 1.75 size grid on the upper half of the page and 2 grids on the lower part of the page.

Figure 5.6 - My own composition

Figure 5.7 - Third composition Jpeg

I included 2 headings, one picture and name. I used kerning and letter spacing to adjust the ragging ( not going over 3 points for each one).

Figure 5.8 - Redone PDF of week 3 and envelope

Figure 5.9 - PDF file of exercise, adjusted after feedback

FEEDBACK

Week 1
Specific Feedback - I consult Mr.Vinod to ask if we should go ahead with digitizing after doing the sketches. I was told to go ahead but advised to have rough sketches and final sketches instead of one set of sketches.

General Feedback - We were given many tips on doing this certain exercise on Adobe Illustrator by Mr. Shamsul.

Week 2
Specific Feedback - Feedback was given on the rough illustration so I made the changes according to them. The typefaces seemed distorted but it actually wasn't. It looked like a problem with the exporting so I fixed that as well. Overall god a good feedback.

General Feedback - We were given feedback on how to export and the rules of the exercise were briefed again.

Week 3
No specific or general feedback as it was a public holiday.

Week 4
No specific feedback.

General feedback - Got feedback during other students consultation about different exercises.

Week 5
Specific Feedback - Redo week 3 exercise as I lost the files, minor adjustments to week 4 exercise to be done & a new composition for last part.

General feedback - Got a lot of feedback during other students feedback time and made adjustments to my work as it was going on.

Week 6
Specific Feedback - Project 1 headline looks good, Layout was safe but work on other layouts. If others dont work go back to original one.

General feedback - Got a lot of feedback during other students feedback time and made adjustments to my work as it was going on.

REFLECTIONS

Week 1

Experience: Got familiar with using blogger and Adobe Illustrator

Observation: Online lectures were not as difficult as i expected and i found myself to be more attentive this way, Although the classes were very long.

Findings: Got a lot of tips and information about using the text tool in Adobe Illustrator.

Week 2

Experience: Got feed back from the lecturers on what to correct about the exercises we did.

Observation: Learned a few more tips and tricks from illustrator and noticed we are starting to move between different apps and not just using illustrator.

Findings: We were taught how to make small animations using illustrator and Photoshop.

Week 3

Experience: First experience using Adobe In-design.

Observation: In design is quite similar to illustrator, apart from a few differences. In design is mostly geared towards text based work.

Findings: Learned the basics about text formatting.

Week 4

Experience: More familiar using Adobe In-design.

Observation: Adobe In-designs grids are very useful in designing and aligning bodies of text.

Findings: Learned some more details about text formatting. Including the rules of kerning, point sizes, ragging, line alignment etc.

Week 5

Experience: Text formatting adjusting after feedback

Observation: Listening to others feedback helps a lot.

Findings: Learning the advantages of taking notes during lecture and feedback.

Week 6

Experience: Learning to make the Project 1 headline I sketched out in Adobe Illustrator.

Observation: Listening to others feedback helps a lot.

Findings: Making a layout for project takes a lot of trial and error.

Search This Blog

Mohamed Shaayif Shakir (0332075)