29/9/2023-27/10/2023 ( Week01-Week05)

Chan Suet Yee/ 0358427/ Bachelor of Design (Hons) in Creative Media

GCD60104/ Typography

Task (exercises/projects)

LIST

TABLE OF CONTENTS :

1. LECTURES

2. INSTRUCTIONS

3. TASKS

4. FEEDBACK

5. REFLECTION

6. FURTHER READING

LECTURES

Week 1 - Lecture 0 : Introduction to what is typography

A act of creating letters
Creation of typefaces / type families
Oxford : The style and appearance of printed matters
Wikipedia : The art and techniques of arranging type to make written language legible, readable and appealing when displayed

Place where typography can be seen & used

Animation
Website design
Apps design
Signage design
Products label
Books and etc..

Calligraphy vs Lettering

Calligraphy : Writing styles
Lettering : Draw letters out

Terminologies

Font : Refers to individual fonts or weight within the typeface
E.g. : Georgia regular, Georgia Italic, Georgia Bold
Typeface : Refers to the entire family of fonts or weights that shares similar characteristics or styles
E.g. : Georgia, Arial, Times New Roman, Didot and Futura

Week 1 - Lecture 01 : Development & timeline

Early letterform development : Phoenician to Roman

Fig 1.1 Evolution from Phoenician letter

The way we write in terms of the Arabic and the Modern Latin letter can be read arrived from the Phoenician alphabet

Writing directions

Phoenicians - right to left
Greeks - boustrophedon, left to right, the direction of reading and the orientation of the letterforms is changed
Phoenicians and Greeks did not use letter space or punctuations

Etruscan & Roman carvers

Working on letter forms painted on marble before inscribing them
Some aspects of their strokes shift from vertical to horizontal in weight
Widening of the stroke at the beginning and end

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

Square capitals

Written version discovered on Roman monuments
Add serifs to the end of the end strokes
A range of strokes, the breadth was obtained by holding the read pen at an angle of around 60 degrees from the perpendicular

Rustics capital

Square capitals in a condensed form
A parchment sheet could fit twice as many words
A much quicker to write
The pen or brush was held at a 30-degree angle from perpendicular
A little more challenging to read because they are compacted

Roman cursive

For writings with some intended performance, both square and rustic capitals were commonly used
Daily transactions were usually written in cursive

Uncials

Roman cursive features were included into the Uncials, particularly in the shapes of the letters A, D, E, H, M, U, and Q
Some scholars believe that uncials relate to letters that are one inch high because the Latin word "uncia" means "a twelfth of anything"
Uncials' broad shapes are easier to read at small sizes than rustic caps are

Half uncials

A further formalization of the cursive writing
Indicate the official start of lowercase letterforms
Full of ascenders and descenders, 2000 years after the Phoenician alphabet's inception

Caroline miniscule

In order to standardise all ecclesiastical texts, Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789
Alcuin of York, the abbot of St. Martin of Tours, received this task from him
The sentences were rewritten by the monks using capitalisation, punctuation, majuscule (uppercase), and minuscule, which set the standard for calligraphy for a century

Image of :

Square capitals, Rustics capital, Roman cursive, Uncials, Half uncials and Caroline minuscule.

Blackletter to Gutenberg's type

Blackletter

Regional variations of Alcuin's writing appeared when Charlemagne's dominion collapsed
A condensed, sharply vertical letterform known as Blackletter or texture became popular in northern Europe
The 'rotunda' hand, which is rounder and more open, became popular in the south
The humanistic play that is being performed in Italy is based on Alcuin's tiny

Gutenberg

Gutenberg was skilled in chemistry, metalworking, and engineering
He gathered them all together to create pages that faithfully replicated the handwriting of the northern European Blackletter scribe.
Each letterform in his type mould required a different brass matrix, or negative impression

Image of Blackletter and Gutenberg

Text type classification

1450 Blackletter

Earliest printing type
Based on the manual copying techniques then employed in Northern Europe for books
E.g: Cloister Black, Goudy Text

Fig 1.2 1450 Blackletter

1475 Oldstyle

Evolved over 200 years
Move across Europe, from Italy to England, from their calligraphic origins
Based on the lowercase forms used by Italian humanist scholars for book copying
The uppercase letterforms found inscribe on Roman ruins
Eg: Bembo, Caslon, Dente, Garamond, Janson, Jenson, Palatino

Fig 1.3 1475 Old style

1500 Italic

First italics were close-set and condensed
To fit more words per page
Italics eventually cast to complement roman forms
Nearly all text typefaces have had corresponding italic forms since the sixteenth century

Fig 1.4 1500 Italic

1550 Script

Isn't totally appropriate in long text settings
Because it was original designated to mimic engraved calligraphic forms
Has consistently been widely accepted in shorter applications
Forms ranged from formal and traditional to casual and contemporary
Eg: Kuenstler, Mistral, Snell Roundhand

Fig 1.5 1550 Script

1750 Transitional

Refinement of oldstyle forms
Was accessible in part because of developments in casting and printing
Thick to thin relationships were exaggerated, brackets were lightened
Eg: Baskerville, Bulmer, Century, Time Roman

Fig 1.6 1750 Transitional

1775 Modern

A further rationalisation of old style letterforms
Serifs were unbracketed
Extreme contrast between the thick and thin strokes
Scotch Romans more closely resemble transitional forms
Eg: Bell, Bodoni, Caledonia, Didot, Walbaum

Fig 1.7 1775 Modern

1825 Square Serif/ Slab Serif

Originally heavily bracketed serif, with little variation between thick and thin strokes
Responded to the newly developed needs of advertising for heavy type in commercial printing
The brackets were dropped as hey evolved
Eg: Clarendon, Memphis, Rockwell, Serifa

Fig 1.8 1825 Square Serif/ Slab Serif

1900 Sans Serif

These typefaces eliminated serifs altogether as their name implies
Did not become wide-spread until the beginning of the twentieth century
Variation tended toward either humanist forms or rigidly geometric
Referred to as grotesque and Gothic
Eg: Akzidenz Grotesk, Gill Sans, Franklin Gothic, Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade Gothic, Univers

Fig 1.9 1900 Sans Serif

1990 Serif/Sans Serif

A recent development
Enlarges the notion of a family of typefaces include both serif and sans serif alphabets
Eg: Rotis, Scala, Stone

Fig 1.10 1990 Serif/Sans Serif

Week 2 - Lecture 02 : Kerning & Letter spacing

Kerning : Automatic adjustment of space between letters
Letter spacing : Add space between the letters
Tracking : Addition/removal of space

Fig 2.1 Normal tracking, tight tracking and loose tracking

Flush Left

Most closely mirrors the asymmetrical experience of handwriting
Starts at the same point
Ends wherever the last word on the line ends
Spaces between word are consistent
Allow type create even grey value

Centered

Imposes symmetry upon the text
Equal value and weight to both ends of any line
Creates strong shape on the page
Its important to amend line breaks so that text won't jagged

Flush right

Emphasis on the end of the line
Can be useful in situations like captions
Where relationship between text and image might be ambiguous without a strong orientation to the right

Justified

Imposes a symmetrical shape on the text
Achieved by expanding/ reducing spaces between words and sometimes, between letters
Produce 'rivers' of white space running vertically through the text

Example of Flush left, Centered, Flush right and Justified

Texture

It's critical to comprehend how various typefaces feel in text
Various fonts works well with various massages
A good typographer need to know which typeface best suits the message
Heavier stroke width or more generous x-height produce darker mass on page than lighter or smaller x-height
Sensitivity to these colour variations is essential

Leading and line length

Encouraging easy, extended reading is the aim of typesetting
Text set too tightly will caused reader easily loose their place
Text set too loosely will distract reader from the material at hand
Line length affects how text should be led
Short lines require less reading, vice versa
Keep the line length between 55-65 characters will be best

Week 3 - Lecture 03

Indicating Paragraphs

'pilcrow' are one of the options for indicating paragrapghs

Fig 3.1 Example of using Pilcrow for indicating paragraph

'Line space' between paragraphs
If line space is 12pt, then paragraph space is 12pt
Ensures cross-alignment across columns of text

Fig 3.2 Example of 'line space' between paragraph

Fig 3.3 Linespace vs Leading

Widows and orphans

Widow : A short line of type left alone at the end of a column of text
Orphan : A short line of type left alone at the start of new column

Fig 3.4 Example of widow and orphan

Week 4 - Lecture 04 : Basic/ Describing letter form

Baseline/ Median/ X-height

Baseline : The imaginary lines, the visual base of letterforms
Median : The imaginary lines defining the x-height of the letterforms
X-height : The height in any typeface of the lowercase 'x'

Fig 4.1 Baseline, median and x-height

Stroke

The font

Describing typefaces

Week 5 - Lecture 05

Understanding letterforms

Suggest symmetry but it's not symmetrical
Easy to see 2 different weights of the Baskerville stroke form
Each bracket connecting the serif to them has a unique arc

Fig 5.1 Baskerville 'A'

Width of left slope is thinner than the right stroke

Fig 5.2 Univers 'A'

The lowercase 'a' of two seems similar sans-serif typefaces (Univers and Helvetica)
It's easy to see the difference between this 2 by comparing the letterform's stem finishes and the way bowls meet stems

Fig 5.3 Helvetica (left) and Univers (Right) 'a'

Curved stroke must rise above the median/ sink below the baseline
To be the same size the vertical and horizontal strokes they adjoin

Fig 5.4 Median and baseline

Counter form
The space describes and often contained, ny the strokes of the form
The counter form includes the spaces between them when letters are joined to form words
Latter is important concept when working with letterform like lowercase 'r' that have no counters per se

Fig 5.5 Counterform

Best way to understand the form and counter of the letter is to examine them in close details
Able to provide good feel for how the balance between form and counter is achieved
A palpable sense of letterforms's unique characteristic

Fig 5.6 Helvetica 's' (Left), Baskerville 'g; (Right)

INSTRUCTIONS

Task 1 - Exercise 1 (Type Expression)

We are given a list of words to chose from to make type expressions for this task. They are smoke, soup, spooky, power, impact, crunchy, drunk, and fold. Only the typefaces that have been given to us—Adobe Caslon Pro, Bembo, Bodoni, Futura, Gill Sans, Garamond, New Baskerville, Janson, Serifa, and Univers —may be used by us. There are no graphical elements and no character distortions permitted.

Sketches and Design concept

The words I chose were spooky, power, drunk and soup . These rough sketches are sketched digitally

Spooky

Inspiration from the eerie smiley face
As I believed that using a smiley face would be the simplest and most direct way to convey the word 'spooky'
Three sketches (1a,1c, 1d) feature various happy faces, and one drawing (1b) has a drippy appearance to evoke a spooky feeling

Power

2a : I decided to use the power button symbol to replace the 'o'
2b : For this I use a light bulb to represents the word 'power'
2c : I made the 'E' became a charger adapter and it is attached to the 'R' to provide power
2d : I enlarge the 'W' and made it to looks it is strong enough to carry the other alphabets

Soup

3a : I made the 'S' into a ladle
3b : I turned the 'U' into a bowl of soup then the 'p' beside the bowl is a spoon
3c : I create a bowl at the bottom of 'o' and 'u' then made the 's' into spoon
3d : I made the 'S' and 'P' into the handle of the bowl

Drunk

4a : I added shadow and make it slightly slanted so that it gives a sense of giddiness
4b : I turned the 'u' into a wine glass that filled with wine
4c : I made this looks wavy to shows the relaxation of a drunk people and like how they loss control after drunk
4d ; The word is slanted as I want it to give a sense of unbalance

Digitisation ( process)

Spooky

Drunk

Soup

Power

Final Task 1- Exercise 01 : Type expressions ( PDF)

Final Task 1 - Exercise 01 : Type Expressions (JPEG)

Animation (process)

To create an animated type expression, we must select one of the type expression that we created in the previous task. 'Power' was my choice for this task. Before starting my own animated type expression, I watched the video that Mr Vinod provided because it show how to complete this task, I create all of the frames in Adobe Illustrator once I understand how to create the animated type expressions. I've created about 10 frames , below shows the frames that I've created in AI.

After I done with all this frames I start to arrange them and animate it in photoshop.

Final Animated Type Expression

Task 1 - Exercise 1 ( Text formatting)

In the fourth week, we were assigned the task of formatting text in Adobe InDesign, I came up with three exercises throughout this task.The first involved learning about kerning and tracking techniques using our names and ten fonts which Mr Vinod had provided. The second exercise, I practice how to modify column interval space, kerning, and hyphenation. Meanwhile, the third exercise consisted of incorporating the skills that I have learnt from the first and second exercises. We were taught to use cross alignment to make our work as well as how to adjust our context using the baseline grid, margins and columns.

Text formatting with kerning

First layout

Final text formatting (without grid) - PDF

Final text formatting (with grid) - PDF

Final text formatting (without grid) - JPEG

Final text formatting (with grid)-JPEG

Head

Font/s: Janson Text LT Std
Type Size/s: 28pt
Leading: 12pt
Paragraph spacing: -

Body

Font/s: Univers LT Std
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 50-58
Alignment: Left justify

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

Reflections

Experience

Trough completing the assigned tasks and viewing the lecture videos that my tutor provided, I was able to learn the fundamentals of typography in this 5 weeks. Since we were unable to incorporate any graphical elements , I found it extremely difficult to formulate ideas during the first stage of this task.Digitising the fonts was one of the difficulties I encountered because I am completely new to Adobe Illustrator and InDesign so it took me some time to become comfortable and knowledgeable with the program's tools.Other than that, I lacked the confidence to present my work in class because I was easily swayed by other people's opinions, particularly when they weren't positive. But I'm getting used to it now, and I've discovered that when I watch other students work in class, I can push myself to produce better work. This has inspired me to work even harder at honing my tool skills so that I can produce better work.

Observations

After interacting with typography, I discovered that it's more complicated than I had previously believed. The number of terms used to describe the letterforms and the amount of additional information they contain astounded me. Other than that, I was amazed at how a small alteration to the text arrangement could have a significant impact on the readers.

Findings

As a student of design, I've found that it's crucial to practise becoming acquainted with the tools from applications like Adobe Illustrator. I struggle a lot with it because, although I occasionally come up with a lot of ideas, my skills aren't developed enough to digitise them. This, in my opinion, has prevented me from creating more outstanding artwork. I must thus use these apps more and look for more tutorial videos to watch in order to gain as much experience as possible.

Feedback

Week 2

General feedback : Must use the 10 fonts provided and be familiar how the typefaces looks like, avoid graphic elements
Specific feedback : -

Week 3

General feedback : Make the word larger to take over the space, avoid distortion while digitise our artwork
Specific feedback : I accidentally distort the word 'Drunk' , I didn't notice it until Mr Vinod inform me ,I corrected it right after he told me.

Week 4

General feedback : The design is better to be simpler and can easily brings out the messages to the audiences
Specific feedback : could be improve by making the gif smoother

Week 5

General feedback : the column size have to be same for the same text as different column will caused it looks like different context
Specific feedback : -

Search This Blog

Chan Suet Yee 0358427

TYPOGRAPHY TASK 1 / EXERCISES

LIST

LECTURES

INSTRUCTIONS

Reflections

Feedback

Further reading

Comments

Post a Comment

Popular posts from this blog

Typography Final Compilation & Reflection

Typography Task 3