Typography / Exercises

April 02, 2021

Typography / Exercises

29.03.2021 - 02.05.2021 (Week 1 - Week 5)

Wong Wan Jun (0338248)
Bachelor of Computer Science (School of Computer Science and Engineering)(Minor)
Task 1 / Exercises

LECTURES

Week 1: Introduction

In the first lecture, we get to know our lecturers for this module, Mr.Vinod and Mr. Shamsul. Before briefing us on the module information and expectations, they also introduced some platforms that frequently used to share information and take attendance. Moreover, Mr. Vinod shared tutorial video based on E-portfolio. We were asked to update it weekly and keep it organised well so that we are able to document every design process logically. After that, we are briefed on our first task for Typography which is 'Type Expression' and some lecture videos are provided to us at our own disposal for independent learning.

Typography

basically a creation of a typeface and it is widely used in animations, software applications, website, products labeling, signage system etc.

plays an important role in delivering information.

For example, the effectiveness of signage system is directly proportional to the skill levels in typography.

bad typeface will lead to misconceptions and ramifications.

Week 2: Historical Development & Timeline

Letterform

was early developed by Phoenician back in 4th Century B.C.E.

Fig1.1: Letterforms-Typographic Anatomy

Tools and mediums play an important role on how the letterform looks like. Then, the Greeks decided to change the direction of writing. This style of writing is called Boustrophedon, which meant that lines of text are read alternately from left to right then right to left. The orientation of the letterforms also change followed by the change of direction.

Timeline of typography development

1450 Blackletter⟶ 1475 Old style⟶ 1500 Italic ⟶ 1550 Script ⟶1750 Transitional ⟶

1775 Modern ⟶ 1825 Square Serif/ Slab Serif⟶ 1990 Serif/ Sans Serif

Fig1.2: Timeline of Serif Typefaces

Week 3: Basic // Describing Letter Fonts

Jargon in Typography

Fig1.3: Typography line terms

Baseline

Imaginary baseline

Median

Imaginary line that defines x-height

x-height

Height of the lowercase x in any typeface

Stoke

Any line that defines basic letterform

Apex/ Vertex

top point where two strokes are joined together(A for upper, V for bottom)

when a horizontal stroke is not attached to a stem on one end

Barb

Half serif finish of curved stroke

Bowl

circle found in letterform. Eg. d, b, c, e, o, etc.

Cross stroke

stoke found in lowercase t and f.

Crotch

Interior space within letterform

Descender

part of letter drops below baseline. Eg. g, j, p, q, and y.

Finial

curved of tapered end of a stroke.

Ligature

special character that joined 2 characters
improve the efficiency of reading. Eg. fi.

Spine

S is the best example for spine.

Stress

diagonal or vertical change in stroke width across a letter.
Diagonal stress is based on handwriting.

Small uppercase

uppercase letterforms drawn to x-height of the typeface.
prevent visual disruption when a lot of uppercase letters were used together.

Ascender height tends to be slightly above capital letter ( cap height) to create an illusion that they are of same height with capital letters.

Describing typeface

Roman- book
Boldface -thicker stroke then roman form
Light
Condense - Roman form in compressed state
Extended
Italics refers to Italian handwriting
Oblique is based on Roman form of type face.

TypeTalk: Italic vs. Oblique | CreativePro Network

Fig1.4 : Italic vs Oblique

9 most essential typefaces that represent 500 years of type design:

Fig1.5 : Typefaces from lecture's video

Week 4: Text 1

Kerning

automatic adjustment of space between letters.
kern when using full uppercase letters.

Letterspacing

need to add space between the letters

Tracking

addition & removal of space in word / sentence

Counterform

blackspaces between the white.
is broken when adding spaces between letterforms.
once broken, readability reduced.

Uppercase letterforms: designed to be able to stand on their own.
Lowercase letterforms require counterform to maintain the line of reading.

Fig 1.6: Kerning & Letterspacing

Text Formatting

Flush left

Each line starts at the same point and ends accordingly to its last word.
Spaces are consistent throughout the text, allowing the type to create even grey value.

Centered

Symmetry upon the text, assigning equal weight & value to both ends of line.

Flush right

Emphasis on the end of line as opposed to its start.
Hard to read.

Justified

achieve symmetrical shape by adding / reducing spaces between words.

Text more important than Type

If font before text, reconsider typeface used.

Ascender and descender height < x-height, higher readability.

Leading & Line Length

Type Size

Large enough to read easily at arm's length

Leading

Over-tightly type encourages vertical eye movement (readers lose focus easily)
Over-loosely type creates stripped patterns that distract readers.

Line length

Shorter line requires less leading
Longer line requires more leading.
Keep line length between 55-65 characters.
Extremely long / short line lengths impairs reading.

Type Specimen Book

Provide an accurate reference for type, type size, type leading, type line length etc.
Shows samples of typefaces in various different sizes (allow reasonable type choice)
Compositional Requirement

Text should create a field that occupy a page / screen.

Enlarge type to 400% on screen to get clear sense of relationship between descenders on one line and ascenders on line below.
Nothing replaces looking closely at an actual point out of work.

Week 5: Text 2

Indicating Paragraph

Pilcrow -- ¶

indicate paragraph space.

Line space
Indent

size of line spacing / point size of text

Indentation is best used when the text is justified.

ragging on right is bad.

Widows & Ophans

Reducing 0.5pt

match with fonts x-heights
don't stand out in a small amount of text

In document which contains large amount of texts, lowercase numeral is recommended.
Maintain left reading axis when highlighting text.

ensure good readability.

Graphical elements bullet points can be placed outside the margin
Single ' : foot ; double '' : inches

Information of Hierarchy

A Head

main headline

B Head

subheadline

C Head

lorem Ipsum

Cross Alignment

reinforces architectural sense of the structure of the page.

INSTRUCTIONS

TASKS

Exercise : Type Expression

Our task for this week is sketching ideas for word expression based on our creativity. We are asked to pick 4 out of 7 words (slice, scream, wave, punch, eat, spin, point) from poll. We then use Adobe Illustrator to digitise the words based on a set of typefaces provided.

Some example of Type Expression:

Fig 2.1: Wave (Reference: Pinterest), 4th April 2021

Fig 2.2: Sleepy (Reference: Pinterest), 4th April 2021

Fig 2.3: Point (by Mr.Vinod), 4th April 2021

Word selected: Point, Eat, Slice, Spin

Sketches:

Fig 3.1: Sketches, 6th April 2021

Digitized Words:

Fig 3.2: Final Type Expression, 14th April 2021

Type Expression Animation:

For animation, I choose the word 'eat'. I plan to make it visually look like the alphabet 'a' and 't' are getting into big 'e'.

Fig 3.3: Progress of Type Animation (Illustrator), 16th April 2021

Fig 3.4: Type animation 1st attempt, 16th April 2021

After animating it, the result not really same as my expectation. The motion of 'a' was too simple and overall the animation move too fast. I decided to improve it by slower the animation and add some motion to 'a'.

Fig 3.5: 2nd Type Animation, 16th April 2021

Mr Vinod suggested me to upright my 'e' while 'a' and 't' drop from top.

Fig 3.6: Progress of Type Animation (Illustrator), 23th April 2021

Fig 3.7: Final Type Animation, 23th April 2021

Exercise : Formatting Text

We were guided by pre-recorded lecture's video to complete exercises by using Adobe InDesign.

Fig4.1: Name with different typefaces, 27th April 2021

We then start to edit document layout. It is important to ensure we have suitable font size (8 to12), line length (55 to 65), leading (+2/2.5/3pt of font size) and paragraph spacing (follow leading). In order to make our document looking better, we may turn off hyphenate and adjust on kerning & tracking(+/- 3). It also reduce ragging of words efficiently.

Fig4.2: Progress of Formatting Text (Indesign), 29th April 2021

Fig4.3: Formatting Text, 29th April 2021

Fig4.4: Final Formatted Text, 29th April 2021

FEEDBACKS

Week 1:

No feedback received.

Week 2:

General feedback:

For word expression, most of us are insufficient in exploration and slightly word distortion is allowed. We are advised to prevent using graphic elements other than the shades of grey to express the words. Mr. Vinod reminded us to ensure we had done our weekly task before class and avoid getting late to class.

Specific feedback:

I have received feedback from group divided. They like my word design layout which is clean but more exploration will be better.

Week 3:

General feedback:
Mr. Vinod asked us not to delete other people's feedback and change the default typeface. Also, switch on the camera to ensure we are concentrated in class.
Specific feedback:

Overall the expressions match the word meaning except for “point” can be improved. They did sit well on art-board but some of the composition was not enough impactful. I should explore more to improve my design.

Week 4:

General feedback:
Mr Vinod encouraged us to read some related books and reminded us to update our e-portfolio weekly.

Specific feedback:
Mr Vinod & Mr Shamsul commented on my e-portfolio. They reminded me to add the horizontal rule to my blog and date to image caption. Also, read some related books so I can fill further reading section. Mr Vinod suggested me on type animation to upright my alphabet 'e' while alphabet 'a' and 't' drop from top.

Week 5:

General feedback:
Mr Vinod reminded us to watch prerecorded youtube lecture video.

Specific feedback:

The kerning and tracking is appropriately done. Adjustment of font size(10pt), line length, leading(12pt) & paragraph spacing(12pt) is suitable and choice of left alignment is pleasant to read. Well controlled ragging and established cross-alignment. Widows and orphans present.

REFLECTIONS

Experience:
I was immersed throughout first lecture given and looking forward to next lecture. After first lecture, I have a clearer understanding on what I am going to learn in this module and what should I do to gain more relevant knowledge. It was undeniable that this module requires a lot of effort in order to complete every tasks given on time. I hope that I could handle this module well.
Observation:
Although online learning was a big challenge, both lecturers and students are giving full cooperation on communication. We are able to communicate effectively through online platforms. Our doubts were solved instantly and lecturers were able to receive our respond immediately. However, being a disciplined student is a prerequisite for virtual learning.
Findings:
I was inspired when watching video given and doing some readings. Reading is crucial for typography as we could gain better sense and understanding something that cannot be taught by others. It was not easy to process a creative design as every design has a story and it required designer to work hard enough. Documenting every design process was beneficial for me because it makes me feel organised.

Search This Blog

Wong Wan Jun (0338248)