Typography Task 1 / Exercises

29/9/2023 - 5/11/2023 / Week 1 - Week 5

Alyssa Lim Shyn Yi / 0365877

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

Task 1: Exercise 1

Table of Content

LECTURES

Week 1: Lecture 0 & 1

During the first week, we were being brief about module about Typography. And we were asked to watch Type 0 Introduction & Type 1 Development. Mr Vinod had also reviewed our sketches based on the 4 words we had chosen.

1. Typography

Creation of typefaces / type families
Can be form of animation / logo/ trademark/ etc...
Visible & prevalent in website designs
Style, arrangement & appearance of the letters, numbers & symbols created by the process
Involves selecting typefaces, point size, line length, line spacing(leading), letter spacing(tracking) & adjusting the space within letters pairs(Kerning)

2. Calligraph > Lettering > Typography

-------------------------------------------->

Evolved over 500 years

Calligraphy= Refer to writing styles (black letters / round-hand / etc...)

Lettering= Drawing letters out

3. Font

Comes from the French word (Found)
Refers to term " Foundry " (Historical name)
Refers to the individual font / weight within the typeface

Figure 3.1

4. Typeface

Refers to the entire family of fonts / weights that share similar characteristics / styles
There maybe fonts of different ways/ styles within typefaces

Early Letter Development: Phoenician to Roman

During the ancient times, people use sharpened stick to scratch into wet clay or carving into stone with a chisel. For 2000 years, the form of uppercase letterforms have seen to evolve out of these ancient tools & materials.

The way we write in terms of Arabic & the modern Latin can be derived from Phoenician alphabet.

Figure 1.1 Figure 1.2

Right: 4th Century B.C.E. - Phoenicians votive stele Carthage, Tunisia. The stele bears a four-line inscription to Tanit & Baal Hammon. Left: Evolution from Phoenician letter.

1) The Greeks developed a style of writing called " boustrophedon " (How the ox ploughs), lines of text are read alternately from right to left or left to right. Orientation of the letterforms are also changed.

Figure 1.3 Figure 1.4

2) Greeks like the Phoenicians, they did not use letterspace or punctuations. Latter, Greeks would move to a strictly left-to-right writing.

Phoenician Greek Roman
1000 B.C.E. 900 B.C.E. 100 B.C.E

Etruscan (& then Roman)

Worked in marble painted letterforms before inscribing(carve) them
A change in weight from vertical to horizontal, a broadening of the stroke at start & finish carried over into the carved letterforms
Typographers, artists, letters will draw it out with a paintbrush & based on the skillset they have

* B.C.E refers to anything before the zero year.

Hand Script From 3rd - 10th century C.E.

1. Square Capitals

Figure 1.1

- The written version that can be found in Roman monuments

- Letterforms have serifs added to the finish of the main stroke

- Variety of stroke width was achieved by reed pen held at an angle of approximately 60 degrees off the perpendicular.

- Developed around 4th - 5th century C.E.

2. Rustic Capitals

Figure 1.2

- Faster & easier but slightly harder to read due to they are the compressed version of square capitals

- Lesser time to write & allowed for twice as many words on a sheet of parchment

- Pen / Brush was held at an angle of approximately 30 degrees off the perpendicular

- Developed for pragmatic reasons but not necessary a good development in terms of readability

- Founded in late 3rd - mid 4th century

3. Roman Cursive

Figure 1.3

- Simplified for speed & results of writing fast

- Writing uppercase letterforms quickly in lowercase letterforms

4. Uncials

Figure 1.4

- Uncia refers to Latin for " a twelfth of anything "

- Simply as small letters and did not have uppercase / lowercase letterforms

- Incorporated some aspects of Roman Cursive hand, especially in the shape of A, D, E, H, M, U & Q

- Broad forms of uncials are more readable at small sizes than rustic capitals

5. Half- Uncials (C.500)

Figure 1.5

- Replete with ascenders & descenders, 2000 years after the origin of the Phoenician alphabet

- Further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms

6. Charlemagne

Figure 1.6

- First unifier of Europe since the Romans issued an edit in 789 to standardize all ecclesiastical texts

- Texts are rewrote by the monks using both majuscules (uppercase), miniscule, capitalization & punctuation which set the standard for calligraphy for a century.

7. Blackletter to Gutenberg's Type

Figure 1.7

- Blackletter / texture gained popularity in Northern Europe after the dissolution of Charlemagne's empire

- A rounder more open hand gained popularity called " Rotunda "

- Gutenberg marshaled all his skills (engineering, metalsmithing & chemistry) to build pages that accurately mimicked the work of the scribe's hand - Blackletter of Northern Europe

Figure 1.8

- A tipping point in the Western civilization after a mechanism where printing can be done more quickly had been developed

Text Type Classification (Dates of origin approximated to the nearest quarter century)

1) 1405 Blackletter

Earliest printing type / based upon the hand copying styles that were used for books in Northern Europe
Example: Cloister Black, Goudy Text

2) 1475 Old-Style

Based upon lowercase forms used by Italian humanist scholar for book copying (themselves based upon the 9the century Caroline Miniscule)
Uppercase letterforms found inscribed on Roman ruins
Evolved away from their calligraphic origins over 200 years as they migrated across Europe, from Italy to England
Example: Bembo, Calson, Dante, Garamond, Janson, Jenson, Palatino

3) 1500 Italic

1st Italics were condensed & close set, allowing more words per page
Soon cast to complement Roman forms
All text typefaces have been designed with accompanying Italic forms since the 16th century

4) 1500 Script

Attempt to replicate engraved calligraphic forms
Not entirely appropriate in lengthy text settings
Range from formal & traditional to the casual & contemporary
Example: Kuenstler script, Mistral, Snell Roundhand

5) 1750 Transitional

Refinement of old-style forms
Thick to thin relationships were exaggerated & brackets were lightened
Example: Baskerville, Bulmer, Century, Time Roman

6) 1775 Modern

Represents a further rationalization of old-style letterforms
Serifs were unbracketed & the contrast between thick & thin strokes extreme
English versions (like Bell) are known as Scotch Romans & more closely resemble transitional forms
Example: Bell, Bodoni, Caledonia, Didot, Walbaum

7) 1825 Square Serif / Slab Serif

Heavily bracketed Serif, with little variation between thick & thin strokes
Brackets were dropped as they evolved
Example: Clarendon, Memphis, Rockwell, Serifa

8) 1900 Sans Serif

These typefaces eliminated Serifs altogether as their name implies
Did not become wide-spread until the beginning of the 20th century although it was first introduced by William Caslon IV in 1816
Refers to as grotesque (from the German word grotesk) & Gothic
Example: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

9) 1900 Serif / Sans Serif

Enlarges the notion of a family of typefaces to include both serif & Sans Serif alphabets ( & often stages between the two)
Developed a typeface called Semi Sans / Semi Serif
Example: Rotis, Scala, Stone

Week 2: Lecture Type 3 Text P1

In the second week, we learn about Kerning and letterspacing.

Kerning= Refers to the automatic adjustment of space between letters

= Often mistakenly as ' letterspacing '

= Mostly use in uppercase headline to give more room

Letterspacing= To add space between the letters

Tracking= The addition of removal of space in a word / sentence

Left = Without kerning Right= With kerning

Readability of text reduces especially in an entire paragraph when letterspace is added to a body of text. If we increase / decrease letterspacing between words / sentences, we are reducing the recognizability of patterns that these words form.

Uppercase letterforms are drawn to be able to stand on their own
Lowercase letterforms require the counter form created between letters to maintain line of reading

Text / Formatting Text

1. Flush Left

Has a ragged right
Mirrors the asymmetrical experience of handwriting
Spaces between words are consistent throughout the text, allowing the type to create an even gray value
Each line starts at the same point but ends wherever the last word on the line ends

*Gray value are texts on a white piece / white page

2. Centered

Has ragged right & left
Imposes symmetry upon the text, assigning equal value & weight to both ends of any line
Transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature
Creates such a strong shape on the page, its important to amend line breaks so that the text does not appear too jagged
Jagged= Having sharply uneven edge/ surface

3. Flush Right

Has ragged left & needs to be smooth
Places emphasis on the end of a line as opposed to its start
Normally used in axial layout
Used like the central alignment in small amounts of text

4. Justified

Imposes a symmetrical shape on the text like centering
Achieved by expanding / reducing spaces between words & sometimes between letters
Line breaks & hyphenation is required to amend this problem when possible. For example, fast-acting, dog-friendly, well-known
Resulting openness of lines can occasionally produce ' rivers ' of white space running vertically through the text

Extra

Designers need to avoid ' rivers ' (Gap) at all costs
Type that calls attention to itself before the reader can get to the actual words are simply interference & should be avoided
Type should be changed if we see the type before the words
Script typefaces should not be use in CAPITAL LETTERS
When using script typefaces, it maybe necessary to use a secondary typeface

Text / Formatting Text

Refers to type with a relatively generous x-height / relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height / lighter stroke
Sensitivity to these differences in color is fundamental for creating successful layouts

Figure 1.0 (Anatomy of Typeface)

X-height refers to the area between the base line
The line above the base line as the mean line / median line
The space above the X side is known as the ascender, the space below the X sign is known as the descender
There is more readability if the descender in center is smaller in comparison to X height
X height is a bit more larger in proportion to the center & that causes our readability to increase

Figure 1.2

10/13.5 Adobe Caslon 10/13.5 Baskerville

10 is size of point size 13.5 is the leading

* Leading is 3.5 points larger than the font size of the text

Text / Leading & Line Length

Figure 1.3 Figure 1.4

1. Goal

Allow for easy, prolonged reading
A field of type should occupy the page as much as photograph does

2. Type Size

Text type should be large enough to be read easily at arms length (Imagine yourself holding a book in your lap)

3. Leading

Text that is set too tightly encourages vertical eye movement (A reader can easily loose his/her place)
Type that is set too loosely creates striped patterns that distract the reader from the material at hand

4. Line Length

Appropriate leading for text is as much a function of the line length as it is a question of type
Shorter lines require less reading, longer lines more
A good rule of thumb is to keep line length between 55-65 characters
Extremely long / short line lengths impairs reading

Text / Type Specimen Book

Figure 1.0 - Sample Specimen Sheet

Shows samples of typefaces in various different sizes
Can only determine choice on screen when its final version to read on screen
To provide an accurate reference for type, type size, type leading, type line length etc...
A test is carried out to decide the final output on screen of the particular point size & typeface & make a decision based on an informed manner by doing through a type specimen sheet

Compositional Requirement

Text should create a field that can occupy a page / screen
Think of your ideal text as having a middle gray value, not a series of stripes
Often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line & ascenders on the line below
The best screen is still an electronic approximation of the printed page

Extras

For this semester, we will only be using the 10 fonts as listed below such as:-

1. Bembo

2. Garamond

3. Janson

4. Caslon

5. Baskerville

6. Bodoni

7. Serifa

8. Futura

9. Gill Sans

10. Univers

Figure 1.1

Week 4: Typo_4_Text_Part 2

1. Text / Indicating Paragraph

Figure 1.0

The 'pilcrow' (¶), a holdover from medieval manuscripts seldom use today. It's a symbol available in most typefaces and was used in text to indicate paragraph spacing.

The image below displayed a ' line space ' (leading*) between the paragraphs. If the line space is 12pt, then the paragraph space is 12pt. This ensures cross-alignment across columns of text. Leading is the space between each line of text.

Figure 1.1

If your text point size is 10, the leading would be 12 / 12.5 / 13. If the leading is 12, the paragraph spacing value should be also 12. The purpose of this is to maintain cross alignment. Cross alignment refers to when two columns of text sitting next to each other where the text line is aligned to the next column as well.

2. Line Space VS Leading

Leading space is the space between that is between two sentences

Line spacing = The base line of one sentence to the descender of the other sentence

Figure 2.0

The example below shows the standard indentation. Typically here the indent is the same size of the line spacing or the same as the point size of your text.

Figure 2.1

3. Standard Indenditation

Create indentation typically the indent is the same size of line spacing or the same as point size you used for the text
Used to save space in newspapers
It will create too much of a ragging on the left especially when having small paragraphs if we indent too much
If leading space is 12, it's not sliding, it's line spacing.
Never use left alignment, never have ragging on the right, indentation is best used when the text is justified

*Never use left alignment, never have ragging on the right, indentation is best used when the text is justified

Figure 3.0

The image above refers to the extended paragraphs below creates unusually wide columns of text. There can be strong compositional or functional reasons for choosing it. This is used academic writing sometimes.

4. Text / Widows & Orphans

In traditional typesetting, there are two unpardonable gaffes -- widows & orphans. Designers (specifically those that deal with large amounts of text in websites / books on online magazines / printed magazines, newspapers / online journals) must take great care to avoid the occurrence of the above mentioned.

A widow is a short line of type left alone at the end of a column of text.

An orphan is a short line of type left alone at the start of new column.

Figure 4.0

Avoid it by reducing the column width / column height on one side & then introducing a second line on the top so that we have at least two lines.

1. Both widows and orphans are considered serious gaffes.

2. Flush right & ragged left text is somewhat more forgiving towards widows but only a bit. Orphans remain unpardonable.

3. The only solution to widows is to rebreak the line endings through out your paragraph so that the last line of any paragraph is not noticeably short.

4. Orphans require more care.

5. Careful typographers make sure that no column of text starts with the last line of the preceding paragraph.

6. Not more than 3 clicks of spacing on the left, value has to be 5 in tracking/kerning.

5. Text / Highlighting Text

Figure 5.0

Using italics information
Increase the boldness or the weight of text
Change the typeface by making it bold
Private printing (change the colour) - Black, cyan, magenta, yellow
Sans-serif typeface like Serif to Sans-Serif, reduce the point size by 0.5 to ensure cohension
Placing a field of colour at the black of the text
Placing typographic elements (bulleted points) prime & quotation mark

Quotation Marks

Can create a clear indent, breaking the left reading axis
Compare the intended quote at the top with the extended quote at the bottom

1. Text / Headline Within Text

Typographers should ensure that these heads clearly signify to the reader the relative importance within the text & to their relationship to each other

2. Hierarchy of Information

Crucial for indicating the relative importance of different sections of text
A-heads indicate a clear break between topics and set larger in bold & small caps
B-heads are subordinate to A-heads & support the main argument often shown in smaller size & bold
B-heads should not interrupt the text as strongly as A-heads do
B-heads are shown in small caps, italic, bold serif & bold san serif
C-heads highlights specific facets of material within B head text although not common
C-heads are even more subordinate & highlight specific facets of the material, often shown in small caps, italics / bold
C-heads in this configuration are followed by at least an em space for visual separation
Hierarchy means putting together a sequence of subheads

Figure 2.0 (A-heads)

Figure 2.1 (B-heads)

Figure 2.2 (C-heads)

3. Text / Cross Alignment

Figure 3.0

Figure 3.1

Cross alignment is important for maintaining a strong reading rhythm and can be achieved by doubling the leading space but different section of text
Using different typographic elements such as italics, bold or different type families can help highlight important information & create visual hierarchy

* Typography is two-dimensional architecture, based on experience and imagination, and guided by rules & readability - Hermann Zapf

Figure 3.2

Week 5: Typo 2 Basic

Basic / Describing Letterforms

Typography uses a number of technical terms as with any craft that has evolved over 500 years. It is fundamental to familiarize with the lexicon. Lexicon is another word for terminologies. Knowing a letterform's component parts make it much easier to identify specific typefaces.

Baseline = The imaginary line the visual base of letterforms

Median = The imaginary line defining the x-height of letterforms

X-height = The height in any typeface of the lowercase ' x '

Figure 1.0

Stroke = Any line that defines the basic letterform

Figure 1.2

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

Figure 1.3

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

Figure 1.4

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

= Strokes that exceeds the median line so the median line is above the baseline

Figure 1.5

Barb = The half-serif finish on some curved stroke

Figure 1.6

Beak = The half-serif finish on some horizontal arms.

Figure 1.7

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

Figure 1.8

Bracket = The transition between the serif and the stem

= Something that you see at the base of the letterforms

Figure 1.9

Cross Bar = The horizontal stroke in a letterform that joins two stems together

= Something that you see in uppercase letterforms

Figure 2.0

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

= Something that you see in lowercase letterforms

Figure 2.1

Crotch = The interior space where two strokes meet

Figure 2.2

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

Figure 2.3

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

Figure 2.4

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 en is half the size of an em. Most often used to describe em/en spaces and em/en dashes

Figure 2.5

Finial = The rounded non-serif terminal to a stroke

Figure 2.6

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

Figure 2.7

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

Figure 2.8

Link = The stroke that connects the bowl & the loop of a lowercase G

Figure 2.9

Loop = The bowl created in the descender of the lowercase G in some typefaces

Figure 3.0

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

Figure 3.1

Shoulder = The curved stroke that is not part of a bowl

Figure 3.2

Spine = The curved stem of the S

= A good practice to develop skills with the Bezier curve

Figure 3.3

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

Figure 3.4

Stem = The significant vertical or oblique stroke

Figure 3.5

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

= Vertical stress is a transition typeface that has transition from copying the handwritten writing so that serif letter forms will develop by mimicking the handwriting

= When its handwritten, it will be slightly slanted

Figure 3.6

Swash = The flourish that extends the stroke of the letterform

= Should never use swashes in capital letters together to form a word or name

Figure 3.7

Tail = The curved diagonal stroke at the finish of certain letterforms

Figure 3.8

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)

Figure 3.9

Basic / The Font

Full font of a typeface contains much more than 26 letters, to numerals & a few punctuation marks
Should ensure that you are working with a full font & should know how to use it if want to work successfully with type
Good to select a type family that has good range of typefaces

* Type family refers to family that has many different faces such as regular, extended, semi bold etc...

* Typeface refers to the individual weight of that stroke

Uppercase

Capital letters, including certain accented vowels, the c cedilla and n tilde, & the a/e & o/e ligatures

Figure 4.0

Lowercase

Lowercase letters include the same character as uppercase

Figure 4.1

* Linotype = Refers to a composing machine producing line of words as single strips of metal, used chiefly for newspapers

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
Most type software includes a style command that generates a small cap based on uppercase forms
Do not confuse real small caps with those artificially generated

Figure 4.2

Figure 4.3 (Example of small capitals & lowercase letters)

Uppercase Numerals

Known as lining figure where these numerals are the same height as uppercase letters
All set to the same kerning width
Most successfully used with tabular material or in any situation that calls for uppercase letters

Figure 4.4

Lowercase Numerals

Known as old style figures / text figures
Set to x-height with ascenders & descenders
Best used whenever you would use upper & lowercase letterforms
Far less common in sans type-faces than in serif

Figure 4.5

*InDesign > Type > Glyphs > Character Map > Scroll down and lowercase numeral will be seen

Italic

Most fonts today are produced with a matching italic
Small caps, however are almost always only Roman
Forms in a italic refer back to fifteenth century Italian cursive handwriting
Oblique are typically based on the roman form of the typeface
Small capitals can't be find in italic

Figure 4.6

Italic VS Roman

Figure 4.7

Punctuation, Miscellaneous Characters

Miscellaneous characters can change from typeface to typeface although all fonts contain standard punctuation marks
Important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job

Figure 4.8

Ornaments

Used as flourishes in invitations or certificates
Usually are provided as a font in a larger typeface family
Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro)

Figure 4.9

Basic / Describing Typefaces

Different typefaces can be applied once the parts of a letterform can be recognized. Some, all or combinations of these styles may be found within one type family.

Roman

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

Figure 5.0

Italic

Named for 15th century Italian handwriting on which the forms are based
Oblique conversely are based on roman form of type face

Figure 5.1

Boldface

Characterized by a thicker stroke than a roman form
Can be called 'semibold', 'medium', 'black', 'extra bold', or super depends upon the relative stroke widths within the typeface
In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as 'Poster'

Figure 5.2

Light

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

Figure 5.3

Condense

A version of the roman form & extremely condense styles are often called 'compressed'

Figure 5.4

Extended

An extended variation of a roman font

Figure 5.5

Figure 5.6

Basic / Comparing Typeface

The 10 typefaces mentioned in the following slide represent 500 years of type design
Men & women who rendered them all sought to achieve 2 goals:- Easy readability & an appropriate expression of contemporary esthetics
Remained in use for decades - in some cases, centuries - after they were first designed, still considered successful expressions of how we think, how we read & write and how we print

Figure 5.7 (Typefaces given)

What is worth noting isn't the similarities but rather the differences - the accumulation of choices that renders each unique
Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths & in feeling
These feelings connote specific use & expressions for any typographers
The Rs display a range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward
A designer should choose an appropriate typefaces / type family to convey message
You'll noticed that many people who work seriously with type employ a limited palette of typefaces as you studied other designers' work

*Connotes = Suggest / indicate

Figure 5.8

Stephen Cole = You can't be a good typographer, if you aren't a good reader

INSTRUCTIONS

Exercises

Task 1: Exercises - Type Expression

During week 1, we were asked to choose 4 words out of 8 words and come out with several designs of sketches. The words provided are smoke, soup, spooky, power, impact, crunch, drunk, fold.

Therefore, I had chosen the word which are spooky, drunk, soup & smoke. The images shown below are my sketches.

Figure 1.0 ( SMOKE) - (1/10/2023)

Figure 1.1 ( SOUP ) - (1/10/2023)

Figure 1.2 ( SPOOKY) - (1/10/2023)

Figure 1.3 ( DRUNK ) - (1/10/2023)

As for my final decision, I choose 4 designs out of the 16 designs above as my finalization as shown below.

Figure 1.4 (Final Sketch) - (6/10/2023)

Task 2: Exercises - Type Expression

During week 2, we were given the task to digitalized our sketches using Adobe Illustrator. Therefore, I had come out with 16 designs of digitalization.

Figure 2.0 ( SPOOKY ) - (13.10.2023)

Figure 2.1 ( SMOKE ) - (13.10.2023)

Figure 2.2 ( DRUNK ) - (13.10.2023)

Figure 2.3 ( SOUP) - (13.10.2023)

The image shown below are the 4 words I have chosen as my finalization.

Figure 2.4 (Final Digitization) - (13.10.2023)

Task 3: Exercises - Type Expression

On week 3, we were given the task of doing type expression animation video by using both Adobe Illustrator & Adobe Photoshop together. While producing the Gif, we need to ensure that our Gif has a white background and in grayscale at 72ppi. Therefore, I have chose the word ' drunk ' to be my final type expression.

Figure 3.1 (Drunk Gif Animation) - (20/10/2023)

Task 4: Exercises - Text Formatting

During week 4, we were given the task about doing text formatting using Adobe InDesign. Throughout this task, I had come out with 3 exercises as shown below. The first one was to learn about the techniques of kerning and tracking by using our names as the content and also the 10 fonts provided by our lecturer. The second exercise was to learn the techniques of adjusting hyphenation, kerning and column interval space. Whereas the third exercise was to combine the techniques of the first and second exercises. In the third exercises, we had learn about using baseline grid, margins & columns to adjust our context and using cross alignment to make our work looked more organized and easier for readers to read.

Figure 1.0 (Exercise 1)- (25/10/2023)

Figure 1.1 (Exercise 2) - (25/10/2023)

Figure 1.2 (Exercise 3) - (25/10/2023)

Figure 1.3 (Exercise 4) - (25/10/2023)

Figure 1.4 (Text Formatting Final Work Without Grid) - (27/10/2023)

Figure 1.5 (Text Formatting Final Work With Grid) - (27/10/2023)

Figure 1.6 (Text Formatting Final Work without Grid) - (27/10/2023)

Figure 1.6 (Text Formatting Final Work with Grid) - (27/10/2023)

HEAD
Font/s: Futura Std Bold
Type Size/s: 30 pt
Leading: 32.5 pt
Paragraph spacing: -

BODY
Font/s: Adobe Caslon Pro Regular
Type Size/s: 12 pt
Leading: 14.5 pt
Paragraph spacing:
Characters per-line: 50-58
Alignment: Align Left

Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm bottom
Columns: 4
Gutter: 5 mm

FEEDBACK

Week 2: Summary of my lecture

Specific Feedback:- Too much illustration, should use letter fonts or typefaces to draw the " S " on the smoke in Design No.4. The first letter of "S" in Design No.3 can be worked if the font is found.

General Feedback:- Allowed to have illustration but should keep it minimal. Some are interesting but should design based on letter fonts.

Week 3: Summary of my lecture

Specific Feedback :- There's no need to stretch the letters in the soup bowl, just make the letters small. Beer mug handle need to be rounded. There is too much distortion of ' S ' on the smoke.

General Feedback :- Need to show the process of digitalization. Font of my name should use either Futura or Univers in 7pt.

Week 4: Summary of my lecture

Specific Feedback :- Shivers in the GIF can be minimized if I want to enhance it

General Feedback :- Overall is good

Week 5: Summary of my lecture

Specific Feedback :- Line length doesn't suit the point size. Each sentence should consists of 45-60 characters. Column interval space too close, this can be avoided it by adjusting it

General Feedback :- Big leading space should be avoided. Point size shouldn't be bigger than leading.

REFLECTIONS

Experience

When I started to learn about typography, I felt tense and stressed in the beginning since this topic is still very new to me. Although Mr Vinod was strict with our works, I was grateful to have him as my lecturer. Along with his guidance and feedbacks on our works, I am starting to understand about typography more such as what to do and what should not be used in typography. During these exercises, I was able to compose and express myself using textual information. In addition, I had to learn how to format text effectively for communication.

Observations

Throughout the lecture class of typography, I realized that typography is an important subject that required to be learn by students in the design field. It takes time, trial & error, discipline & lots of patience if one person wants to be good in typography. Typography itself is a piece of art & good typography is art.

Findings

Figure 1.1

For my ideas of sketches, I got most of them from Pinterest such as making blood dropping effect on the word ' spooky ' and also turning some of the words into graphical elements. Unfortunately, too much graphical elements are not allowed in sketches. However, it should be minimized during the process of digitalization.

Figure 1.2

As for my gif, I choose the word ‘ drunk ‘ to be my choice of animation. For the word ‘ drunk ‘, there are two different meanings. The first meaning refers to a person getting drunk after drinking lots of alcohol whereas the second meaning refers to the word ‘ drunk ‘ is also the past participle of the word ‘ drink ‘. Therefore, I got the idea from there and decided to combine them into a gif. As you can see the gif shown above, it portrays a beer mug formed by the word ‘ drunk ‘ followed by the appearance of a ‘ drunk ‘ man doing the actions of drunk.

FURTHER READING

As for my further reading, I had chosen A Type Primer 2nd Edition by John Kane as suggested by Mr Vinod. I think that this book will help me to understand the world of typography more as this is more like a practical book to me.

Figure 1.0 Figure 1.1

As Paul Rand says, typography is an art, good typography is art. It requires lot of practice, reading & observations. 2 simple observations are type is physical & type evolved from handwriting. There are 3 tenets of a typographer job which are:-

Appropriate, clear expression of the author's message
Clear expression of the author's message, intelligent economy of means
Deep understanding of craft

Introduction

Type is physical & evolved from handwriting
Sequence of examples in this book is built to demonstrate the character and legibility of type only exist in the context of voids

Figure 1.2

Basics

Describing Letterforms

Typography employs a number of technical terms as with any craft has evolved over 500 years, typography employs a number of technical terms. It is a good idea to familiarize yourself with this lexicon. Knowing a letterform's component part makes it much easier to identify specific typefaces.

The Font

Full font of a typeface contains much more than 26 letters, 10 numerals & a few punctuation marks. To work successfully with type, we should ensure we are working with a full font and should know how to use it.

Uppercase & Lowercase

Figure 1.3

Small Capitals

Uppercase letterforms, drawn to the x-height of the typeface. Small caps are primarily found in serif fonts. Most type software includes a style command that generates a small cap based upon uppercase forms. Do not confuse real small caps with those generated artificially.

QUICK LINKS

Typography Task 1: Type Expression & Text Formatting

Typography Task 2: Editorial Text Formatting

Typography Task 3: Type Design & Communication

Typography: Final Compilation & Reflection