Typography task 1 - exercises

7/4/2023 - 7/7/2023 Week 1 - Week 16

Wong Kai Xin / 0353027

Typography / Bachelor of Design in Creative Media / The Design School

Task 1 - Exercises

---

LECTURES 

Week 1 ( Early letterform development )

• The tool you are using to write has a very important influence to the type of scripts developed.

Fig 1.1 Evolution from Phoenician letter

• While the Phoenician read from right to left, the Egyptians created the writing style, "Boustrophen" which means reading right to left, left to right alternately. This also changed the direction of the letter forms

Fig 1.2 The "Boustrophen" writing style

Fig 1.3 Early development of the letter "A"

• Square capitals have serifs added, caused by the variety of strokes from the way the pen is held at an angle of 60 degrees off the perpendicular while writing.
• Rustic capitals are compressed version of square capitals, making it have twice more space for the letters to fit in a sheet of parchment. The way it was written is at an angle of approximately 3o degrees off the perpendicular. Having it more compressed also meant is was harder to read compared to square capitals.
• While square and rustic capitals are used in documents of intended performance, the Roman cursive was used in everyday transactions due to its speed in writing.
• Uncials are often seen as small letters. It is more readable compared to Rustic capitals.
•  Half uncials was when lowercase letterforms are properly introduced.
•  Charlemagne was the one who set the standard for all texts and punctuations.
• After that, more letterforms became popularized for example Blackletter and Rotunda.

Text type classifications

Fig 1.4 Text type classifications

Week 2 ( Basic and understanding )

Basic

1.  Describing letterforms

Fig 2.1 Describing letterforms

Stroke : any line that defines the basic letterform

Apex / Vertex : the point created by joining two diagonal stems

Arm : short strokes off the stem of the letterform, either horizontal or inclined upward

Ascender : The portion of the stem of a lowercase letterform that projects above the median

Barb : the half-serif finish on some curved stroke

Beak : the half-serif finish on some horizontal arms

Bowl : the rounded form that describes a counter, 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 letterform that joins two stems together

Crotch : the interior space where two strokes meet

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

Ear : the stroke extending out from the main stem or body of the letterform

Em/en : Em is the distance equal to the size of the typeface. An en is half the size of an em 
Finial : the rounded non-serif terminal to a stroke

Leg : short stroke off the stem of the letterform

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 ( g )

Serif : the right-angled or oblique foot at the end of the stroke

Shoulder : the curved stroke that is not part of a bowl

Spine : the curved stem of the S

Spur : the extension that articulates the junction of the curved and rectilinear stroke

Stem : the significant vertical or oblique stroke

Stress : the orientation of the letterform, indicated by the thin stroke 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 : the self-contained finish of a stroke without a serif

2. The font

Uppercase letterforms : draw to the x-height of the typeface

Small capitals : found in serif fonts as part of what's called an expert set 

Uppercase numerals ( lining figures ) : same height as uppercase letters, set to same kerning width with uppercase letters

Lowercase numerals ( old style figures / text figures ) : set to x-height with ascenders & descenders

Italic : forms were referred back to 15th century Italian cursive writing. Oblique are typically based on the roman form of the typeface

Fig 2.2 Italic vs Roman

Punctuation & misc characters : can change from typeface to typeface, sometimes unavailable in certain typefaces

Ornaments : used as flourishes in invitations or certificates, usually provided as a font in a larger typeface family.  

3. Describing typefaces

Roman : uppercase forms are derived from inscriptions of Roman monuments. 

    Book : a slightly lighter stroke in Roman 

Italic : named for fifteenth century Italian handwriting 

    Oblique : based on roman form of typeface

Boldface : have a thicker stroke than a roman form, categorized into 'semibold', 'medium', 'black', 'extra bold', 'super'

    Poster : the boldest rendition of the typeface

Light : a lighter stroke of the roman form

    Thin : has an even lighter stroke 

Condense : a version of the roman form

    Compressed : an extremely condensed style 

Extended : an extended variation of the roman font 

Fig 2.3 Describing typefaces

Letters

1. Understanding letterforms

According to this uppercase letterform, it suggests symmetry without being symmetrical. The 2 different stroke weights could be differentiated easily.

Fig 2.4 Baskerville 'A'

In Fig 2.5, the letter 'A' may look symmetrical at first glance but if you take a closer look the width of the left and right stroke is slightly different.

Fig 2.5 Univers 'A'

2. Maintaining x-height

Keep in mind that letters with curved strokes like 's', 'a' must rise above the median or sink below the baseline for it to appear the same size as the vertical and horizontal strokes they adjoin.

Fig 2.6 Example of letters with curved strokes overlapping the baseline and median

3. Contrast

Fig 2.7 Ways to achieve contrast 

Week 3 ( Screen and print )

Typography in a different medium

1. Print type Vs Screen type

Print type :

• designed for reading from print long
• ensuring text is smooth, flowing and pleasant to read
• good typefaces: CasIon, Garamound, Baskerville 

Screen type : 

• enhance readability and performance onscreen in different digital environments
• could have a taller x-height
• more open spacing

Hyperlink ( a word, phrase, or image that you can click on to jump to a new document or a new section within the current document )

- found in nearly all Web pages

- normally blue and underlined

Font size for screen

- 16 pt on screen is approximately the same size as a text printed in a book/magazine ; this is accounting to reading distance

System Fonts for Screen/Web Safe Fonts

- Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamound

Pixel Difference Between Devices

Fig 3.1 Pixel difference between devices

2. Static Vs Motion

Static typography

• minimal characteristic in expressing words

Motion typography

• film credits present typographic information over time, often bringing it to life through animation
• often overlaid onto music videos and advertisements, often set in motion following the rhythm of a soundtrack
• evokes a certain mood

Week 4 ( Type Expression Animation tutorial )

In this video, we are taught on how to animate our expression words using adobe illustrator, followed by photoshop. Firstly, to copy an art-board, press Shift + O, ( selects the artboard ) then Shift + Option ( copies the artboard ), then drag it to the side. Then in your now new copy of the art-board, make the next action of your expression word (insert pic ex) keep repeating this step until you are done with all actions. After that, go to file and export it as a JPEG and remember to click use artboards and all.

Next, go to photoshop and click file. Go to scripts and Load files into stack then browse for the folder. For the timeline to show up, you go to windows and click timeline. After that, you press create frame animation below. Later, go to layers and only make the first layer visible. Repeat this step for each layer and after that, it is ready to be exported. When exporting, click save for web and save your work as a GIF.

Week 5 ( Text )

1. Formatting text

Kerning adjusts the space between individual letterforms.

• to kern, press option and left/right arrow key

Letter-spacing add space between the letters.

Tracking is the addition and removal of space in a word or sentence. It adjusts spacing uniformly over a range of characters. 

• to add tracking, select all text, press option and left/right arrow key
• while tracking, make sure to apply the "3 thumb rule" to ensure the difference between the lines are not obvious.

 Fig 5.1 Types of tracking

2. Leading and line length

Type size should always appropriate to be read easily at arms length

Leading is the space between adjacent lines of text. A good leading helps readers stay focused while reading

 Line length has similar function as leading. A good rule of thumb is to keep the line length between 55-65 characters

Fig 5.2 Line space vs leading

• press command t in InDesign to add line spacing 

3. Widow and Orphan

Widow is a short line of type left alone at the end of a column of text

Orphan is a short line of type left alone at the start of a mew column

Fig 5.3 Widow and orphan example

4. Highlighting text

Some ways to highlight a text: 

• italics or bolding
• change of typeface
• change of text color
• placing a field of color at the back of the text

5. Additional formatting notes

Grid system is a system that arranges the information in a given space.

A good page layout is formed with attractive margin space. If the standard margins is equal on all sides, it won't appearing appealing. So to achieve a good page layout, you need to take note of the following:

•  keeping your font size between 8 pt - 12 pt ( for A3 & A4 )
• ensure number of characters in one line length is not more than 65 or less than 55
• take note on the leading a paragraph spacing 

Boundary box allows you to crop an image

• to insert an image, go to file and click place.
• to adjust image size, use direct selection and shift key to ensure it stays proportioned.

Alignment keeps your text looking neat

• left align and left justify are recommended
• right alight and centre align are not recommended 

Baseline grid ensures each line of text sits on the grid, helping you achieve cross alignment 

Steps to making cross alignment: 

1. Right click text
2. Text frame options
3. Baseline option 
4. Offset, leading

For you to maintain cross alignment, you must make sure the leading is always multiples of 2, eg: 11 pt changed to 22 pt 

Shortcut for doing cross alignment is to go to paragraph settings, then click the icon on the far right bottom

Fig 5.4 Align to baseline grid button 

* click W for preview in InDesign

To apply paragraph spacing, you have to go to the paragraph settings and click on style change. Next, go to indents and spacing and change the 'space between paragraphs using same style' to your desired choice

Fig 5.5 Paragraph spacing settings

---

CLASS SUMMARY

Week 1 : For our first class. we were taught how to create our e-portfolios using blogger and were also briefed on the facebook group, showing how to access the feedback form. 

Moreover, we were briefed on Task 1 - part A and we were expected to come up with of 4 words, expressing the action through our designs, therefore we were asked to give a number of suggestions on the words we were going to work with. Although we were only required to. do 4 words, I decided to sketch out 6 so that I could have more ideas for the design. 

Week 2 : Mr Vinod gave an introduction of himself and also showed some of his past works on typography, photography and so on. In this class, we were given feedback that were helpful to us in continuing our expressive word design. 

Week 3 :  There wasn't supposed to be any class today however Mr Vinod opened a meeting to give us personal feedback on our work.

Week 4 : First we were given a feedback session for our animation design. Next we were briefed on the text formatting task and what we had to keep an eye out on while attempting the text formatting exercise.

Week 5 : Today we had a long feedback session and Mr Vinod and was given a lot of helpful feedback.

Important things to take note of:

• choosing the right typeface
• point size will determine leading
• paragraph space
• line length

Class notes:

• When you have a black background, bolding your white text helps reading, because the thin strokes of the white words can disappear and bleed into the background, therefore if it is bolded, it helps with the visibility.

• Usage of thick and thin strokes is when there is contrast typeface.

• To view the different types, go to type and click glyphs.

Questions to ask yourself while doing text formatting:

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading & paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids?

6. Are widows and orphans present?

We were also briefed on our Task 2 and analyzed some of the past students' works.

---

INSTRUCTIONS

---

EXERCISES

Week 1 :  Exercise 1 ( Type expression )

I sketched the expression words on my iPad and realized that it was not as easy as it seems, constant brainstorming was required in order to think of the right impression. Even doing so, some expressions were not as accurate as I thought. 

Fig 1.21 Sketches of expressive words 14/4/2023

Week 2 : Digitizing expressive words 

For my previous sketches, I learned that I have used a lot of illustrations in my designs. During this week, I improved my designs for the expressive words based on last week's feedback session. 

Fig 2.21  Design for split  21/4/2023

For most of these, I tried to utilize the shape of the letter "l" and tried to make it look like a blade, splitting the other letters apart. 

Fig 2.22 Design for surprise 21/4/2023

Surprise was not a simple word to express as personally, I don't get surprised a lot so I did some research on the word and tried to get some ideas to try to express this word.

Fig 2.23  Design for destroy 21/4/2023

Expressing destroy was ultimately the most challenging with me as destroying normally involved objects ( it could be a hammer, hand ) but eventually i tried to think of some ideas to make it possible to express without using illustrations. Personally, the destroy on the top right was my favorite out of all designs.  

Fig 2.24   Design for pause 21/4/2023

For pause, there was not as much to express compared to the other three words, so I kept it as calm-looking as possible. But during the lessons, I also learned that a pause could be quite exciting, and not boring. 

Week 3 :  Finalized expression word designs

After a feedback session with Mr Vinod, he picked the ones which looked the best and suggested I move on to animating them.

Fig 3.21 Finalized design for split 28/4

The "l" acts as a slicer, splitting the letters "s" "p" with "i" "t"

Fig 3.22 Finalized design for surprise   28/4/2023

The letters act like balloons, which you normally see in surprises

Fig 3.23 design for pause before feedback 28/4/2023

Fig 3.24  design for pause after feedback 28/4/2023

I went with a very simple and minimalistic design with pause as during a pause, it is normally just a calm moment. I added grey to the background as Mr Vinod suggested so it gives of a contrast.

Fig 3.25 design for destroy before feedback 28/4/2023

Fig 3.26 design for destroy after feedback 28/4/2023

For destroy, I was a little more adventurous and tried playing around with the letters, using them to create a smasher. The 'd' acts as the handle of the smasher, and I used the middle line in 'E' to create a vision of a smasher.  

Fig 3.27 Final Type Expression, JPEG 28/4/2023

Fig 3.28 Final Type Expression, PDF 28/4/2023

Week 4 : Animation for expressive words

Fig 4.21 Split GIF sample 1 27/4/2023

Fig 4.22 Split GIF sample 2 27/4/2023

Fig 4.23 Surprise GIF sample 27/4/2023

Fig 4.24 Pause GIF sample 27/4/2023

Fig 4.25 Destroy GIF sample 27/4/2023 

Final animated type expression "Split", GIF

Fig 4.26 Final animated type expression "Split", GIF 28/4/2023

While animating it, I changed it to a slower speed so the viewer can see the action a little clearer. I also included a slight pause so it doesn't repeat too fast.

Week 5 : Task 1 ( Text formatting )

Fig 5.21 Kerning and Tracking exercise with the 10 fonts provided 28/4/2023

After kerning and tracking, I realised it balances out the look of the words more than before and it definitely made a difference, even though it was such a tiny change.

In Fig 5.22, I have used the wrong text but this is the very first layout I did

Fig 5.22 First try on Text formatting 2/5/2023

Here in Fig 5.23, I used the correct text and tried on improving it a little bit more compared to my very first attempt. However, there were still some things that have to be improved on like the ragging, as well as line spacing. The image wasn't related to the text as well and the caption of the image wasn't aligned to any text. 

Fig 5.23 Layout with text formatting before feedback 5/5/2023

After analyzing my previous mistakes, I came out with my final layout as shown in Fig 5.25.

Fig 5.24 Screenshot with baseline grid and hidden characters 7/5/2023

Fig 5.25 Final Task 1: Exercise 2- Text formatting JPEG 7/5/2023

Fonts: Bembo Std Regular (body text) , Univers LT Std 53 Extended (heading)

Point size: 10 pt (body text), 9 pt (captions), 47 pt (heading), 12 pt (sub-heading)

Leading: 9 pt (body text), 56.4 pt (heading)

Paragraph spacing: 4 mm

Alignment: Left justify

Fig 5.26 Final Task 1: Exercise 2- Text formatting, PDF Ver 7/5/2023

---

FEEDBACK

Week 2 :

General feedback:

I came out with 20 different designs for 5 different words so explorations were sufficient. However, not all expressions portrayed the action of the words. Illustrations and distortions are not allowed. Stick to using the fonts provided.

Specific feedback:

On a scale of 1-5, the strength of the ideas are rated at 3 from my point of view. as I realized some designs are similar to my classmates'. For the word "silence" refrain from adding the line from the "L" as it will result in looking like a "T". The work can be improved with expressing with simple fonts and more brainstorming. Also explore more on the meaning of the words to really bring out the feeling it is supposed to give.

Week 3 : 

Specific feedback: 

For split, adjust the letter "s" and "t" position lower.

For pause, add a grey or black background to give some contrast.

For surprise, play with the positions of the letters instead of placing them orderly.

Week 4 :

General feedback: It is best to insert a pause if it isn't a smooth loop. Look at what is being expressed, act out what is being expressed and not adding just an action. It is suggested to add more frames to make the animation smoother (25 frames for a 1 second pause)

Specific feedback: 

For destroy - The "d" and "E" should just stay on the ground. Instead of putting "destroy" in the smashed area, put "stroy" only. Use a more condensed font.

For split - loop was too fast, pause after the animation happens for it to repeat again.

Week 5 :

Lecturer feedback:

W5 As explained in the first week and demonstrated in the sample feedback above, the latest feedback is to be recorded above the previous feedback. Week 4 above W3, W3 above W2 etc. The top left of this sheet clearly gives you the short cut key to create a paragraph space: Alt+Enter/Opt.+Return

General feedback:

• Maintain an even grey tone so a particular part doesn't look to dark/light.
• When you have paragraph of texts where there are abbreviations being used, they stand out from the texts and the rhythm of the text will be broken, causing the breakdown of the harmony of reading. To fix it, use small capital or a different font or reduce the size, which follows the median line text's height
• NEVER use a force line break!
• A centralized format can be stable but not outstanding enough to be great, it needs some dynamism 
• Avoid using bodoni for body text and futura light as it is hard to read
• Have different margin spaces to create dynamism
• Try to maintain constant spacing
• If there is already a difference in weight, no need to put it in italic form as it will be too much
• Maintain similarity when cropping images ( e.g If you crop the head of person 1, make sure to crop the head of person 2 as well )

Specific feedback:

 Image is not related to text and need more leading. When using left align, have some ragging so it doesn't look like it is justified. Make title alignment matched to image and caption for image must be smaller or same size as body text.

---

REFLECTIONS

Experiences

Since it was my first time in a typography class, I learned a number of things and also learned to be more meticulous when reading texts I see on an everyday basis. It could be a post online, a leaflet I see in a mall or even packaging items. There were so many questions going around in my head, asking if the text could use some kerning, or could the spacing be a bit more and etc. I have also tried to not rely on illustrations as much, which was the biggest challenge to me as I am a big fan of illustrations. 

Observations

Even a small change of a design element could change how your text looks to a viewer. Kerning was something I was most fascinated about as it was such a simple change but it gave a huge difference, instantly making the texts appear cleaner. 

Findings

I discovered that not everyone has the same preferences even in typography. Some may prefer a more extravagant design/layout, when some prefers something simple. However, I think sticking to simpler designs would be the best for beginners like me and only start being adventurous once I dive deeper into the whole typography world. Although it's a subjective topic, typography still has its own rules that we designers have to follow in order to achieve the best reading experience for readers. 

---

FUTHER READING

Article: Typography Elements Everyone Needs to Understand by Laura Martin

Fig 1.31 Typography Elements Everyone Needs to Understand

link: https://medium.com/gravitdesigner/typography-elements-everyone-needs-to-understand-5fdea82f470d

1. Typefaces

Starting with the basics, there are 3 basic type of typefaces:

Fig 1.32 Three basic typefaces

• Serif (extended lines marked in red circles in Fig )
• Sans-serif ( without thick and thin strokes ) sans means "without"
• Decorative ( more creative fonts )

Tips:
- use a maximum of 3 different typefaces in a given project.
- try pairing serif + non serif fonts together

2. Hierarchy

Hierarchy helps keep your ideas organised and also helps readers identify the content they are viewing. This also helps viewers in finding specific information. An example of using hierarchy is using different font size for subheadings, and text.

3. Contrast 

Varying size, typeface, weight, colour, and style can give your designs a big impact as well as make your ideas organised. It could also help in emphasising specific information, as well as grab reader's attention.

4. Whitespace

It is the empty space around objects or text, that can take the form of margins, padding, or just an uncluttered area. It creates a pleasing visual experience 

I.D.E.A.S. (2003)

Fig 1.33 I.D.E.A.S. (2003)

Display

• attention-getting headline fonts
• best not to use as body fonts

Fig 1.34 examples of display fonts

Script

• designed to mimic handwriting
• letters are designed to touch one another
• never be used in all capital letters

Fig 1.35 examples of script fonts

Mono-spaced

• proportionally spaced; smaller characters take up less space than larger ones
• usually type-writer style fonts, take up the same amount of space regardless of the actual letter

Fig 1.36 examples of mono-spaced fonts

Dingbats

• small pieces of art used to enhance the design of the text or page

Fig 1.37 examples of dingbat fonts

Dashes

• En-dash 

- slightly longer than hyphens

- used to separate a range of items eg: dates, quantities, and time

- as a rule, if you can substitute the word "to" or "through" in place of the dash, then it is used correctly

• Em-dash

- used in place of a comma to set off a section of the sentence that requires special emphasis

- used to precede the attribution of a quote

- the width of the letter "M"

- never typed as two hyphens in a row 

Text in boxes

• attracts attention to small amounts of text
• indent the text from sides of the box 
• don't make the background tint or colour too dark- unless the type is reversed
• if using reverse type, try making the type bold and sans serif

Thoughts after reading this book:

As i read this book, I realised most of the things have been covered in the lectures already. But, I still learned a couple of new, interesting stuff on typography and some rules that I have to take note of so I can avoid of the basic typography mistakes. It amazed me on how typography could also be a form of art with just words.