Typography: Task 1

01/09/2023 to 25/09/2023 / Week 1 - Week 5
Raida Abdoul Kader / 0353038
Typography / Bachelor of Mass Communication / School of Media and Communication 
Task 1: Exercise 1 & 2

---

LECTURES

Week 1: Lecture 1

• Typography: the act of creating letters, the creation of typefaces or type families/ the style and appearance of printed matter/ The art and technique of arranging type to make written language legible, readable and appealing when displayed. It is also animated

• Reason for the effectiveness or non effectiveness of signs (information) is due in part of the skill level of typography

• You can find typography everywhere: website, signs, books, posters, logo type.... 

• The evolution of Typography (over 500 years)

Calligraphy: the writing styles 

Lettering: when you draw the letters out

- Font: refers to the individual font or weight within the typeface (Georgia Regular, Georgia Italic, Georgia Bold)

- Typeface: refers to the entire family of fonts/weights that share similar characteristics/styles (Georgia, Arial, Times New Roman, Futura

Typography: Development / Timeline

• Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel.

• The greeks changed the direction of writing, they developped a style of writing called 'boustrophedon' (from right to left and left to right)

• Early letterform development: Phoenician to Roman

• Hand script from 3rd - 10th century CE
  Square capitals (can be found in Roman monuments)

• Compressed version of square capitals: faster and easier to write but harder to read

• However everyday transactions were typically written in cursive hand 

• Charlemagne standardized in 789 all ecclesiastical texts 

• Gutenberg invented printing press
  Blackletter to Gutenberg's type: After the dissolution of Charlemagne's empire, Blackletter or Futura gained popularity

Text type classification

• 1450 Blackletter
• 1475 Oldstyle
• 1500 Italic
• 1550 Script
• 1750 Transitional
• 1775 Modern
• 1825 Square Serif / Slab Serif
• 1900 Sans Serif
• 1990 Serif/Sans Serif

Week 2: Lecture 2

Basic / Describing letterforms

The lexicon: terminologies

• Baseline: The imaginery 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’. 

• Stoke: Any line that defines the basic letterform
  
  
• Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below)

• Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
  
  
  
  
  
  
• Ascender: The portion of the stem of a lowercase letterform that projects above the median.
  
  
  
  
  

• Barb: The half-serif finish on some curved stroke.
  
  
  
  
  

• Em/en: The width of an uppercase M, and em is the distance equal to the size of the typeface. An en is half the size of an em. 
  
  
  
  
  

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

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

• Swash: The flourish that extends the stroke of the letterform (never use in capital word together to form a word)
  
  
  
  
  

(It's always good to select a type family that has a good range of typefaces)

• Small capitals (Used espiacially for acronyms) How to get small capitals?
• Uppercase Numerals (used with tabular material or with uppercase letters)
• Lowercase Numerals  (How to access them: Inddesign - Glyphs - character map)
  
• Italic: no small capitals in Italic

• Punctuation, Miscellaneous

• Ornaments
  
  
  
  
  

• When a typeface is designed based on handwriting it is cold italics, when it's not, it's known as Oblique
  
  
  
  
  

Week 3: Lecture 3 (Part 1)

Text/ Tracking: Kerning and Letterspacing

• Kerning: the automatic adjustment of space between letters. 
• Letterspacing: to add space between the letters.
• Tracking: The addition and removal of space in a word or sentence.
  
  
  
  
  

When Letterspacing? Mostly with headlines like for a Newspaper or a Magazine. Mostly used with uppercase letter

How Letterspacing in Indesign: alt - left arrow (to reduce the amount of space) 

To control how much space you want to add / remove: Edit - Preferences - Units & Increments - 

Kerning / Tracking

Tracking: Normal tracking, loose tracking, tight tracking

• Flush left: Most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends.
• Gray value: a number used to specify the intensity or level of gray in particular pixel, on a scale from white to black
• Centered: This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It creates such a strong shape on the page. (Centered text should be used for small amount of text)
• Flush Right: reading from the jagged point is very difficult so do not use it for large amounts of text. It is better used for captions because there is no strong indication of the letter direction. 
• Justified: symmetrical, justified is achieved by increasing/decreasing letter spacings. However, this meant that 'rivers'(the wide gaps between some words) will be formed in order to keep the alignment uniform. In order to solve this problem, line breaks and hyphenation is used.

"If you see the type before you see the words, change the type"

Text/Texture

Space abose the X-height is the acender

Space below the X-height is the descender

If the Desecender ans the Ascender is smaller than the X-height there is more readability

Leading and line length 

Type Size: large enough to read within an arm's length

Leading: the reader would easily lose its place in the paragraph if the type is set too close together. Not to mention, it would also distract the reader with its zebra-like pattern.

Line Length: too long of a line length reduces readability. Therefore, keep the line within the range of 55-65 characters

Week 4: Lecture 4 (Part 2)

There are 7 options for indication Paragraphs:

Pilcrow (¶): a symbol to indicate paragrah space

Leading: The space betwwen two sentences / Line space: takes into consideretion the baseline of one sentence to the descender of the other sentence 

Remember: if  the size of your typeface is 10 point, idealy your leading (the space between each line of text) should be about 12,5 points to 13 points

Indentation:  Indent is the same size as the line spacing. Indentation is best used when the text alignment is justified. If not, you would have a ragged edge on the left side as well as the right side of the text, making it look untidy. 

Extended Paragraphs: typically used in academic writing.

Widows & Orphans

Widows: a short line of text at the end of a column.

Orphans: a short line of text at the start of a column. (Try to avoid it)

(By doing a  a forced line break, you can avoid a widow)

Remember: not more or less that 3 times for kerning

To highlight text:

• Use Italics
• Make Text Bold 
• Change the color of the text (only ciant, magenta and black)
• Change the Typeface & Bolding the Text

Whenever you change the type family from a serif to a sans serif (for example), it's better to reduce the point size by 0.5

Headline within Text:

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

The B head subordinate to A heads. It indicates a new supporting argument or example for the topic at hand. 

The C heads, although not common, highlights specific facets of material within B head text.

Week 5: Lecture 5

Letters

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. 

Letters / Maintaining x-height

Curved strokes, such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Letters / Form / Counterform

Developing a sensitivity to the counterform (or counter)m is really important in typeface design. Knowing the negative space outside the form of the letter for, aids in the readability and legibility of formatted text. 

Counterform examples:

Letters / Contrast

Design principle: contrast is one of the most poweful dynamic in design.

- Used when you want to differentiate different sets of informations

---

INSTRUCTIONS

 Module Information Booklet

Task 1: Exercise – Type Expression

Exercice 1: Create type expressions of : melt; vibrates; glitch; roll; Scream; sleeping. Based on the 10 fonts given

Research & Sketches: Week 1 / Week 2

Research:

Those are the research that I did before sketching to get some inspiration. 

Fig 1 Research: Inspiration took from Pinterest - 5/09/2023

Sketch:

Those are the sketches that I did based on the inspirations I got. The sketches are hand-drawn. My favorites are Glitch, Sleep, Roll and Scream.

Fig 2 Hand-drawn sketch - 07/09/2023

Digitalisation: Week 2 / Week 3

First attempt:

Fig 3 First AI draft - 10/09/2023

 

Second attempt:

Fig 3.1 Second attempt AI - 12/09/2023

Final piece:

Fig 3.2 Finale piece Jpeg form - 18/09/2023

Fig 3.3 Finale piece PDF form - 18/09/2023

Animation:

First draft: Scream

I chose to animate the word scream because I think the idea I associated with it is quite expressive.

First I used Adobe Illustrator to design my animation frame by frame

As the aim is to express the word scream, I wanted to animate the letter A and do something simple. I also thought it was a good idea to enlarge the word in each frame.

Fig 4 AI process - 12/09/2023

Once I had finished working on the frames, I transferred the files to Adobe Photoshop and began the animation process.

Fig 4.1 PS process - 12/09/2023

Fig 4.2 Scream animation gif form - 12/09/2023

After Mr Vinod's feedback, I had to make some changes to the presentation of my work and I had to rework the word scream. I decided to create a new gif with the word Glitch.

Fig 4.3 Final Glitch animation gif form - 23/09/2023

TASK 1: EXERCISE 2 - TEXT FORMATTING

I used Adobe Indesign for this work on the Kerning & Tracking.  We were asked to type out our name using the 10 type families that we downloaded. 

Fig 5 Indesign process - 20/09/23

Fig 5.1 Kerning & Tracking my name - Jpeg form - 20/09/23

Text formatting first attempt:

We were then asked to work on a given text. 

Fig 6 Text formatting 1st attempt - Jpeg form - 20/09/23

Fig 6.1 Text formatting final piece - Jpeg form - 26/09/23

Fig 6.2 Text formatting final piece with baseline grid - Jpeg form - 26/09/23

Fig 6.3 Text formatting final piece - Pdf form - 26/09/23

Fig 6.4 Text formatting final piece with baseline grid - Pdf form - 26/09/23

Font: ITC New Baskerville Std, Futura Std

Typeface: ITC New Baskerville Std Roman, Futura Std Extra Bold, Futura Std Book

Font size: 20 pt (Heading), 10 pt (Sub-heading & body text)

Paragraph spacing: 11 pt

Leading: 12 pt

Average characters per line: 51 - 59

Alignment: Left

Margins: 12.7 mm (top, left, right), 50 mm (bottom)

---

FEEDBACK

Week 2

Specific feedback

General Feedback: 

- For line break Shift + enter

- Combine all research (images) in one image, remember to put the date, labeled, describe 

- Skethes have to be based on the font that I am going to choose (base on the 10 fonts)

- Shift + alt: to duplicate in Illustrator

- For line break: Shift + enter

- Combine all research in one image, remember to put the date, label, describe and embed (for research)

- Skethes have to be based on the 10 fonts 

- Only minimal distortion is acceptable

Week 3

General Feedback: 

- You can use light shade only (If you want to use colours)

- Submit Jpeg and pdf

Example AI word: recording 20 min

- Update e-portfolio on a weekly basis

- Design need to be functional and land to the meaning

- Compose the artwork to balance it (the 4 artworks)

For gift: create a white background and you export, Image size: should not exeed 1024 pix

reduce to 800 pix if to heavy

export as a gift, gray scale, no color

Specific Feedback:

- add the end date

- put headline on the left ( Week 1, Lecture 1)

- place the sketches in one image, and research in one image

- label, describe and date

- For the digitalisation:

scream: add gradient, light grey to black, to incerease the intensity repeat the word 3 or 4 times

glitch: increase the size (it's perfect)

roll: repeat the word in one sentence, create a path using outline to create the roll effect (see example in recording 1H10min

To create a line: pen tool - straight line - effect - distort and transform - object - extend appearance - Type path tool 

Expression Animation: 

To copy an Artboard: Shift - o - alt

Week 4:

General Feedback: 

- Uptade Task 4 E-portfolio in the google sheet

- The way you present your work needs to be effective, you need to create contrast, good composition,  balance and dynamism

- You can change the color background (black, grey, white)

- Always reflect, analyse and evaluate your work 

- Always show the process in your E-portfolio

For exercize 2:

Choose the font, typeface first, never choose bold, italics or condensed, then choose the appropriate point size (anywhere between 8 to 12)

A good layout is based on good margin

60 amount of space, 40 amount of space

Specific Feedback: 

Export Artboard in AI

Roll Can be much larger, and add shadow 

Scream is to organized, more crowded, use Italics, tied (no space in between), recording ( 1h30 min), Try to get an effect, use different font, change the size,

Sleep: dark background with letters in gray

Week 5:

General Feedback: Export task 1 ex 2 in pdf and jpeg, one with visual baselines and one without

Specific Feedback: Overall the layout is ok but try to move the first paragraph a bit above. 

Add caption to the picture

Be careful on the kerning for the last paragrah, it is to tight and affect the readability of the text.

---

REFLECTION 

Experience: At first I found it hard to adapt to the pace of work because I'm used to doing things at the last minute, but this module is helping me to take responsibility for my work little by little. As we have to show our progress during the weekly lessons, I do my best to finish what I have to do as soon as I can.

Observation: Coming up with ideas is much more complicated than actually realising the work.

Finding: At first, I believed that I needed to create very unique and complex designs for our first exercise. However, as I listened to Mr. Vinod's feedback regarding both my work and that of my classmates, I came realised that simplicity can be the key an excellent design.

---

FURTHER READING

The Vignelli Canon 

The Intangibles: Semantics

In the first part the author explain the importance of 3 key aspects in design: Semantic, Syntactic and Pragmatic

Semantic design involves the meaning of what need to be designed, it procides the foundation for any design project. First by understanding the history, nature and context. He explains that it is important to spend time on searching for it. 

The Intangibles: Syntactics

This passage talks aboout the concept of syntax in graphic design. Syntax in design is the discipline that contorls the proper use of gramma in the construction of phrases and the articulation of a language, which, in this case, is design.

The component that contriibute to it include the overall structure, the grid, the choice of typefaces, the arragement of text and headlines, the use illustrations, and other design elements.