Typography / Task 1 Exercises

March 28, 2022 - April 26, 2022 (Week 1 - 6)

Anandya Dewi Saputra / 0354651

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 1 / Exercises

---

LECTURES 

Week 1: 

Mr. Vinod introduced himself and gave us an overview of the module on the first week. He showed us how to create an e-portofolio (blog) to submit our homework, he also goes through several platforms we may utilize such as facebook groups if we ever get lost and needed to refer to the previous students' works, Taylor's app to turn in our attendance, and google documents to track our record for the assignments. He also told us that each session will be recorded and posted on facebook/youtube, and that was really helpful for me because I left early that day and I can watch the recorded session if I ever need to know about anything. After that, he gave us our first assignment "Type Expression" which is to compose a word to be having visible meaning. We needed to choose 4 out of 6 words; cough (mandatory), pop, grow, explode, wink, and squeeze. I excluded wink and squeeze from my list because of having a hard time composing that word.  We also need to work on text formatting later. After watching the pre-recorded lecture video I worked on the assignment.

Typography: Development / Timeline

1. Early letterform: Phoenician to Roman

Fig 1.0 Phoenician to Roman

The Romans used dots in the middle of the page to break the words into separate units. The Romans refined it further, and the result is the alphabet we use today. Greeks introduced vowels to a consonantal language and switched from right-to-left to left-to-right horizontal writing. The notion that the dextral majority in ancient Greece adopted left-to-right writing only because it was more efficient is debatable.

 

Fig 1.1 Direction of writing.

2. Handscript from 3rd - 10th century C.E.

Square capitals have somewhat heavier downstrokes and lighter upstrokes, supple curves, and straight lines, Incised serifs characterized it.

Fig 1.2 Square Capitals

Rustic capitals are the compressed version of square capitals. Individual letters in rustic capitals are simpler to see than new and old Roman cursive, however, the script is written in script continuous, which means the words are not separated by spaces.

Fig 1.3 Rustic Capitals

Roman cursive is running hand scripts were commonly employed for notes, business records, communications, and other informal or everyday uses which were simplified for speed. It's the introduction to lowercase letterforms.

Fig 1.4 Roman Cursive

Uncial lettering is a modification that stems from Old Roman Cursive. Uncials in broad forms are easier to read at tiny sizes than rustic capitals.

Fig 1.5 Uncial 

Half-uncial characteristic is that it is now minuscule. It marks the formal beginning of lowercase letterforms.

Fig 1.6 Half-uncial

Charlemagne, the first unifier of Europe since the Romans, handed all ecclesiastical books to Alcuin of York, Abbot of St Martin of Tours. The monks then recreated the words in majuscules (uppercase), minuscule (lowercase), capitalization, and punctuation, setting a century-long standard for calligraphy.

Fig 1.7 Caroline minuscule

3. Blackletter to Gutenberg's type

With the fall of Charlemagne's empire, regional variants on Alcuin's script emerged. A condensed, extremely vertical letterform known as Blackletter or textura acquired popularity in northern Europe. The "rotunda" hand, which is rounder and more open, became popular in the south.

Fig 1.8 Blackletter (Textura)

4. Text type classification

Fig 1.9 Text Type Classification

Week 2 - Typography: Basic

1. Letterforms

Fig 2. 0 Basic Letterforms

• Cap height is the height of a typeface's uppercase letters, measured from the baseline to the top of flat-topped glyphs.
• Baseline is the imaginary line upon which a line of the text rests.
• Stem is the main, usually vertical stroke of a letterform.
• Descender is the portion of a letter that extends below the baseline of a font.
• Bowl refers to the shapely, enclosed parts of letterforms.
• Counters are the negative spaces inside letterforms. 
• Ear is a decorative flourish usually on the upper right side of the bowl
• Link is the neck, terminal. A connecting element or factor.
• Serif is a decorative line or taper added to the beginning and/or end of a letter's stem, which creates small horizontal and vertical planes within a word.
• Ascender is the part of a lower-case letter that extends above the x-line to near the height of a capital letter.
• Bracket is a curved or wedge-like connection between the stem and serif of some fonts.
• Terminal is a type of curve which does not terminate in a serif.
• X-height or corpus size refers to the distance between the baseline and the mean line in a typeface. 

2. Font

Fig 2.1 Uppercase and Lowercase

Uppercase is a typeface of larger characters. 

Lowercase is the small letters in a typeface.

Fig 2.1 Small Capitals

Small capitals are designed to blend with lowercase text. They're usually slightly taller than lowercase letters.

Fig 2.2 Uppercase and Lowercase Numerals

Uppercase Numerals are known as lining figures. These numbers are the same height as uppercase letters and have the same kerning width as uppercase letters. 

Lowercase is also known as old-style figures. In sans serif typefaces, lowercase numbers are significantly less prevalent than in serif typefaces.

Fig 2.3 Italic and Oblique

Italic is a style of font that slants the letters evenly to the right.

Oblique is a form of type that slants slightly to the right, used for the same purposes as italic type. Unlike the italic type, it does not use a different glyph shapes. 

Fig 2.4 Punctuation and Miscellaneous Characters

Punctuation and Miscellaneous are typographic symbols used to clarify the meaning of text, as well as to aid in reading comprehension.

Fig 2.5 Ornaments

Ornaments are the jewelry of the printed world, providing flourishes over and above what is needed.

Week 3: Typography - Text

1. Kerning and letter spacing

 

Fig 3.0 Kerning 

Kerning is the adjustment of space between two individual letters.

Fig 3.1 Tracking

Tracking is uniformly increasing or decreasing the horizontal spacing between a range of characters.

2. Formatting text

Fig 3.2 Alignment

Flush left is when type lines are aligned on the left. The words on the right are uneven or ragged, which is rag right. Because we read from left to right, flush left type helps us identify our location on the following line more readily.

Flush right is when text is aligned along the right margin or gutter, also known as right-aligned, ragged left, or ranged right.

Full justification means that word stretches each line so that the text starts and ends at each margin.

Centered aligned means that text is aligned around a midpoint. 

3. Texture

Stoke and color made variations of different textures in typography, but it is best to make it in grey scale.

4.  Leading and Line length 

Type size is how large the characters displayed on a screen or printed on a page are.

Leading is the space between multiple lines of type, which can be as few as two lines of type to, well, as many lines as needed.

Line length is the distance between the left and right edges of a text block. It is best to keep the line length around 55 - 65 characters.

5. Indicating paragraphs

Fig 3.3 Pilcrow

Fig 3.4 Pilcrow Example

Pilcrow is a symbol used to mark a new paragraph or section of text.

Fig 3.5 Line Spacing

Line spacing (leading) is needed in between paragraphs. The paragraph space is 12 pt if the line space is 12 pt. This guarantees text cross-alignment between columns.

Fig 3.6 Identatioin

Indentation or indent is an empty space at the beginning of a line to signal the start of a new paragraph. It has to be the same size of the line spacing / same as the point size of your text. 

Fig 3.7 Extended Paragraph

Extended paragraph create unusually wide columns of text.

6. Widow and Orphans

Fig 3.8 Widows and Orphans

Widow is a paragraph-ending line that falls at the beginning of the following page or column, thus separated from the rest of the text. 

Orphan is a paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text.

7. Highlighting text

Different kinds of emphasis require different kinds of contrast.

Fig 3.9 Highlighting Text Italic VS Bold

Fig 3.10 Highlighting Text Field of Color Behind Text VS Changing Color

8. Headline within text

Fig 3.11 A head

A head indicates a clear break between the topics within a section.

Fig 3.12 B head

B head is subordinate to A head. B heads indicate a new supporting argument or example for the topic at hand.

Fig 3.13 C head

C head highlights specific facets of material within B head text. 

9. Cross alignment 

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.

Week 4: Typography - Letters

1. Letterforms

Fig 4.0 Baskerville 'A'

The uppercase letterforms above appear to be symmetrical, but they are not. The two distinct stroke weights of the Baskerville stroke form are easily visible, but it's worth noting that each bracket linking the serif to the stem has its own arc.

Fig 4.1 Universe 'A'

Although the uppercase letterforms appear to be symmetrical, closer inspection reveals that the left slope is narrower than the right.

Fig 4.2 Helcetiva VS Universe 'A'

Examining the lowercase 'a' of two seemingly comparable sans-serif typefaces (Helvetica and Univers) shows the intricacy of each individual letterform. An examination of how the letterforms' stems end and how the bowls meet the stems rapidly exposes the distinct character differences between the two.

2. Maintaining x-height

Fig 4.3 X-height

X-heights reflect the size of lowercase letterforms in general, but curving stokes like the letters must rise beyond the median (or sink below the baseline). This is done to make it appear to be the same size as the adjacent vertical and horizontal strokes.

3. Form / Counterform

Counterform is the space describes, and often contained, by the strokes of the form. The gap between letters is included in the counterform when they are linked to form words. When setting type, how effectively you handle the counters influences how well words hang together and how readily we can understand what you've set.

4. Contrast

Fig 4.4 Contrast

Contrast varies in colors, size, and the way the letter was written. It made it differentiates and stands from the rest.

---

INSTRUCTIONS : 

TASK 1 | EXERCISE 1 (Type Expression) 

Week 1 :

I've chosen the words; cough, pop, grow, and explode for me to work on. I later came out with 4 sketches on each word and 16 sketches in total 

Fig 5.0 First Sketch

Fig 5.1 Second Sketch

After sketching these words, I finally get the meaning of typography. I learned that paying attention to even the tiniest elements of a text may make all the difference in the world. It's crucial for building your brand, generating interesting goods, and emphasizing your main point.

Week 2 :

After receiving feedback from Mr. Vinod, I used adobe illustrator to work with the typefaces he gave. I considered the 10 typefaces given and select the ones I think meet my needs. I started with the word cough and I used Gills Sans STD and my font. After I finished composing it in adobe illustrator, I moved to procreate to make the smearing/motion effect.

Fig 6.0 Cough

I think the smeared/motion effect expresses it well since you will have a motion when coughing. After that, I proceed with the word pop. Mr. Vinod advised that having layers is beneficial, so I maintained and combine it with the other sketch I did that has little dots in it. I use the typeface Universe LT STD and I think it turns out pretty well. 

Fig 6.1 Pop

I went with a basic design for the word grow. I only added the arrow to emphasize the word grow, but I remember Mr. Vinod said it's good even if I only added the arrow, the design already described the word. I use the typeface Bodoni STD and this is the final result. 

Fig 6.2 Grow

And lastly, for the word explode. I was stuck on what to do with the design since Mr. Vinod said I have too many design components, and what font should I choose. After debating with myself for a long time I played with the letter "E" and chose the font Gills Sans STD which is the same font I used with the word cough. I don't really like the result but let's just go along with it and maybe recompose it if Mr. Vinod asked me to.

Fig 6.3 Explode

It's quite fun and made me use my imagination which gave me a lot of inspiration for other assignments, and designs for other words. After I'm done with all of the words I compile all of the words together with the frame that Mr. Vinod provided.

Fig 6.4 All Sketches

Sketches Final Result

Fig 6.5 Final Sketches

Week 3 :

After I received the feedback given  I started working on the gif animation. I started with the word "cough" since Mr. Vinod only told me to add a stronger motion blur effect.

Fig 7.0 Cough GIF

Then I continued with the word "pop". I have to work twice for this word since Mr. Vinod said it was excellent the first week because of the layers, but the second week he stated he had no idea what was going on with my design, so I proceed with the original sketch that has only layers, no dots or color for the layers.

Fig 7.1 Pop GIF

For the word "grow" Mr. Vinod said it was good and acceptable, the arrow accurately defined the design so I animated the word to start tiny on the first few frames and grow larger until the middle frame. After then I added the arrow growing from the letter "w". I believe the animation is suitable for the word.

Fig 7.2 Grow GIF

The last word to work on is "explode". I have struggled to work with this because the design is only "okay" and not great, even Mr. Vinod said so but it's acceptable as long as I added more shards. I turned my head upside down and can only come up with this. 

Fig 7.3 Explode GIF

I made the word grow a little because most things explode from being unable to contain gas or substance inside, and before it explodes usually the container expands a little. After that, I broke the letter "e" and added shards afterward because most broken things shattered into shards.

I didn't make the shards credit to : 

www.pngfind.com/mpng/Tihwox_glass-shards-transparent-calligraphy-hd-png-download

Since Mr. Vinod only requested one gif animation, I think I'll stick to the word "grow" since i like it the best.

Final Type Expression Animation

Fig 7.4 Final GIF

After all, I learned a lot from this assignment. From learning to express a word with its own design to learning how to make an animated gif and learn to do simple animations.

TASK 1  |  EXERCISE 2 (Text Formatting)

For exercise 2 which is text formatting, we were given the task to create a cohesive final layout that addressed a variety of texting formatting issues, including kerning, letter spacing, alignment, leading, and paragraph spacing. 

Fig 8.0 Letters Without Kerning

Fig 8.1 Letters With Kerning

Fig 8.2 Differences With and Without Kernings

After getting familiar with kerning, letter spacing, alignment, leading, and paragraph spacing, I decided to try my first text formatting.

Fig 8.3 Text Formatting First Try

I was trying different placement and designs and I came up with that. I then watched Mr. Vinod's lecture playlist and found a lot of mistakes that I made. I did not use the 10 typefaces given, there are a lot of awkward spaces in between the words, and I didn't use the notes given which is to look out for; 

• Font Size (8-12)
• Line length (55-60/50-60)
• Text Leading (2, 2.5, 3 points larger than font size)
• Ragging (Left Alignment) / Rivers (Left Justification)
• Cross Alignment
• No Widows / Orphans

So I went back and re-did everything and make sure to get every point right, and this is what I came up with.

Fig 8.4 Text Formatting Second Try

I also make sure to not make mistakes. 

Fig 8.5 Trying To Make Sure To Get The Points Right

And these are the points that I used;

• Font Size (10)
• Line length (51)
• Text Leading (2 Points Larger Than Font Size)
• Ragging (Left Justification) 
• Cross Alignment
• No Widows / Orphans

I realized the design makes the first paragraph has 106 characters.

Fig 8.6 Have 106 Characters

So I redesigned it again until I make sure to get all the points right.

Fig 8.7 Text Formatting Third Try

I got my feedback and it said bad ragging, so I justified it to make it look better.

Fig 8.8 With Grid

Fig 8.9 Justified

The left justification doesn't make it look better, so I made adjustment again with the kernings.

Fig 8.10 Final Result

Text Formatting Final Result

Fig 8.11 Text Formatting Final Result

---

FEEDBACK 

Week 1 

(N/A)

Week 2

General feedback: We were given advice on our sketches, Mr. Vinod also brief us on our blog and how to post our assignment with the right structure. We were also told not to design our blog yet.

Specific feedback: My sketches on the word "explode" was having too many design components and needed to work more on just the word itself. Other than that Mr. Vinod thinks it's great especially the design on the word "cough" with a smear on it and the word "grow" with an arrow on it.

Week 3

General feedback: Mr. Vinod suggested playing with the space when animating. 

Specific feedback: I need to add shards on the word "explode" and strengthen the motion blur effect on the word "cough".

---

REFLECTIONS 

Experience : 

I learned a lot from this assignment. I frequently use gifs and never have wondered how they are created or to see myself making gifs, but now I have the knowledge and skill to do it. It was challenging but I enjoyed every process. Not just that, this was also my first time having an e-portfolio so needing to post assignments here pushes me to learn how to blog. 

Observation : 

There's a lot of process on even making the simplest animation or gif. I need to pay more attention to the frames while animating cause even the smallest mistake can be spotted. Feedbacks especially from the professional are very useful to develop better designs.

Findings :

The number of frames per second is important cause most gifs use fewer frames. A lot of tutorials on youtube really help a lot to understand how to create a design. Every design is unique, having a lot of components is great but sometimes being simple is enough, for example, the simple design in this exercise (type expression) to just describes the meaning of the word itself without having too many design components. 

---

FURTHER READINGS 

TYPOGRAPHY 

Tim Bones

https://issuu.com/interactivedesigninstitute/docs/typography_ebook_final_version

This book has a lot of information, especially on the basics of typography, and is really suitable for beginners. I like how this book uses a step-by-step and divides it into 6 parts so we know how far we have learned through those numbers. 

Step / Chapter 1 : Typeface Design

Contains information about the introduction of typeface and how to get started

Step / Chapter 2 : Terminology and Anatomy 

Explains the 15 parts of typography anatomy

Step / Chapter 3 : Types of Typefaces

Explains the use of different typefaces

Step / Chapter 4 : Technical Options

Explains how the design of typefaces not only stands to be readable but also beautiful. 

Step / Chapter 5 : Understanding Typeface Design 

Contains information to understand typeface design and steps to create your own typeface.

Step / Chapter 6 : Glossary 

Contains an explanation of some words mainly used in the typography world. 

HOW TO MAKE ANIMATED GIFS IN PHOTOSHOP

Cristina / Elan Creative Co

www.youtube.com/watch?v=wYYEPSOX7F0

This video is very useful for beginners like me to learn step by step how to animate gifs.