Typography - Task 1: Exercise

September 23, 2024

Typography - Task 1: Exercise

24/09/2024 - 29/10/2024 / Week 1 - Week 6
SOFIA CHEW / 0377902
Typography / Bachelor of Design (Hons) in Creative Media
Task: Exercise 1

TABLE OF CONTENT

1. Lectures

2. Instructions

3. Task 1- Exercise 1&2

4. Feedback

5. Reflection

6. Further Reading

1. Lectures

Week 1

Typo_0_Introduction
      Typography is a fundamental skills that is applicable for other module and design skills. It is an act of creating letter/ letter shape and also the creation of typeface or typeface family. Typography also influence the overall aesthetic of a website (good sense of typography = good typography ). Arrangement of typography includes selecting typefaces, point size, line length, line spacing (leading), letter spacing (tracking) and adjusting the spaces within the letters pairs (kerning). In order to master typography it is important to practice, observes, seniors and also reading. According to Mr. Vinod, reading is where most of the skills and inspiration comes from.

       Terminology
   Font: refers to an individual font or weight within a typeface.

Fig 1.1 Font Example

    Typeface: refers to an entire family of fonts or weights that share similar characteristics or style.
Fig 1.2 Typeface Example
Typo_1_ Development
1. Development
Early letterform development: Phoenician > Roman
Phoenician: First ever alphabet being develop. Phoenician script has a fixed writing direction which
is left to right. During that period of time, the tools that are hold in our hands has an important influence on the types of writing that's created. (e.g: sharpened stick, chisel, soft clay, stone.)

Boustrophedon: The Greeks changed the style of writing direction and orientation of the letter. They
are written from right to left and from left to right in alternate lines. Boustrophedon comes from the ancient
Greek original term that means "like the ox turn while plowing". It's mostly seen in ancient manuscript.

Etruscan: Etruscan alphabet was developed from Greek alphabet brought to Italy by Euboean Greek.
Before carving text out onto the stone, artist would sketch text down first then chisel them onto the stone. The written direction of Etruscan text is right to left.

Fig 1.1.1 Early Letterform

Hand script form 3rd - 10th century C.E.

Square capitals: Serifs are being added. There is a prominent thick and thin differences per capital.

Fig 1.1.2 Square capital text

Rustic Capital: Compressed version of square capital, they tend to be more difficult to read.

Fig 1.1.3 Rustic capital text

Roman Cursive: Its the everyday form of handwriting used for writing letter. It is used for quicker, informal writing and eventually developed the lowercase letterform.

Fig 1.1.4 Roman cursive text

Unicials: Unicial were written entirely in capital letter. It's mainly used to write Greek, Latin and Gothic. The broad forms of unicial are more readable at small size than rustic capital.

Half-unicials: The beginning of lowercase letterform.

Fig 1.1.5 Unicials and Half-uncials alphabet

Charlemagne: The beginning of standardize writing system.

Fig 1.1.6 Charlemagne Text

After the dissolution of Charlemagne's empire, Blackletter become prevalent in the northern Europe while Rotunda was widely used in southern part of Europe.

Fig 1.1.7 Blackletter and Rotunda Text


   2. Text Type Classification

Fig 1.2.1 Text Type Classification

Week 2

Typo_3_Text_P1
1.Tracking
This is a practice of adjusting the horizontal space in between the characters in a word or a line. There is normal tracking, tight tracking and loose tracking. The readability of a words will reduce when it's tracking loosen.

Why is kerning not the same as Letterspacing?

Kerning: An automatic adjustment of space between letters. Each letter spacing would be adjusted individually when we are kerning.

Fig 1.1.1 Kerning Example

Letterspacing: Adding space between the letters. The letter would be moved in an equal amount when letterspacing is used. It would be used for uppercases headlines because typefaces are not designed for uppercase so they tend to be condensed .

Fig 1.2.1 Letterspacing Example

*Both are generally used when working for headline.

2. Text Formatting

Flush text: this format mimics the asymmetrical experience of handwriting. Each line starts uniformly but ends at a different points based on the last word, creating an even gray value.

Gray Value: The visual density of text on a page, affected by the font, spacing, size, and typeface.

Centered text: this format creates symmetry by giving equal weight to both ends of each line, turning the text into shapes and adding a visual quality. Centered text forms a strong shape, so adjusting line breaks is important to prevent a jagged appearance.

Flush Right: This format emphasizes the end of the line rather than the start, making it useful in situations like captions where a strong right alignment clarifies the relationship between text and image.

Justified: This format creates a symmetrical shape by adjusting spaces between words or letters. However, this can cause "rivers" of white space. Proper line breaks and hyphenation are needed to minimize this issue.

3. Texture

Different typefaces suit different messages. Therefore, it is important to understand how different typefaces feel as text. Type with a generous x-height or relatively heavy stroke width produces a darker mass on the page than the type with a relatively smaller x-height or lighter stroke.

Fig 1.3.1 Anatomy of a typeface

4. Leading and line length

The goal of setting text is to ensure easy, prolonged reading similar to how a photograph occupies a page. Text size should be readable at arm's length. Leading that's too tight causes vertical eye movement, while too loose creates distracting stripes. Line length also affects leading, shorter lines need less while longer lines need more. A good line length is 55-65 characters, as overly long or short lines hinder readability.

Fig 1.4.1 Leading and Line Length

5. Type specimen books

A type specimen book displays samples of typefaces in various sizes to help make informed type, including size, leading, and line length, whether for print or screen used

Fig 1.5.1 Example of Type Specimen Book

Week 3

Typo_4_Text_Part 2

1. Indicating Paragraphs

There are many options for indicating paragraphs:

Pilcrow (¶) : It is one of the symbol use to indicate paragraph. It was widely used in medieval manuscripts but not often used in these days.

Line Spacing: When using line spacing to indicate paragraph, if the size of typeface is 10 pt, the ideal size of line spacing and leading should be 2 to 3 pt size larger. This is to maintain the cross-alignment across columns of text.

Line spacing vs Leading

Line spacing is the base line of one sentence to the descender of the other sentence while leading is the space between two sentence.

Create Indentation: The size of indentation should be the same with line spacing or point size of the text. Indentation is generally used for newspaper text to save space. It is best used when text is justified or else it will end up ragging to the left or to the right.

Extended Paragraph: It is generally used for academic writing as it creates an unusual wide columns on text.

2. Widows and Orphans

Both widows and orphans should not be occur in design.

Widows : It is a short line of type left alone at the end of a column of text.

Orphans: It is a short line of text left alone at the start of the new column.

Fig 1.2.1 Widow and Orphan in text

3. Highlight Text

When we have a large amount of text, we're going to have important message or info in the text. Hence there are some ways to highlight them:

1. Italic

2. Increase boldness with the same typeface family

3. Increase boldness with different typeface family. (some typeface might have to reduce the point size as some of them are bigger or larger in size)

4. Change color of the text (Black, Cyan, Magenta and Yellow)

5. Create a box around the text. (If there is indentation the reading axis won't be broken)

Prime and Quotation are not the same. Prime is only used to indicate feet and inches.

4. Headlines within text

Chapters can be divided into sections with varying levels of importance, labeled A, B and C. A typographer's job is to ensure that the headings clearly indicate their importance and how they relate to each other within text.

A head: It signals a distinct break between topics within a section. It can be styled larger than the body text, in small caps and bold or extended to the left of the text.

B head: It is a subordinate to an A head and introduces a new supporting argument or example. It should be less disruptive than an A head. It can be styled in small caps, italic, bold serifs, bold sans serif.

C head: It is used to highlight specific details within B head text without significantly disrupting the reading flow. Like B heads, they are styled in small caps, italics, bold serif, and bold sans serif. For visual separation, they are followed by at least an em space. This heading is less common to be used.

Creating a sequence of subheading establish a hierarchy in the text. There isn't a single method to represent this hierarchy as the options are nearly endless.

Fig 1.4.1 A head B head and C head

5. Cross alignment

When there is two columns of text seating next to each other, the text line is align to the next column of text. Cross aligning headlines and captions with the main text strengthens the page's structure and enhances its vertical rhythm.

Week 4

Typo_2_Basic

1. Describing Letterforms

Baseline: The Imaginary line the visual base of the letterforms.

Median: The imaginary line defining the x-height of letterforms.

X-height: The height in any typeface of the lowercase 'x'.

Why is the capital letter below the ascending strokes?

Capital letters are generally wider and have more surface area on the top. While the lower letter with an ascending stroke has lesser surface touching the top. In order to give an impression of equal height, the ascending height will be higher than the cap height to create an optical adjustment.

Fig 1.1.1 Anatomy of letterform

Stroke: any line that defines the basic letterform.

Apex/Vertex: The point created by joining two diagonal stems (apex above an vertex below)

Fig 1.1.2 Apex and Vertex

Arm: Short strokes off the stem of the letterform, either horizontal or inclined upwards.

Ascender: The portion of the stem of a lowercase letterform that project the median line

Bowl: The rounded form that describes a counter. The bowl may be either open or closed.

Fig 1.1.3 Bowl

Cross bar: The horizontal stroke in a letterform that joins two stems together (e.g A, H)
Cross Stroke: The horizontal stroke in a letterform that joins two stems together (e.g f, t)

Crotch: The interior space where two strokes meet.

Descender: The portion of the stem of a lowercase letterform that projects below the baseline.

EM/EN: EM is the distance equal to the size of the typeface while EN is half the size of an EM.

Fig 1.1.14 EM and EN

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

Stress: The orientation of the letterform, indicated by the thin stroke in orund forms.

2. The font

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

Lowercase: Lowercase letters include the same characters as uppercase.

Small Capitals: It is uppercase letterform designed to match the height of lowercase letters in a typeface. They are commonly found in specialized fonts.

Uppercase Numerals: also known as lining figures, are numerals that match the height of uppercase letters and have uniform kerning width. They are particularly useful in tabular data and other contexts where they need align with uppercase text

Lowercase Numerals: also known as old-style figures or text figures, have ascenders and descenders, aligning with the x-height of lowercase letters. They are ideal for use alongside upper and lowercase text. These numerals are more commonly found in serif typefaces than sans serif.

Fig 1.2.1 Uppercase Numerals and Lowercase Numerals

Italic: It's typically paired with their corresponding regular fonts and are based on 15th-century Italian cursive handwriting. However, small caps are usually only available in Roman style.

Punctuation, miscellaneous characters: Although all fonts include standard punctuation marks, but miscellaneous characters vary between typefaces.

Ornaments: It's a decorative elements often used in invitations or certificates. They are typically included as a font within larger typeface family, but only a few traditional or classical typefaces, such as Adobe Caslon Pro, feature this font.

Fig 1.2.2 Ornaments

3. Describing Typefaces

Roman: Roman typefaces are named because their uppercase forms are based on inscriptions from Roman monuments. A slightly lighter version of Roman type is referred to as "Book".

Italic: This type is named after 15th-century Italian handwriting, which its forms are based on. In contrast, oblique type is a slanted version of the Roman form of a typeface.

Instructions

Task 1 - Exercise 1 (Type Expression)

For exercise 1, we are assigned to create type expression using the given words. After having a poll section with all the students in class. We end up having "FANCY" "BLOOM" "SPICY" "SMOKE" as our four assigned word. We are required too sketch as much design as possible as we might end up having similar design within other students. After the design is approved by lecturer, we would need to turn them into an animation form in order to accomplish this exercise.

Task 2 - Exercise 2 (Text Formatting)

For exercise 2, we were assigned to two exercise. The first one was to use our names to practice tracking and kerning. For the second one, we would need to create a layout using the "I Am Helvetica" text. Both of this task will be using Adobe InDesign to complete.

Document 2.1 Module Information Booklet (MIB) of Typography

2. Task 1 - Exercise 1&2

2.1 Exercise 1 - Type Expression

Research

Before starting my sketches, I did some research in order to truly know each word's meanings and how to present them better.

1. Bloom

For the character bloom, the first thing I did for my research is to watch the time-lapse of a flower blooming process. Most of them bloom in similar way. The most significant differences i see in a flower blooming process is it's blooming direction. Most of the flower bloom in upwards direction, while they are some flowers like Chrysanthemum Ping Pong Plant bloom in 360 direction.

Fig 2.1.1 Process of a blooming flower

2. Spicy

For the character Spicy I think this may be one of the hardest word as the chances of having the same design with other is high. I try searching up the word in Google and all I found in the image section is chili and flame. But this particular image caught my attention and I am going to incorporate it into my design.

Fig 2.1.2 Inspiration for spicy design

3. Smoke

For this character there is a lot of way to express them out. After some thoughts and finding i chose to stick with two types of smoke expression which are the outcome of smoke ring experiment and the way smoke gets absorb by cooking hood.

Fig 2.1.3 Inspiration for smoke design

4. Fancy

When this character was chosen, it became the character I worried the most to execute. It has a wide range of definition which can be pretty difficult to express it correctly. It can mean desire, want and also decoration. So I tried to stick with the idea of a girl curling her hair with a finger as a expression of liking someone or maybe go with a "coquette style" of design to show the meaning decoration.

Fig 2.1.4 Inspiration for fancy design

Draft / Sketches

On week 2 I have come out with these sketches. I made them using the "Paintbrush" app. I find that a lot of design had crashed with others. So, I had to come out with more design or maybe do some changes on the current design. Among all of the sketches, I find that fancy is something I still struggle with the most. The smoke design is also something I worried about as I'm not sure if I'm able to digitalized it on Adobe Illustration.

Fig 2.1.5 Type Expression Sketches

Digitalized Artwork

On week 3 I started the work of digitalizing my sketches into Adobe Illustrator. I find that the outcomes of the design were quite different from what I have previously sketch out. But I did still try my best to make it as similar as possible. I was also surprise my smoke character work out pretty good. Overall, I like my spicy design the most.

Fig 2.1.6 Digitalized Type Expression in Adobe Illustrator

Fig 2.1.7 Alternative Designs

Animation process

On week 3 we did also start to animate our character. I choose to animate the word "SPICY". For the animation, I wanted to create something where the character "S" is chewing the other character and end up spiting them out as it was spicy.

I start drafting the movement using Adobe Illustrator like how the tutorial teaches. To be honest i feel like I'm butchering it as I'm not sure how the outcome will be like. But, I have high hope that it will come out well.

Fig 2.1.8 "SPICY" animation design in Adobe Illustrator

After finishing my draft, I open them up on Adobe Photoshop to start animating them. At first the sequence was a bit off. I guess it's because the transition time was too long so I eventually change it to 0.2s per frame. Then, it turned out to be too fast. So I choose to extend the chewing longer and to extend the last frame longer which will be around 0.5s per frame.

Fig 2.1.9 Animating Process in Adobe Photoshop

The outcome of the animation was better than I expected as I am really pleased with it. It turned out as what I wanted it to be like.

Fig 2.1.10 Animation of "SPICY"

Adjustment

On week 4, we got feedback for our finalized type expression digital artwork. Unfortunately, I have to redo most of it as we were told not to distort the words as it's hard to see which character we are using. But I did also get good news, Ms. V say I can still keep my smoke word, just I have to add on another undistorted version in front of it. For the word "fancy", the previous design was not expressing the text properly. So after getting this feedback I tried finding inspiration and end up choosing the mask that are worn to a masquerade party. I tried to not distort the words and tried making it look like a mask. To make it look fancier I added the symbol -- * to make it look like the laces around the mask. For the word spicy, I kept the same idea just that the chili turned into a person's face.

Fig 2.1.11 Adjustment for Type Expression

For the animation it's the same as the previous one just that I changed the design.

Fig 2.1.12 Animation Design in Adobe Illustrator

Fig 2.1.13 Animation in Adobe Photoshop

Finalization

Fig 2.1.14 Finalize Type Expression (JPEG)

Fig 2.1.15 Finalize Type Expression (PDF)

Fig 2.1.16 Finalize Type Expression Animation ( GIF )

2.2 Exercise 2 - Text Formatting

Name Kerning and Tracking Practice ( 1:4 )

For this exercise, we will need to use the given 10 font to adjust the kerning and tracking of my name. The main aims of it is not only to know how to kern and track but also to get familiar with the function of Adobe InDesign.

Fig 2.2.1 Before Kerning and Tracking

I tried my best to get the best result from all of the typefaces. The most adjusted letter in this exercise was "f" and "i" as they always stick together same for the letter "c" and "h". In the process I tried playing around to see if Uppercase or Lowercase suits better for each typefaces.

Fig 2.2.2 After Kerning and Tracking

Fig 2.2.3 Text Formatting Exercise 1:4 ( PDF )

" I Am Helvetica" Text Layout Exercise ( 2:4 3:4 4:4 )

After finishing the first exercise, I continued with the " I Am Helvetica" exercise. I started with following the YouTube tutorials that was recorded by Mr. Vinod. After learning it, I started concepting the layout I want. I did try to find some inspiration from Pinterest too.

Fig 2.2.4 Inspiration from Pinterest

Because it was my first time doing layout. I think it will be better if most of it is kept simple. So maybe I will keep half of my composition simple and the others as an attempt in something more complicated.

Fig 2.2.5 Process of composition

I ended up with 4 composition. I tried to play with different font for each composition. The headline and paragraph also used different typeface. The first two composition was kept as simple as possible. For the third composition, I played with the margin of the body and the tracking of the headings. As for the fourth composition, I played with the image by slitting them into 4 pieces. I also tried to compose the heading differently.

Fig 2.2.6 Layout Composition

After getting feedback from Ms V. , I made some changes for all of the composition.

Fig 2.2.7 Adjusted Composition

Finalization

Fig 2.2.8 Final Text Formatting

Fig 2.2.9 Final Text Formatting (PDF)

Fig 2.2.9 Final Text Formatting with grid (PDF)

Text Formatting Layout

HEAD LINE

Typeface: Gill Sans Std

Font/s: Gill Sans Std Condensed, Gill Sans Std Bold Condensed & Gill Sans Std Bold Italic

Type Size/s: 41 pt, 66 pt, 11 pt

Leading: 43 pt, 68 pt, 13 pt

Paragraph spacing: 3

BODY

Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std Roman

Type Size/s: 9 pt

Leading: 12 pt

Paragraph spacing: 11.3386 pt

Characters per-line: 56

Alignment: Align Left

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

Feedback

Week 1:

General Feedback: Ms. V did a briefing section about our class module and also the instruction for our upcoming task which are Typing Expression and Text Formatting as it's our first class. We also did a voting section where we suggest the word we want to use for our type expression exercise. Throughout the entire class, Ms.V will always make sure everyone is getting what she is saying as they are quite a lot of stuff for us to digest.

Week 2:

General Feedback: This week, Ms. V brief us through what we should do and finish for the 2nd week, which is to watch one lecture video and update it into our e-portfolio and also start digitalize our sketch using the 10 given font into Adobe Illus. Before digitalizing them, we are also advise to watch the tutorial video which is shared through Teams. Ms. V also went through our sketches for the type expression exercise and thought us some basic knowledge about Adobe Illus as most of us are new user.

Specific Feedback: I showed my sketches for Ms. V, she liked my "BLOOM" design but she advise me to try using the 10 required font to draw them out again as it may not be able to come up the same as what I sketch out. For the word "SPICY" she said that i can add some chili element to the letter "S". For the rest words, I was told to sketch more design.

Week 3:

General Feedback: We continued our type expression digitalization for this week and we will be starting it's animation after with finalized everything. Ms. V also briefed with us what we should be doing for this week, the task we have to be complete are updating our e-portfolio and also pass up our digital work on Facebook group.

Specific Feedback: I showed Ms. V my digitalized work, she pointed out that most of the word are designed with shape which make the word "fancy" stand up as I only used bows element as it's design. So I will have to work on the word "fancy" again.

Week 4

General Feedback: Ms. V gave us feedback about our type expression design that we posted on the Facebook group comment. She said that some design were not using the given font and she said that the design can't be too distorted as she won't be able to identify the font we used. We were also told to start doing our Task 2 exercise and make sure all the works are finish and submitted on week 6.

Specific Feedback: I showed my design to Ms. V all of it was distorted so I would have to edit them all. She said the smoke was doable just that the bottom should be more raw. She also said my fancy character was too messy so I should recreate a new one.

Week 5

General Feedback: For this week, we have chosen the deadline to submit our e-portfolio, which is by 29 October. We were told to wrap up our second exercise which was the text formatting.

Specific Feedback: Ms. V reminded me to use black and white picture for my text formatting exercise. For my composition, Ms. V told me not to break the headline the way I did.

Reflection

Experience:

During the start of the task, the progress was quite slow as I am not used and familiar with the tools and the functions of Adobe application. As the saying "the more you try around the more you find out", with the help in tutorial class and also the lecture video in YouTube, I was able to get on track and I eventually was able to find ways to increase the efficiency in doing my task. I also tried to look around some tutorials in order to get the overcome I wanted from various platform.

Observations:

I find that typography plays a major role in design. It is not only use as a tool to make description. But also something that can let viewers understand about the message or things one artist is trying to express. I got this facts from carrying out the first exercise which was type expression. Text can actually become "graphic" and the creator also plays a major role in it. This is because it is a skills that creator needs in order to express something correctly. I think I struggle with this the most in the process of this exercise too. The words are easy to understand. but it is hard express them out correctly in a creative way.

Findings:

I learned that it's very very important to understand the basic of typography especially the one that is thought in the lecture video as we will be using the terms in every class and exercise. So, if we missed out a terminology or knowledge of something like for example " cross alignment ". We will be so confused or lost the entire time. This may eventually led to the constant mistake and error in our exercise and task.

Search This Blog

Sofia Chew (0377902)