Typography / Task 1 : Exercises

David Jury, head of graphic design at Colchester Institute, states that while typography is now something everyone does, the democratization of typography has led to a decline in typographic quality, which has also effected effective communication.

Such examples would be that students may suffer and learn less when given poorly designed textbooks.

3. What are Fonts and Typefaces

Font: The individual fonts/weight within a typeface. (I.e. : Georgia Regular, Georgia Italic, Georgia Bold.)

Fig. 1.1 - Different Fonts in the Georgia typeface

Typeface: The entire family of fonts/weights that share similar characteristics/styles. (I.e. : Georgia, Helvetica, Trebuchet, Comic Sans, Baskerville)

Fig. 1.2 - Different typefaces

Lecture 2: Typo_1_Deveploment

1. Early Writing and the Development of the Roman Letter

Fig. 2.1 - Phoenician to Roman

Phoenician letterform

The tools and materials used in early writing had a significant impact on the type of writing created.

The early forms of writing involved scratching into wet clay or stone, which influenced the development of uppercase letter forms, consisting of simple combinations of straight lines and pieces of circles

Fig. 2.2 - Evolution from Phoenician letter

Greeks letterforms

The Greeks developed a style of writing called 'Boustrophedon’ (how the ox ploughs), read alternately from right to left and left to right. The same goes to the direction of the letterforms.

Like the Phoenicians, the Greeks did not use letter space or punctuations.

Later on, the Greeks would move to a strictly left-to-Right writing.

Fig. 2.3 - Direction of writing for the Greeks, ‘boustrophedon’

Fig. 2.4 - Greek fragment, stone engraving. (Date unknown)

The Etruscan (and then Roman) letterforms

The Etruscan (and then Roman) civilizations worked on marble and painted letter forms before inscribing them. The strokes used in these letter forms were influenced by the tool used, with a change in weight from vertical to horizontal and a broadening of the stroke at the start and finish

Fig. 2.5 - Late 1st century B.C.E. . Augustan inscription the Roman forum, Rome.

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

a) Square Capitals

Written letterforms found in Roman monuments. These letterforms have serifs added to the finish of the main strokes. This is achieved by using a reed pen held at an angle of approximately 60 degrees

Fig. 2.6 - 4th or 5th century: Square capitals

b) Rustic capitals

A compressed version of the square, allows for more words to be written on a sheet of paper

The rustic capitals were faster and easier to write, but slightly harder to read due to their compressed nature, with an angle of approximately 30 degrees of perpendicular

The reason for developing a more compressed square capital was to fit long building names or inscriptions in a limited space

Fig. 2.7 - Late 3rd – mid 4th century: Rustic capitals

c) Roman cursive

Both square and rustic capitals were typically reserved for documents of intended performance, while everyday transactions were written in cursive hand with simplified forms for speed

The development of the lowercase letter form was a result of writing uppercase letter forms quickly, with the beginning of lowercase letter forms visible in the cursive hand.

Fig. 2.8 - 4th century: Roman cursive

d) Uncials

Uncial script incorporated aspects of the Roman cursive hand, especially in the shape of letters like A, D, E, H, M, U and Q,

Uncial - small letters

The broad forms of uncials are more readable at small sizes compared to rustic capitals.

Uncial script didn't have distinct lowercase and uppercase letter forms, but rather integrated elements of both, making it an interesting writing system

Fig. 2.9 - 4th – 5th century: Uncials

e) Half-uncials

The formalization of the Roman cursive hand. Half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

Fig. 2.10 - C. 500: Half-uncials

f) Caloline minuscule

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

Fig. 2.11 - C. 925: Caloline minuscule

3. Blackletter to Gutenberg’s type

a) Blackletter

With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condensed 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 minuscule.

Fig. 2.12 - C. 1300: Blackletter (Textura)

b) Gutenbreg

Johannes Gutenberg, a skilled engineer, metal smith, and chemist, invented the modern printing press, which accurately mimicked the work of scribes' hands - Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letter form.

Gutenberg's printing press enabled mass production of books, including the 42-line Bible, which was a significant achievement considering that writing was previously a time-consuming process done by monks and scribes

The introduction of the printing press reduced the time and effort required to produce books, making them more widely available and contributing to the spread of knowledge

Fig. 2.13 - C. 1455: 42 line bible , Johann Gutenbreg . Mainz

4. Typography development and timeline

Fig. 2.14 - Humanist script to Roman type

5. Text type classification

Type forms have developed in response to prevailing technology, commercial needs, and aesthetic trends. Certain models have endured well past the cultural that spawned them.

Alexander Lawson devised a type form classification system that covers the main forms of text types which is shown below.

Fig. 2.15 - Text type classification

Lecture 3: Typo_3_Text_P1

1. Tracking : Kerning and Letterspacing

Kerning : Automatic adjustments of space between letters

Letterspacing : To add space between letters

Tracking = Kerning + Letterspacing

Kerning are mostly used in certain situations such as headlines in newspapers or books, where the text has space around it and is given prominence.

Meanwhile, Letter spacing is often used when working with uppercase letters in headlines to give them more breathing room, as typefaces are generally not designed to be used in uppercase.

Type of tracking

a) Normal tracking

Fig 3.1 - Normal tracking

b) Tight tracking

Fig 3.2 - Tight tracking

c) Loose tracking

Fig 3.3 - Loose tracking

Designers always letterspace uppercase letters, but not lowercase letters within texts.

Uppercase letterforms are drawn to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

Fig. 3.4 - Normal tracking v.s. Loose tracking

2. Text / Formatting Text

a) Flush left

Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout text.

b) Centered

Symmetrical: equal value & weight on both ends of any line.

c) Flush Right/left

Useful for captions and when there's relationship between text & an image.

d) Justified

Centering + symmetrical shape on text. Spaces in between words/letters may be different.

3. Text / Texture

Designers tend to set type based on personal preferences, prevailing culture, and the need to express themselves, but the primary job of a typographer is to present the author's message clearly.

A balance must be struck between creativity and readability, as excessive decoration can interfere with the reader's ability to focus on the words.

Fig. 3.5 - Anatomy of a Typeface

4. 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 the photography does.

Type size

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

Leading

Text set too tightly cause the reader to easily loose his or her place. Type that is set too loosely creates striped patterns that distracts the reader from the material at hand.

Line length

Shorter lines requires less reading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

5. Text / Type Specimen Book

A type specimen book is a tool used to decide on a font, typeface, and point size by showing the typeface in different point sizes, leggings, and combinations.

Text should create a field that can occupy a page or screen, and an ideal well-formatted text has a middle gray value, which is neither too black nor too light.

Enlarging type to 400% of its actual size on screen can help get a clearer sense of the relationship between descenders on one line and ascenders on the next. The same text can appear different when zoomed in, with differences in letter spacing, and the relationship between ascenders and descenders, which can be seen when examining the text carefully.

Lecture 4: Typo_4_Text_P2

1. Text / Indicating Paragraphs

a) Pilcrow symbol

There are several options for indicating paragraphs. In the first example, the 'pilcrow' (¶) is a holdover from medieval manuscripts seldom use today.

Fig. 4.1 - Use of the pilcrow symbol

b) Line spacing (Leading*)

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

Fig. 4.2 - Use of line spacing

Difference between Line Spacing and Leading :

Fig. 4.3 - line spacing vs leading

c) Standard indentation

The example here displays 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.

Fig. 4.4 - Use of Standard indentation

2. Text / Windows and Orphans

The topic of widows and orphans in traditional typesetting is crucial, and designers must take great care to avoid their occurrence in designs

Widow - short line of type left alone at the end of a column of text

Orphan - short line of type left alone at the start of new column.

Fig. 4.5 - Orphans and widows

In justified text both widows and orphans are considered serious blunders. Flush right and ragged left text is some what more forgiving towards widows, but only a bit. Orphans remain unpardonable.

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

Orphans requires more care. Careful typographers make typographers make sure that no column of text starts with the last line of the preceding paragraph.

3. Text / Highlighting Text

Highlighting text within a column of text can be done in various ways. Remember, different kinds of emphasis requires different kinds of contrast.

Different types of highlighting:

a) Italics

b) Bold

c) Changing the typeface

When changing the type family of highlighted text, it's essential to consider the typeface and point size. To maintain cohesion in the text, it's recommended to apply appropriate adjustments to the text.

d) Changing the colour of text

When changing the color, it's best to use black, cyan, or magenta as yellow may not be readable.

e) Background colour behind text.

When highlighting text by placing a field of colour at the back of the text, maintaining the left reading axis of the text ensures readability is at its best.

Fig. 4.6 - Correct (left) and wrong (right) way to apply background colour behind text

f) - Typographic elements

Sometimes it is necessary to place certain typographic elements outside the left margin of a column of type (extending as opposed to indenting) to maintain a strong reading axis.

Fig. 4.7 - Correct (left) and wrong (right) way to apply typographic elements

g) Quotation marks

Quotation marks, like bullets, can create clear indent, breaking the left reading axis.

Fig. 4.8 - Application of quotation marks (left) and prime vs quotes (right)

4. Text / Headline within Text

There are various subdivisions within text, such as chapters, which can be labeled and formatted in different ways. Creating a typographic hierarchy is crucial, especially in blogs, to clearly indicate the relative importance of information and the relationship between different types of information.

A clear hierarchy of information helps readers understand the structure of the content and prevents confusion.

a) 'A' head

Indicates a clear break between the topics within a section

Fig. 4.9 - 'A' head types

b) 'B' head

A subordinate to A heads. B heads indicate a new supporting

Fig. 4.10 - 'B' head types

c) 'C' head

Highlights specific parts of material within B head text. They cannot materially interrupt the flow of reading.

Fig. 4.11 - 'C' head types

A sequence of subheads can create a hierarchy, and there are virtually limitless ways to express hierarchy within a text, with the provided example being just one possible way to use it.

Fig. 4.12 - Sequence of subheads

5. Text / Cross Alignment

Cross alignment refers to the alignment of highlighted text next to a body of text, with the subtext in a smaller column, and it reinforces the architectural sense of the page and its structure. Example below shows four lines of caption type (leaded 9 pts.) cross-align with three lines of text type (leaded to 13.5pts).

Fig. 4.13 - 3 line to 4 line text cross alignment

Another example would be 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. 4.14 - another text cross alignment

Lecture 5: Typo_2_Basic

1. Basic / Describing letterforms

a) Baseline - Imaginary line (The visual base of the letterforms).

b) Median - Imaginary line defining the x-height of letterforms.

c) X-height - height in any typeface of the lowercase 'x'.

d) Stroke - Any line that defines the basic letterform.

e) Apex / Vertex - The point created by joining two diagonal stems (Apex above and vertex below).

f) Arm - Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward

(K, Y).

g) Ascender - The portion of the stem of a lowercase letterform that projects above the median.

h) Barb - The half-serif finish on some curved stroke.

i) Beak - The half-serif finish on some horizontal arms.

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

k) Bracket - The transition between the serif and the stem.

l) Cross Bar - The horizontal stroke in a letterform that joins two stems together.

m) Cross Stroke - The horizontal stroke in a letterform that joins two stems together.

n) Crotch - The interior space where two strokes meet.

o) Descender - The portion of the stem of a lowercase letterform that projects below the baseline.

p) Ear - The stroke extending out from the main stem or body of the letterform.

q) Em / en - The distance equal to the size of 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.

r) Ligature - The character formed by the combination of two or more letterforms. Prevent the finial and stem strokes from clashing.

s) Loop - In some typefaces, the bowl created in the descender of the lowercase G.

t) Shoulder - The curved stroke that is not part of a bowl.

u) Spine - The curved stem of the S.

v) Spur - The extension that articulates the junction of the curved and rectilinear stroke.

w) Stress - The orientation of the letterform, indicated by the thin stroke in round forms

x) Swash - The flourish that extends the stroke of the letterform.

y) Terminal - The flourish that extends from the stroke, and it is often used in wedding invitations, but it should never be used in capital letters together to form a word or name. The tale terminal is the self-contained finish of a stroke, and it is an important element in typography

Fig. 5.1 - Describing letterforms

2. Basic / The font

The full font of a typeface contains much more than 26 letters, to numeral, and a few punctuation marks.

Roman - upright and default font type.
Uppercase
Lowercase
Small Capitals - Primarily found in serif fonts as part of 'expert set'
Uppercase numerals
Lowercase numerals
Italics - sloping letters, Oblique - roman form but tilted
Punctuation, miscellaneous characters
Ornaments

Fig. 5.2 - Italic (left) vs Roman (Right)

Fig. 5.3 - Punctuation, miscellaneous characters

Fig. 5.4 - Punctuation, miscellaneous characters

Fig. 5.5 - Upper and lowercase Numerals

3. Basic / The font

Once you can recognize the parts of a letterform, you can apply what you know to identify different type-faces. Keep in mind that some, all, or combinations of these styles may be found within one type family.

Roman

Roman typefaces are derived from inscriptions on Roman monuments, with a slightly lighter stroke known as 'Book'

Italic

Italics are named for 15th-century Italian handwriting, while obliques are based on Roman forms of typeface.

Boldface

Boldface is characterized by thick strokes, with variations including condensed, extended, and different weights within a type family

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 the roman font.

Fig 5.6 - Describing Typefaces

4. Basic / Comparing typefaces

Fig 5.7 - Comparing Typefaces

Lecture 6: Typo_5_Understanding

1. Letter / Understanding letterforms

Baskerville

The uppercase letter forms in Baskerville typeface may suggest symmetry, but they are not symmetrical, with different stroke weights and unique arcs in the brackets connecting the serifs to the stems

Fig 6.1 - The Baskerville stroke

Univers

The uppercase letter forms in Baskerville and Univers typefaces demonstrate meticulous care in creating letter forms that are both internally harmonious and individually expressive.

The Univers typeface, designed by Adrian Frutiger, appears symmetrical but has subtle differences, such as the width of the left slope being thinner than the right stroke, which is not immediately noticeable.

The differences in stroke weight and width in the Univers typeface are likely due to optical reasons and are intended to maintain harmony and create an illusion of symmetry

Fig 6.2 - The Univers stroke

Helvetica and Univers

A comparison between Helvetica and Univers, two seemingly similar sans-serif typefaces, reveals a palpable difference in character, particularly in the stems and bowls of the letter forms.

The finial arc of the upper case letter A in Helvetica tapers towards the end, whereas in Univers, it tapers in the middle and then flares at the end.

The connection of the bowl to the stem stroke also differs between the two typefaces, with Helvetica featuring a beautiful curve and Univers having a more utilitarian solution.

Fig 6.3 - Helvetica and Univers

2. Letter / Maintaining x-height

Maintaining an x-height is essential, as it describes the size of the lowercase letter form, but curved strokes must rise above the median line or sink below the baseline to appear the same size as adjacent vertical and horizontal strokes.

The median line is the line above the base line, and curved letter forms generally exceed this line, but only slightly, to make them appear optically the same size as other letters.

Optical adjustments are necessary to compensate for the difference in size between letters with different structures, such as the "O" and "Z", to make them appear equal in size.

Fig 6.4 - x-height

3.Letters / Form / Counterform

Developing a sensitivity to the counter form or counter space is crucial in typeface design, as it aids in the readability and legibility of formatted text or letter forms.

The counter form includes the spaces between letters when they are joined to form words, and handling these counters well determines how easily text can be read.

Fig 6.5 - Counterforms

4. Letters / Contrast

The basic principles of graphic design, including contrast, are directly applicable to typography, and contrast is one of the most powerful and dynamic elements in design.

Contrast can be achieved through various means, such as small vs. large, organic vs. machined, and dark vs. light, and can be used to differentiate between sets of information.

Rudi de Boodt's diagram illustrates various contrast options, including light, bold, condensed, and extended, and can serve as a useful reference for designers.

Fig 6.6 - Contrast

Lecture 7: Typo_6_Screen&Print

1. Typography / Different Medium

In the past, typography was viewed as living only when it reached paper. Once a publication was edited, typeset and printed, it was done. Good typography and readability were the result of skilled typesetters and designers.

Today, typography exists not only on paper but on a multitude of screens. It is subject to many unknown and fluctuating parameters, such as operating system, system fonts, the device and screen itself, the viewport and more. Our experience of typography today changes based on how the pages is rendered, because typesetting happens in the brower.

Print Type Vs Screen Type

a) Type for Print

Primarily, type was designed intended for reading from print long before we read from screen. It's the designer's job to ensure that the text is smooth, flowing, and pleasant to read.

A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.

They are versatile, easy-to-digest classic typeface, which has a neutrality and versatility that makes typesetting with it a breeze.

Fig 7.1 - Type for print

b) Type for Screen

Typefaces intended for screen use are optimized and modified to enhance readability and performance in various digital environments. Typefaces designed for screen use often have characteristics such as taller x-height, reduced ascenders and descenders, wider letterforms, more open counters, heavier thin strokes, reduced stroke contrast, and modified curves and angles to improve readability on screens with limited clarity.

There are no clear-cut rules in design, and the choice of typeface depends on the designer's sensibilities and the target audience.

For typefaces intended for smaller sizes on screen, adjustments such as more open spacing can improve character recognition and readability. The leading and spacing used in typography for screen may vary due to the need for more open spacing to prevent text from becoming lumped together.

c) Hyperactive Link / hyperlink

A hyperlink is a word, phrase, or image that can be clicked to jump to a new document or section, and is commonly found in web pages, PDF documents, and social media platforms. Hyperlinks are typically blue and underlined, and the cursor changes to a small hand when hovered over a hyperlink.

d) Font Size for screen

16-pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. Because we read books pretty close - often only a few inches away - they are typically set at about 10 points. If you were to read them at arm's length, you'd want at least 12 points, which is about the same size as 16 pixels on most screen.

e) System Fonts for Screen / Web Safe Fonts

Each device comes with its own pre-installed font selection based on its operating system, but this is no longer a significant issue due to cross-platform typefaces and Google Fonts. Google Fonts allows for uniform font display across different platforms and browsers, regardless of the operating system.

Common cross-platform typefaces include Open Sans, Arial, Helvetica, Times New Roman, and Garamond.

Font size for screen and print differs due to varying screen sizes and pixel densities, making it challenging for designers to navigate. Even within a single device class, there is significant variation in screen size and pixel density, leading to difficulties in designing for screen-based issues. Designers often rely on coding and safe design modes to address these issues, but this can result in underwhelming designs.

f) Font Size for screen

Fig 7.2 - Font size for screen

g) Pixel Differential Between Devices

Fig 7.3 - Pixel Differential Between Devices

h) Static Vs Motion

Static typography

Static typography has minimal characteristics in expressing words, but it can still be expressive, even if it doesn't move. Traditionally, characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Static typography is used in various forms, including billboards, posters, magazines, and flyers, with a wide range of purposes, such as informal, informational, promotional, formal, and aspirational pieces of design.

Fig 7.4 - Static typography

Motion typography

Motion typography is a term used to describe the dramatization of type, which can become fluid and kinetic in temporal media, such as film title credits and motion graphics

On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values in title sequences. Motion typography can prepare the audience for the content by evoking a certain mood, as seen in movie title sequences, such as the one from the movie 'se7en'.

Instructions:

Tasks

A) Type Expression

You will be given 4 words to compose and express. Begin by sketching out ideas. Once the ideas are selected, you will be given a set of 10 typefaces to work with in the digitisation phase.

Through iteration, use the appropriate typeface and compose the letters in a manner that allows the meaning of the word to become visible — still and in motion. (2 weeks).

Software: Adobe Illustrator and Adobe Photoshop.

B) Formatting Text

Before commencing watch lectures: Text: P1 and Text: P2. You will be given incremental amounts of text that address different areas within text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment.

These minor exercises (1/4; 2/4; 3/4; 4/4; 4/4A) will increase your familiarity and capability with the appropriate software and develop your knowledge of information hierarchy and spatial arrangement. The task ends with the submission of one layout design in A4 size demonstrating what you have learned from the incremental exercises. (2 weeks).

Software: Adobe InDesign

Note* No colour may be used in the exercises. No visual elements or drawings can be utilised unless permitted. Some minor graphical elements (like line, dot or shade may be used). Use only the 10 typefaces provided to you.

Exercise 1A : Type Expression

a. Sketching

In exercise 1, the first task given to us was to express 4 words to compose and express. The word were chosen through class voting and the 4 words with the highest votes are:

- Spicy

- Fancy

- Bloom

- Smoke

Before using Adobe Illustrator, we needed to sketch designs for each words to choose and select the best design to be digitalized. I sketched my designs on paper as shown below.

Fig 8.1 - First set of design

Fig 8.2 - Second set of design

b. Digitalization

After getting the green light from our lecturer, I began the digitalization of my designs

Final Type Expressions

Fig 8.3 - Final Type Expressions - JPEG, Week 3 (8/10/2024)

Fig 8.4 - Final Type Expressions - PDF, Week 3 (8/10/2024)

c. Animation

The next step was to animate one of the words we digitalized previously. For this part, I chose the word 'Fancy', Adobe illustrator and Photoshop were used to make the frames and animate the word.

Fig 8.5 - Frame arrangement in Adobe Illustrator, Week 4 (15/10/24)

Fig 8.6 - Animation making in Adobe Photoshop, Week 4 (15/10/24)

With a few adjustments, the final animation has been created.

Final animated GIF

Fig 8.7 - Final animated GIF - gif, Week 4 (15/10/24)

Fig 8.8 - Final animated GIF Embed version - gif, Week 4 (15/10/24)

Exercise 1B : Text Formatting

Here, we were tasked to watch Task 1, Exercise 2-Text Formatting video tutorials and simultaneously document our progress in this Eportfolio.

a) Tracking and Kerning

First, I practiced kerning and tracking with my name using the 10 typefaces provided.

Fig 9.1 - kerning and tracking exercise with my name, Week 5 (18/10/2024)

Fig 9.2 - kerning my name in Futura Std Font, Week 5 (18/10/2024)

Fig 9.3 - Before kerning and tracking, Week 5 (18/10/2024)

Fig 9.4 - After kerning and tracking, Week 5 (18/10/2024)

b) Layouts

Then, following the tutorials and text provided, I started working on texts layout in Adobe InDesign.

Fig 9.5, Process, Week 6 (24/10/2024)

After adjusting the technical stuffs, I explored different layouts and came out with 6:

Fig 9.6, Different Layouts, Week 6 (24/10/2024)

With the help of using left justification, I used kerning and tracking to ensure the body text look as smooth as possible, and to reduce most of the hyphens. Other than that, to avoid widows and orphans as much as possible, I tried using different type sizes, tracking and kerning individual line of words.

Out of the six, I decided to choose layout #4, (bottom left) as it looks the best to me.

Fig 9.7, Layout #4, Week 6 (25/10/2024)

After some reconsidering, I increased the space between the body of text and the image. Also, increased the space between the body of text and the head line.

Final Text Formatting Layout

Head line :

Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std Roman

Type Size/s: 50 pt

Leading: 42 pt

Paragraph spacing: 0

Body :

Typeface: ITC New Baskerville Std

Font/s: ITC New Baskerville Std Roman

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 55

Alignment: left justified

Margins: 24 mm bottom + top + left + right

Columns: 4

Gutter: 10 mm

Fig 9.8, Final Text Formatting Layout, Week 6 (25/10/2024)

Fig 9.9, Final Text Formatting Layout (PDF), Week 6 (25/10/2024)

Fig 9.10, Final Text Formatting Layout - Grids, Week 6 (25/10/2024)

Fig 9.11, Final Text Formatting Layout - Grids (PDF), Week 6 (25/10/2024)

Feedback

Week 1:

General feedback : The words chosen are quite difficult to design.

Specific Feedback : -

Week 2:

General feedback : Try to look at other students work to avoid creating similar designs with each other.

Specific Feedback : (About sketch design) Need more time to polish, can do better. Less is more. Simple designs will do. (After resketching the designs) Try doing another set of ideas.

Week 3:

General feedback : -

Specific Feedback : Looks great, can start to digitalize it

Week 4:

General feedback : No mixing font, no using other font that are not provided. Do not distort it too much

Specific Feedback : Animation looks good

Week 5:

General feedback : Finish and Submit eportfolio it Monday 11:59 pm

Specific Feedback : (referring to the text formatting exercise) Use the golden ration while formatting text. While squinting, if some part of the text appears darker than the rest of the text. It means that the tracking is tighter there as compared to the other paragraphs. The entire wall of text should be one gray tone.

Week 6 :

General feedback : -

Specific Feedback : Overall looks ok. Move the picture in #5 to the bottom left space. The picture in #6 is not centered. Try to align the headline text with the body text in #4. Choose one layout which you like the best.

Reflections

Experience :

Honestly, my experience throughout Task 1 was chaotic to say the least. Being new to Typography and the first time using Adobe software did leave many question marks through my head during these few weeks. However, with enough guidance from our lecturers and the YouTube video lectures, I started to get the hang of things and completed tasks I felt daunting to complete.

Personally, I liked the first exercise more as I get to design and express the word chosen in different ways. The not-so-fun part would be my design clashing with other students design or my design were not approved by my lecturer.

Classes were nice, as my classmates were always happy to help with any questions I had regarding the use of InDesign.

Observations :

During class time, I get to see other student's works. By looking as how they interpreted and designed their text expression and text formatting, I was inspired and thought of new ideas and design for my own works.

Findings :

Throughout Task 1, I have learned the basics of Typography, from it's history to modern application of it. Also, while I was working on the tasks given, I realized need more practice on the use of Illustrator and InDesign to further assist me in my future works. Other than that, I quickly learned on the 2nd week that procrastinating on my weekly task has disastrous effects on my ability to keep up on the ever-growing mountain of tasks, so I started to schedule time and finish exercises as soon as possible.