Typography Task 1 / Exercises

7 April - 5 May / Week 1 - Week 5
Leem Sejin / 0362419
Typography / Bachelor of Design (Honour) in Creative Media
Task 1 - Exercises

LECTURES

Week 1 :

Introduction to Typography

Typography is the creation of typefaces or type families. It can be animation as well, such as beginning of the movie title, or even website design.
Font : A font refers to the individual font or weight within the typefaces
Typeface : A typeface refers to the entire family of fonts/weights that share similar characteristics/styles.

Typography History

-Early letterform development: Phoenician to Roman

-Initially writing meant scratching into a wet clay with sharpened stick or carving into stone with chisel. It means tool that we a holding has a very important influence on the type of writing.

-Attention to the Phoenician, how is it developed.
The Greeks changed the direction of writing, wrote right to left. The Greek developed a style of writing called "boustrophedon" which meant the lines of text read alternately right to left and left to right

-Etruscan ( and then Roman ) carvers working in marble painted letterforms before inscribing them. They drew it out with paint brush and developed the strokes based on the tools that they are using.

Fig 1.1 Evolution of Phoenician to Roman

Hand script from 3rd – 10th century C.E

Square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.

Fig 1.2 Square Capitals

Rustic Capitals were a compressed version of square capitals. Although rustic capitals were faster and easier, they were slightly harder to read due to their compressed nature.

Fig 1.3 Rustic Capitals

Development of lowercase was a result of writing fast, writing of uppercase letterforms fast.

Uncials incorporated some aspects of the Roman cursive hand. Uncials refer to letters that are one inch (one twelfth of foot) high. It might, however, be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

Fig 1.4 Uncials

Half-Uncials is a further formalization of the cursive hand, marked the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet

Fig 1.5 Half-Uncials

Charlemagne is the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig 1.6 Charlemagne

Blackletter to Gutenberg’s type

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condense strongly vertical letterform know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s miniscule.

Text type classification

1450 Blackletter : The earliest printing type, based upon the hand copying styles
1475 Old style : Based on the lowercase forms used by Italian and the uppercase letterforms found inscribed on Roman ruins.
1500 Italic : Condensed and close-set, allowing more words per page.
1550 Script : Originally and attempt to replicate engraved calligraphic forms, not appropriate for lengthy text format.
1750 Transitional : A refinement of old style form, achieve in printing and casting.
1775 Modern : Serifs are unbracketed, and the contrast between thick and thin stroke extreme.
1825 Square Serif / Slab Serif : Originally heavily bracketed serif, with little variation between thick and thin strokes, but the brackets dropped as evolved.
1900 Sans Serif : Eliminated serif altogether
1990 Serif/Sans Serif : Enlarge the notion of a family of typefaces to include both serif and sans serif alphabets.

Week 2:

Typography: Basic / 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'.
Stroke : Any line that defines the basic letterforms.
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 media.
Barb : The half-self finish on some curved stroke.
Beak : The half-serif finish on some horizontal arms.
Bowl : The rounded form that describes a counter, either open or close.
Bracket : The transition between the serif and the stem.
Cross bar : The horizontal stroke in a letterform that joins two stems together. ( eg. A H )
Cross Stroke : The horizontal stroke in a letterform that joins two stems together. ( eg. 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.
Ear : The stroke extending out from the main stem or body of the letterform.
Em : The distance equal to the size of the typeface (M space is gap between the word) / En : half the size of an em.
Finial : The rounded non-serif terminal to a stroke
Leg : Short stroke off the stem of the letterform, either at the bottom of the stroke ( eg L) or inclined downward ( eg K,R)
Ligature : The character formed by the combination of two or more letterforms. ( when f and i , finial clash)
Link : The stroke that connects the bowl and the loop of a lowercase G
Loop : In some typefaces, the bowl created in the descender of the lowercase 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 ( 'S' is good for developing the skills, like curves)
Spur : The extension the 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. ( diagonal stress, vertical stress: transition of copying handwriting.)
Swash : The flourish that extends the stroke of the letterform ( easily seen wedding, * never use swashes in capital letters together to form a word or a name)
Tail : the curved diagonal stroke at the finish of certain letterforms.
Terminal : The self-contained finish of a stroke without a serif.

The Font

What is full font : a type family(eg, bold, regular, semi bold ect.) that has many typefaces ( individual weight of that stroke), always good to select a type family that has a good range of typefaces.
Uppercase / Lowercase
Small Capitals : Uppercase letterforms draw to the x-height of the typeface, they are primarily found in seri fonts as part of expert set ( rare terms).
Italics
Punctuation, miscellaneous characters.
Ornaments

Describing Typefaces

Roman / Italic (when typeface is designed based on handwriting, called it Italic, in opposite, called oblique)
Boldface / light
Condense / Extended

As a typographer, study the 10 typefaces shown previously.

Fig 1.7 List of 10 typefaces

Week 3 :
Text- part 1

Kerning and letter spacing : Automatic adjustment of space between letters, It is not " letter spacing". Letter spacing means to add space between the letters. Focus on kerning or letter spacing on headline for newspaper, book.

Fig 1.8 Differences between kerning

Adobe Illustrator : Graphical creation purposes

Adobe InDesign : Dealing with large amount of text or limited amount of text

Normally tracking is easier to read as compared to loose tracking ( reduce readability of text)

Tight tracking: counter form has been reduce, become a bit more difficult to discern.

Text Formatting - alignment

Flush left : Asymmetrical experience of handwriting
Letting : Space between each line of a text
Centered : Symmetry upon the test, assigning equal value and weight to both ends of any line.
( sometimes it difficult to read, because starting point is different. Use for small amount of text)
Flush right : Emphasis on the end of a line as opposed to its start. ( Not working on the large amount of text)
Justified : Like centering, this formate imposes a symmetrical shape on the text. expanding or reducing spaces between words, sometimes between letters.

Fig 1.9

*Whenever we use script typefaces ( eg. fig1.3), never use capital letters using this particular typeface. No capital letters

Text/ Texture

It is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand.

Consider, too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitivity to these differences in colour is fundamental for creating successful layouts

Leading and line length

Text size : Text type should be large enough to be read easily at arms length

Leading : TExt that is set too tightly encourages vertical eye movement > easily loose his or her place.

Line Length : Appropriate leading for text is as much a function of the line length as it is question of type size and leading. Keep line length between 55-65 characters.

Week 4 : Text Part 2

Indicating paragraph

1. Look for 'pilcrow' ¶ ( seldom use today)

Fig 1.10 pilcrow

2. Line space between paragraph. If the leading is 12pt, paragraph space is also 12pt.

Fig 1.11 line spacing

Line spacing vs leading

leading : space between two sentences

line space : take consideration of base line of one sentence to a descender of the other sentence

As a designer, we use the word leading

Fig 1.12 difference between line space and leading

3. Indentation

Widow and Orphan

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

Orphan : Short line of

If there is widow or orphan, we can make changes by re-paragraphing the word, or change kerning or leading, but we cannot add not more than three

4. Highlighting text

There are different ways to highlight the text.

Change the typeface and make them into bold.
Highlight the colour of text, if there is colour printing. Take note, if we are changing, we only use black. cyan, magenta , yellow.
Highlighting text by placing a field of colour at the back of the text
Add typographic elements outside the left margin

When you decide to change the typeface on particular text, might reduce the font size. Different typeface has different size even though it is same point size

5. Headline within text

There are many kinds of subdivision within the text of a chapters

-A heads indicate a clear break between the topics within a section.

Fig 1.13 A heads

-B heads indicate a new supporting argument or example for the topic at hand.

Fig 1.14 B heads

-C heads, not common, highlight specific facets of material within B head text,

Fig 1.15 C heads

6. 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.

For example, Fig 1.16 ,one line of headline type cross-aligns with two lines of text type, and (right; bottom left) four lines of headline type cross-align with five lines of text type

Fig 1.16

Week 5 :

1. Understanding Letterforms

The uppercase letter forms below suggest symmetry, but not symmetrical. There are two different stroke weights of the Baskerville stroke form. Each bracket connecting the serif to the stem has a unique arc.

Fig 1.17

The uppercase letterforms may appear symmetrical, but a close examination shows that the width of the left slop is thinner than the right stroke. There must be a optical reason for this. Both Baskerville ( Fig .1.17) and Univers ( Fig 1.8) demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig 1.18 left slope is thinner than the right stroke (width)

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 1.19

*One of the common mistake in typeface design, attempt to create a lot of character. Changes need to simply the characgerist within the stroke of letter. must be easier to replicate.

2. Maintaining x height

The x-height generally describes the size of the lowercase letterforms. Must keep in mind that 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.

Fig 1.20

What is median line > the line above the base line

4. Form / Counterform

Counterform (or counter)—the space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. How well are the counters handled determines how well the words hang together, how easily we can read what’s been set.

Fig 1.21

5. Contrast

The most powerful dynamic in design, we need contrast when we dealing with different sets of information, differenciate information

Fig 1.22

Week 6 : Screen & Print

Different medium in typography

Typography has permeated many different platforms, eg screen platform, as technology developed.

Print type

Calson, Garamond, Bakserville are the most typefaces that used for print because of its characteristics, it is readable although the font size is small

Screen Type

Typefaces intended for use on the web are optimized and often modified to enhance readability and performance on screen, this can be include a taller x-height,wider letterforms, more open counters, heavier thin strokes and serif, reduced stroke contrast, as well as modified curves and angles for some designs
Typefaces that used for screen purposes : Verdana, Georgia ( but it does not mean that we cannot use these typefaces for print)
Hyperactive link / Hyperlink : A word, phrase or image that able to click on to jump to a new document or new section within the current document. Text hyperlinks are normally blue and underlined by default
Font size for screen : 16 pixel text on a screen is about the same size as text printed in a book or magazine
System fonts for screen / web safe fonts : Open Sans, Lato Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
Pixel Differential Between Devices

Static vs Motion

Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig 1.23

Motion typography : Temporal media offer typographers opportunities to “dramatize” type, for letterforms to become “fluid” and “kinetic”.

On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values.

INSTRUCTION

Task 1:Exercises - Type Expression

Week 1:

We are given few words : destroy, spilt, surprise, love, silence, party, pause.

We have to provide 4 minimum designs based on the 4 words that we chose.

First, I randomly sketch the ideas on any word. I drafted whenever something came out.

Fig 2.1 Type Expression Rough sketches (12/4/2023)

After that, I select the words that has many exploration.

These are the exploration of words : Destory, surprise, silence, split.

Fig 2.2 Type Expression Final sketches (12/4/2023)

Week 2 :

I did further exploration "surprise", and explore "silence" with the idea of voluming down.

After that, I moved to the adobe illustrator to digitalised the sketches.

Destroy

Fig 2.3 'Destroy' Type Expression (20/4/2023)

First, I placed the letters, create the outlines for each letters and cut letter 't','s','e' with knife tools, to make them cracked and shattered.

Silence

Fig 2.4 'Silence' Type Expression (20/4/2023)

I have two ideas for silence, the volume bar and dial. After digitalised them, I find that the idea on the left working better than right. However, I was worried that I will get pinalized with using too many graphic elements.

Split

Fig 2.5 'Split' Type Expression (20/4/2023)

I find that the letters look boring, so I tested with ' lit', giving the blur effect at the back and create the cut for letter 'S'.

Surprise

Fig 2.7 'Surprise' Type Expression (20/4/2023)

I make various design on ' Surprise' to see which design express the word most. I like first and third design, but I decided to choose first design, because I think letters jumping expressed the word " Surprised".

Week 3 :

I reworked on 'silence' because the layout is not well illustrated the volume bar. I aimed not to use too much graphics like lines thus, I decided to use letter 'i' as line for volume bar. I typed out " Silence" with 10 typefaces and chose which typeface can be used for the volume bar lines. In the end, I chose Univers LT Std 47 Light Condensed.

Fig 2.8 'Silence' Type Expression (25/4/2023)

I find that the colour of the words can be lighter, to give stronger expression of fading and being silent.

Fig 2.9 'Silence' Type Expression (29/4/2023)

Also, I worked with 'Destroy' to give more impact. I decided to add blur effect on letter 'D', so that it looks like heading towards to the letters.

Fig 2.10 'Destroy' Type Expression (25/4/2023)

However, I think that it is necessary to blend the letter 'D'.

I make more cracks to 'S' and 'P' to show that these letters are splited by 'lit'. I added the shadow below the letters, but I think it is too much, so I decided to remove.

Fig 2.11 'Split' Type Expression (25/4/2023)

I make more cracks to 'S' and 'P' to show that these letters are split by 'lit'. I added the shadow below the letters, but I think it is too much, so I decided to remove.

FINAL TYPE EXPRESSION

Fig 2.12 Final Type Expression (29/4/2023)

Fig 2.13 Final Type Expression pdf (29/4/2023)

Type expression animation

I just tried draft animation using 'Surprise', because I find that 'Silence' animation seems boring.

But I realised that I need to adjust each letters and shadows to make the animation smooth.

Fig 2.14 'Surprise' rough animation (25/4/2023)

Fig 2.15 'Surprise' clean up animation (25/4/2023)

I chose ' Silence ' to animate to show more clear ideas on voluming down. Before I start with animation, I draw rough animation using Procreate to test whether my idea will going to work.

Fig 2.16 'Silence' animation plan (26/4/2023)

Fig 2.17 'Silence' animation plan (26/4/2023)

After my planning, I moved on to the illustrator to animate.

Fig 2.18 'Silence' animation progress (26/4/2023)

After exporting the artboards, I moved to photoshop to place the exported files in sequence

Fig 2.19 'Silence' animation progress (26/4/2023)

Fig 2.20 'Silence' animation test (26/4/2023)

This is the final outcome for gif. However, I feel that the animation is a little bit fast, so I decided to duplicate the last frame at the end, to create a pause. Also, duplicate second last frame to slow down the speed.

Fig 2.21 'Silence' animation frames (26/4/2023)

Fig 2.22 'Silence' animation gif (26/4/2023)

After looking at the animation, colour of the words could be more lighter.

Fig 2.23 'Silence' animation gif (29/4/2023)

I went back to Illustrator to add more artboards and decreased the colour of the words more.

Fig 2.24 'Silence' animation frames (29/4/2023)

Next, I imported the file into the Photoshop and tidy up the frames. This time, I add more 3 frames in the beginning of the animation, 4 frames where the letter C reach to the lowest line, and 6 frames at the end to pause for 2-3 seconds, so that the animation won't looped so fast.

FINAL Type Expression Animation

Fig 2.25 'Silence' final animation (29/4/2023)

Task 1:Exercise 2 - Text Formatting

Week 5 :

Next exercise is text formatting, using Adobe InDesign

Before we start with the exercise, we need to watch the tutorial video, and practice on kerning,

Notes

command + A > select whole text
option + arrow key up/down > increase/decrease kerning
option + wide arrow key > increase/decrease tracking
Leading: +2-3.5 pt of point size
Paragraph spacing must be same as leading
No more or less than 3 for kerning and leading
Use either left align or left justify
Be aware of orphans or widows

Fig 2.26 Text without kerning(3/5/2023)

Fig 2.27 Text with Kerning (3/5/2023)

After practicing and get familiarised with InDesign, I explored various formatting and placement of the pictures. I used different typefaces, size and alignment of the text.

Fig 2.28 Formatting exploration (3/5/2023)

Among the 5 designs, I decided to work on the first design, but I realised that the image that I used is not relevant to the text, so I change to typewriter image. It was challenging to control the lagging because if I increase the kerning, some of the words are hyphened.

This is the first version of the type formatting :

Fig 2.29 Text Formatting ver 1 (3/5/2023)

Week 6 :

I continue to working with kerning to reduce ragging, but fourth paragraph struggles me, because no matter how I adjust, lagging does not seem smooth. Hence, I decided to turn on the hyphenation.

Fig 2.30 (6/5/2023)

Fig 2.31 (6/5/2023)

I realised that the last paragraph, the words the too close and the capital letters seem bigger, so I adjust the kerning and decrease the size of the capital letters by 1pt.

Fig 2.32 (6/5/2023)

FINAL Text Formatting Layout

Fig 2.33 Final Text Formatting Without Guide line (7/5/2023)

Fig 2.34 Final Text Formatting with Guide line (7/5/2023)

Fig 2.35 Final Text Formatting without Guide line pdf (7/5/2023)

Fig 2.36 Final Text Formatting with Guide line pdf (7/5/2023)

HEAD

Font/s: Gill Sans Std

Type Size/s: 34 pt

Leading: 68 pt

Paragraph spacing: 0

BODY

Font/s: Adobe Calson Pro

Type Size/s: 10 pt

Leading: 12 pt

Paragraph spacing: 10 pt

Characters per-line: 57

Alignment: left Align

Margins: 12 mm top, 12.7 mm left, 12.7mm right, 30 mm bottom

Columns: 2

Gutter: 5 mm

FEEDBACK

Week 2:

General Feedback: Idea sketches aren't large sketches. Avoid too much distortion. Sketch the ideas based on the 10 fonts given.

Specific Feedback: For "Destroy", distort the letters more, thinking about the placement of the letters. There is no much impact on surprise, explore more. For silence, I can explore more based on the first design, which describes as voluming down, maybe can use dial to describe controlling the volume. Split is interesting design but it is in the box. So maybe letter "S" and "P" is split and the rest of the letters could be coming out from it.

Sketch Answer objectively.

1. Are the explorations sufficient?

2. Does the expression match the meaning of the word?

3. On a scale of 1–5, how strong is the idea?

4. How can the work be improved?

Week 3 : We don't have class on 21 April due to public holiday ( Hari Raya ), but Mr Vinod did short zoom session to give the feedback. He recommend to watch other class's recorded lesson.

Specific Feedback : ' Destroy' and 'Split' is good, but 'Silence', there is a little bit much graphical design. Also, make the word in smaller font. For the word ' Surprise' stick with a first design.

General Feedback ( based on Tue class) : Think about this question when you look at your work

What is lacking?
Are the expression well crafted?
Do they sit well for the artboard? (eg. size, engaging and impactful, unnecessary work, improvement).

Also, we have to update our blog every week, and post the progression, not only the final work.

Week 4 :

General Feedback: Pause 3 seconds at the end so that animation do not loop fast. To make smoother, add more frames. Animate being expressed not for action.

Specific Feedback : Fade down the letters more as it goes down, even letter E. Pause the last frame a little bit more.

Week 5 :

General Feedback : Use the pictures that related to the text. Check the evenness of text, gapping, cross alignment and not too much hyphenation. Never use italics, bold, condensed typeface for body text.

Specific Feedback : Layout is ok, just adjust leading as some sentences are stick too close.

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?

REFLECTION

Experience
It was good experience to explore different typefaces. When I start with type expression exercise, it was challenging to express the words without using the graphic element. As a result, I did not have satisfied works, especially the word ' Surprise'. One of the challenges is I could not judge whether my design match its expression. However, when I listen other classmates' feedbacks, my ideas developed bit by bit, and tried not to make similar mistake that highlighted to others. Working with Adobe illustrator was really fun as I did research on the tools to make my words more impact, such as creating the shadow behind the words. I did many variations and test different tools for my final design. For type formatting exercise, it is really challenging to make the text into smooth lagging. I need to consider that the text spacing, aware of the hyphenation, orphans and widows.

Observation
Every feedback session, Mr Vinod gave the questions to ask ourselves to judge our designs critically.
It really helps to find what is lacking and pointed out what changes need to make. Also, looking at other classmates' work also inspired to developed my idea, especially the word animation.

Findings
I realised that I only changed my idea upon Mr Vinod's feedback, did not went deep to developed my design, As compared to other classmates, I did not make much progress from the beginning. If I see my rough sketches and final outcome, there was not much difference made. Also, I need to rewatch some part of the lectures to fully understand. I should take a simple note while watching so that in future, I will not lost and do not waste time on watching the same videos over and over.