Typography / Task 1 Exercises

On the first day of this semester, Mr. Vinod, my Typography lecturer gave us a brief introduction on Typography and what it's about. He also told us to join a Facebook group where we get all the files and information needed for our class and explain what each of the files and information are for such as the Feedback Sheet where everyone receives feedbacks that are either general or specific to a person. Other than that, he also show us how to create a blog for our e-portfolio and explains why it's required especially for design students. As a guide, an example was given by Mr. Vinod to help with creating the first blog and what he expects in an e-portfolio.

Lecture 2

On the second day of Typography class, Mr. Vinod introduces himself more and we get to know more about him in depth professionally. He shows us some of the works and achievements he has done as well as some of the challenges he faced. After that, he went on with the feedback and share his outlook and advise to us.

On his lecture video, we get to learn about the developments of Typography through out the ages, particularly in the western world as such documents are much more abundant.

The result of the very first writing is due to the usage of scratching in wet clay with sharp sticks or carving a hard stone with a chisel which would likely explain the sharp look of Phoenician letters on the left. As the writing tools gets more advance and more people use different writing techniques, the letter begin to develop accordingly, from Phoenician to Modern Latin or Early Arabic.

Figure 1.1 4th Century BCE Phoenician voltive stele Carthage (Left) and Evolution from Phonician letter (Right)

The direction of the writing also changes over time. The Phoenician wrote the letters from right to left in the beginning. The Greeks then develop a style of writing called 'boustrophedon' where they write alternately from right to left and left to right. This also resulted in the horizontally flipped letter forms.

Fig 1.2 Illustration on how boustropedon style works on Modern Latin

Hand script development from 3rd to 10th Century C.E.

4th - 5th Century: Square Capital

- Serifs are added.

- Variety of stroke weight.

- Weights achieved by holding a reed pen at a 60 degree angle.

Fig 1.3 Square Capital

3rd - Mid 4th Century: Rustic Capital

- A compressed version of Square Capital.

- Allows twice as many words and took less time.

- Achieved by holding a pen/brush at 30 degrees.

- Less readable due to compressed nature.

Fig 1.4 Rustic Capital

4th Century: Cursive Roman

- Use in everyday transactions.

- Forms were simplified for speed.

- Lowercase letter begin to develop.

Fig 1.5 Roman Cursive

4th - 5th Century: Uncial

- Incorporate some features of Roman Cursive.

- Some scholars believe letters are one inch due to the word uncial translates to 'twelfth of anything'.

- Broad forms of uncial are much readable at small size than Rustic Capital.

- Has uppercase and lower case incorporated into one.

Fig. 1.6 Ucial

C. 500: Half Uncial

- Further formalization of Cursive Hands.

- Replete with ascenders.

- Formal beginning of lowercase letterforms.

Fig 1.7 Half Ucial

C. 927 (Middle Age): Carolingian Minuscule

- A law was issued in 789 to standardize all text relating to the church.

- Majuscules (uppercase), miniscules, capitalization and punctuation is added and set the standard for calligraphy for a century.

Fig. 1.8 Carolingian Minuscule

C. 1300: Blackletter and Rotunda

- Different region begin to develop their own style.

- Northern Europe uses a condense strongly vertical letterform.

- Southern Europe uses a rounder and more open hand known as Rotunda.

Fig. 1.9 Blackletter

C. 1444: Gutenberg

- Created by a guy who invented a printing press.

- Mimic the work of a scribe using Blackletter.

- Create a type mold that requires a different brass matrix, or negative impression for each letterform.

Fig 1.10 Gutenberg

Text Type Classification

Blackletter (1450) - The earliest printing form, often use to print books in North Europe.

Example: Cloister Black, Goudy Text.

Oldstyle (1975) - Based on lowercase forms used by italian humanist scholars for book copying and uppercase letters found in Roman ruins.

Example: Bembo, Caslon

Italic (1500) - Mimicking contemporary Italian handwriting. Was originally its own form type but is soon cast to complement roman type.

Script (1550) - Originally an attempt to capture engraved calligraphic forms. Deemed inappropriate for long text but acceptable for short application.

Example: Kuenstler Script, Mistral

Transitional (1750) - A refinement of Oldstyle form. Thick to thin relationships are exaggerated, and brackets are lightened.

Example: Baskerville, Bulmer

Modern (1775) - Further rationalization of Oldstyle letterforms. Serifs were not connected by a curve (bracket), and the contrast between thick and thin strokes are more prominent.

Example: Bell, Bodoni

Square Serif / Slab Serif (1825) - Originally heavily bracketed with wide range of thickness. Use for commercial advertisement. Brackets are dropped during its development.

Example: Serifa, Rockwell

Sans Serif (1900) - Removes the serif entirely.

Example: Univers, Helvetica

Serif/Sans Serif (1990) - A recent development. Enlarges the notion of a family typeface by combining both serif and sans serif.

Example: Rotis, Scala

Lecture 3

On the third day of the lecture, the classes are held online and is mainly about receiving feedback about the word expression. The feedback given to me is recorded under week 3 of the feedback section.

Kerning and Tracking

For the lecture videos for this week, we are taught on textual matter and formatting. The first thing we taught about is the difference between kerning and letter-spacing which are often mix up with one another.

Kerning - Automatic adjustment of the space between letters.

Letter-spacing - Adding space between the letters.

Fig 2.1 Without Kerning (left) and With Kerning (right)

Kerning are often use in large title or uppercase letters where big spaces are often emphasize. With kerning, we also learn about tracking and its four type.

Tracking - Addition or removal of space in the word or sentence.

Normal Tracking - A standard number of space between letters, given as a default. Has high

readability.

Tight Tracking - Reducing the space between letters and making it compact. Reduce readability.

Loose Tracking - Adding more space between letters. Reduce readability.

Formatting Text

Flush (Align) Left - Asymmetrical text where each line starts at the same point but ends wherever the last word of the line ends. Has consistent space between words.

Flush (Align) Right - Asymmetrical text where the lines starts wherever but ends at the same point on the right. Creates strong emphasis on the right.

Centered - Symmetrical text where both lines are assign with equal weights and value and creates a strong shape in text. Both sides tend to appear ragged. Should not be use in wordy texts.

Justified - Symmetrical text that are similar to that of centered except that both sides of the text starts and ends on the same point. However, the openness of white space creates a jagged gaps running vertically down the text.

Texture

Not only do we have to choose a suitable typeface to convey the message, the typeface chosen also effects the overall texture of the text depending on the x-height or the weight of the stroke. It is crucial to develop sensitivity to grey value.

Leading and Line Length

The text should occupy the space just as much as the images.

Text Size - Text should be large enough to read easily, similarly to reading a book on your lap.

Leading - A space between lines. Too little space and readers might lost their place easily. Too much space creates a stripe pattern that may distract the reader.

Line Length - A good rule of thumb is that a line should not have more than 35 - 65 characters. A length too short or long reduces readability.

Type Specimen

It is important to view the text with an increase of 400% in text to be able to determine the relationship between the descender in one line and the ascender of the line below. Printed text are the most accurate way to see how a work turns out unless the work are digitally presented.

Indicating Paragraph

Pilcrow - A pilcrow is a symbol that looks like this ' ¶ '. It is usually use at the beginning of a new paragraph. Nowadays, this way of indication is rarely used in the modern world.

Line Space (Leading) - Line spacing is used to create white space between paragraphs. The white space is always two to three points bigger than the typeface size. If the X height of the type is larger, use three points.

Indentation - Indentation is the spacing on the left of the first line of a paragraph. Typically indent has the same size of line spacing or the same size of typeface size. Often use in newspaper to save space and can only be use when text is justified align.

Extended Paragraph - The opposite of an indentation. The first line is written as normal but the rest of the line in the paragraph has spaces on the left of it. Create an unusually wide columns of text. Generally not recommended unless for compositional reasons.

Widows and Orphans

Widows - Widows is a short line of type left alone at the end of the text.

Orphans - Orphans is a short line of type left alone at the start of a column.

The image shown below shows what a widows and orphans look like in text. The text highlighted in yellow is a widow, the text highlighted in red is an orphan. Both of these should be avoided at all cost.

Fig 2.2 Text showcasing the widows and orphans

How to Avoid Orphans and Widows

- Reducing the column height and introduce the second line.

- Re-break your line ending through out the paragraph so the last line is not noticeably short.

- Kerning can also be use but can only do so at most 3 points of 50 tracking points.

Highlighting Text

- Using italics.

- Using bold.

- Using a different bolder typeface or type family.

- Change the text to different colors (can only use cyan and magenta).

- Place a field of colors behind the highlighted text.

- Reading axis (Bullets).

- Quotation Marks

If type family is change in order to highlight the text, an example would be changing from serif to san serif fonts, you might want to reduce the point size by '0.5'.

Headline within Text

A Head - An A head indicates a clear break between the topic of the section. It can be larger than the body text, in small caps and in bold. The left example shown below also shows an extended A headline.

Fig 2.3 A Head Examples

B Head - A B Head is subordinate to the A head. B Head should not interrupt the text as strongly as the A head. It is shown in small caps, italic, bold serif and bold sans serif.

Fig 2.4 B Head Examples

C Head - The C Head highlights specific faucets of material within B Head. C Heads are shown in italic, small caps, bold serif and bold sans serif. Should not interrupt the flow of reading. Configuration below shows an em space (two spaces) to for visual separation.

Fig 2.5 C Head Examples

Cross Alignment

Cross Aligning headlines and captions with text type enforces the architectural senses of the page.

External Lecture Advise

- Never use script font for an all uppercase letters text.

- Primes symbol are straight while quotation marks are slanted.

- Each line should have between 55-65 characters.

INSTRUCTIONS

Task 1 Exercise 1 - Type Expression

Text Expression

For the first task of Typography, we were given a list of words and everyone in class vote for the words they want. Here are the words chosen:

- Speed

- Shatter

- Melt

- Blur

- Dance

- Throw

- Kill

Sketches

Each of everyone have to sketch four word expressions from the list above. Here are the first initial sketches:

Fig 2.1 Sketches (6/4/2023 Week 1)

Digitization

After hearing further criteria for the project, I pick out the designs that fulfills the criteria or is possible to fulfill the criteria with minor adjustments made. Here are four initial digitization of a selection of design:

Fig. 2.2 Initial Digitization (15/4/2023 Week 2)

The digitization process of each design are as follows:

SPEED

First, I type down the word SPEED with a planned font, Futura Std Light. I right click on the letters and create the outline. Then using the knife tool, I cut off the vertical lines of both Es and remove it. Then I increase the distance between the D and SP and readjust the horizontal lines of both Es.

Fig 2.3.1 Creating Outlines for Speed (15/4/2023 Week 2)

Fig 2.3.2 Cut and Remove Vertical Lines (15/4/2023 Week 2)

MELT

I repeat the process with MELT until I create the outlines but I use Gills Sans Std instead and have the letter E in lowercase. I then ungroup the words and move the E above MLT. I then create various lines around the E and readjust them according to how the other lines are placed and ensure it's balanced. Then, I use the pen tool and create a small dripping effect below the letters. To save some time, I also duplicate the drip effect for the other letters without having them all look the same.

Fig 2.4.1 Realigning The Letters (15/4/2023 Week 2)

Fig 2.4.2 Drawing the Dripping Effect (15/4/2023 Week 2)

KILL

Once again, I repeat the first few process and then I use the knife tool and cut the words diagonally and pull out the piece, leaving a diagonal gap. I then cut the pieces into much smaller pieces and place them back in the gap and place it slightly bottom left of the piece's original position. I only put some of the pieces in order to avoid making the design 'busy'.

Fig 2.5.1 Creating Outlines for Kill (15/4/2023 Week 2)

Fig 2.5.2 Putting the Pieces Aside (15/4/2023 Week 2)

BLUR

After I repeat the first few process again, I duplicate the word over and over and align them and have the overlap with one another. I leave one word out and proceed to group the rest of the words and make them grey to create the blur effect. Then I place the main letter in the center front of the group.

Fig 2.6 Duplicate the Word (15/4/2023 Week 2)

In addition to the first four designs, I've also attempted to digitize a few of my other design in case any of the design above is completely rejected.

Fig 2.7 Other Initial Sketches (15/4/2023 Week 2)

Final Result

Since none of the first four digitization is in need of a complete redo, I move on to the next process of the design. I readjust the design according to the feedback I received on week 3 and here are the final results:

Fig 2.8.1 Final Submission (18/4/2023 Week 3)

Type Expression Animation

Animation Process

For the second part of this exercise, we are tasked in animating our text expression. Among the four expression I have created, I decide to pick 'Kill' for my animated expression. First, I type down the text 'Kill' in Adobe Illustrator and size it up. I then copy the art board and put it aside.

Fig 2.9 Copying Art Board (24/4/2023 Week 4)

I proceed by creating a line diagonal to the letter 'L' that is about to cut the letter. Three frame showing it approaching and the letter gets cut into pieces when it touches it. To create that effect, I use more lines and place them around the areas I want to cut. Using the shape tool that I've learnt from another class, I parts that I want to cut.

Fig 2.10 Using Shape Tool To Cut (24/4/2023 Week 4)

Fig 2.11 Pieces Pulled Apart (24/4/2023 Week 4)

I place each of those pieces toward the direction that the 'slash line' is going. I did all this for every frame.

In the middle of doing my work, one of the letter that has been cut through has a floating upper part which I find odd for it to float so I decide to have it collapsed as it makes more sense and also makes the animation more interesting.

Fig 2.12 Floating Upper L (24/4/2023 Week 4)

Fig 2.13 Collapsing Upper L (24/4/2023 Week 4)

For the rest of the letters, I continue to cut the pieces apart, move the direction of falling pieces, expand the 'slice line' until the line reaches the lower left part of the K. I add a few more frames after to show the letters collapsing and turn the letters black once I'm done.

Next, I load all the frames in stack on Adobe Photoshop and create an animation frame. Each sequence is now in layers, the first sequence being the first layer and the last being the final. I simply capture the frame and then hide the upper layer, then I capture the frame. I repeat this until the end. After I'm done, I export the animation in GIFs.

Fig 2.14 Animation Frame on Photoshop (24/4/2023 Week 4)

Final Result

Fig 2.15 Animated Expression (24/4/2023 Week 4)

Task 1: Exercise 2 - Formatting Text

Kerning and Tracking

For the next part of our task, we are tasked to create a text format. First, we have to practice kerning and tracking our own names using the ten font types provided.

Fig 3.1.1 Text Without Kerning (30/4/2023 Week 4)

Fig 3.1.2 Text with Kerning (30/4/2023 Week 4)

Fig 3.1.3 Text with Kerning 2 (30/4/2020 Week 4)

Text Formatting

The next step of the task is to follow the tutorial video uploaded by Mr. Vinod step by step, including forming guidelines and columns, choose the typeface, place the layout, add letter-spacing etc in Adobe Indesign.

Fig 3.2.1 Formatting Process (30/4/2020 Week 4)

As part of my experimenting process, I create six layouts and see which of the layout works and which doesn't. Here are my layouts:

Fig 3.2.2 Layouts (30/4/2020 Week 4)

With Mr.Vinod's advice in mind, I select one that I believe would be more suitable layout for the task. The one I have selected is format number 2 as it has the most proper aligned text without while having an interesting layout.

Layout 3.2.3 Layout #2 (30/4/2020 Week 4)

Then I polish the text format according to the feedback I receive.

Final Text Formatting Layout

HEAD
Font/s: ITC Garamond Std
Type Size/s: 27 pt
Leading: 13.5 pt
Paragraph spacing: 0

BODY
Font/s: Univers Lt Std
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 10 pt
Characters per-line: 54
Alignment: Left Aligned

Margins: 41.6 mm bottom, 12.7 mm left + right + top
Columns: 2
Gutter: 4.2 mm

Fig 3.3.1 Final Layout (02/05/2023 Week 5)

Fig 3.3.2 Final Layout (02/05/2023 Week 5)

Fig 3.4.1 Final Layout 2 (02/05/2023 Week 5)

Fig 3.4.2 Final Layout 2 (02/05/2023 Week 5)

FEEDBACK

Week 2

General Feedback

Presentation can use work. If a project requires a scan via phone, need to use DIRECT sunlight. Ask yourself whether your sketches conveys the meaning of the word. Graphics within the sketches can only be use at a minimum, the lesser the better. Do not add unnecessary depth to your sketches, ask yourself whether certain elements of the sketch helps conveys the meaning of your design or contributes nothing.

Week 3

Specific Feedback

SPEED design is distorted which is not allowed in this exercise and maybe change the words into a condensed font. Reduce the lines surrounding the e to 0.5 points and readjust the position of melt. Change the black letters to dark grey to make it more less pronounce. Get rid of the bullet in Kill and just go with the slashing concept.

General Feedback

Align your design in the center of the box, then see the overall balance of the design. Make sure that the weight is distributed equally on both side. Only use the ten type families given to you.

Week 4

Specific Feedback

(Blog Feedback) Add a line above the 'Instruction'. Format the blog properly.

General Feedback

(Exercise Feedback) Use 24 Frames for your animation to make it smoother. (Blog Feedback) Ensure the size of the final submission and progress is different in size. Submission in JPEG and/or PDF form.

Week 5

Specific Feedback

Image used is not suitable, reduce spacing between paragraph, text is sticking, dragging is not good and one of the format is too complex for beginners.

General Feedback

Reduce size of abbreviation by 0.5 points. Relate the text box with one another.

REFLECTIONS

Experience

When I first heard of Typography class, I didn't think much about it other than it's just one of those class that gets added to our module just for the sake of it. I even thought how easy it would be considering it's just typing down words and rearranging them in an interesting manner without any regards. I was very wrong. This is only the first task in Typography, a first taste if you will but it has already shattered my expectations completely of the subject. The task given is fairly challenging especially when you are required to be very meticulous in rearranging the words. I've enjoyed some of the exercises provided in task 1 (particularly the animated text expression). I wouldn't say task 1 is a stress-free experience in fact, it's the opposite. However, it does teach you skills you needed to face in a fast pace industry like design and this is only the first task.

Observations

I have observed that watching the lecture and writing them down onto this blog helps me stay focus and retain most of the information much easily, especially through lectures that even Mr. Vinod himself finds dry. Unlike an in-person lecture, I can pause the lecture and take down notes which I find is my preferred way of learning since typing down notes from lectures requires me to understand the lecture rather than just listening and miss some crucial information that flies over my head at the moment. It has disadvantages however as it takes longer to finish the lecture but I personally find the benefit overrule the disadvantage.

Findings

As I get through my first Typography task, I find that I have a new-found respect for Typography and that I should be taking Typography just as serious as any other subject in creative media. I have also found that even the smallest detail can change the overall expression of the text and that I need to learn to be more meticulous with my work. I'm still a long way from being as meticulous as Mr. Vinod but as I have said, this is only task one.

Search This Blog

Johnny Lam Wee Zhe (0363436)