TYPOGRAPHY | TASK 1 : EXERCISES

September 22, 2024

TYPOGRAPHY | TASK 1 : EXERCISES

23.09.2024 - 28.10.2024 / Week 1 - Week 6

Madeline Ordelia Tjahjadi / 0376920

Bachelor of Design Creative Media

Typography

Task 1 : Exercise

1. Lectures

Lecture 1 : Type_0_introduction

Typography : the act of creating letters, creation of typefaces or type families, it can come in animated form (gif, movie titles). We can see typography basically everywhere.

Typography has evolved over 500 years from calligraphy > lettering > typography

Typography can be used for some occupation such as typesetters, compositors, graphic designer, manga artist, etc.

Fonts refers to individual font or weight within a typeface

fig 1.1.1 font example

Typeface refers to the various families that do not share characteristic

fig 1.1.2 typeface example

Lecture 2 : Typo_1_Development

Timeline

a. Early Letterform development : Phoenician to roman

Initially writing meant scratching into wet clay with sharpened stick or carving stone. Uppercase forms are simple combination of straight lines and pieces of circles.

fig 1.2.1

The greeks changed the direction of writing, develop writing style called 'boustrophedon' (read from right to left and left to right), they also change the orientation of the letterforms

fig 1.2.2

Etruscan

fig 1.2.3 late 1st century

carvers working in marble painted letterform, they change the weight into a more carved letterform

fig 1.2.4

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

Square capitals

fig 1.2.5

serifs added to the finish of the main strokes

Compressed version of square capitals

fig 1.2.6

easier to write but harder to read due to their compressed nature

Both square and rustic capitals (roman cursive)

fig 1.2.7

reserved for documents of some intended performance,

development of the lowercase letter form was a result of fast writing

unicials and half unicials

fig 1.2.8

incorporated aspects of the Roman cursive handwritting (more readable at small sizes)

Charlemagne

fig 1.2.9

the first unifier at europe since the romans,

set a standar for calligraphy

Blackletter to Gutenberg's type

fig 1.2.10

a rounder more open hand called 'rotunda' is popular because of the similarities to the humanistic script in Italy, Gutenberg's skills included engineering, metalsmithing, and chemistry

Text type classification

fig 1.2.11

Lecture 3 : Typo_3_Text_P1

Text/Tracking : Kerning and Letterspacing

'kerning' refers to the automatic adjustment of space between letters
'letterspacing' means to add space between the letters
'tracking' refers to addition and removal of space in a word or sentence

fig 1.3.1 with and without kerning

normal tracking, tight tracking and loose tracking

fig1.3.2

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.

Text/Formatting text

Flush left : most closely mirrors the asymmetrical experience of handwriting
Centered : symmetry upon the text, equal value
Flush right : emphasis on the end of a line as opposed to its start
Justified : like centering, imposes a symmetrical shape on the text

Text/Texture

fig 1.3.3

Text/Leading and Line Length

Type size : should be large enough to be read easily at arms length, like holding a book in your lap.
Leading : set too tightly encourages vertical eye movement; a reader can easily loose their place.
Line Length : appropriate leading for text

Text/Type Specimen Book

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 1.3.4 sample type specimen sheet

Lecture 4 : Typo_4_Text_Part 2

Text/ Indicating Paragraphs

fig 1.4.1 pilcrow

pilcrow is a holdover from medieval manuscripts

fig 1.4.2 line space

Line space (leading) is a gap between paragraphs hence if the line space is 12pt then the paragraph space is 12pt, this ensure close-alignment across columns.

Text/ Widows and Orphans

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

fig 1.4.3

in justified widows and ophans are considered serious gaffes the solution are :

widows : rebreak line endings through out paragraph so that the last line of any paragraph is not noticeably short
orphans : require more care, make sure that no column of text starts with the last line of the preceding paragraph

Text / Highlighting text

There's so many different way to highlight text. You can use italic, bold, make it in different font, or change the color of the text.

fig 1.4.4 example of highlighting

Text / Headline within text

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

fig 1.4.5 'A' head are set larger than the text

B head is subordinate to 'A' head, indicate a new supporting argument or example for the topic at hand

fig 1.4.6 small caps, italic, bold serif and bold san serif

C head is highlighting specific facets of material within B head text, C heads in this configuration are followed by at least an em space for visual separation.

fig 1,4,7 C head shown in small caps, italics, serif bold etc

Text / Cross alignment

Cross aligning headlines and captions with text type reinforces the architectural sense of the page—the structure—while articulating the complimentary vertical rhythms.

fig 1.4.8 four lines of caption type (9 pts), cross align with three lines of text type (13,5 pts)

Lecture 5 : Typo_2_basic

Basic/Describing letterforms

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

fig 1.5.1

Stroke : any line that that defines the basic letterform
Apex/Vertex : the point created by joining two diagonal stems

fig 1.5.2 apex above and vertex below

Arm : short strokes off the stem of letterform

fig 1.5.3

Ascender : portion of the stem of a lowercase letterform, project above median

fig 1.5.4

Barb : the half-serif finish on some curved stroke

fig 1.5.5

Bowl : the rounded form that describes a counter

Bracket : transition between the serif and the stem

Cross bar : horizontal stroke that joins two stem

Crotch : the inferior space where two strokes meet

Descender : portion of stem that projects below the base line

Ear : the stroke extending put from the main stem

Em/En : originally referring to the width of uppercased M, and em is now the distance equal to the size of the typeface. An en is equal to half of em.

Ligature: the character formed by a combination of two or more letterforms

Link: The stroke that connects the bowl and the loop of a lowercase g

Spine: The curved stem of S

Stress: The orientation of the letterforms, indicated by the thinning of the stroke in round forms

Swash: The flourish that extends the stroke of the letterform

Terminal : the self contained finish of a stroke without a serif

The Font

The full font of typefaces contains much more than 26 letters, to numerals, and a few punctuation marks. It includes uppercase, lowercase, small capitals, uppercase numerals, lowercase numerals, italic, punctuation, miscellaneous characters, and ornaments.

Describing Typefaces

Roman : derived from inscriptions of roman monuments.
Italic : fifteenth century italian handwriting
Boldface : thicker stroke (semibold, medium, black, and extra bold)
Light : lighter stroke
Condense : version of roman form
Extended : variation of roman font

fig 1.5.6

2. Instruction

3. Process Work for Type Expression

3.1 Research

Making typography needs a proper research about what we're going to express through the text. I began searching some ideas through pinterest about the word given.

fig 3.1.1 compilation of reference for the words

I'm searching the definition for each word :

Cry; shed tears, typically as an expression of distress, pain, or sorrow.

Climb; move with effort, especially of a mountain or hill.

Swirl; move in a twisting or spiralling pattern.

Sleep; rest, which the eyes are closed.

*all from oxford languages

3.2 Ideation

The first ideas after some searching

fig 3.2.1 sketches week 2

After some consultation with Mr.Max, he then accepted the climb one but needed some work for the others. I began to work for the remaining words that needed some improvement.

fig 3.2.3 sketches week 3

After finalizing the four words, i began to choose which word i will be animate. With some consideration of my final digitize word, i choose "sleep".

The idea is to make the "lee" word between the 's' and 'p' drop like sleeping. To make sure the animation came out smooth i made 15 frame in total.

fig 3.2.4 frames for animation

I tried to make some "domino'"effect, so when the "L" word fall it hit the "e" and began to fall into each other.

After i made the frames, i realise that the last two frame make the animation not smooth, so when i attempt to export it to photoshop i delete the last 2 frame.

fig 3.2.5 1st attempt for animation

3.3 Final Outcome

fig 3.3.1 final type expression "cry, sleep, swirl, climb" (png) Week 3

fig 3.3.2 final animated type expression (GIF) Week 4

4. Process Work for Text Formatting

4.1 Kerning and Tracking

Start by typing our name 10x and change the font to 10 type of font that we already downloaded.

fig 4.1.1 without kerning, week 5

After use kerning and tracking

fig 4.1.2 final outcome with kerning and tracking, week 5

4.2 Text formatting

In this task we were going to use leading and correcting paragraph. We started by create a space for headline exploration.

fig 4.2.1 progress 1, week 5

After doing some digital exploration for the headline, i come up with 6 different layout

fig 4.2.2 layouts draft, week 5

HEAD LINE
Typeface: Bembo Std

Font/s: Bembo Std Bold
Type Size/s: 72 pt
Leading: 60 pt
Paragraph spacing: 0

BODY
Typeface: Bembo Std

Font/s: Bembo Std Regular
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 50-63
Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom
Columns: 2
Gutter: 10 mm

Final outcome

4.2.3 Final text-formatting layout (JPEG), Week 6

4.2.4 Final text-formatting layout (PDF), Week 6

4.2.5 Final text-formatting layout with grids (JPEG), Week 6

4.2.6 Final text-formatting layout with grids (PDF), Week 6

HEAD LINE
Typeface: Bembo Std

Font/s: Bembo Std Bold
Type Size/s: 72, 60,15 pt
Leading: 60 pt
Paragraph spacing: 0

BODY
Typeface: Bembo Std

Font/s: Bembo Std Regular
Type Size/s: 9 pt
Leading: 11 pt
Paragraph spacing: 11 pt
Characters per-line: 50-63
Alignment: left justified

Margins: 100 mm top, 20 mm left + right + bottom
Columns: 2
Gutter: 10 mm

4. Feedback

4.1 Type Expression

Week 1

General Feedback : making blog for our assignment and introduced to our module

Week 2

General Feedback : the additional shape must be one with the word.

Spesific Feedback : i need to work more for sleep, cry and swirl, the climb one was accepted.

Week 3

Specific Feedback : The cry need additional shape like tears running down, to express cry more. The swirl and sleep was accepted.

Week 4

Specific Feedback : Need a lot of frame to make the animation appear smoother.

4.2 Text Formatting

Week 5

General Feedback : Need to adjust the space between the paragraph to make it look neat and no widow or orphan.

Week 6

Spesific Feedback : Overall good layout but Mr. Max leaning towards the layout number 4 because it is easier to read.

5. Reflections

Week 2

I'm struggling using the adobe illustrator at first because the sketch that i draw was complicated to digitize, but Mr.Max then told me to use some other tools to make it easier.

Week 3

This week i try to digitize the first word that i sketch using the tools that Mr. Max told me to use and i'm able to do it.

Week 4

Struggle to animate because we have to make the frame first on illustrator, it takes time because there's so many layer but after the frame was made, animating it was so much easier.

Week 5

This week lesson was simple but need a lot of work to make it look neat and we were using many tools so i'm kinda struggling but it turn out good.

6. Further Reading

fig 6.1 The Complete Manual of Typography : a guide to setting perfect type

This book talks about the history and theory of typography from the invention of movable type to digital age, anatomy, composition, and what makes good type good (and bad type bad).

fig 6.2 what makes good type good (and bad type bad)

On this page i learn about overly loose spacing and unbalanced spacing. Loose spacing is often seen in magazine because less handwork needed to tidy up problem, but it's actually abnormal and a sloppy practice. Type set this way is not a pretty sight, but it does have the practical benefit of always looking the same. For unbalanced spacing, sometimes the space can be little or overly loose space, flexibility in adjusting spacing must be carefully balanced to avoid poor typesetting results.

Search This Blog

Madeline Ordelia Tjahjadi (0376920)