Typography Task 1

 

22 April 2024-

NABIL JULIUS DORN (0370978)

Typography | Bachelor of Design in Creative Media | Taylor's University
Task

---

Jump links:

1. Lectures

2. Instructions

3. Task1

4. Feedback

5. Reflections

6. Readings

LECTURES

Week 1:

Typo_0_Introduction

In the video, Mr Vinod explained that typography is where geometrical shapes have been used to create typefaces and type families. It can also come in the form of animations, website design, user interface in an app, signage design, product labels, books, posters and also prevalent and used in the creation of logos.

Typography has been around throughout the past 500 years. Its evolved from the usage of calligraphy to lettering, and finally what it is in the modern era; typography. There are a few differences between them. With calligraphy it was written. With lettering it was drawn out.

Fig 1.1 This is an example of calligraphy shown by Mr. Vinod

We were then introduced to two different terminologies namely fonts and typefaces and the differences between them.

Fonts: Refers to the individual font or weight within a typeface

Fig 1.2 Fonts

Typeface: Refers to the entire family of fonts/weights that share similar characteristics/styles

Fig 1.3 Typefaces

Week 2

Typo_1_Development

In the second lecture, I learnt about the evolution of typography and how it became, what it is today. I was taught the timeline, creation and development of the typeface.

Early letterform development: Phoenician to Roman

Initially writing was done by scratching into wet clay with a sharpened stick or carving into stone with a chisel. The development of uppercase letterform, which were the primary letterforms for nearly 2000 years, can be observed to have evolved from the utilization of these tools and materials. In essence, uppercase forms can be seen as comprising straight lines and parts of circles, reflecting the materials and tools used in early writing.

Fig 1.3
Phoenicians votive stele Carthage. The stele bears a four-line inscription to Tanit and Baal Hammon

Fig 1.4 Evolution from the Phoenician letter

The Greeks altered the direction of writing from right to left, as practiced by the Phoenicians and other Semitic cultures. They introduced 'boustrophedon' writing. where lines alternated between right-to-left and left-to-right reading. This change in reading direction also led to a shift in the orientation of letterforms.

Fig 1.5 Boustrophedon example

Fig 1.6 Older uppercase letterforms didn't use letter spacing or punctuations.
An example of boustrophedon

Etruscan marble carvers painted letterforms before carving them, influencing stroke characteristics such as weight variation and broadening at the start and finish. These traits influenced the final carved letterforms.

Fig 1.7 Late 1st century B.C.E., Augustan inscription in the Roman Forum, Rome.

Fig 1.8 Phoenician evolution into Green then Roman

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

Square capitals, seen in Roman monuments, featured serifs at the end of the main strokes. Strokes width variation was achieved by holding the reed pen at an angle of approximately 60 degrees off the perpendicular.

Fig 1.9 4th/5th century: Square capitals

Rustic capitals, a condensed version of square capitals, facilitated quicker writing with less parchment and a tilted pen angle of 30 degrees. However, their compressed style made them slightly more challenging to read despite their efficiency.

Fig 1.10 Late  3rd - mid 4th century: Rustic capitals

Rustic and square capitals were typically used for formal documents. In everyday usage however, letterforms were written in cursive hand in which, forms were simplified for speed. This was the birth of what we know today as lowercase letterforms.

Fig 1.11 4th century: Roman cursive

Unicials, influenced by Roman cursive, particularly in certain letter shapes, may derive from the Latin word "uncia", suggesting one-inch height. However, they're often seen simply as small letters. Broad forms of unicials are easier to read at smaller sizes compared to rustic capitals.

Fig 1.12 4th - 5th century: Unicials

Half-unicals mark the beginning of lowercase letterforms, replete with ascenders and descenders.

Fig 1.13 500: Half-unicals

Standardized Calligraphy

The first unifier of Europe, Charlemagne, entrusted the task of standardizing all ecclesiastical texts to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules, miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

Fig 1.14 925: Caloline miniscule

Backletter to Gutenberg's Type

After the dissolution of Charlemagne's empire, northern Europe started using a condensed strongly vertical letterform known as Blackletter or textura. In the south, a rounder more open hand gained popularity. It was called 'rotunda'.

Fig 1.15 1300: Blackletter (Textura)

Gutenberg marshaled them to build pages mimicking the work of the scribe's hand - Blackletter of northern Europe. This required each letterform to be of different brass matrix, or negative impression.

Fig 1.16 1455: Johann Gutenberg, Mainz.

Typography: Development /  Timeline

Fig 1.17 Evolution of text type

1.  1450: Blackletter
• The earliest printing type.
2. 1475: Oldstyle
• Based on the lowercase forms used by Italian humanist scholars for book copying.
3. 1500: Italic
• Echoing contemporary Italian handwriting, the first italics were condensed and close-set, allowing more words per page
4. 1550: Script
• Originally an attempt to replicate engraved calligraphic gorms, this class of typeface was not appropriate for lengthy text settings
5. 1750: Transitional
• A refinement of oldstyle forms, this style was achieved in part because of advances in casting and printing
6. 1775: Modern
• This style represents a further rationalization of oldstyle letterforms.
7. 1825: Square / Slab Serif
• Originally heavily bracketed serif with little variation between thick and thin strokes.
8. 1900: Sans Serif
• As their name implies, these typefaces eliminated serifs altogether.
9. 1990: Serif/Sens Serif
• A recent development, this style enlarges the notion of a family of typefaces.

Week 3

Typo_3_Text_P2

Text / Tracking: Kerning and Letterspacing

In lecture 3. Mr Vinod taught about textual formatting, which consists of kerning and letterspacing. Kerning is the adjustment of space between individual characters, while letterspacing is the adjustment of space between all characters in a block of text.

Fig 1.18 With kerning (left), with kerning (right)

Fig 1.19 Normal, tight and loose tracking

Designers of typefaces always letterspace uppercase letters and not lowercase letters. Uppercase letterforms are drawn to be able to stand independently, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

Fig 1.20 Loose tracking example

Loose tracking in a paragraph becomes harder to read as the pattern of the words has been reduced. The counterform has be changed and as a result, reduces the readability of the text

Fig 1.21 Normal vs Loose tracking

Tight tracking also becomes harder to read as the pattern is also changed when the counterform has been affected.

Fig 1.22 Tight tracking

Flush left:

This format 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. 

Fig 1.23 Flush left, ragged right

Centered:

This format imposes symmetry upon the text, assigning equal value and weight to both ends of any line. It transforms the fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature. 

Fig 1.24 Centered, ragged right and left

Flushed right:

This format places emphasis on the end of a line as opposed to its start. It can be useful in situations where the relationship between text and image might be ambiguous without a strong orientation to the right.

Fig 1.25 Flush right, ragged left

Justified:

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

Fig 1.26 Justified

Text / Texture

Fig 1.27 Anatomy of typeface

A larger X-height would mean that the typeface becomes more legible 

Text / Leading and Line length

The goal in setting text type is to allow for easy, prolonged reading. At the same time a field of type should occupy the page as much as photograph does.

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

Line Length: Leading depends on line length and type size. Shorter lines require less reading while longer lines require more. On the extremes, extremely long and short line lengths impairs reading

Fig 1.28 Examples of leading

Text / Type specimen book

A type specimen book displays typefaces in various sizes. Without these printed samples, choosing a typeface is difficult. You should only choose on-screen fonts if the final version will be read on screen.

Fig 1.29 Sample type: Specimen sheet

Texts should form a uniform field on a page or screen, aiming for a middle gray value rather than a striped appearance.

Week 4

Type 4_Text_P2

Text / Indicating paragraphs

There are several options for indicating paragraphs. In the example below we see a holdover from medieval manuscripts seldom used today.

Fig 1.30 pilcrow’ (¶)

The example below displays a 'line space' (leading) between the paragraphs. Hence if the line space is 12pt, then the paragraphs space is 12pt. This ensures cross-alignment across columns of text.

Fig 1.31 line space (leading) example

Leading: Refers to the space between lines of texts. Measured from baseline to basline and affects the readability and overall look of the text.

Line space: Often used interchangeably with leading. Refers to vertical distance between lines of text.

Proper leading and line spacing are important for making text easy to read.

Fig 1.32 Example of leading and line spacing

Typically here the indent is the same size of the line spacing or the same as the point size of your text.

Fig 1.33 Example of standard indentation

Extended paragraphs creates unusually wide columns of text. There can be strong compositional or functional reasons for using this.

Fig 1.34 Example of extended paragraphs

Text/ Widows and Orphans

In the traditional typesetting, there are two unpardonable gaffes which are widows and orphans. Designers must take great care to avoid the occurrence of these two gaffes.

Widow: The short line of type left alone at the end of a column of text.

Orphan: The short line of type left alone at the start of a new column.

Fig 1.35 Example of Widow and Orphans in a paragraph

The solution to fixing widows is to rebreak your line endings throughout your paragraphs so that the last line of any paragraph is not noticeably short.

Orphans are harder to deal with and require more care. Skilled typographers ensure that no column of text starts with the last line of the preceding paragraph.

Text / Highlighting Text

Different kinds of texts or paragraphs require different kinds of contrast.

Fig 1.36 Examples of how to highlight text

Fig 1.37 Examples of how to highlight text

In the example below, the san serif font (Univers) has been reduced by .5 to match the X height of the serif typeface. 

Fig 1.38 Adjustment of font size to match in x-height

The point size of number is also reduced by 0.5 point size to ensure visual cohesion of the text.

Fig 1.39 Reducing of point size of number

Sometimes it is necessary to place different typographic elements outside of the left margin to create a stronger reading axis.

Placing a field color behind the text with a left reading axis allows the text to have its best readability.

Fig 1.40 Correct usage of text highlight (right picture)

Fig 1.41 Correct placement of typographic elements (right picture)

Quotation marks, like bullets, can create a clear indent, breaking the left reading axis. Below is an example of an indented quote along with a quote that extends outwards. 

Fig 1.42 Usage of indented and non-indented quotation marks (left)

Text / Headline within text

'A' head indicates a clear break between the topics within a section. A typographers task is to make sure these heads clearly signify to the reader the relative importance within the text and to their relationship to each other. In the following examples, 'A' heads are set larger than the text, in small caps and in bold.

Fig 1.43 Example of 'A' head

'B' head is the subordinate to A heads. B heads indicate a new supporting argument or example for the topic at hand. 'B' heads are shown in small caps, italic, bold serif and bold san serif.

Fig 1.44 Example of 'B' head

'C' heads, although not common, highlights specific facets of material within 'B' head text. They arent interrupting the flow of reading. As with 'B' heads, these 'C' heads are shown in small caps, italics, serif bold and sen serif bold. 'C' heads in this configuration are followed by at least an empty space for visual separation.

Fig 1.45 Example of 'C' head

Putting together a sequence of subheads = hierarchy. 

Fig 1.46 Hierarchy of subheads

Text / Cross alignment

Fig 1.47 Cross alignment

Fig 1.48 Cross-alignment

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1TlUi_eHvib2dYRNOhATAt5XgcAvupTrD/preview" width="640" height="480" allow="autoplay"></iframe>

TASK 1 - Exercise 1:

For task 1, Ms. Low Hsin Yin asked for word suggestions to use in our typography expression. After suggesting a list of words, we were required to vote on the words. In the end we were required to choose 4 from the list of words which are:
Balance, crash, roll, spark

I also decided to try my hand at the other words in the list just to see if it would be easier to express it in typography.

During our first task, we are required to provide 4 sketches on what we would imagine the type expression to look like. 

Research

Expressive typography is an art form where the text is highly visual. It is the art of expressing emotion through typography by exploring the premise of expressive typography. Expressive typography merges the use of type with visual communication and often takes it much further than we would see in everyday typography.

(reference)

Here are some examples of expressive typography

Fig 2.1 Soap bubbles photoshop text effect by Sko4

Fig 2.2 Slimey Halloween text effect by Giallo

Sketches

I proceeded to start the sketches of the chosen words which are;

- Balance

- Spark

- Crash

- Roll

- Flow

Balance

Fig 2.3 Balance first sketch, week 1

1. The second letter 'a' can be seen as the fulcrum point of balance for the rest of the alphabets.

2. The second letter 'a' can be seen in the opposite direction again acting as a fulcrum point for the alphabets. It also splits the word in half, creating a sense of balance in the word.

3. & 4. The individual alphabets are teetering in delicate balance on one another.

Crash

Fig 2.4 Crash first sketch, week 1

1. & 2. Both words are made to look like they're cracked or shattered upon impact or a severe crash.

3. & 4. The individual alphabets are seen to be smushed together after impact.

Roll

Fig 2.5 Roll first sketch, week 1

1. The words are repeating itself in a roll or spiral.

2. The letter 'R' is kicking the alphabet 'O' into the two letter 'L' which was made to look like goalposts.

3. The alphabet is made to look like it is in the motion of rolling.

4. I attempted to make it seem like the 'O' is rolling down the alphabets 'L'

Spark

Fig 2.6 Spark first sketch, week 1

1., 2. & 3. The word was drawn to look like it is in the shape of a spark.

4. The alphabet 'S' was made to look like a fuse while the rest of he alphabets are the actual sparks coming from the fuse.

Flow

Fig 2.7 Flow sketch, week 2

1. The alphabets were made to look like they were flowing downstream like a river

2. The words were confined to the shape of a water droplet

3. The alphabet L was made to flow through the O and connect with the W in a cursive letterform

4. The word is distorted to make it wavey

Digitization

Upon showing my drafts to Ms. Low, she approved:

- Crash, sketch 1

- Spark, sketch 4

- Balance, sketch 2

- Flow, sketch 1

I made a few rough digitization's of the approved sketches

Balance

Fig 2.8 Balance digitization sketch 2, week 3

Typeface: Futura std Book

Crash

Fig 2.9 Crash digitization sketch 2, week 3

Typeface: Futura std Book
Feedback: The gaps between the cracks should be evenly spaced throughout the entire typography expression.

Flow

Fig 2.10 Flow digitization sketch 2, week 3

Typeface: Janson text LT std 56 Italic
Feedback: Keep the distortion to the silhouette of the words to ensure the word remains legible.

Spark

Fig 2.11 Spark digitization sketch 2, week 3

Typeface: Gill Sans Std / Regular

Feedback: Make the words representing the sparks more sporadic.

Final output:

Fig 2.12 Final Type Expression, JPEG, Week 3

Final Type Expression, PDF, Week 3

Animation

Ive chosen to animate the word 'Spark' which was approved by Ms Low on week 4. I made it look like the letter 'S' was the fuse and the words that came off the fuse are like sparks from a lit fuse.

Reference:

Fig 2.13 Reference of sparks flying from fuse

Fig 2.14 Animation timeline, JPEG, Week 4

Fig 2.15 Final animation, GIF, Week 4

Task 1 - Exercise 2:

Kerning and tracking exercise - 

We were instructed to work with kerning and tracking of our own name by using the 10 typefaces provided. We were allowed to use different fonts in this exercise. 

For the kerning and tracking exercise, Ms. Low told us to pay close attention to the spacing between uppercase and lowercase letters. Use the spacing between these letters as a reference point when adjusting the overall letterspacing. Ensure a balance between the negative and positive space around each letter so that all the spaces are equal.

Fig 3.1 Original Kerning and Tracking exercise

Fig 3.2 Edited Kerning and Tracking exercise

Text formatting exercise - 

We were then required to start our text formatting exercise. 

These are some of my draft designs:

Fig 3.3 Text formatting version 1

Fig 3.4 Text formatting version 2

Fig 3.5 Text formatting version 3

I've decided to mess around with left align and left justify but ended up sticking with left align as it looked cleaner with the fonts i've chosen to use. To reduce hyphenation, I tried unticking the 'Hyphenate' feature in Indesign but it messed with the kerning and tracking of the paragraphs, leaving too much space in between some of the lines of texts. I then decided to keep the feature on as it fixed most of the orphans and widows. I then had to tweak some lines of texts manually using kerning to adjust the look of some lines. 

Fig 3.5 Text formatting chosen version (3)

Out of the 3 drafts I made, I liked the visual look of version 2 and 3 as it had more visual elements to frame the body of texts. I specifically liked version 3 as the image used helped create a line separating the title and the body of text. 

Final text formatting layout

HEAD LINE
Font/s: Univers LT Std - 55 Roman
Type Size/s: 57 pt
Leading: 45 pt
Paragraph spacing: 0

BODY
Font/s: Univers LT Std - 55 Roman
Type Size/s: 9 pt
Leading: 12 pt
Paragraph spacing: 12 pt
Characters per-line: 57
Alignment: left align

Margins: 80 mm top, 50 mm bottom, 12.7mm  left + right
Columns: 2
Gutter: 7 mm

Fig 3.6 Final text formatting with grid

---

FEEDBACK

Week 2: 

General feedback

- Don't use illustrations to depict the meaning of the word.

- Don't distort the words too much.

Specific feedback

- Ms. Low looked at my first sketches and approved of number 2 for balance, number 1 for crash and number 4 for spark as these are all pretty unique styles of expressive typography. However, she requested that I rework the sketches for the word 'Roll'. 

- Keep the words legible by preventing excessive distortions

Week 3: 

General feedback

- Find the appropriate typeface

Specific feedback

- Ms. Low approved sketch 1 and 4 of the word 'Flow' and wanted me to find the typeface that would fit it.

- Try find a typeface that fits the sketches that've been approved

- Keep distortions to the silhouette of the words to prevent the eligibility of the word.

Week 4:

General feedback

- Ms. Low approved of my decision to animate the word 'Spark'

Specific feedback

- Slow down the animation by adding more frames or increase the duration of the frames

Week 5:

General feedback

- Start working on task 2

Specific feedback

- The animation is good 

Week 6:

General feedback

- Need to tweak paragraph and title alignment

- Need to fix the kerning and tracking of some alphabets

Specific feedback

- Try using hyphenation to see if the ragging is smoother. Also ensure the top part of the title is aligned with the rows and columns.

- Some of the alphabets kerning aren't uniform and spaced out properly. 

---

REFLECTIONS

Experience

Learning typography has definitely been an eye-opening experience in terms of the depth there is in it. Ive gained hands-on experience in manipulating text elements like kerning, leading and letterspacing and have seen firsthand how these adjustments impact the overall design and readability of text in the text formatting exercise. 

Observations

• Attention to detail: Ive observed that even minor adjustments in typography can significantly affect the visual appeal and readability of text. Small changes in spacing can transform a plain paragraph of text into an aesthetically pleasing and easy to read piece.

• History: The evolution of typography has been pretty interesting. Observing how historical writing tools and techniques has directly influenced the development of letterforms has provided a deeper understanding of modern typefaces.

• Readability factors: Ive noticed that readability is the main focus. Its not just about font size but also proper leading and line spacing. The balance between text density and white space is crucial for maintaining reader engagement.

Findings

• Design impact:  Typography is a powerful tool in design. It can evoke emotions and create a visual hierarchy, and improve use experience. The right choice of typeface and spacing can make content more compelling and accessible. Ive also found to never use Comic San Ms 😂

• Practical Application: Proper typography enhances not just the visual appeal but also the functionality of text. Well spaced and thoughtfully designed text is easier to read and navigate, whether in print or digital forms.

---

FURTHER READING

Fig 4.1 

Fig 4.2 Contrasting Type Sizes

Fig 4.3 Scale

Scale is crucial in design, defining appropriate object sizes in context. Mastery involves understanding details like material and color. Deliberate manipulation like Oldenburg's sculptures, demonstrate power.

Fig 4.4 Texture

Mastering light reveals form and texture. Reflective surfaces like polished silver shine, while dull ones absorb light. Material choices and finishes define an object's character, enriching our design perception.

Fig 4.5 Color

We use color as a signifier or identifier, favoring a primary palette (red, blue, yellow). Color conveys specific messages, often in corporate identities, and is chosen for clarity and appropriateness.

Fig 4.6 Layout

Publication layout reflects the designer's interpretation, aiming to select images that encapsulate content effectively. Grids provide consistency; square or rectangular grids accommodate different image formats. Management of white space is crucial for balanced layouts. Considerations vary per publication type, from margins in literary books to diverse needs like brochures or newspapers. Attention to detail ensures successful design across various publications. 

Fig 4.7 Sequence

Publication layout sequence follows image selection. Layouts should be forceful, engaging the reader's experience. Preference lies in simple yet impactful designs, favoring full bleed images alongside text. A neutral approach avoids monotony, allowing the publications nature to enhance layout dynamics, catering to various relative preferences.

Fig 4.8 Identity

Balancing identity and diversity is crucial in design. Too much identity causes redundancy, while excessive diversity leads to fragmentation. Achieving the right balance fosters engaging and memorable design solutions.

Fig 4.9 White space

In typography, white space holds more significance than text. It defines hierarchy, context and mood on a page. Tight margins create tension, while wider ones evoke serenity. Manipulating space through type setting transforms words, emphasizing the importance of white space in design.

Key points

1. Scale: Use contrasting type sizes for headlines and body text to create visual interest.
2. Texture: Different type weights (Bold, Italic, etc.) can add texture and differentiate text elements.
3. Color: Use color sparingly and purposefully to enhance readability and emphasis.
4. Layout: Balance text and white space to create a clean and organized design.
5. Sequence: Maintain a logical flow of information, guiding the reader through the content
6. Identity: Consistent use of typography contributes to a strong, recognizable brand identity.
7. White space: Essential for readability and visual impact, providing "silence" in design.