Typography Task 1 / Exercises

04.4.23- 02.5.23 / Week 1- Week 5
Nitish A/L Naveen Kumar 0346592
Typography, Bachelors of Design HONORS in Creative Media
Task 1 Exercises

---

LECTURES

Week 1 - Lecture 1, 

DEVELOPMENT/TIMELINE

Early letterform development: Phoenician to Roman

Uppercase forms consists of simple combinations such as straight lines and pieces of circles, Phoenicians wrote from left to right whereas the Greeks created 'Boustrophedon' where they read from right to left and left to right, the Phoenicians and the Greeks did not use letter space or punctuations.

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

Square Capitals: Can be found in written versions in the Roman monument, the letterforms had serif added to the finish of the main stroke.

Rustic Capitals: Contains compressed version of square capitals, allowed to write twice as many words and took less time to write, faster and easier to do but harder to read due to their compressed nature.

Roman Cursive: Written for everyday transactions, forms are simplified for speed, Roman cursive created lowercase letterforms.

Uncials: Small letters, incorporated some aspects of the Roman cursive, more readable at small sizes than rustic capitals.

Half Uncials: Formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Caloline miniscule: All ecclesiastical texts were standardized after Charlemagne the first unifier of Europe since the Romans issued an edict in 789, He entrusted this task to Alcuin of York, Abbot of  St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

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: Earliest printing type, based upon the hand copying styles that were used for books in northern Europe.

1475 Oldstyle: Lowercase form used by italian humanist scholars, uppercase letterforms found inscribed on Roman ruins.

1500 Italic: Echoing contemporary Italian handwriting, condensed and close set, Italics were cast to complement roman forms.

1550 Script: Formal and traditional, casual and contemporary, not appropriate in lengthy text.

1750 Transitional: Refinement of  Oldstyle forms.

1775 Modern: Further rationalization of oldstyle letterforms.

1825 Square Serif / Slab Serif: Originally heavily bracketed serif, little variations of thick and thin strokes.

1900 Sans Serif: First introduced by William Caslon IV in 1816, variation tended toward either humanist forms or rigid geometric, sans serif also referred to as grotesque and gothic.

1990 Serif / Sans Serif: Include both serif and sans serif alphabets.

Week 2 - Lecture 2,

BASIC/ DESCRIBING LETTERFORMS

Fig1.0

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

Fig1.1 Stroke

Stroke: Any line that defines the basic letterform

Fig1.2 Apex/Vertex

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

Fig1.3 Arm

Arm: Short strokes off the stem of the letterform, either horizontal (E,F,L) or inclined upward (K,Y)

Fig1.4 Ascender

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

Fig1.5 Barb

Barb: The half-serif finish on some curved stroke

Fig1.6 Bowl

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

Fig1.7 Bracket

Bracket: The transition between the serif and the stem

Fig1.8 Cross Bar

Cross Bar: The horizontal stoke in a letterform that joins two stems together

Fig1.8 Cross stroke

Cross Stroke: The horizontal stroke in a letterform that joins two stems together

Fig1.9 Crotch 

Crotch: The interior space where two strokes meet.

Fig2.0 Ear

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

Fig2.1 Em/En

Em/En: Originally referring to the width of an uppercase M and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An em is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

Fig2.2 Finial

Finial: The rounded non-serif terminal to a stroke

Fig2.3 Leg

Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or inclined downward (K,R).

Fig2.4 Ligature

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

Fig2.5 Link

Link: The stroke that connects the bowl and the loop of a lowercase G.

Fig2.6 loop

Loop: In some typefaces the bowl created in the descender of the lowercase G.

Fig2.7 Serif

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

Fig2.8 Shoulder

Shoulder: The curved stroke that is to part of a bowl.

Fig2.9 Spine

Spine: The curved stem of the S

Fig3.0 Spur

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

Fig3.1 Stem

Stem: The significant vertical or oblique stroke.

Fig3.2 Stress

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

Fig3.3 Swash

Swash: The flourish that extends the stroke of the letterform.

Fig3.4 Tall

Tall: The curved diagonal Stroke at the finish of certain letterforms.

Fig3.5 Terminal

Terminal: The self contained finish of a stroke without a serif. This is something of a catch all term. Terminals may be flat ('T' above), flared, acute, ,('t' above), grave, concave, convex or rounded as a ball or a teardrop (see finial).

The Font 

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: Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.

Uppercase Numerals: Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width.

Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.

Italic: Most fonts today are produced with a matching italic. small caps, however, are almost always only roman.

Punctuation, miscellaneous characters: Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface.

Ornaments: Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family.


Describing Typefaces

Roman: The letterforms is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as 'Book'.

Italic: Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface.

Boldface: Characterised by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called 'semibold', 'medium', 'black', 'extra bod' or super.

Light: A lighter stroke than the roman form. Even lighter strokes are called 'thin'

Condense: A version of the roman form, and extremely condense styles are often called 'compressed'

Extended: An extended variation of a roman font


Comparing Typefaces

Fig3.6 Radiography in different typefaces

Fig3.7 Comparing typefaces

• Differences in height
• Forms display a wealth of variety
• Relative stroke widths and in feeling
• Range of attitudes 
• Some whimsical
• Some stately
• Some mechanical
• Others calligraphic
• Some harmonious 
• Some awkward 

Week 3 - Lecture 3A,

Typography: Text/Tracking

Kerning and Letterspacing

Fig3.8

Kerning: Automatic adjustment of space between letters
Tracking: Addition and removal of space in a word or sentence 
Letterspacing: Add space between letters

Fig3.9 Normal tracking, loose tracking and tight tracking

Formating Text

Fig4.0 Normal and loose tracking

Fig4.1 Tight tracking

Fig4.2 Flush left

Flush left: Closely mirrors the asymmetrical experience of the handwriting, each line starts at the same point but ends whenever the last word on the line ends, spaces between words are consistent  throughout the text allowing the type to create an even grey value

Fig4.3 Centered 

Centered: Imposes symmetry upon the text, assigning equal value and weight to both ends of any line, transforms text into shapes, its important to amend line breaks so that the text does not appear too jagged.

Fig4.4 Flush right

Flush right: Places emphasis on the end of the line as opposed to its start, it can be used fun in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right 

Fig4.5 Justified

Justified: Like centering this format imposes a symmetrical shape on the text, it is achieved by expanding or reducing spaces between words and sometimes between letters.

Text/Texture

Fig4.6 Anatomy of a typeface

Fig4.7 Different typeface 1

Fig4.8 Different typeface 2

Text/Leading and line length

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

Leading: Text that is set too tightly encourages vertical eye movement a reader can easily track, type that is set too closely causes distraction.

Line length: Appropriate leading for text is a much a function of the line length as it is a question of type size and leading.

Fig4.9 Sample type specimen sheet

Week 4 - Lecture 3B

Typography: Indicating Paragraphs

Fig 5.0 Pilcrow

Fig 5.1 Linespace 12pt

Fig 5.2 Line space vs leading

Widow and Orphans

Fig 5.3 Widow and Orphans

Widow: a short line of typo alone at the end of a column 

Orphan: a short line of typo alone at the start of a column 

Highlighting Text

Fig 5.4 Not highlighted

Fig 5.5 Highlighted 

Fig 5.6 Point size for highlighted text

Fig 5.7 Quotation marks

Quotation marks: like bullets, create a clear indication and breaking the left axis

Headline with Text

Fig 5.8 Pilcrow

Headlines: A head indicates a clear break between the topics with the section

Week 5- Lecture 4

Undestanding letterforms

Fig 5.9 Baskerville

The uppercase letter suggest symmetry but it's not symmetrical. It is easy to see the two different stroke weight of Baskerville stroke, the bracket connecting the serif to the stem has a unique arc

Fig 6.0 Univers

The uppercase letter form appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke. Both Baskerville and Univers demonstrate the meticulous care a type designer takes to create letterforms that are both internally harmonious and individually expressive.

Fig 6.1 Helvetica and Univers

The individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans serif typefaces, a comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly to reveal the palpable difference in character between the two.

Maintaining X- Height

Fig 6.2 Maintaining x-height

X-height generally describe the size of the lowercase letterforms. 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.

Form and Counterform

Fig 6.3 Form and counterform

Layers when joined to form words, the counter form includes the spaces between them

Contrast

Fig 6.4 Contrast

The simple contrast produces numerous variations:
small=organic/large + machined: small + dark/ large light

---

INSTRUCTIONS

 

---

TASK

Task 1 Exercises- Type Expression 

For exercise 1 type expression, we were given a few words to create type expressions of. The words given were dissipate, fire, water, freedom, crush, sick, rain. We are limited to create this type expression with 10 typefaces that were given.

Sketches

Fig 1.1 Rough sketch (09.04.23)

Words chosen: Dissipate, Crush, Sick, Freedom

I created the rough sketches digitally thru procreate, I created 4 different sketch versions of each words excluding Freedom.


Digitalization 

Fig 1.2 Type expression digitisation 1 (15/4/23)

After receiving feedback from Mr Vinod my 'Freedom' and 'Dissipate' did not have to use italics the regular one was good enough, and the sick needed to be enlarged to maximise the use of space.

Fig 1.3 Type expression digitisation 2 (22/4/23)

After reviewing the feedback I made the 'Sick' bigger and undid the italics for both 'Freedom' and 'Dissipate', I also ended up making 'Freedom' bigger also to maximise the space.



FINAL TYPE EXPRESSION

Fig 1.4 Final Type Expression Digitization JPEG (25/4/23)

 

Fig 1.5 Final Type Expression Digitization PDF (25/4/23)

Type Expression Animation

Once seeing the animation tutorial from Mr Vinod YouTube tutorial, I made 2 animation attempts for 2 different words 'Crush' and 'Freedom'.

Fig 1.6 Attempt 1 'Freedom' (22/4/23)

Fig 1.7 Artboard AI 'Freedom' (22/4/23)

Fig 1.8 Animation timeline PS 'Freedom' (22/4/23)

Fig 1.9 Attempt 1 'Crush' (22/4/23)

Fig 2.0 Artboard AI 'Crush' (22/4/23)

Fig 2.1 Animation timeline PS 'Crush' (22/4/23)

Fig 2.2 Final Attempt 'Crush' (28/4/23)

Fig 2.3 Animation timeline PS 'Crush' (28/4/23)

FINAL ANIMATION 

After listening to Mr Vinods feedback on leaving the 'FREEDOM' gif and to do a few changes for the 'CRUSH' gif I retried the animation again and this is the final product.

Fig 2.4 Final 'Crush' JPG (29/4/23)

Fig 2.5 Final Animation timeline PS 'Crush' (29/4/23)

 

Fig 2.6 Final 'Crush' PDF (29/4/23)

Task 1 Exercise 2: Text Formatting 

After watching the tutorial video from Mr Vinod I followed the example and later attempted the kerning and tracking.

Fig 2.7 Text Formatting with Kerning (29/4/23)

Fig 2.8 Second Attempt Text Formatting before Kerning (29/4/23)

Fig 2.9 Second Attempt Text Formatting after Kerning (29/4/23)

Fig 3.0 Text Formatting Comparison (29/4/23)

After watching and finish attempting the kerning and tracking process I then proceeded to watch the Text formatting tutorial video by Mr Vinod. 

Fig 3.1 Layout 1 Text Formatting Exercise (1/5/23)

Base layout without Kerning, Tracking and Ragging

Font: Universe LTD Std Roman
Point size: 9pt
Leading: 11pt
Line length: 60
Alignment: left align

Fig 3.2 Layout 2 Text Formatting Exercise (1/5/23)

Fig 3.3 Layout 3 Text Formatting Exercise (1/5/23)

After doing Kerning, Tracking and Ragging

Font: Futura Std Medium
Point size: 9pt
Leading: 11pt
Line length: 61
Alignment: left align(body text) right align (heading, captions)

Fig 3.4 Layout 4 Text Formatting Exercise (1/5/23)

Fig 3.5 Layout 5 Text Formatting Exercise (1/5/23)

Fig 3.6 Layout 6 Text Formatting Exercise (1/5/23)

Fig 3.7 Layout 7 Text Formatting Exercise (1/5/23)

Fig 3.8 Layout 8 Text Formatting Exercise (1/5/23)

Fig 3.9 All 8 layout compilation (12/5/23)

After the feedback from Mr Vinod I Changed the layout as well as the fonts and leading, I also changed the image to relate to Helvetica 

Fig 4.0 Layout 9 (13/5/23)

Fig 4.1 Layout 10 (13/5/23)

Fig 4.2 Final Layout (14/5/23)

Head
Font/s: Gill Sans Regular/ Gill Sans Italic
Type size/s: 30pt
Leading: 24pt
Paragraph spacing: 0

Body

Font/s: Gill Sans Regular
Type size/s: 11pt
Leading: 12pt
Characters per-line: 59
Paragraph spacing: 12pt
Alignment: Align left 

Margins : 50mm Top, 47mm Bottom, 12.7mm Left, 12.7mm Right
Columns: 4
Gutter: 5mm


FINAL TEXT FORMATTING

Fig 4.3 Final Text Formatting Layout JPEG (14/5/23)

 

Fig 4.4 Final Text Formatting Layout PDF (14/5/23)

Fig 4.5 Final Text Formatting Layout Grids (14/5/23)

 

Fig 4.6 Final Text Formatting Layout Grids PDF (14/5/23)

---

FEEDBACK 

Week 2
General Feedback: Do rough sketches before digitalising, graphic elements should be kept to a minimal, explore more ideas rather than only reshaping the existing one.

Specific Feedback: Crush the 'C' can be in a bigger lettering whereas the 'rush' in a smaller lettering, Sick the 'I' is heavily reliant on graphic elements since it looks like a pill but with the right typeface it could work, Freedom the first sketch works well better than the other two, Dissipate can be enhanced by using the right brush to make it look like its dissipating. 

Week 3
General Feedback: The 'I' in 'Sick' can use a bit of graphic to make it look like a needle.

Specific Feedback: The 'Sick' can make it bigger, 'Freedom' and 'Dissipate' can do without Italics.

Week 4
General Feedback: Add a few more seconds to the end of the gif, keep the letters still and in place to not create unnecessary effects.

Specific Feedback: Use a motion blur effect to make it blurry from the top to show an after effect from the 'C' falling, the 'C' has to drop faster and not slow, have a slight pause at the end, can use a bit more effect to make the ground shake/ crack to have an even more impact, the words are good but 'rush' can make it scatter in bits at the end to show that it was crushed.

Week 5
General Feedback: If there’s capital words that are taking the attention change the font size for the capitals by 0.5 or by using  small capitals.

Specific Feedback: Increase the font size to 10 maybe, Leading looks tight and its leaning towards the darkerside, Cross alignment seems to be there, Don’t know about the centre alignment heading it may work with the change of font size, Image is not relevant to Helvetica, When using Futura leading is on the top.

---

REFLECTIONS

Experience
Through these past 5 weeks the experience of these exercises was fun and challenging as well as informative. It was fun to create a word by using creative thinking and also to try and animated it, the second exercise was a bit more challenging as there was a bit more thing to learn and remember and to make sure that the mistakes are to be corrected it was less creative in terms of visual design and images but more creative in terms of how the sentence of the paragraph looks aesthetically pleasing as well as readable and to make a design without the help of art.

Observations
Ive observed that in text formatting there are so many things that play an important role to ensure the end product looks good for example the leading, paragraph spacing cross alignment and etc. I see that tracking too much can change the sentence altogether and if cross alignment is not reached it looks weird.

Findings
Ive learnt that in typography there is a lot of things to keep an eye on even if it looks good or great there is something hidden that can't be seen even if u were to relook at it for millions of times, typography takes a lot of time and patients to ensure the final product makes sense not only to the readers but also to ensure the readers understand the point were trying to create as well as for the readers to read and grasp the content clearly and in sequence without questioning things like "what does that mean" or "why is this here".

---

FURTHER READING

Fig 1.0 Typography, Referenced : A Comprehensive Visual Guide to the Language, History, and Practice of Typography

Fig 1.1 Greek Lapidary Letters / Roman Monumental Capitals

Greek lapidary letters were carved into hard surfaces and was the first formal use of Western Letterforms, Roman Lapidary letters uses the Greek lapidary letters but have a more modern Roman shapes and proportions. Roman Monumental capitals are the foundations for Western type design and is also the ancestors of all serif typefaces.

Fig 1.2 Nicolas Jenson 1470

During (1420-1480) Nicolas Jenson were one of the first printers to cut and use fonts on Roman letterforms rather than the Northern European Fraktur letterform.