Typography Task 1 - Exercise 1 & 2

29/3/2022 - 19/4/2022 (Week 1 - Week 4)

Afif Shukri / 0354429

Typography / Bachelor of (Design) in Creative Media / GCD60104

Task 1: Exercise 1 & 2

LECTURES

Week 1 - Introduction & Briefing - 29/3/2022

First week of class was an introduction of the typography module and briefing on the E-Portfolio as-well as an inside of the whats to come in the next few weeks.

Mr Vinod also explained the importance on joining the Typography Facebook group to keep up with the informations about the class's announcement and other useful learning materials in the group page. One of the first task that was given to us by Mr Vinod was a setup of our E-Portfolio on Blogger.com.

This blog will be used to record all our assignments, tasks, feedbacks, reflection and many more. Mr Vinod also assigned us to watch a youtube playlist with videos that will help us with our E-Portfolios.

Mr Vinod also assigned us a task to choose 4 words prepared by Mr Vinod on the Typography Facebook Page and design with our own creativity through sketch.

Typography: Development & Timeline Summarisation

Early letterform development: Phoenician to Roman

Initial writing was performed by scratching into wet clay with sharpened stick or carving into stone with a chisel.

fig 1.1 - development of fonts

The Greek changed the direction of writing. For example, the Semetics People (Middle Eastern) including Muslims, Christians and Jews wrote from right to left. On the other hand, the Greek developed a writing called 'Boustrophedon' (how the ox ploughs) which is meant by writing and reading from left to right.

fig 1.2 - direction of writing of the greeks

Examples of some of the letters developed through out the time:

fig 1.3 - developments of letters

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

Square Capitals were written versions that can be found in Roman Monuments. These letterforms have serifs added to the finish of the main strokes and has varieties of stroke width that was achieved by reed pen held at an angle of approximately 60° off the perpendicular.

fig 1.4 - square capitals (4th or 5th century)

Rustic Capitals is a compressed version of Square Capitals. Quite fast to write and allows twice as many words on a sheet of parchment and took far less time to write. The pen or brush needs to be held at approximately 30° off the perpendicular. Although they were faster and easier to write, they were much harder to be read.

fig 1.5 - rustic capitals (late 3rd to mid 4th century)

Roman Cursive is a lower case letter form. The development was the result of writing the uppercase letter form quickly as result the lower case letter form was created.

fig 1.6 - roman cursive (4th to 5th century)

Uncials incorporated some aspects of the Roman Cursive Hand, especially in the shape of A, D, E, H, M, M, U and Q. 'Uncia' is the Latin for a twelfth of anything.

fig 1.7 - unicals (4th to 5th century)

Half Uncials is the further formalisation of the cursive hand. They mark the formal beginning of lowercase letterforms.

fig 1.8 - half uncials (500)

Caloline Miniscule came from Charlemagne, the first unifier of Europe since the Romans. Charlemagne issued an edict in 789 to standardize all ecclesiastical texts. He trusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the text using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

fig 1.9 - caloline miniscule (925)

Blackletter or Textura is a condense strongly vertical letterform that gained popularity amongst the Northern Europe. Meanwhile, in the South, a rounder more open hand gained popularity called 'rotunda'.

fig 2.0 - blackletter or textura (1300)

Text type classification

fig 2.1 - 1450 blackletter

Week 2 - Evolution of Typography - 5/4/2022

The task assigned by Mr Vinod was due this week. We had to scan our sketches and upload through a post thread in the Typography Facebook Page. As per usual, Mr Vinod gave us feedback and further improvement that could be made on our sketches that is to be digitalized. Mr Vinod also showed us how to create effects and other skills on Adobe Illustrator.

Once Mr Vinod was done giving the feedbacks. We were then told to make improvements and to animate the digitalized sketch using Adobe Photoshop which is to be handed in next week.

Typography: Basic & Describing Letterforms

Basic describing letterforms terms:-

Baseline is the imaginary line the visual base of the letterforms

Median is the imaginary line defining the x-height of letterforms

X-height is the height in any typeface of the lower case 'x'

Stroke is a line that defines the basic letterforms

Apex / Vertex is the point created by joining two diagonal stems (apex above and the vertex below)

Arm is a short stroke off the stem of a letterform, either horizontally or vertically.

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

Barb is the half serit finish on some curved stroke.

Beak is the half serit finish on some horizontal arms.

Bowl is the rounded form that describes a counter. Can be either open or closed.

Bracket is the transition between the serif and the stem.

Cross Bar is the horizontal stroke in a letterform that joins two stems together.

Cross Stroke is the horizontal stroke in a letterform that joins two stems together.

Crotch is the interior space when two strokes meet.

Ear is the stroke thats extending out from the main stem or body of the letterform.

Em/en is the original referring to the width of an uppercase M and em is the distance equal to size of the typeface. An en is half the size of an em. It is most often used to em/en spaces and em/en dashes.

Finial is the rounded non-serif terminal to a stroke.

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

Link is the stroke that connects the bowl and the loop of a lowercase G.

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

Spine is the curved stem of the letter S.

Spur is extension of the articulates the junction of the curved and rectilinear stroke.

Stem is the significant vertical or oblique stroke.

Stress is the orientation of the letterform, indicated by a thin stroke in round forms.

Swash is the flourish that extends the stroke of the letter form.

Tail is the curved diagonal stroke at the finish of certain letterforms.

Terminal is the self contained finish of a stroke without a serif. Terminals can be flat, flared, acute, grave, concave, convex or rounded as a ball/teardrop.

Uppercase is capital letters.

fig - uppercase letters

Lowercase is lower case letters.

fig - lower case letters

Small capitals is uppercase letterforms draw to the x height of the typeface. Can be found normally in serif fonts of what is ofted called expert set

fig - small capitals

Uppercase numerals also called lining figures are numerals that are the same height as uppercase letters and all set to the same kerning width. Mostly used in tubular material or in an situation that calls for uppercase letters.

fig - uppercase numerals

Lowercase numerals also known as old style figures or text figures are numerals set to x height with ascenders and descenders. Lowercase numerals are less common in sans serif type-faces than in serif.

fig - lowercase numerals

Italic is what most fonts today are produced with matching italics. Small caps are however always in roman. Oblique are normally based on the roman form of typeface.

fig - italic

Punctuation, miscellaneous characters contains standard punctuation marks

fig - punctuations

Ornaments is used as flourishes in invitations or certificates. They are usually provided as a font in a larger typeface family.

fig - ornaments

Tools for emphasis:

fig - tools for emphasis

Typefaces provided by Mr Vinod:

fig - typefaces provided by mr vinod

Week 3 - Animation - 19/4/2022

In week 3, we began animating our digitalized sketch on Adobe Illustrator & Adobe Photoshop. First and foremost, the designing part was mostly done through Adobe illustrator and Adobe Photoshop was mostly used for finalizing and creating it into a GIF.

Typography: Text / Tracking: Kerning and Letterspacing

Kerning is referred to the automatic adjustment of space between letters. It is mistakenly referred to as 'letterspacing' which means to add space between the letters. The addition and remove of space in a word or sentence is referred to as 'tracking'.

fig - kerning

Mr Vinod giving tutorial on how kerning works:

fig - kerning tutorial on indesign
by mr vinod

Normal tracking, loose tracking & tight tracking:

fig - variations of tracking

Designers often uses letterspace on uppercase letters. Uppercase letterforms are drawn to be able to stand on their own. On the other hand, lowercase letterforms require the counter-form created between letters to maintain the line of reading.

The reason:

fig - the reason of use

Normal Tracking vs Tight Tracking

fig - normal & tight tracking

Typography: Text / Formatting Text

Flush Left is a format that a text on a paragraph is aligned on the left hand side.

fig - flush left

Centered is a format that imposes symmetry upon the text, assigning equal value and weight to both ends.

fig - centered

Flush Right is a format that a text on a paragraph is aligned on the right hand side.

fig - flush right

Justified is similar to centering, this format imposes a symmetrical shape on text.

fig - justified

Typography: Text / Texture

fig - anatomy of a typeface

INSTRUCTIONS

TASKS

Task 1 | Exercise 1 - Type Expression

The first task that was given by Mr Vinod was to choose 4 words from a poll in the Typography Facebook Group and to design a typography with our own creativity.

The word Pop was mandatory and the other 3 words i chose is Squeeze, Explode and Grow. An option to either illustrate digitally or on paper was an option. I chose to sketch mine on paper as it has more flexibility and freedom to design. These words will need to be digitalized next week with only using 10 typefaces that provided by Mr Vinod.

The design sketches cannot be colored as it was needed to be in black and drawing patterns were not allowed. Below is the outcome of my sketches:

We were asked upload our sketches on the Facebook Page to get feedbacks from Mr Vinod. From there, we could make improvement that was needed and ready to be digitalized next week.

Digitalized Sketch

In Week 2, it was more less a continuation of week 1. We had to digitalized the sketch we made with the provided typefaces and templates by Mr Vinod. I used the feedback given by Mr Vinod to make improvements.

These are the outcomes of my digitalized sketch for the first draft.

fig - sketch draft (5/4/2022)

fig - second sketch draft (5/4/2022)

Design Process

POP

For the word POP, the design process was quite simple. First and foremost, I defined what i wanted to do with the design theme. Then. i decided that i wanted to go through with a minimalist design. This was the outcome and the thought process of the design.

fig - design process for pop

fig - animation process for p

For the

fig - animation process for squeeze

Final Submission of Type Expression

After receiving feedbacks from Mr Vinod. I have made some changes accordingly and decided to go through with these designs as my final type expressions. Now with a finalised type expression, i can proceed to the next task which is to animate our typefaces.

fig - final type expression in jpeg (12/4/2022)

fig - final type expression in pdf (12/4/2022)

Animation

On the third week, after we've done with the digitalized work and finalised our chosen type expression. We had to animate the work using Adobe Illustrator and Photoshop. These are the outcomes of the animation

Explode:

fig - explode animation

Squeeze:

Grow:

Animation Process

fig - animation process for pop

fig - animation process for squeeze

fig - animation process for explode

Final Animated Expression

fig - final animated expression (19/4/2022)

Task 1 | Exercise 2 - Text Formatting

For exercise 2, Mr Vinod assigned us a task to format text and familiarize with kerning and tracking to be specific. The software used to do this task was Adobe Indesign. We were asked to kern and track our names with the 10 typefaces provided by Mr Vinod.

Beforehand, we were told to watch the tutorial video titled Typo_Ex Text Formatting 1:4 on youtube to help get started.

fig - text formatting draft on all 10 typefaces

In this draft, i experimented with the different styles thats available in all the ten different typefaces.

fig - text formatting draft on all 10 typefaces with different styles.

Final Text Formatting

fig - final text formatting 1 on JPEG (kerning & tracking)

fig - final text formatting 1 on PDF (kerning & tracking)

Text formatting 2 (Typo_Ex Text Formatting 2:4)

First steps of formatting text on A4 size page. Mr Vinod also warned that for an A4 size page the columns should be less than 4. To adjust the column on Indesign: Layout > Margins and Columns, make sure the preview is on to see preview before executing.

fig - first step of formatting

Some information to be on the lookout when formatting text:

To determine the right font size is between 8 - 12 points.
Line length should be on average of 60 per sentence.
2-3 points leading is good for text, depending on the typeface.
Paragraph spacing should follow spacing points.
Number of characters in the column should be anywhere between 55-65.
Leading should be 2 points larger.

fig - progress of text formatting

From here, the line length is very easy to read and evenly spaced.

Text formatting 2 (Typo_Ex Text Formatting 3:4 & 4:4)

In session 3:4, the tutorial was more on how to connect text, alignment and a bit of ragging.

fig - adding image to the document

Make sure text are justified accordingly, in this case i used left justified. As you can see, the left text on the left side compared to the right side is more neatly formatted due to the justification.

fig - justified vs non justified

After several tries and learning to the different tools. I came up with my first draft. Though there are still room for improvements.

fig - first draft without preview

fig - first draft with preview mode

Looking at my first draft. It looks very messy and not well formatted. Tried trial and error to see whats the best fitment to get the document look suitable, I experiment with tools taught by Mr Vinod in the four videos. Furthermore, the kerning and tracking isn't very well done too, therefore it needs adjustment.

Final Submission

fig - final submission of text formatting in jpg

fig - final submission of text formatting with guidelines in JPG

fig - final submission of text formatting with guidelines in PDF

FEEDBACK

Week 1

Introduction class, there wasn't any feedbacks. It was more of an introduction to the module and getting to know more about the classes and the upcoming weeks. This includes watching the e-portfolio briefing video and other tutorial videos to help with doing our exercises.

Week 2

Feedbacks given by Mr Vinod was overall alright. Though, there was still room for improvements. He said that the squeeze was a bit too basic and could use some adjustments.

Week 3

Feedback given by Mr Vinod was good. Just try smoothen out the animation so that it doesn't not look too fast.

REFLECTION

Experience

Week 1:

As a first timer using Blogger. It was quite overwhelming at first. But progressively throughout the day of exploring Blogger, i seem quick to catch up on how to browse through Blogger thanks to Mr Vinod's Youtube video on E-portfolio. Very detailed and a thorough explanation on how to setup and use Blogger.

Week 2:

For week 2, it was more on reflecting to ourselves for our sketches. This is because we were assigned a task by Mr Vinod last week which is to sketch typography designs on the 4 words of our choice. I definitely faced a bit of challenge in terms of drawing. Apart from that, it was going smoothly.

we started digitalizing our work with Adobe Illustrator. Overall, it was quite easy to navigate throughout the day because i'm quite familiar with the software.

Week 3:

On the third week, we started animating our digitalized sketch on Adobe Illustrator & Photoshop. Although, this is my first time animating on Illustrator & Photoshop, it was quite easy to learn to animate with the help of Mr Vinod informative Youtube Tutorial Video.

Week 4:

Public holiday therefore there were no classes. Although, there were no classes Mr Vinod did a short online zoom session to give feedbacks and provided help to those needed some help on doing their tasks. I did not attend the live zoom session but I did watch the recording to see If i have missed any crucial information that could affect my tasks.

Week 5:

Started text formatting. It was my first time using Indesign and i have to say, for the first few hours I was overwhelmed by the software and was really still in the learning phase. Although some tools were similar to Adobe Illustrator and Photoshop it was still quite the challenge for me. With the help of Mr Vinod's tutorial on Youtube, I could understand and found my way at ease quickly soon after watching the videos.

Observation

With the feedback given by Mr Vinod on work. It helps me to develop and take into consideration on the constructive criticism to improve my design. Especially using Indesign for the first time, being able to learn and observe how Mr Vinod works through the software really amazes me. Kerning and tracking, I was very fascinated by it, as before this I didn't know such thing exist. Especially the very well informative videos made by Mr Vinod, It really helps me improve my skills with ease.

Findings

Week 1:

With the help of the Youtube videos created by Mr Vinod. It helps educate and broaden my knowledge on Typography. By the end of the day, I was able to differentiate between different fonts and typefaces.

The general but very interesting choices of words provided by Mr Vinod in the Facebook Poll for our sketching task really helps me to explore the different possible ways to design a word according to their meaning.

Week 2:

On week 2, Mr Vinod showcased some of his skills and shortcuts on Adobe Illustrator. Being able to learn these skills really helps to get around the software much quicker and more efficiently.

Week 3:

Found out that you could animate with Adobe Photoshop. It was a first timer for me, but nonetheless really enjoyed animating with Adobe Photoshop. Took a while to understand and to get familiar with the different settings. Played around with the buttons and timing to get more familiar with animation process.

Week 4:

Public Holiday. Even with public holiday, Mr Vinod still did a short live session to those that wants to come in are welcomed. I should have probably joined the meeting as it was the starting week of formatting text using Indesign and i wasn't particularly great at using the software.

Week 5:

Learned a lot of from using Indesign, especially with the help of Mr Vinod's tutorial videos on youtube.

Search This Blog

Muhammad Afif Safwan Hj Akzam Shukri (0354429)