Typography Task 1: Exercises

7th April 2023 - 5th May 2023 (Week 1 - Week 5)
Asma' Binti Mohd Jailani / 0354335 / Bachelor of Mass Communication (Honours) 

Typography

Task 1 / Exercises 1 & 2



LECTURES

Week 1 (7/4/23)

During class, we were given an overview of what this module expected from us, followed by a step-by-step guide on how to set up our e-portfolios. Mr Vinod then proceeded to go through the MI with us and assigned us our first task: to sketch out ideas on how to express different words in different ways. 


Week 1 Introductory Lecture 0

Terminology

Font: Refers to the individual font or weight within a typeface, I.e.Regular, Italic, Bold, etc. 

Typeface: Refers to the various families that do not share characteristics, I.e. Georgia, Arial, Times New Roman, Didot and Futura.

Kreatif Beats: design magazine by Taylor’s Design School


Lecture 1 (Development of Typography)

Western media dominates media, so there is a lack of Asian representation due to us not championing our own voices. Take the facts presented in the lecture and on the internet with a grain of salt, further reading centred around your local community or underrepresented communities is highly recommended.


1. Development / Timeline of Typography


Fig. 1.1: Early letterform development - Phoenician to Roman


Writing initially meant scratching into wet clay with a sharpened stick or carving into stone with a chisel. 

The tool you hold in your hand has a major role in the type of forms that you create with that tool.

Arabic and Latin letters can be derived from the Phoenician alphabet 

Fig. 1.2: Evolution of letters from Phoenician

Greeks developed ‘boustrophedon’ (how the ox ploughs) which was a style of writing that had readers read lines of text alternately from right to left then left to right. 

Fig. 1.3: An example of boustrophedon

Eventually, they would move to a strictly left-to-right writing.

Etruscan carvers painted the letterforms on the marble before carving them into the stone. 

Fig. 1.4: Late 1st Century B.C.E., Augustan Inscription in the Roman Forum, Rome


2. Hand script from 3rd-10th Century CE


Fig. 1.5: Square capitals

Square capitals = written version found in Roman monuments; have serifs added to finish off main strokes. Variety of stroke width was achieved by the reed pen being held at an angle of approximately 60 degrees off the perpendicular. 


Fig. 1.6: Rustic capitals

Rustic capitals = compressed version of square capitals, took far less time to write, allowed for twice the amount on a sheet of parchment.

Both types of capitals were typically reserved for documents. Everyday transactions were typically written in cursive, which resulted in the beginnings of lowercase. Lowercase was the result of writing uppercase letters fast. 

Fig. 1.7: Roman cursive

Fig. 1.8: Uncials

Uncials = Latin for 12th of anything. Incorporated some aspects of the Roman cursive hand. 


Fig. 1.9: Half-uncials

Half-uncials = mark the formal beginning of lowercase letterforms, 2000 years after the origin of the Phoenician alphabet. 

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardise all ecclesiastical texts. Task was entrusted to Alcuin of York, Abbot of St Martin of Tours. Result was not only the standardisation of written text, but also more precise and accurate communication. The abbot was selected as the church was known for the practice of writing: monks who penned down religious texts or scribes in the royal court who wrote down the histories of empires. 

Blackletter to Gutenberg’s type


Fig. 1.10: Blackletter (Textura)

After Charlemagne’s empire dissolved, the Alcuin script underwent regional variations. Blackletter gained popularity in Northern Europe. Rotunda in the south. 

Gutenberg = the man who invented the modern day printing press. He invented pages that accurately mimicked the work of the scribe’s hand in northern Europe’s Blackletter. Each letterform required a different brass matrix/negative impression. This allowed for documenting of information to be done more quickly. He started with the Bible, as everyone wanted the Bible.

The digitisation of older typefaces (exp: Jenson, Garamond, Baskerville, Caslon, etc.) was done by modern day designers who wanted to pay homage to the older designers who painstakingly crafted these typefaces. 

Sans serif (1923 Bauhaus, Moholy-Nagy, 1959 Muller-Brockman) came about in the 20th century as a result of the Industrial Revolution. 


3. Text Type Classifications (Dates of origin approximate to the nearest quarter century)

Typeforms were developed in response to prevailing tech, commercial needs and aesthetic trends.

1450 Backletter: Earliest printing form, based upon hand-copying styles used in books in Northern Europe. 

1475 Oldstyle: Based on lowercase forms used by Italian humanist scholars for book copying + the uppercase letterforms inscribed on Roman ruins. Form eventually evolved away from their calligraphic origins over 200 years as they migrated from Italy to England. 

1500 Italics: Echoes contemporary Italian handwriting, were first condensed and close-set to allow more words per page. Were at first considered their own class of typeface before being cast to complement roman forms. Letters with serifs are called italics, letters without are called obliques. 

1550 Script: Originally an attempt to replicate engraved calligraphic forms - is not entirely appropriate in lengthy text settings. More suitable for shorter applications. Decorative in nature. Exp: weddings. 

1750 Transitional: Refinement of old style forms, achieved due to prevailing technologies (casting and printing) that allowed people to progress beyond handwritten text. 

1775 Modern: Further rationalisation of old style letterforms. Serifs were unbracketed, and the contrast between thick and thin strokes were extreme. 

1825 Square Serif / Slab Serif: Originally heavily bracketed serif, with little variation between thick and thin strokes, these faces responded to the newly developed needs of advertising for heavy type in commercial printing. As they evolved, the brackets were dropped. 

1900 Sans Serif: Eliminated serif altogether. Were technically first introduced by William Caslon IV in 1816, but only became popularised in the beginning of the 20th century. Sans serif is also referred to as grotesque (from the German word ‘grotesk’) and Gothic. They were called grotesque as people who were much more used to the beautified and classical serif typefaces, found sans serif types to be ugly. 

1990 Serif/San Serif: Type that skirts the boundary of serif and sans serif (semi-sans and semi-serif). 

Lecture 2 (Typography: Text Pt.1)

1. Text/Tracking : Kerning and Letterspacing

Kerning: The automatic space between letters. The action of removing space between letters. Often mistakenly referred to as ‘letterspacing’. 

Letterspacing: The action of adding space between letters. 

Tracking: When you apply both kerning and letterspacing to a word. 

When should you kern and letterspace? -> Exp: headlines with all caps; to fill in and standardise spacing


Fig. 2.0: Normal tracking, loose tracking and tight tracking

Normal tracking is when you add kerning and letterspacing to a word, but depending on how you track a word, it affects readability. This is because you alter the recognisability of the patterns of the typeforms. In typography we’re not just looking at the letterform, but also the counter form (empty spaces outside of the letterform). 

Strong resistance within the type community to letterspace lowercase letters within text. 

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

Tighter set text creates a darker colour, looser set text creates a lighter colour. 

InDesign Shortcuts

Shortcut to upsize font: Cmd +Shift + < (greater than key) + Alt (to make it faster)

Shortcut to remove guides: Cmd + ;

Shortcut to kern/letterspace: Option + left/right arrows


2. Text/Formatting Text

Flush left: Writing format where each line starts at the same point but ends wherever the last word on the line ends. Most closely mirrors the asymmetrical experience of handwriting. Spaces between words are consistent throughout the text, allowing the type to create an even grey value. 

Grey value: Text on a white page. 

Ragging: Jagged edge of each line of text. 

Leading: Space between each line of text.

Centred: Imposes symmetry upon text, assigning equal value and weight to both ends of any line. Adds pictorial quality to material that is non-pictorial by nature as it transforms fields of text into shapes. Because the appearance of shape is so strong, it is necessary to amend line breaks so that the text does not appear too jagged. Should be used sparingly with small amounts of text. 

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

Justified: Like entering, this format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and sometimes, between letters. The resulting openness of lines can occasionally produce ‘rivers’ of white space running vertically through the text. Careful attention to line breaks and hyphenations is required to amend this problem whenever possible. 

Type that calls attention to itself before the reader can get to the actual words is simply interference, and should be avoided. Quite simply, if you see the type before you see the words, change the type. 


3. Text / Texture

X-height: The middle space between the base line and the median line. A larger x-height results in a more readable, eligible 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 a photograph does. 

Type size: Text type should be large enough to be read easily at arm’s length - imagine yourself holding a book in your lap. 

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily lose their place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand. 2 to 3 points larger than the text size is recommended. 

Line Length: Appropriate leading for text is as much a function of the line length as it is a question of type size and leading. Shorter lines require less leading; longer lines more. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short line length impairs reading. 


4. Text / Type Specimen Book
A type specimen book shows samples of typefaces in various different sizes. This is so typesetters can make a reasonable choice of type. You can only determine choice onscreen when its final version is to read on screen. 

A type specimen book (or ebook for screen) is to provide an accurate reference for type, type size, type leading, type line length, etc. 

Fig. 2.1: Sample of a page from a specimen book


Compositional requirement: Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle grey value (as on the left), not a series of stripes (as on the right). 

Fig. 2.2: Sample text comparisons



Lecture 3 (Typography: Text Pt.1)

*Continuation of last week’s lecture*

1. Text / Indicating Paragraphs

Pilcrow (¶): Used to mark a new paragraph of section of text. A holdover from medieval manuscripts seldom used today. 

Paragraph spacing: Space that lies between two paragraphs.

Ideally, paragraph spacing should be the same as line space (leading). For exp: if the line space is 12pt, then the paragraph space should be 12pt as well. This is to ensure cross-alignment across columns of text. 


Line space vs leading

Fig. 3.1: Line space vs Leading


Line spacing: starts from the descender of one sentence to the descender of the following sentence. It’s basically font type size + leading. 

Leading: refers to only the space between the descender of one sentence and the ascender of the following sentence. 


Indentation 

Fig. 3.2: Example of standard indentation

The figures displays an example of standard indentation. Typically, the indent is the same size as the line spacing or the same as the point size of your text. 

Important! when using indentation, you should not have ragging on either side of the sentence. It is best to use justified when using indentation. 


Extended paragraphs (usually used in academia)

Fig. 3.3: Example of extended paragraphs

The method of extended paragraphs below creates unusually wide columns of text. Despite these problems, there can be strong compositional or functional reasons for choosing it. 


Text / Widows and Orphans 

Fig. 3.4: Widows and an orphan

In traditional typesetting, there are two unpardonable gaffes- widows and orphans. A widow is a short line of type left alone at the end of a column of a text. 

An orphan is a short line of type left alone at the start of a new column. Basically, when you begin a new column with the last word from a previous column’s sentence. 

Designers that deal with large amounts of text (in websites, books, online/physical magazines, etc.) must take great care to avoid the occurrence of the above mentioned. 

Widows can be avoided by rebreeding your line endings throughout your paragraph, so that the last line of any paragraph is not noticeably short. This can be done by introducing forced line breaks (pressing shift+enter at the end of a word). You can also try kerning your text, HOWEVER, the maximum and minimum you can kern your sentence is 3 times, or else it may alter the way the text looks compared to the lines above and below. 

Orphans can be solved by adjusting column height. 


2. Text / Highlighting Text

Different kinds of text require different kinds of contrast. This can be done by changing the text to bold/italics/switching the type family/switching colours (however, cyan, magenta and black are the only options you have; CMYB)

Below are a few examples:


Fig. 3.5: Different kinds of highlighted text

When changing the type family, you might want to reduce the point size of the highlighted text as sans serif text tends to be larger. 


Fig. 3.6: Size comparison of serif text vs sans serif text

Numbers tend to follow the capital line alignment, so in small bodies of text (as this would be difficult to achieve in large bodies of text like books, reports, etc.), typographers reduce the point size of numbers by .5 in comparison to the text type point. 

Fig. 3.7: Comparison of alignment of numbers depending on point size

When highlighting text by placing a field of colour at the back, it is best to maintain the left reading axis of the text to ensure optimum readability. 

Fig. 3.8: Comparison of text highlighted with a field of colour. Right: Unaligned, Left: Aligned

Fig. 3.9: Highlighting text with quotation marks

Sometimes this applies for typographic elements outside the left margin of a column type (exp: bullet points, quotation marks)


Fig. 3.10: Primes vs quotation marks

Primes should not be mistaken for quotations. Primes refer to inches and feet, quotation marks (slightly slanted) are for quotes. 


3. Text / Headline Within Text

There are many kinds of subdivision within text of chapters. In the following visuals, these have been labelled (A, B and C) according to level of importance (hierarchy). Typographers are tasked with making sure these heads clearly signify to the reader the relative importance within the text and their relationship to each other. 


Figure. 3.11: A heads


‘A’ head indicates a clear break between the topics within a section. 


Fig. 3.12: B heads

‘B’ head is subordinate to A heads. Used to indicate new supporting argument or example for topic at hand. They should not interrupt text as strongly as A does. 


Fig. 3.13: C heads

‘C’ heads, while uncommon, highlight specific facets of material within the B head. C heads in this configuration are followed by at least an em space (two presses of the space bar) for visual separation.  

Example of hierarchy when put together:

Fig. 3.14: Hierarchy in a sequence of subheads

4. Text / Cross Alignment

Reinforces the architectural sense (i.e. structure) of the page while articulating the complimentary vertical rhythms.  

Fig. 3.15: Cross alignment examples

In this example, four lines of caption type (leaded 9pts., small paragraph on left side of page) cross-align with three lines of text type (leaded to 13.5 pts, larger body of text on right side of page).


Lecture 4 (Typography: Basics)

1. Describing Letterforms

Fig. 4.1: Typography Basics - Describing letterforms (PDF)


2. The Font

A full font of typeface contains much more than 26 letters.


Uppercase

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


Lowercase

Lowercase letters include the same characters as uppercase.


Small capitals

Uppercase letterforms drawn to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set. 


Fig 4.2: Small capitals

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.


Uppercase Numerals

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

Fig. 4.3: Uppercase numerals

Lowercase Numerals

Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. Lowercase numerals are far less common in sans serif type-faces than in serif. 

Fig. 4.4: Lowercase numerals

Italics

Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in italics refer back to fifteenth century Italian cursive handwriting. Obliques are typically based on the roman form of the typeface and usually occur only in sans serif fonts.

Fig. 4.5: Italics


Punctuation, miscellaneous characters

Fig. 4.6: Punctuations

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


Ornaments

Fig. 4.7: Ornaments (Adobe Caslon Pro)

Used as flourishes in invitations or certificates. They 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.


3. Describing typefaces


Fig. 4.8: Describing typefaces

Roman: The 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’.

Italics: Named for fifteenth century Italian handwriting on which the forms are based.

Oblique: Based on roman form of typeface, more commonly found in sans serif fonts.

Boldface: Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as ‘Poster’. 

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

Condensed: A version of the roman form, and extremely condense styles are often called ‘compressed’.  

Extended: An extended variation of a roman font.


4. Comparing Typefaces


Fig. 4.9: Comparing typefaces

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling. For any typographer these feelings connote specific use and expression.


Lecture 5 (Typography: Letters)

1. Understanding Letterforms


Fig. 5.1: Baskerville 'A'

In this particular letterform, it is not symmetrical in its stroke. This is apparent in the unique arc visible at the bottom of the uppercase letter A (Baskerville), where the bracket is connecting to the stem.


Fig. 5.2: Univers 'A'

Seems symmetrical, but actually isn’t. The width of the left slope is thinner than the right stroke. There are likely optical reasons for having asymmetry in strokes.


Fig. 5.3: Helvetica (left) vs. Univers (right)

Complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces. Most apparent is how the bowls meet the stems. 


Tip! During your final assignment, don’t overload your typeface with too many details. 


2. Letters / Maintaining x-height


Fig. 5.4: Lowercase letters positioned between the median and baseline

X-height generally describes the size of the lowercase forms. However, curved strokes such as ’s’ must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal stores they adjoin.


3. Letters / Form / Counterform

Counterform: negative space outside of the letterforms. 

Fig. 5.5: Counterforms

Especially important to take not of when working with letterforms like lowercase ‘r’ that have no counters, per se. This is because how well you handle counters when setting type affects the readability of the text. 

One of the best ways to understand the form and counter of a letter is to examine them in close detail. 

Fig. 5.6: Details in letterforms

4. Letters / Contrast

Contrast: the most powerful dynamic in design 

As applied to type, based on a format devised by Ruedi Rüegg.

Fig. 5.7: Contrast, Ruedi Rüegg


Lecture 6 (Screen & Print)

1. Different mediums

Typography exists in all forms and shapes nowadays. Despite many concerns, print is still very much relevant.

Typography was viewed as living only when it reached paper. Good typography and readability were the result of skilled typesetters and designers. 

Nowadays, Typography is subject to many unknown and fluctuating parameters, such as operating systems, system fonts, the device and screen itself, the viewport, and more. Our experience of typography today changes based on how the page is rendered and coded, because typesetting happens in the browser. 


Fig. 6.1: Screen design for a website

2. Print Type vs Screen Type

Print

  • Text should be smooth, slowing and pleasant to read. 
  • Good typeface: Caslon, Garamond, Baskerville are most common. This is because they are elegant and intellectual, but also highly readable even at a small font size. 
Fig. 6.2: Example of (slightly outdated) print typesetting

Screen

  • Optimised and often modified to enhance readability and performance onscreen. May include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. 
  • exp: Bodoni and Georgia are best for screen
  • Typefaces intended for screen have more open spacing (this is especially true for typefaces intended for smaller sizes). This is to improve character recognition nd overall readability onscreen (exp: web, ebooks, e-readers, mobile devices, etc.)
  • Hyperlinks: normally blue and underlined by default. 
  • Font size for screen: 16-pixel text. About the same size as text printed in a book or magazine, accounting for reading distance
  • Each device comes with their own pre-installed font section. 
  • ‘Web safe’ fonts are fonts that appear across all operating systems.
  • System fonts for screens: Open Sans, Lato, Arial, Helvetica, Times New Roman, Times, Courier New, Courier, Verdana, Georgia, Palatino, Garamond
  • Pixel Differential Between Devices 
Fig. 6.3: Pixel differential between devices
  • Onscreen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for he film by evolving a certain mood. 



INSTRUCTIONS

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



Exercises

Task 1: Type Expression (Week 1-3)

For Exercise 1, we were given a set of words to create type expressions from. The words were: Destroy, Split, Surprise, Love, Silence, Party and Pause.

No graphical elements were allowed, we were limited to only 10 typefaces which are Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa and Univers.


1. Sketches

I decided to draft sketches for the words Split, Surprise, Silence, Party and Pause.




Fig. 7.1: Type expression sketches, Week 2 (14/4/23)


After listening to the feedback given by Mr Vinod, I decided to go with PAUSE #3, SPLIT #4, SURPRISE #3 and SILENCE #1. I decided to forgo digitising the word PARTY as the ideas for it didn't seem strong enough. 


2. Digitisation

Fig. 7.2: 1st draft of digitised Type Expressions, Week 3 (21/4/23)


This is the first draft of my sketches. 

SILENCE was inspired by the idea of how silence "echoes", even despite it technically being the state of the absence of noise. The letters are in grey and lowercase, with the opacity lowered, to make it seem like the word is fading. 

I imagined the "PA" letters of PAUSE to be pausing as they caught up with "USE", thus leading to the slant and the gap in between. I also italicised "PA" to induce more of a halting feel.

SPLIT was inspired by the imagery of a zipper, which is why I placed it at the top of the box, to give it the feel of the word gradually splitting open.

SURPRISE is my favourite out of all the words, as I find the idea behind the type expression for it the most amusing. The arrangement of the word was inspired by people hiding behind a wall, in preparation to surprise someone who is approaching. The 'E' was left completely exposed to hint at that one person who always jumps out too early for the surprise. I also thought that leaving the 'E' out would give it a more 'surprising' feel. 


Final Type Expressions

Fig. 7.3: Finalised Type Expressions - JPEG Week 3 (21/4/23)

The only type expression that underwent changes was SURPRISE, as Mr Vinod suggested that having the 'E' left out wasn't necessary to emphasise the feeling of 'surprise'. Thus, the letter 'E' was edited to join the other half hidden letters. 

Fig. 7.4: Finalised Type Expressions - PDF Week 3 (21/4/23)


3. Type Expression Animation

In Week 3, we were tasked with animating one word from our 4 finalised type expressions. I decided to go with the word PAUSE. I tried to illustrate the feeling of pausing by having the first half of the word PAUSE come to a pause because of the latter half. Below is my first attempt at animating it:


Fig. 7.5: First attempt at animating PAUSE, Week 4 (28/4/23)


Mr Vinod's remarks on this attempt was that it didn't quite express the word 'pause', as it felt like the 'PA' was coming to a stop because of 'USE'. He suggested to have the first half of the word join up with the rest of the letters after stopping, to better illustrate the feeling of pausing. With his feedback in mind, I went back to redrafting the animation for my type expression. My first draft initially had only 12 frames. After reworking the first version, I had added 5 more frames to the animation, which made it a total of 17 frames. 


Fig. 7.6: Second draft frames

I initially struggled with making the animation smoother, due to italicising the letters "PA" and making them a different font size compared to the other letters for the first part of the animation (the "PA" zipping across the screen). After a few tries, I managed to animate the letters "PA" joining up with "USE" while managing to avoid drawing attention to difference in font sizes. Below is the final version:

Fig. 7.7: Finalised Animated Type Expression, Week 5 (5/5/23)


Task 1 Exercise 2: Text Formatting

For Exercise 2, we were tasked with formatting a given piece of text into an interesting page layout. We were advised by Mr Vinod to keep in mind these key areas: 

  • Kerning
  • Tracking
  • Font size
  • Length line
  • Leading
  • Paragraph spacing
  • Alignment

The exercise was to be carried out in Adobe InDesign.


Lecture 1:4 Text Formatting - Kerning and Tracking

Fig 8.1: Exercise - Kerning our name depending on the font and typeface

Notes:

What do you look for when you intend to kern?
  • You look for awkward shapes or counter spaces that are between the letterforms.
  • Preferences -> units & increments -> adjust kerning/tracking according to how much you want the spacing to be; maybe 5em
  • Tracking/letter spacing is adjusting the space uniformly across the whole word. Kerning is adjusting the space only between two letters.
  • Always consider how you would like to present the information on the page

Lecture 2-4 of Text Formatting


Fig. 8.2: First draft of my chosen layout, Week 5 (5/5/23)


Mr Vinod gave the following remarks during class, which I feel related to my drafted layout. First of all, he pointed out how when a given header is split into two (exp: I am // Helvetica), students tend to apply different size and weight to the two sentences. This is not necessary, as adjusting too many things at once (in this case, size, font and typeset) is redundant, and will make the text too jarring. Stick to just differing font sizes. 

There was also the situation where the abbreviations in the final paragraph were a bit too jarring, due to the excess of capital letters. To solve this problem, Mr Vinod introduced us to small capitals. However, the font that I decided to use (Baskerville) did not come with small capitals. This was quickly resolved by simply reducing the point size of the capitals by 0.5 pt. 

He also suggested to introduce dynamism to the layout, to make it more interesting to look at. 

With that in mind, I decided to alter the position of the mountains (I chose the picture of the Swiss mountains due to Helvetica originating from Switzerland) in order to make the page layout look more interesting. I also decided to go with left justified alignment, to better control the body text's ragging. 


FINAL Text Formatting Layout


HEAD

Font/s: ITC New Baskerville Std 

Type Size/s:  50 pt & 18 pt

Leading:  23 pt

Paragraph spacing: 0 pt


BODY

Font/s: ITC New Baskerville Std 

Type Size/s: 9 pt

Leading: 11.5 pt

Paragraph spacing: 11.5 pt

Characters per-line: 53-64

Alignment: Left justified


Margins:  120 mm top, 12.7 mm left + right + bottom

Columns: 2

Gutter: 10 mm


Fig. 8.3: Final Task 1: Exercise 2 - Text Formatting JPG, Week 6 (12/5/2023)



Fig. 8.4: Final Task 1: Exercise 2 - Text Formatting PDF, Week 6 (12/5/2023)


Fig. 8.5: Final Task 1: Exercise 2 - Text Formatting with Grids JPG, Week 6 (12/5/2023)

Fig. 8.5: Final Task 1: Exercise 2 - Text Formatting with Grids PDF, Week 6 (12/5/2023)


FEEDBACK

Week 2 (Exercise 1 - Sketches)

4 questions sir posed to us to evaluate our own work:

1. Are the explorations sufficient?

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

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

4. How can the work be improved?


General Feedback:

Use of colour will not be expressed in this exercise. Avoid use of graphics; designs should be centred on the expression of the word through the text. Exception can be made for minimal use e.g. dots, lines. Minimal distortion is allowed as long as it doesn’t warp the proportions of the font severely. Sketches should be small and numbered, for ease of reference and idea generation. Just because you share the same idea as another person doesn't make it unusable, but if too many have the same idea then it's likely basic.


Specific Feedback:

Remove use of graphics in PAUSE #3 and emphasise on the placement of the text. SILENCE #1 is the only acceptable sketch as the other two rely on graphics. SPLIT #4 illustrates the meaning of the word best. SPLIT #5 is interesting but is difficult to read unless reworked to make SPLIT more readable. SURPRISE #1 is the best sketch out of the others. All PARTY sketches will likely be scrapped as none of them feel strong enough to express the word PARTY.


Week 3

Specific Feedback:

Move 'E' for SURPRISE to join the rest of the letters, it's not necessary to leave the 'E' out to illustrate 'surprise'.


Week 4 (Exercise 1 - Animated Word)

General Feedback:

  • If the animation is not designed to be a seamless loop, it would be best to let it pause on the last frame for a few seconds
  • The animation exercise is intended to express the intent/meaning of the word chosen, not to simply add animation to the word
  • More frames = smoother animation
  • Motion blur gives an illusion of speed


Specific Feedback: 

  • Leave USE static, after PA stops, un-italicise it and move it closer to USE so it forms the whole word PAUSE

Week 5 (Exercise 2 - Text Formatting)

General Feedback:
  • If you’re using justified alignment, then the gutter between columns needs to be wider (5mm-7mm). 
  • Keep in mind the colour of the text (spacing and rivers between text). 
  • Can’t have too many hyphenations, maybe only one per paragraph
  • Ensure cross alignment 
  • How to solve all caps abbreviations standing out from the page: Use small capitals. But what if the font doesn’t have small capitals? Simply reduce the font size by 0.5pt.
  • Why all caps stands out: Because the word is at capital height. It breaks up the reading rhythm. 
  • Glyphs on InDesign: Shows all the symbols/letters available in a font
  • To show hidden symbols = Cmd + Option + I
  • Do not cut text into different boxes on InDesign. Use the + symbol
  • For this exercise, line length must be min. 40 characters and max. 65 characters
  • When using a sans serif typeface against a black background, make it bold. This is because sans serif typeface doesn’t have contrast (no differing strokes compared to serif typefaces), which causes the font to disappear. Also, black ink bleeds into the text, causing it to thin out/disappear. 
  • Don’t have too many extremes in your layout (uneven text + image weightage, having images & text at exact opposites of the page, etc.) 

Specific Feedback:
  • When header is split into two (exp: I am // Helvetica), students tend to apply different size and weight to the two sentences, which makes it too jarring. It is not necessary. 
  • Never use forced line breaks (only if necessary, and very sparingly; widows and orphans kinda situation).
  • You want to introduce dynamism to your layout.


Week 6 (Exercise 2 - Text Formatting)

General Feedback:
  • Align text to baseline grid
  • Be careful not to let words from the body text be confused as part of the headline
  • Having the same body text in different line lengths is a big no no. 
  • Be sure not to place body text in the gutter between pages, as the text will become unreadable
  • No graphical elements allowed
  • Don’t express too many things at once in your headline; gets confusing
  • Design that is simple yet effective is best

Specific Feedback
  • Point size is a bit too large, leads to inconsistent ragging
  • Not allowed to alter/remove/change position of words in body text text, keep sentences within their designated paragraphs
  • Type expression for headline doesn’t work, time to redraft


REFLECTIONS

Experience:

Overall, I would say that the experience has been both interesting and creatively challenging. The Type Expression exercise turned out to be much more challenging than initially expected, due to the restriction on graphical elements, and it took me quite a while to come up with sketches that I felt were up to scratch. For the Text Formatting exercise, I initially struggled to understand how to align the base of the text used in the layout, and I would often find myself referring back to Mr Vinod's Youtube lecture. However, once I got the hang of it, everything became pretty clear. 


Observation:

Throughout the past couple of weeks, I have noticed that my creative muscles could definitely use more stretching. By observing the works of not only my peers but also the students of other classes, I've been exposed to not only a multitude of inspiring creative work, but also various other ways in which my fellow students think and carry out their creative process, compared to me. It is both humbling and inspirational. 


Findings:

I've found that the art of Typography itself is one that has been overlooked, and dare I even say, taken for granted, after sitting through the first few weeks of classes with Mr Vinod. Things like a page layout in a magazine for instance, which at a glance seems simple and straightforward, actually requires so much thought and consideration. The readability of a layout, the font used, the size of the text, and even the alignment; typographers and designers are tasked with the responsibility of delivering content that is not only engaging, but also easily comprehendible and digestible to a layman audience. It's definitely given me a greater sense of appreciation for the work carried out by these professionals. 



FURTHER READING

A Type Primer by John Kane, Second Edition 


Fig. 9.1: A Type Primer by John Kane, Second Edition (2011)

(Introduction and Basics)

  • This is a practical book; seeks to present the basic principles and applications of typography mirroring classroom content, but also accompanied with exercises to reinforce knowledge
  • This book is not about style - a characteristic expression of attitude - so much as a clear-headed way of thinking and making.
  • Type is evolved; study of type used to begin with hand-setting metal type.
  • Type evolved from handwriting; your work will have most integrity when you put it down on paper yourself rather than merely digitise. 
  • www.atypeprimer.co, companion website to this 2nd edition book.
  • Technical terms for letterform component parts
  • Knowing about Small Capitals was interesting because I’ve never heard about that before: the diagram provided to differentiate artificially generated and actual small cap made for the font was very helpful
  • What a full font constitutes of and different styles within typefaces.

Comments

Popular posts from this blog

Illustration and Visual Narrative - Project 2

Illustration and Visual Narrative - Project 1

Illustration and Visual Narrative - Exercises