Typography / Task 1

April 03, 2023

Typography / Task 1

4/4/2023-12/5/2023
Lim Jun Teng/0362890

GCD60104/Typography/Bachelor of Design (Hon) in Creative Media
Task 1:Exercise 1 & 2

LECTURES

Week 1(a) / Introduction

Typography: Typography is the creation of typefaces or type families. Typography is also animation. It is visible and prevalent in website designs and app design too. So we can see typography at many ways .Consequently typography is a fundamental aspect in any design studies discipline.

Fig1.1 Typography

Font: font refers to the individual font or weight within the typeface but within those typefaces maybe fonts from different weights or styles.

Fig1.2 Font

Typeface: refers to the various families that do not share characteristics.

Fig1.3 Typeface

Week 1(b) / Development

Early Development / Timeline:

Early letter form development is from Phoenician to Roman. Uppercase forms are simple combination of straight lines and pieces of circles , as the materials and tools (clay , chisel)of early writing required.
Phoenicians wrote from right to left
The Greek developed a style of writing from right to left and left to right called "boustrophedon"

Fig1.4 boustrophedon

They changed the direction of reading they will also changed the orientation of the letterforms.
Etruscan carvers working in marble painted letterforms before inscribing them. Their strokes will change in weight from vertical to horizontal and the beginning of the stoke at start and end will carried over.
Phoenician to Roman is from 1000B.C.E until 100B.C.E.

Fig 1.5 Phoenician to Roman

Square Capital — serifs added to the finish of the main strokes. The variety of stroke width was achieved.
Rustic Capital — more easier to write than Square Capital but they were slightly harder to read due to their compressed nature

Fig 1.6 rustic capital

Lowercase is more faster to write
Uncia — small letters (small size than rustic capitals)

Fig 1.7 uncia

Half-uncia — the beginning of lowercase letterforms

Fig 1.8 half-uncia

They rewrote the texts using many types of way and punctuation which set the standard for calligraphy for a century.

Text Type Classifications:

Blackletter to Gutenberg's type — variations upon Alcuin's script. In northern Europe , the letterform know as Blackletter or texture gained popularity . In the south they called 'rotunda'. The humanistic script in Italy is based on Alcuin's miniscule.

Fig 1.9 Blackletter

Gutenberg's skill included engineering , metalsmithing and chemistry. His type mold required a different brass matrix , or negative impression , for each letterform.

Fig 1.10 Gutenberg's

They also use the text type on the 42 lines bible. This is more important thing to change the text type's life.

Fig1.11 42 lines of bible

Fig1.12 timeline part 1

Fig 1.13 timeline part 2

1450 Blackletter — the earliest printing type, its forms were based upon the hand-copying styles that were then used for books in northern Europe
1475 Old style — Based upon the lowercase forms used by Italian humanist scholars for book copying and the uppercase letterforms found inscribed on Roman ruins.
1500 Italic — Echoing contemporary Italian handwriting, the first Italics were condensed and close-set.
1550 Script — Attempt to replicate engraved calligraphic forms
1750 Transitional — A refinement of old style forms, this style was achieves in part
1775 Modern — This style represents a further rationalization of old style letterforms.
1825 Square Serif / Slab Serif — with little variation between thick and thin strokes
1900 Sans Serif — Eliminated serifs
1990 Serif / Sans Serif — Include both serif and sans serif letter

Fig 1.14 text type classification

Week 2/ Basic

Describing letterforms:

Knowing letterform's component parts make it much easier to identify specific typefaces.

Baseline — Visual base of the letterforms
Median — Line defining the x-height of letterforms
X-height — The height in any typeface of the lowercase

Fig 2.1 Baseline, Median and X-height

Stroke — Any line that defines the basic letterform

Fig 2.2 Stroke

Apex/Vertex — Point created by joining two diagonal stems.

Fig 2.3 Apex/Vertex

Arm — Short stokes off the stem of the letterform

Fig 2.4 Arm

Ascender — Portion of the stem of a lowercase letterform that projects above the median.

Fig 2.5 Ascender

Barb — Half-serif finish on some curved stoke

Fig 2.6 Barb

Beak — Half-serif finish on some horizontal arms

Fig 2.7 Beak

Bowl — Rounded form that describes a counter

Fig 2.8 Bowl

Bracket — Transition between the serif and the stem

Fig 2.9 Bracket

Cross Stroke — Horizontal stroke in a letterform that joins two stems together.

Fig 2.10 Cross Stroke

Crotch — Interior space where two strokes meet.

Fig 2.11 Crotch

Descender — Portion of the stem of a lowercase form that projects below the baseline.

Fig 2.12 Descender

Ear — Stroke extending out from the main stem or the body of the letter form.

Fig 2.13 Ear

Em — Distance equal to the size of the typeface.
En — Half of the em.
Finial — Rounded non-serif terminal to a stroke.
Ligature — Character formed by the combination of two or more letterforms.

Fig 2.14 Ligature

Link — Stroke connecting the bowl and the loop of a lowercase G.
Loop — Bowl created in the descender of the lowercase G (in some typefaces).
Serif — Right-angled or oblique foot at the end of the stroke.
Shoulder — Curved stroke that is not part of a bowl.
Spine — Curved stem of the S.
Spur — Extension the articulates the junction of the curved and rectilinear stroke.
Stem — Significant vertical or oblique stroke.
Stress — Orientation of the letterform, indicated by the thin stroke in round forms.

Fig 2.15 Stress

Swash —Flourish that extends the stroke of the letterform.

Fig 2.16 Swash

Tail — Curved diagonal stroke at the finish of certain letterforms.
Terminal — Self-contained finish of a stroke without a serif.

The font:

The full font of a typeface contains much more than 26 letters, to numerals, and a few punctuation marks.

Uppercase — Capital letters, including certain accented vowels
Lowercase — Lowercase letters include the same characters as uppercase
Small Capitals — Primarily found in serif fonts as part of what is often called expert set.
Uppercase Numerals — Lining figures, these numerals are the same height as uppercase letter and are all set to the same kerning width
Lowercase Numerals — Old style figures / text figures these numerals are set to x-height with ascenders and descenders.
Italic & Roman — Refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.
Punctuation & Miscellaneous Characters — Important to be acquainted with all the characters available in a typeface before choose the appropriate type.
Ornaments — Used as flourishes in invitations or certificates.

Describing typefaces:

Roman — Uppercase forms are derived from inscriptions of Roman monuments
Italic — Fifteenth century Italian handwriting on which the forms are based.
Boldface — Thicker stroke than a roman form
Light A — Lighter stroke than the roman form
Condense A — Version of the roman form, and extremely condense style
Extended A — extended variation of a roman font

Fig 2.17 List of typefaces

Week 3/Text

Tracking: Kerning and Letterspacing:

Kerning — The automatic adjustment of space between letters. 'letterspacing' it means to add space between the letters.

Fig 3.1 Kerning and Ietterspacing

Letterspacing: Adding space between the letters.
Tracking : Normal tracking, loose tracking & tight tracking.

Fig 3.2 Normal tracking, loose tracking and tight tracking

Formatting Text:

Flush left — Format most closely mirrors the asymmetrical experience of handwriting. Each line stars at the same point but end wherever the last word on the line ends.

Fig 3.3 Flush text

Centered — It transforms fields of text into shapes, thereby adding a pictorial quality to material that is non-pictorial by nature.

Fig 3.4 Centered

Flush right — Format places emphasis on the end of a line as opposed to its start.

Fig 3.5 Flush right

Justified — Format imposes a symmetrical shape on the text. It is achieved by expanding or reducing spaces between words and, sometimes, between letters.

Fig 3.6 Justified

Texture:

Different typefaces suit different message. A good typographer has to know which typeface best suits the message at hand.

Fig 3.7 Anatomy of a typeface

Leading and Line Length:

Type size — Text type should be large enough to be read easily at arms length.
Leading — Text that is set too tightly encourage vertical eye movement
Line Length — Text is as much a function of the line length as it is a question of type size and leading.

Week 4 / Text

Indicating Paragraph :

Pilcrow — symbol used to mark a new paragraph or section of text

Fig 4.1 Pilcrow

Paragraph Spacing — Cross-alignment is achieved when the leading and paragraph spacing is the same size.
Indentation — Typically the same size of the line spacing or the point size of the text

Widows & Orphans:

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

Fig 4.2 Widows and Orphans

Highlighting Text:

Different kinds of emphasis require different kinds of contrast. It can be another way to increase the boldness or the weight of the text by making it bold or medium choosing a typeface families and making it bold other ways of doing it would be changes the typeface and making it bold right .

Headline within Text:

There are many kinds of subdivision within text of a chapters.

A Head — Main headline

Fig 4.3 Main headline

B Head — Subheadline

Fig 4.4 Subheadline

C Head — Lorem Ipsum with 2 spaces to show difference

Fig 4.5 Head

Week 5 / Letters

Understanding letterforms :

Uppercase letter forms suggest symmetry but it's not symmetrical. It is easier to see the two different stroke weights of the Baskerville stroke form.

Fig 5.1 Uppercase letterform

The uppercase letter forms may appear symmetrical, but a close examination shows that the width of the left slope is thinner than the right stroke.

Fig 5.2 Uppercase letterform

A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 5.2 Helvetica and Univers

Maintaining x-height :

X-height generally describe the size of the lowercase letterforms. Curved stroke such as 'S' must always rise above median line and sink below baseline in order to appear same size as vertical and horizontal strokes they adjoin.

Fig 5.3 X-height razors

Contrast :
Is the more powerful principle in design.

Fig 5.4 Contrast

Week 6 / Screen & Printing

Typography in Different Medium

Print Type VS Screen Type:

Good typeface for print is Calson, Garamond, Baskerville because it is elegant and intellectual and also highly readable when set as a small font size
If use a good typefaces or type family there are versatile, easy-to-digest classic ,which has a neutrality and versatility.

Fig6.1 Typesetting

Fig 6.2 Typography in print

Type for Screen:

Typefaces intended for use on the web are often modified to enhance readability, this can include a taller x-height, wider letterforms, more open counters, heavier thin strokes and serifs, reduced stroke contrast, as well as modified curves and angles for some designs. Another important adjustment is typefaces intended for smaller size and more open spacing

Hyperactive Link/ Hyperlink:

It is a word, phrase, or image that you can click on to jump to a new document or new section within the current document. So, hyperlink are founded in nearly Web pages. Text hyperlink are normally blue and underline by default.

Font Size for Screen:

16-pixel text on a screen is about the same size as text printed in a book or magazine because we read books more close and often only a new inches away so they are typically set at about 10 points.

Fig 6.3 Font Size for Screen

System Fonts for Screen/ Web Safe Fonts:

Each devise comes with its own pre-installed font selection.

Window: based devices might have one group
Mac OS: ones pull from another
Google's: own Android system

These typefaces can use on both platforms Open Sans, Lato, Arial, Helvetica, Time New Roman, Times, Courier New, Courier, Verdana, Georgia, Platino, Garamond.

Pixel Different Between Devices:

The screen used by our PCs, tablets, phones and TVs are not only different sizes, but the text you see on-screen differs in proportion too because they have different sized pixels.

Fig 6.4 Pixel Different Between Devices

Static VS Motion:

Static typography has minimal characteristic in expressing words. Traditional characteristics such as bold and italic offer only a fraction of the expressive potential of dynamic properties.

Fig6.5 Static VS Motion

Motion Typography:

Temporal media offer typographers opportunities to "dramatize" type, for letterforms to become "fluid" and "kinetic". Film little credits present typographic information over time, often bringing it to life through animation. Motion graphics, particularly the brand identities of film and television production companies, increasingly contain animated type.

INSTRUCTION

Task 1: Exercises 1 -Type Expression

The exercise of week 1 class is that we will choose four words from the seven words that have been voted for font design . The words I chose are Dance , Melt , Kill and Speed. The following is my sketches of these words.

1.Sketches (dance, melt, kill, speed)

Before I resketches my sketches I would say my favourite sketches is Dance#3 , Melt #1, Kill#1,and Speed#3.After receiving feedback from Mr.Vinod , I make some modify of my sketching after that I just moved to the digitsation process. The sketches of #4 is my new sketches is looks more clean and tidy.

Fig 7.1 Dance sketches (11/4/2023)

Fig7.2 Melt Sketches (11/4/2023)

Fig 7.3 Kill Sketches (11/4/2023)

Fig 7.4 Speed Sketches (11/4/2023)

2.Digital Type Expression

This is the first word I done and there are my progress of the word. First, for the word 'dance' as Mr.Vinod asked me to adjusted some thing that surplus it is too graphic for the word .

Fig7.5 Dance(24/4/2023)

Second, this is the word 'kill' I did it I think this design is more better than my sketches it is more simply and clear to bring out the meaning.

Fig7.6 Kill(24/4/2023)

Third, this word 'melt' is my flavourite design I think it is more creative and interesting .

Fig7.7 Melt(24/4/2023)

Lastly, the word of 'speed' with this design is also very special it is my first time I use such a design and I learnt it from youtube.

Fig7.8 Speed(24/4/2023)

This is my final work for digitsation .

Fig 7.9 Final work

3.Animation

With this animation I use 6 frames to done it. First I just put 3 of the word together and from the second I plus double of the word until 52 of speed.

Fig 7.10 Speed(progress)

This is the final work of GIF.

Fig7.11 Speed(GIF)

Exercises 2

1.Kerning and Tracking

After watching the mentioned videos, I trying kerning and tracking with the 10 fonts provided.

Fig 8.1 Kerning and Tracking (1/05/2023)

Lastly , I tried kerning and tracking with different typefaces of each font.

Fig 8.2 Kerning and Tracking (01/05/2023)

2.Layout

Next, this is the following the tutorials and text provided, then I started work on InDesign below is my proggressing.

Fig8.3 Layout Progressing

After adjusting the technical, I explored of different five layout :

Fig8.4 6 Different Layout

FINAL Text Formatting Layout

HEAD

Font/s: Bodoni Std

Type Size/s: 48 pt

Leading: 50 pt

Paragraph spacing: 0

BODY

Font/s: Serifa Std

Type Size/s: 11 pt

Leading: 13 pt

Paragraph spacing: 13 pt

Characters per-line: 52

Alignment: left justified

Margins: 123 mm top, 26 mm left + right + bottom

Columns: 2

Gutter: 10 mm

Fig8.5 Final Layout

FEEDBACK

Week2

Specific Feedback: I came out with 3 design for each words that is DANCE , MELT , KILL and SPEED.

General Feedback: The design of dance and speed is not appropriate enough besides the design of kill is too graphic. At last all the sketches is too big sketches just the size of thumb.

Week3

Specific Feedback: My e-portfolio labels are not clear , and the lectures are not written and need to be supplemented from the beginning of Week 1. All the google drive information must be public. Next, all submissions need to be dated and explained. Feedback for Week 1 is missing and needs to be filled in. Last the future reading in the last part needs to written. For my work i get the feedback from sir is my work is not very clear and the font design (dance & melt) must be within the 10 fonts that was provide .Then the word speed is look like scary not fast need to make changes.

General Feedback: This week sir are checks our e-portfolio to gives suggestions for improvement and also given us some feedback for the work last week.

Week4

Specific Feedback: There is no big problem with the animation, but the font should be placed neatly and not moved to the left. Now the entire font is to the left and needs to be adjusted back.

General Feedback: This week Mr. Vinod see the work we done and gave us some feedback to improve our works.

Week5

Specific Feedback: The format of my layout is wrong then Mr. Vinod have give us about 6 question to let's check our homework ourselves below is the question and I will follow the question to done my work again.

TEXT FORMATTING ：

1. Is kerning and tracking appropriately done?

2. Does the font size correspond to the line-length, leading& paragraph spacing

3. Is the alignment choice conducive to reading?

4. Has the ragging been controlled well?

5. Has cross-alignment been established using base-line grids

6. Are widows and orphans present ?

General Feedback: This week Mr. Vinod check our layout exercise and confirm our e-portfolio submit date.

REFLECTIONS

Experience: I was a business student when I was in high school, so I am not familiar with Adobe and art font design, even unfamiliar. In the week two , I was very nervous when Mr. Vinod gave us practice. In the first week of practice, I made a mistake, because my sketches are more of a graphic design, and without the aid of those patterns, I couldn't present the font I wanted to express. Not using 10 fonts to outline my type expression. In week 3, Mr. Vinod gave us a new connection and used AI to make our font design. In fact, there were many problems in the initial design. For example, my font was not designed according to 10 fonts, and the design was still very graphic. These feedbacks are given by Ms. Vinod. Because I made a mistake in the sketching stage, I need to re-sketch. I think this is very difficult to complete. Because I can't add any graphic design. Adding graphics has been a habit I have developed since my high school. However at week 4, our work is done the GIF for our design I think this is more interesting because I didn't have this kind of experience so I'm very enjoy when are doing the work. The feedback of Mr. Vinod is not to bad as well it just tell me to tidy the word it will looks more clean.

Observations: In the course of these few weeks, in addition to seeing our own works, we can also see the works of other students. Mr. Vinod also openly gives feedback to all of us. We can see the strengths and mistakes of others. In this way, we can learn from others. However, we can also see our own mistakes through the mistakes of others and avoid mistakes.

Findings: I found that I was very unfamiliar with the typography class during the first task, and I was very nervous. It seemed that I didn’t know how to sketch for the first exercise and lacked a lot of inspiration, and I didn’t know how to express the meaning of words through design. But through the feedback given by Mr. Vinod, I found that I began to gradually understand what to do. I will also apply what I have learned such as kerning and tracking, animation, digization applying them to my future designs.

Search This Blog

LIM JUN TENG (0362890)

Typography / Task 1

Comments

Post a Comment

Popular Posts

Major Project 1

Information Design - Exercise