Typography | Task 1: Exercises

24.09.24 - 22.10.24/ week 1- week 5
Subhana Salim / 0375936
Typography / Bachelor's of Design (Honours) in Creative Media / Taylor's University
Task 1 : Exercises

1. Lectures

2. Instructions

3. Task 1 Exercises

4. Feedback

5. Reflection

6. Further Reading

LECTURES

WEEK 1 :

Lecture 1 : Typo_0_Introduction

Difference between Calligraphy , Lettering, Typography

1. Calligraphy : refers to the different writing styles

Eg:- Black Letters, Round hand, Uncial

2. Lettering : refers to drawing out the circumference of the letter

3. Typography : refers to the style and appearance of the printed matter

Difference between Font and Typeface

1. Font : refers to the individual font or weight within the typeface

i.e. Georgia Regular, Georgia Italic, Georgia Bold

2. Typeface : refers to the entire family of fonts/weights that share similar characteristics

i.e. Georgia, Arial, Times New Roman

Lecture 2 : Typo_1_Development

Early Letterform development

Phoenician to Roman:

1. Phoenician :- Initially writing was done by scratching into wet clay with a sharpened stick or carving into stone with a chisel. Most uppercase forms are simple combination of circles and straight line, which was a result of the materials and tools used at the time.

2. Greek :- Phoenicians and other semitic people wrote from right to left. The Greek changed the direction of writing from left to right, called the 'boustrophedon'(Meaning the how the ox ploughs). Due to this the orientation of letterforms were also changed.

3. Etruscan and Roman :- Etruscan and Romans carvers first painted the letterforms before carving into the marble. Qualities of the strokes of the letterforms during the painting phase (Change in weight from vertical to horizontal, broadening of the stroke at start to finish) carried over to the carving phase

Hand scripts from 3rd - 10th century C.E

1. Square Capitals :- On Roman Monuments, they used Square capitals. During this period people used a reed pen and wrote at a 60 degree angle.

2. Rustic Capital :- Rustic capital are compressed version of square capital. They were written by holding a brush or a pen at a 30 degree angle. They took up less space and took less time to write, however they were slightly difficult to read

3. Cursive Writing :- Square and rustic capitals were used for special performances. Everyday transaction was written in cursive handwriting, which also resulted in the formation of lower case letters.

4. Uncial writing :- Include elements of both upper case and lower case into the writing style

5. Half uncial letters :- marks the formal beginning of lower case letters, after 2000 years of the origin of the Phoenician alphabet.

6. Charlemagne's empire :- Charlemagne's empire issued an edict in 789 to standardize all ecclesiastical text.

Blackletter to Gutenberg's type

1. Black letters and rotunda :- After the dissolution of Charlemagne empire, it led to regional variations in text. Northern Europe, blackletter or textura was popular, and in the south of Europe 'rotunda' became more popular

2. Gutenberg :- Gutenberg, who invented the modern day printing press, made a mechanism that mimicked the work of the scribe's hand.

Figure 1.1 Evolution of the alphabet

The main text type classification

1. 1450 Blackletter

2. 1475 Oldstyle

3. 1500 Italic

4. 1550 Script

5. 1750 Transitional

6. 1775 Modern

7. 1825 Square Serif / Slab Serif

8. 1900 Sans Serif

9. 1990 Serif/Sans Serif

Lecture 3 : Typo_3_Text_P1

Difference between Kerning, Letter Spacing, Tracking

Kerning : refers to the automatic adjustment of space between the letters
Letterspacing : refers to adding of space between the letters
Tracking : refers to both the addition and removal of space in a word or sentence (using both letterspacing and kerning)

Types of Text Formatting

Flush Left : make all the lines in the text start from the left side, and end where the last word of each line ends. spaces between the text is consistent, making an even grey value
Centered : imposes symmetry upon the text, assigning equal value and weight to both ends of any line
Flush Right : format places emphasis on the end of a line as opposed to its start
Justified : format imposes a symmetrical shape on the text. it is achieved by expanding or reducing spaces between words and sometimes letters.

Text Formatting Terminologies

Grey Value : Refers to the text on the white background
Leading : Refers to the space between each line of text
Rag : Refers to the jagged end of the left aligned text
Axial Layout : where the text is flushed towards the axis of the page
Cross Alignment : the level of the lines between two columns of text are the same
Reading Axis : The margin at which the starting/ending words of each line sits

Factors that reduce readability

Type size : Larger text are more legible
Leading : Less leading lead to more vertical eye movement. More leading is found to be difficult to read
Line length : Shorter lines are easier to read than longer lines. However extremely long or short line lengths also impairs reading . A good rule of thumb is to keep the line length between 55-65 characters.

WEEK 2 :

Lecture 4 : Typo_4_Text_Part 2

Ways to indicate a paragraph space

1. Using a pilcrow (¶)

2. Using line space 'Leading' between paragraphs. Eg:- if line space is 12 pt. then paragraph space is 12 pt.

3. Using indentation :- instead of placing a leading , each paragraph started after leaving a gap in the start

(When using indentation, use the justified alignment. Never use left or right alignment, as it would lead uneven ragging)

4. Extended paragraphs :- where the first line of each paragraph starts a little closer to the left margin compared to the rest of the lines in the paragraph.

Difference between line spacing vs leading

Leading :- is the space between descender of one sentence to the ascender of the next sentence

Line Spacing : space between the descender from one sentence to the descender of the next sentence

Things to avoid while formatting text

Widow : Short line of type left alone at the end of a column of text

Orphan : Short line of type left alone at the start of a new column

Figure 1.2 Widows and orphans

Ways to highlight text

1. Using Italics

2. Making the text bold

3. Changing the typeface to a more bold typeface

(When changing the type family from serif to sans serif, it is good to reduce the point size by 0.5 to match the x height of the serif typeface)
(While formatting numbers in a text, reduce the point size by 0.5, so it doesn't stand out )

4. Change the color of the text
(only change color to cyan, magenta, black for body text)

5. Placing a box around the text needed to be highlighted

(can do this in 2 ways :

starting the box at the reading axis, and the words at the start of each line is moved further to the right
starting the box a little before the reading axis, so the words start of all the lines start at the reading axis)

6. Using typographic elements like bullet points or quotation marks

Ways to indicate a type headline (Different types headlines are labeled as A,B,C, and so on based on the level of subdivision )

Figure 1.3. Ways to indicate a type headline

For A head line (Uses a paragraph space between A heading and body below it)

Using a bold text of different type family on top of the paragraph
Using a bold text of different type family on first line of the margin of the paragraph
Using the same type family but larger text on top of the paragraph
Using the same type family and same size, but the text is all on uppercase font, which is place on top of the paragraph

For B head line (they do not use paragraph space, instead use leading space between B heading and body)

Using same type family and same font size, but the B heading is in uppercase letters
Using same type family and same font size, but the B heading is in italics
Using same type family and same font size, but the B heading is bold
Using different type family but same font size, and the B heading is bold

For C head line (They do not use paragraph or leading space. The text starts after 2 spaces after the heading in the same line (This is called 'm' space))

Using same type family and same font size, but the C heading is in uppercase letters
Using same type family and same font size, but the C heading is in italics
Using same type family and same font size, but the C heading is bold
Using different type family but same font size, and the C heading is bold

WEEK 3 :

Lecture 5 : Typo_2_Basic

Typeface Terminology

Baseline : The imaginary line at the base of the letterforms
Median : The imaginary line defining the X-height of the letterforms
X height : The height in any typeface of the lowercase 'x'
Ascender Height : height of the ascender of the lowercase letter
Descender Height : height of the descender of the lowercase letter
Ascender : the portion of the lowercase letter that projects above the median
Descender : the portion of the lowercase letter that projects below the baseline
Cap Height : Height of the uppercase letter that extends from the media

Figure 1.4. Typeface terminologies

Stroke : Any line that defines the basic letterform
Apex/Vertex : Point where 2 diagonal stems meet (Apex is above, Vertex is below)
Arm : Short strokes of the stem of the letterform , either horizontal or inclined upwards

Barb : The half serif finish on some curved strokes
Beak : The half serif finish on some horizontal arms
Bowl : The rounded form that describes a counter. It may be open or closed
Bracket : The transition between the serif and the stem
Cross Bar : The horizontal stroke in a letterform that joins two stems together
Cross Stroke : The horizontal stroke in a lowercase letterform that goes across the stem
Crotch : The interior space where two strokes meet
Ear : The stroke extending out from the main stem or body of the letterform
Finial : Rounded non serif terminal to a stroke
Leg : Short stroke off the stem of the letterform (bottom or inclined downwards)
Ligature : The character formed by the combination of two or more letterforms
Link : The stroke that connects the bowl and the loop of a lowercase g
Loop : Bowl created in the descender of the lowercase g
Serif : Oblique or right angled foot at the end of the stroke
Shoulder : The curved stroke that is not part of a bowl
Spine : Curved stem of the S
Spur : The extension that articulates the junction of the curved and the rectilinear stroke
Stem : The significant vertical or oblique stroke
Stress : Orientation of the letterforms in round forms
Swash : The flourish that extends the stroke of the letterform
Tail : The curved diagonal stroke at the finish of certain letterforms
Terminal : strokes that doesn't have serifs

Small capitals : Upper case letters that is only of x-height (also called expert set)
Uppercase numerals : same height as uppercase letters (also called lining figures)
Lowercase numerals : same height as x height with ascenders and descenders (old style figures or text figures)
Ornaments : used as flourishes in invitations or certificates

INSTRUCTIONS

Task 1/Exercises:

Under Task 1 there is two exercises

Exercise 1: Type Expression:-

Exercise 1, we are given 4 words which we have to compose and express. First we have to make sketches which then needs to be digitized only using the fonts provided by them. Then one of the font expression, should be turned into an animation.

Exercise 2: Text Formatting:-

Exercise 2 requires us to format a body of text consisting of different types (Heading, sub-heading, body, image, image text, etc.) with focus on visual hierarchy, dynamic composition and clarity. However this is done with limitation to grayscale and only using the fonts provided to us.

TASK 1 : EXCERCISES

(I)EXERCISE 1 - TYPE EXPRESSION

We were given four words (Fancy, Bloom, Smoke, Spicy) and were required to express these words with the 10 typefaces given

Sketches

Figure 2.1. My initial sketches for the 4 words

I started with sketching ideas on my sketchbook. Getting ideas was difficult at first as this is something new for me. Few hours of working on it, I finalized on the few iterations for each word that I liked. From the four words the ones I struggle with the most were bloom and fancy. As requested by the teacher, I submitted these sketches given above as a comment under the teacher's post in Facebook.

For the spicy, i decided to warp the text to give the feeling of spiciness. Some iterations i tried to add fire or a chili to accentuate the spicy felling. For smoke, some iteration, I've tried warping the text to make the word look like its made of smoke. I've also tried to add cigarette and chimney blowing out smoke in other iterations. Fancy was more of a difficult one. I tried to shape the work fancy into different items associated with the fancy (such as:- Diamond, Bow, Wine Glass). For bloom, i tried incorporating flowers to show the process of a flower blooming. In another version, i replaced flowers with hearts (to indicate the idea of love blooming).

Digitizing of sketches

After doing the sketches for the type expression, I started on the digitizing process of one sketch per word. The sketches I chose to digitize was based on the ones I liked best and thought was the most unique.

Figure 2.2 Digitization of typography expressions process

However my first work for digitization of the words wasn't approved as it went against the guidelines of the task. I started working on different designs that fit within the guidelines and came up with new designs.

Final digitization of the 4 fonts

Figure 2.3 Final digitization of 4 words

Figure 2.4 Final digitization of the 4 words pdf

From the four words I decided to animate smoke.

Figure 2.5 Process of animating the word smoke

Final Animation

Figure 2.6 Final Animation of the word smoke

(II) EXERCISE 2 - TEXT FORMATTING

We were given a body of text and were required to format the text aesthetically using composition techniques. We are limited to using the 10 fonts given to us previously. The text layout is limited to black and white. We are allowed use an image but it must be in black and white. We are supposed to check for orphans, widows and cross alignment. This assignment is required to be done in InDesign.

Kerning and Tracking

I tried to practice kerning and letterspacing with all the 10 typefaces

Figure 3.1 10 typefaces before and after kerning

Layouts

After watching the tutorial videos I started working on my text formatting layout in InDesign. I tried to apply the golden ratio technique into my layouts. I mainly used Left justified alignment to manage the ragging. I tried to avoid orphans and widows wherever possible. I experimented with all the fonts for the title and body text. For the body text, I tried to use size of 10 pts, leading of 11 pts and paragraph spacing of 11 pts. I tried to ensure my body text was cross aligned as well.

Figure 3.2 Text formatting layout process

I tried to explore different layout designs.

Figure 3.3 Different iterations of text formatting layouts

From the 4 different iteration, I decided to go with the 6th one as I think it is the most appealing in aesthetically.

Figure 3.4 Chosen text formatting layout

Final Text Formatting Layout

HEADING

Font/s : Gill Sans Std

Type Size/s : 30/50 pts

Leading : 33 pts

BODY

Font/s : Janson Text LT Std

Type Size/s : 10 pts

Leading : 11 pts

Paragraph Spacing : 11 pts

Characters per-line : 55 characters

Alignment : Left- Justified

Margins : 35 mm top + bottom, 18 mm right + left

Columns : 2

Gutter : 10 mm

Without Grids

Figure 3.5 Final text formatting layout PNG

Figure 3.6 Final text formatting layout PDF

With Grids

Figure 3.7 Final text formatting layout PNG (With grids)

Figure 3.8 Final text formatting layout PDF (With grids)

FEEDBACK

Week 1 :

General Feedback : For the first week of class , Ms. Vitiyaa briefed us on what we will focus on in this module. She went through the module information booklet and the initial steps to be done at the start of the module. She also assigned us a task where we were given four words and were required to express these words with the 10 typefaces that they provided us. She also asked us to work on our E-portfolio which is also a part of task 1. This is due on Week 5

Specific Feedback : I first decided to watch the portfolio briefing video, to first get an idea on how I should approach the E- portfolio. Then i decided to watch a few lectures to get a good idea about typography before working on my sketches.

Week 2 :

General Feedback: For week 2, Ms Vitiyaa went over what needs to be done this week. She also requested that we watch the 3 lectures provided in Microsoft teams before we proceed with digitizing our sketches. She has also asked us to update both the excel sheet and the E-portfolio to write our feedback for the week. She went around the classroom to look into our progress for task 1 for our module

Specific Feedback: After looking at my sketches, she told me to do more sketches as the ones i have now does not fit the expectation she had in mind for this task. She asked me to search up type expression and take inspiration into what others have interpreted this task.

Week 3:

General Feedback: For week 3, Ms. Vitiyaa has requested us to upload the feedback sheet for week 3. We were also required to update our E-portfolio for the lecture notes, feedback, reflection and further reading for week 3. We were also required to upload the final static PNG of our type expression by today. We were instructed to start working on our animation for one of our illustrations by today..

Specific Feedback: When we were struggling with inspiration for our designs and one good advice she gave us was to think less, instead of overthinking our design.

Week 4

Specific Feedback : For week 4, Ms Vitiyaa noted some errors we made while working on our assignments. She said to rework our designs. She also asked us to start working on the second exercise which is due next week

General Feedback : She personally asked me to rework my designs for the four words as it went against the guidelines of the assignments. But she approved my animation for the word smoke

Week 5

Specific Feedback : For this week, Ms Vitiyaa asked to update the feedback sheet on excel. We are also required to be done with our task 1 exercise by this week. She has also requested us to work on our e-portfolio and make it up to date. She went through the details and format that needs to be taken care of for our e- portfolio. She also briefed us on how we should submit exercise 2 of task 1.

General Feedback : She went through the class to approve the text formatting of our text layout.

REFLECTIONS

Experience

My tutorial and practical class was mainly focused on briefing us on the assignments that we have to do. The classes were mostly casual and chill. We mainly work on our assignment during tutorial and practical class. The lecturer makes effort to help me when I have doubts. I am able to also ask for help and criticisms from my classmates as well.

Observation

The environment is very friendly. I am able to ask for constructive criticism from my peers, to which they give me valuable advice. My peers also compliment each others work. The atmosphere is quiet, which helps me with concentrating on my work. Seeing everyone else working on their assignments puts me in the mood to work as well. It improves my motivation.

Findings

I find that the advice my peers gave me were very valuable. I also learned that there is a lot of skills I lack and that needs work on improving. This module also taught me how to use Adobe illustrator and Adobe In Design, also how to animate on Adobe Photoshop. I feel like I am short of time, which means I should work on my time management skills.

Search This Blog

Subhana Salim (0375936)