Typography - Task 1 / Exercises 1 & 2

27/08/2021 - 25/09/2021 (Week 1 - Week 5)

Ataka Lukman Hamzah / 0350012

BDCM / Typography

Task 1: Exercise 1 & 2

LECTURE

WEEK 1 - LECTURE 1

Recorded Lecture - 1 DEVELOPMENT OF LETTERFORM

On the first pre-recorded lecture, Mr Vinod introduced us to the development of letterforms. It explains the brief timeline of the development and classifications of the letterforms.

In the early development of letterform, writing meant scratching into clay with a stick or stone carving with chisel. These forms are dependant on the tools that were used during that time. This results in evolving uppercase letterforms. Uppercase letterforms are combination of straight lines and pieces of circles.

Fig 1.1: Evolution from the Phoenician Alphabet, Week 1 (../../..)

The first evolvement of these letterforms were done by the Greeks. They developed different writing, which follow the style called 'boustrophedon'. It is a style that writes from right to left. Other than the direction of reading, they also changed the orientation of letterforms.

Fig 1.2: Boustrophedon Style, Week 1 (../../..)

From the Greek evolution, Etruscan and Roman have their own evolution of letterforms. The writings done by them were carvings on marbles. This was done by painting on the marbles to avoid mistakes continued with carving. In this style of letterform the weight of strokes changes from vertical to horizontal and it has a broadening stroke at the start and the finish.

Fig 1.3: Etruscan and Roman Marble Carving, Week 1 (../../..)

Timeline

1000 B.C.E: Phoenician

900 B.C.E: Greek

100 B.C.E: Roman

Fig 1.4: Evolution of Phoenician to Roman, Week 1 (../../..)

Moving on from the Phoenician to Roman letterforms, we are also introduced to hand script from the third to tenth century C.E.

Square Capitals

Square Capitals were the written versions that can be found in Roman monuments. They have serifs that was added tot the finish of the main stroke. These stroke variation was achieved by using the reed pen that was held approximately 60 degree off the perpendicular.

Fig 1.5: Square Capitals, Week 1 (../../..)

Rustic Capitals (Compressed Square Capitals)

As the names given, the rustic capitals is a compressed version of the square capitals. It is compressed to fit more words and to achieve the end product with less time taken. Although it was fast and easier, the rustic capitals are slightly harder to read due to the compressed nature. To achieve this style, you need to hold a pen approximately 30 degree off the perpendicular. This style was developed for pragmatic reason. Both the square and rustic capitals are typically used for documents.

Fig 1.6: Rustic Capitals, Week 1 (../../..)

Cursive handwriting is used for everyday use. It is used because it has a simplified form which will take less time to write. From the use of cursive handwriting and writing fast, the lowercase forms was developed.

Fig 1.7: Cursive Writing, Week 1 (../../..)

Unicial

The unicials take in some aspects of the Roman cursive hands like the shape of A, D, E, H, M, U and Q. Uncia is a latin for twelfth of anything, which giving out the impression of letter that are one inch high. However, to be more accurate unicials are small letters. Unicials have broad forms, with this the writing is much more eligeble at small sizes than rustic capitals. The unicials integrated both upper and lower case into their writing system.

From the hand-script, further formalization of the cursive hand are developed.

Half-Uncials

Hal-uncials mark the formal beginning of lowercase letterforms. It is filled with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet

Chalemagne

The Chalemagne issued an edict to standardize ecclesiastical texts. It is because there are too many writing systems that could lead to different beliefs. The writing form includes both majuscules (uppercase), miniscule, capitalization and punctuation.

Due to the dissolution of Charlemagnes's empire variety of Alcuin's script came up from parts of Europe. From the Nothern Europe, they have a condense strong vertical letterform known as Blackletter. Meanwhile, the Southern Europe have a more rounded and open hand letterforms called Rotunda.

Gutenberg's Style

Gutenberg used engineering, metalsmithing and chemistry into his work. He uses these skills to build pages that accurately mimicked the work of the scribe's hand (Blackletter). His type requires different brass matrix, or negative impression (for each letterform). He developed easier method for documentation (printing)

TIMELINE

Humanist Script to Roman Type

c. 1460: Lucius Lactantius, Venice

1472: Cardinal Jonannes BEssarion, Conrad Sweynhewm and Arnold Pannartz, Subiaco press, Rome

1471: Quintillian, Nicholas Jenson, Venice

Venetian type from 1500

1499: Colona, type by Farncesca Griffo

1515: Lucreties, type by Francesco Grifo

The Golden Age of French printing

1513: Illustrissimae Galliaru reginae Helianorae, printed bu Robert Estianne, Paris. Type-cast by Claude Garamond

Dutch Printing, c. 1600

1572: Polygot Bible (Preface). Printed by Christophe Plantin, Antwerp

English type from the eighteen century

1734: William Caslon. Type specimen sheet, London

Baskerville's innovations

1761: William Congreve, typeset and printed by John Baskerville, Birmingham.

1818: Giambatista Bodoni, Manuale Tipografico, Parma

19th Century types --> The firs square serifs --> Early twentieth-century sans serif (1923 Bauhaus, Moholoy-Nagy, 1959 Muller-Brockman)

Type Classifications
Type forms have developed in response to prevailing technology, commercial needs, and esthetic trends. Some was endured and past the cultures which spawned them. The following is based on one devised by Alexander Lawson (covers main form of text type)

Blackletter

earliest printing type
forms based on hand-copying styles from books in northern europe
example: Cloister Black - Goudy Text

1475 Oldstyle

based on lowercase forms used by Italian humanist scholars book copying
and uppercase forms from inscribed on Roman ruins
as the forms migrated it evolves away from their calligraphic origins over the 200 years
example: Bembo - Caslon - Dante - Garamond - Janson - Jenson - Palatino

1500 Italic

echoing contemporary Italian handwriting
its condensed and close set to allow more word per page
originally categorized as their own class of type
soon it was cast to complement roman forms
since the 16th century, it has been virtualized and typefaces have been designed with accompanying italic forms

1550 Script

attempt to replicated engraved calligraphic forms
not approriate in lengthy text settings
examples: Kuenstler Script - Mistral - Snell Roundhand

1750 Trasitional

refinement of oldstyle forms
achieve due to casting and printing advancement
exaggerated thick and thin relationships
brackets were ligthened
Example: Baskerville - Bulmer - Century - Time Roman

1775 Modern

further rationalization of oldstyle letterforms
serifs were unbracketed
contrast between thick and thin strokes extreme
english version are also known as Scotch Romans and more closely resemble transtitional forms
Example: Bell - Bodoni - Caledonia

1825 Square Serif / Slab Serif
originally heavily bracketed serif

with little variation of thick and thin strokes
it responded to the newly developed needs of advertising for heavy type in commercial printing
as it evolved the brackets are dropped

1900 San Serif

serifs were elminated alltogether
the forms were first introduced by William Caslon IV in 1816
the use of it wide spread in the beginning of the 20th century
variation tended towards humanist forms (Gill Sans) and rigidly geometric (Futura)
strokes were originally flared to suugest the calligraphic origins of the form (optima)
sans serif also referred to as a grotesque (grotesk) and gothic
Example: Akzidenz Grotesk - Grotesk - Gill Sans - Franklin Gothic - Futura - Helvetica

1990 Serif/Sans Serif

a recent development
enlarges the notion of a family of typefaces to include both serif and sans serif
often stages between the two
Examples: Rotis - Scala - Stone

WEEK 2 - LECTURE 2

Typography employs a number of technical terms. Mostly describes specific parts of letterforms. Good idea to familiarise ourselves with the lexicon. Knowing a letterform’s component parts make it much easier to identify specific typefaces.

Font/Typefamily

The full font of a typeface contains much more than 26 letters, to numerals, anda few punctuation marks. In order to work successfully with type, you should make sure that you are working with a full font and you should know how to use it.

Uppercase

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

Fig 1.8: Uppercase

Lowercase

letters include the same characters as uppercase

Fig 1.9: Lowercase

Small Capitals

Often found is serif fonts called as the expert set. Uppercase letterforms draw to the x-height of the typeface/ is invented to create a neat grey scale area, so that acronyms won’t pop out alone in a paragraph

Fig 2.0: Small Capitals

Uppercase Numerals

Also called lining figures, same height with uppercase letters, all set to the same kerning width, used with tabular material or in any situation that calls for uppercase letter

Fig 2.1: Uppercase Numerals

Lowercase Numerals

Also known as old style figure or text figures. Are set to x-height with ascenders and descenders. Both used when ever you would use upper and lowercase letterforms. They are far less common in sans serif type-faces than in serif.

Fig 2.2: Lowercase Numerals

Italic

Most fonts today are produced with a matching italic. However, small caps are rarely found in italic. The forms refer back to the fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

Fig 2.3: Italic typeface

Punctuation, miscellaneous characters

Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. Important to look at the characters available in a typeface before working with it.

Fig 2.4: Punctuation, Miscellaneous Characters

Ornaments

Used as flourishes in invitations or certificates. Usually provided as a font in a large typeface family. Some have ornaments and some do not.

Fig 2.5: Ornaments

Typefaces that are based on handwriting are called italic while typefaces that are not based on handwriting are called oblique.

ROMAN

Derived from inscription of Roman monuments.

Italic

Named for fifteenth century Italian handwriting.

Oblique

conversely are based on roman form of typeface

Boldface

Characterised as thick stroke. Depending on the stroke widths it can be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super.

Light

Lighter stroke than the roman form. Even lighter strokes are called thin

Condense

Version of roman form, and extremely condense styles are often ‘compressed’

Extended

extended variation of a roman font

These typefaces have been representing 500 years of type design. It was rendered to achieve easy readability and appropriate expression of contemporary aesthetics. These typefaces have surpassed the latter goal. Remained in use for decades, it is still considered successful expression of how we think, read, write and print.

Comparing Typefaces

Other than the differences in x-height, it varies in line weight, relative stroke widths and in feeling. These feelings connote specific use and expression. Some display range of attitudes, some whimsical, some stately, some mechanical, others calligraphic some harmonious and some awkward.

As a designer, it is very important to use the right typefaces as you are conveying your message through that typefaces. A good typeface represent the message of the writer.

Text / Tracking: Kerning and Letterspacing

Kerning refers to the automatic adjustment. Often mistaken as 'letterspacing'. Letter spacing means to add space between the letters. Tracking means the addition and removal of space in a word or sentence (also when do both letter space and kern).

When to kern?

We do not kern for large number of texts. Kerns usually used for titles and uppercase letters.

Normal Tracking and Loose tracking

Normal tracking is when you give letter space and kerning. More letter space would decrease the readability (reducing the patterns that the word form). Negative space in a word is needed to be considered when doing a letterspacing or kerning.

Letterspacing an uppercase letter have been done by designers. Some does not like that lowercase letterforms to be given a letterspace, because it is design that way. Uppercase letterforms are drawn to be able to stand on their own. On the other hand, lowercase letterforms require the counterform created between letters to maintain the line of reading. Counterform is the negative space between letters.

Text Formatting

Flush left (best choice)

This closely mirrors the asymmetrical experience of handwriting. All starts from the left and ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even gray value. Will always have ragged right

Ragged: jagged line text

Gray value: text on white page

Centered

Imposes symmetry upon the text. Equal value and weight to both ends of any line. Transforms text into shapes. It is important to amend line breaks so that the text does not appear to jagged on the left and right. It does not go with large amount of text because the starting point of is inconsistent. It is advisable to use the centered alignment for small amount of text.

Flush Right

This format places emphasis on the end of a line as opposed to its start. Can be useful for captions. Can be used in axial layout.

Justified

This format imposes a symmetrical shape on the text. It is not an escape from kerning and letterspacing, moreover it needs to be kern and letter space more. It is not always the best choice. IN this format it occasionally produce 'rivers'. Careful attention to line breaks and hyphenation is required to amend this problem whenever possible.

Rivers: negative space that run through the text.

hyphenation: dash-like punctuation mark to join two words into one or separate the syllables of a word

Designers tend to set type one way or another depending upon several factors, personal preference, prevailing culture and the need to express play important roles. Bare in mind, the first job is to have clear, appropriate presentation of the author's message.

*note: type that stands out before the actual words is simply interference, change it.

TEXT/TEXTURE

It is important to understand how different typefaces feel as text. Different typefaces suit different messages. A good typographer has to know which typeface best suits the message at hand. Take in consideration too, the different textures of these typefaces. Type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than type with a relatively smaller x-height or lighter stroke. Sensitive to these matters is fundamental for creating successful layouts.

LEADING AND LINE LENGTH

A goal in setting text type is to allow for easy, long 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 form the material at hand. (generally 2/3 pts of leading)

example: (leading = point size + 2-3.5 points) 9 point size, 11-12.5 points leading

Line Length: Appropriate leading for text is a s 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. Good rule of thumb is to keep line length (sentence) between 55-65 characters. Extremely long or short line lengths weaken reading.

Once point size is determined generally, you can then determined the leading. Then line length is determined.

TYPE SPECIMEN BOOK

It shows samples of typefaces in various different sizes. Without printed pages showing samples of typefaces at different sizes, no one can make a reasonable choice of type. You only determine choice on screen when its final version is to read on screen. It is to provide an accurate reference for type, type size, type leading, type line length etc.

Compositional requirement: Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value, not a series of stripes.

It is often useful to enlarge type to 400% on the screen to get a clear sense of the relationship between descenders on one line and ascenders on the line below. Nothing replaces looking closely at an actual print out of our work. The best screen is still an electronic approximation of the printed page unless you are designing for screen, then judging type on screen is accurate.

INSTRUCTIONS

Task 1: Exercise 1

We are expected to choose four word out of seven words and terror as a compulsory. The word that I chose are colossal, glitch and space. For brainstorming, I started it with searching the meaning of the words. From there it gave the sense of ideas that I could work with and start to sketch.

For the first word that I sketched is 'space'. From what I get from the definition of space, it could defined as two different meaning. The first one as an outer space and the other as space where object could fill. So I did two of the meaning.

Fig 2.6: Space Idea 1

Fig 2.7: Space Idea 2

Fig 2.8: Space Idea 3

For the word glitch there are examples that I wanted to replicate to represent glitch. Also, when I hear the word glitch the first thing that comes to my mind is distortion.

Fig 2.9: Inspiration Idea

This sort of distortion is what I think best represent glitch. So I decided to incorporated it to my typography. Because it will be challenging to sketch it out manually, I directly go to photoshop to try it out. For the first sketch I applied the the figure distortion where it goes left and right.

Fig 3.0: Glitch Idea 1

After doing the first idea I experimented on different tools from photoshop. At last, the smudge tool is effective on showing the glitch effect. What I did was to make the text as a rectify object then used the rectangular marquee tool to move a certain area of the word.

Fig 3.1: Glitch Idea 2

For the second idea, from the tools exploration, I found the smudge tool to be more fitting to create a glitch effect. Same step as the first idea, rectify the text then continue to smudge through the text.

Fig 3.2: Glitch Idea 3

Lastly, I wanted to apply the idea from Fig x.x to use RGB colors to create the effect of glitching. To create this it require much more complex step. First is to duplicate the text into another three text. Then change the effect from normal to color dodge. For each text, change it to red, green, and blue. After that, adjust them to right for the red, left for the blue and down for green.

Moving on to the next word, terror. Based on the Oxford Languages dictionary, it means extreme fear. From there, I was thinking of horror films or horror figures. So the first idea that I came up with is to create a blood dripping of the word. When doing so, I decided to use the smudge tool again to achieve the goal.

Fig 3.3: Terror Idea 1

I like the idea of it it gives out the meaning well while the word is still readable. I think that the stain or the 'blood' gives the message of fear. Then for the next idea, I decided to use 'scream' the horror figure as an O in the word terror. Also, I use the smudge tool to create a distortion to the face to emphasize the 'fear'.

Fig 3.4: Terror Idea 2

For the third idea, I am thinking of creating the word inside a coffin, to represent terror. Also I wrote it in scribble lines to represent shaking or afraid.

Fig x.x: Terror Idea 3

For the last word colossal, the first thing that comes to my mind is large and big. So the first idea is to fill the entire frame with the word colossal. Also, to emphasize the word colossal, I decided to use a thick width typeface and type it in all uppercase.

Fig x.x: Colossal Idea 1

The next idea that I have from colossal is from the other meaning of colossal which is having two or more stories of columns. Then I decided to replace the letter L as columns.

Fig x.x: Colossal Idea 2

Last, for idea three because the word is colossal I am thinking of having a graphic of a gladiator as the A. Because I think that the word colossal is near to the word of colosseum.

Fig 3.5: Colossal Idea 3

So the ideas that I will be submitting is the first idea of glitch, first idea of space, first idea of terror and the first idea of colossal. For glitch, I decided to choose the first one because, it represent glitch nad it does not have too much distortion and not using any color. For space, for this task we are given ten typefaces to work with, and the sketches that I made for space have a very thin and pointy font which will make it impossible to do for this task. As for the third sketch it does not represent space fully. Next is terror, I decided to use the first idea because, it does not rely on graphical elements. Lastly, for colossal I chose the first idea, because when I hear the word colossal it is something big and bold.

Fig 3.6: Final Outcome

FINAL TYPE EXPRESSION:

Then we are told to choose one of our typeface designs and to create an animation of it. The goal is to create an animation that represents the words. Also to emphasize the word.

Fig 3.7: Creating Frames

So the first step is to create a square layout and put the type expression we choose. Then crate different artboards as frames in animation. I wanted to create space, so the first frame I did was joining together, like a normal text. Then moving to another frame I gave space between the letters. To create the animation of the letters going further and further from each other.

After doing the frames in Adobe Illustrator, move it to photoshop to create the frame timeline in order to create a gif.

Fig 3.8: Photoshop Timeline

Next step is to create the frame by frame in the timeline. At first, the animation is too fast, it does not have a pause to indicate the start and end. Also, it does not express the words well.

Fig 3.9: Draft 1

So what I did was to create a delay between each frames and the end of the frames to keep the 'E' away for a little more time. Also to give a pause at the end to emphasize the word space. Which then come the final outcome of my animation.

Fig 4.0: Time Adjustment per Frames

Fig 4.1: Final Gif Outcome

FINAL GIF ANIMATION:

Exercise 2:

Checklist:

Font size (8–12)
Line Length (55–65/50–60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Lecture Typography Formatting 1:4

Fig 4.1: Before & After Kerning (Bembo)

Fig 4.2: Before & After Kerning (Bodoni)

Fig 4.2: 10 Typefaces + Kerning

Lecture Typography Formatting 2-4

For Headlines, the leading size pt usually are (text leading size x 2).

To have the proper grid, change the 'increment every' to the point size of the leading. Which will result in a proper cross alignment between two columns of text.

To change 'increment every':

Windows: Edit > Grids > Increment Every > Input Text Leading Size (pt)

Fig x.x: Baseline Ascent

Fig x.x: Baseline Leading

To change the Baseline Setting:

Select Text > Ctrl B > Baseline Option > Ascent change to Leading

Fig x.x: Before Ragging

Fog x.x: After Ragging

Rule of Thumb for Ragging: 1-3 Times for each line (avoid huge difference in letter spacing)

Fig 3.1: Layout 1

Fig 3.2: Layout 2

I decided to go with the second layout for task 2 submission. I like the second layout more because it has more breathing room not all packed in a margin like the first layout. However, it has some orphans that need to be remove.

Fig x.x: Before Adjustments

Fig x.x: After Adjustments

Fig x.x: Final Outcome

FINAL OUTCOME SUBMISSION:

FEEDBACK

Specific Feedback:

For my first task I got a feedback where the word 'GLITCH' have too much distortion, it should be reduced. Also to explore more for the word 'colossal'. Incomplete submission of work and e-portfolio progression.

REFLECTION

Experience

From this task, I got to explore more on Adobe Illustrator since I have been using Adobe Photoshop as an editing platform and creation of my designs. Other than exploration on Adobe Illustrator, I got to learn the basics of formatting a layout for articles and such in InDesign. Get to know, rules for leading, grids, cross alignment, baseline, ragging.

Observation

Findings

I found that there more things that can be learn from typefaces than just knowing the typefaces. There are parts such as legs, arm, ears, loop and many more. There are more to create layout of text and headlines. It is not simply just putting the text, headline and images in the layout. But there are more things to consider like ragging, does the text cross align and many more.

Search This Blog

Ataka Lukman Hamzah (0350012)