Typography - Task 1: TYPOGRAPHY EXERCISES

I watched the video of the lecture (typo-0-intro), in which Mr.Vinod introduced us to typography, and this lecture give me a deeper understanding of typography, which we can see in our daily life and use in various fields, for example, typography is widely used in animation, application design, web design, logos, etc.

After that ,Mr Vinod explained clearly the differences between font and typeface,so i understand the difference.

for example

Georgia is a font while Georgia Bold is a typeface.
Font refers to individual font or weight within a typeface.
Typeface refers to the various families that do not share characteristics.

Briefing

In this lecture, Mr.vinod gave us a detailed introduction on how to create an e-portfolio and about how to use it to complete assignments, and secondly Mr.Vinod also showed us information about templates and template results, and also showed us some of the impressive works of the previous students.

Lecture 2- Development /Timeline

Typo-1-Development

1.Early letterform development: Phoenician to Roman

In the early days, writing meant scratching into wet clay using a sharpened stick or carving into a stone using a chisel.

The forms of uppercase letterforms is the only letter form that has been used for nearly 2,000 years and can be seen to have evolved from these tools and the forms were mainly built up of straight lines and pieces of circles.

Figure 1.0 Phoenicians votive stele Carthage

The figure below shows that Modern Latin and Early Arabic evolved from the Phoenician letters in different ways

Time:

Figure 1.1 Evolution from phoenician letter

Writing direction

Later,The Phoenician wrote from right to left.The Greeks would move to a strictly left-to- right writing.And the Greek developed a style of writing called 'boustrophedon' (how to ox ploughs).Both not use letter space or punctuations.

Figure 1.2 The Greek writing style ' boustrophedon'

Etruscan carvers working in marble painted letterforms before inscribing them. And Increase a change in weight form form vertical to horizontal.

Figure 1.3 Etruscan cavers worke on the marble

The following , Mr. Vinod showed us the evolution from Phoenix to Roman Evolution from Phoenician to Roman

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

Square capitals were the written version that can be found in Roman monuments. These letterforms both have the same feature ，they have serifs added to the finish of the main strokes.

Rustic capitalsare a compressed version of square capitals, and this allowed for twicw as many words on a sheet of parchment and took far less time to write.Although rustic capitals were faster and easier tp, they were slightly harder to read due to their compressed nature.

Figure 1.4 Square Capitals(4th or 5th century)

Figure 1.5 Rustic capitals(late 3rd-mid 4th century)

Lowercase letterforms develop

Both square and rustic capitals were typically reserved for documents of some intended performance.But for the sake of speed,daily trasactions are usually written in cursive script,lowercase letterforms wil start development.

Figure 1.6 Roman cursive

Uncials incorporated some aspects of the Roman cursive hand especially in the shape of the A,D,E,H,M,U and Q.And the broad forms of uncials are more readable at small sizes than rustic capitals.

Half- uncials is sign a further formalization of the cursive hand ,half-uncials mark the formal beginning of lowercase letterforms,it use ascenders and descenders.

Figure 1.7 Half-uncials(C.500)

Figure 1.7 Uncials(4th-5th)

Calligraphy standardization

Charlemagne, the first unifier of Europe since the Romans.and issued an edict in 789 to standardize all ecclesiastical text.entrusted Alcuin of York, Abbot of St Martin of Tours to standardize all ecclesiastical texts. The monks useing majuscules(upercase),miniscule,capitalization and punctuation which set the standard for calligraphy for centurey.

Figure 1.8 Caloline miniscule(C.925)

3. Blackletter to Gutenberg's type

With the dissolution of Charlemagne's empire came regional variations upon Alcun's script.

In northerm Europe——the Blackletter or textura gained popularity.

In the south——a rounder more open hand gained popularity ,this challed 'rotunda'.

Figure 1.9 Blackletter(C.1300)

Gutenberg marshaled them all to bulid pages that accurately mimicked the work of the scribe's hand -Blackletter of northern Europe.And he invented movable type printing and typesetting, and produced his Bible path in a high-yield way.

Figure 2.0 Johann Gutenberg,Mainz(C.1455)

4. Text type classification

Figure2.1 Text type classification

Lecture 3: Typo_2_Text_P1

1. Tracking: Kerning and Letterspacing

Kerning

The automatic adjustment of space between individual letterforms.

Letterspacing means to add space better lettrs.

Figure 2.2 Without kerning and with kerning

Tracking

The addition and removal of space in a word or a sentence. It is usually adjusted in large paragraphs of text.

Normal tracking is easy to read and suitable to use in a large number of texts.

Loose tracking and tight tracking not suitable to apply in a large number of texts.

Figure 2.3 Normal tracking, tight tracking and loose tracking

However, Losse tracking can be used in headings, but in capital letters.Uppercase letterforms are draw to be able to stand on their own, whereas lowercase letterforms require the counterform created between letters to maintain the line of reading.

2. Formatting Text

Flush left

This format most closely mirrors the asymmetrical experience of handwriting.Each line starts at the same point but end wherever the last word on the line end.Spaces between words are consistent throughout the text. Allowing the type to create an even gray value.

Figure 2.4 Flush left

Centered
This format imposes symmetry upon the text,assigning equal value and weight to both ends of any line.It's important to amend line breaks so that the text does not appear too jagged.

Figure 2.5 Centered

Flush right

It can be useful in situations (like captions) where the relationship between text and image might be ambiguous without a strong orientation to the right.

Justified
It imposes a symmetrical shape on the text like centering. It is achieved by expanding or reducing spaces between words and letters. This format can occasionally produce 'rivers' of white space running vertically through the text, which are the gaps between the words. Careful attention to line breaks and hyphens is required to avoid this problem.

Figure 2.7 Justified

3. Texture

It is important to consider the different textures of the typefaces. A type with a relatively generous x-height or relatively heavy stroke width produces a darker mass on the page than a type with a relatively smaller x-height or lighter stroke.

Figure 2.8 Anatomy of a typeface

4. Leading and Line Length

Type size:Text type should be large enough to be read easliy at arms length -imagine yourself holding a book in your lap.
Leading: Text that is sec too tightly encourages vertical eye movement; a reader can easliy loose his or her place. Type that is set too loosely creates striped patterns that distract the from the material at hand.
Line length:Appropriate leading for text is as 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. A good rule of thumb is to keep line length between 55-65 characters. Extremely long or short lines lengths impairs reading.

Lecture 4: Typo_3_Text_P2

1.Indicating paragraphs

'Pilcrow'a holdover from medieval manuscripts seldom use today.

Fig 2.9 the ‘Pilcrow’

Line space

Paragraph space should be the same as the line space to ensure cross-alignment across columns of text.

Fig 3.0 line space

There is a difference between line space and leading

Fig 3.1 line space vs leading

Indentation

Will create unusually wide columns of text, which despite some problems may have strong compositional or functional reasons in academic writing, but will not be used

Fig 3.2 Indentation

2. Widows and Orphans

a widow is a short line of type left alone at the end of a column of text.

An orphan is a short line of type left alone at the start of new column.

Fig 3.3 Widows and Orphans

3.Highlighting Text

Use the same typeface but different fonts or colour(but yellow is not recommended)

Not that sans--serif fonts usaully look larger than serif fonts.

Aligned figures(numbers) or All Capital acronyms embedded in text by .5 as well,to ensure visual conhesion of the text.

Fig 3.4 Highlighting Text

4.Headline within Text

The following visuals have been labelled(A, B and C)according to the level of important.

Subheadings put together equal hierarchy, there is no single way to express hierarchy in a text, each text has a different way of indicating different information

Fig 3.5 Headline within Text

5. Cross Alignment

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

Fig 3.6 Cross Alignment

Lecture 5: Typo_4_Basic

1. Describing letterforms

Baseline:The imaginary line the visual base of the letterforms.
Median:The imaginary line defining the x-height of letterforms.
X-height:The height in any typeface of the lowercase.
Stroke:Any line that defines the basic letterform.
Apex / Vertex: the point created by joining two diagonal stems
Arm: short strokes off the stem of the letterform (horizontal: E, F, L; inclined upward: K, Y)
Ascender: the portion of the stem of a lowercase letterform that projects above the median
Barb: the half-serif finish on some curved stroke
Beak: the half-serif finish on the same horizontal arms
Bowl: the rounded form that describes a counter
Bracket: the transition between the serif and the stem
Cross Bar: the horizontal stroke in a letterform that joins two stems together
Cross Stroke: the horizontal stroke in a letterform that joins two stems together
Crotch: the interior space where two strokes meet
Descender: the portion of the stem of a lowercase letterform that projects below the baseline
Ear: the store extending out from the main stem or body of the letterform
Em/en: originally referring to the width of an uppercase M, and em is now the distance equal to the size of the typeface; an en is half the size of an em
Finial: the rounded non-serif terminal to a stroke
Leg: short stroke off the stem of the letterform (at the bottom: L; inclined downward: K, R)
Ligature: the character formed by the combination of two or more letterforms
Link: the stroke that connects the bowl and the loop of a lowercase G
Loop: the bowl created in the descender of the lowercase G (in some typefaces)
Serif: the right-angled or oblique foot at the end of the stroke
Shoulder: the curved stroke that is not part of a bowl
Spine: the curved stem of the S
Spur: the extension that articulated the junction of the curved and rectilinear stroke
Stem: the significant vertical or oblique stroke
Stress: the orientation of the letterform, indicated by the thin stroke in round forms
Swash: the flourish that extends the stroke of the letterform
Tail: the curved diagonal stroke at the finish of certain letterforms
Terminal: the self-contained finish of a store without a serif, it may be flat, flared, acute, grave, concave, convex or rounded as a ball or a teardrop (see finial)

2. The font

Uppercase and Lowercase
Small Capitals:Uppercase letterforms draw to the x-height of the typeface.

Fig 3.7 Small Capitals

Uppercase Numerals:Also called lining figures, these numerals are the same a height as uppercase letters and are all set to the same kerning width.

Fig 3.8 Uppercase Numerals

Lowercase Numerals: Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders.

Fig 3.9 Lowercase Numerals

Italic:The forms in a italic refer back to fifteenth century Italian cursive handwriting.
Punctuation,miscellaneous:They all fonts contain standard punctuation marks,miscellaneous characters can change from typeface to typeface.
Ornaments: It used as flourishes in invitations or certificates.

Fig 4.0 Punctuation,miscellaneous and Ornaments

3. Describing typefaces

Roman:The uppercase forms are derived from inscriptions of Roman monuments.
Italic: It named for fifteenth century Italian handwriting on which the forms are based.
Oblique:It conversely are based on roman form of typeface.
Condense:A version of the roman form,and extremely condense styles are often called 'compressed'.
Extended:An extended variation of a roman font.

Fig 4.1Describing typefaces

4. Comparing typefaces

The 10 typefaces mentioned in the following slide represent 500 years of type design.

Beyond the gross differences in x-height, the forms display a wealth of variety, in line weight, relative stroke widths and in feeling.

Fig 4.2 Comparing typefaces

Lecture 6: Typo_5_Understanding

1. Understanding letterforms

The uppercase letter forms below suggest symmetry. But in fact it is not symmetrical.It is easy to see the two different stroke weights of the Baskerville stroke from(below)

More noteworthy is the fact that each bracket connecting the serif to the stem has a unique arc.

Fig 4.3 Baskerville 'A'

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 4.4 Univers 'A'

The complexity of each individual letterform is neatly demonstrated by examining the lowercase ‘a’ of two seemingly similar sans-serif typefaces—Helvetica and Univers. 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 4.5 Helvetica 'a' and Univers 'a'

2. Maintaining x-height

The x-height generally describe the size of the lowercase letterforms.Such as in 's',such as in ‘s’, must rise above the median (or sink below the baseline) in order to appear to be the same size as the vertical and horizontal strokes they adjoin.

Fig 4.6 Lowercase maintaining x-height

3. Form and Counterform

The space describes, and often contained, by the strokes of the form. When letters are joined to form words, the counterform includes the spaces between them. Counterform has the same importance as the letterforms as it helps to recognize the shape of the letters and assure the readability of the words.

Fig 4.7 Form and Counterform

4. Contrast

The simple contrasts produces numeerous variations: small+organic/Iarge+machined;small+dark/large light,etc

Fig 4.8 Contrast

INSTRUCTIONS

TASK1: EXERCISES

Task 1: Exercises - Typ Expression

In the first task, we were asked to choose 4 words to make a type expression and we were given 7 words to make the type expression

1.Sketch

I chose words (time, dash, open and swim),they both seemed short but commonly used. As instructed, i began by sketching out my ideas in draft mode.

Figure 1.0 Type expression sketches

Time:

The word "time" first reminds me of a clock, so in the first draft, I combined elements of an alarm clock to surround the font. In the second image, I combined elements from daily life to make the font look like a person waiting for a bus under a street light. In the third image, I scattered the font to indicate free time.

Open：

For the design of "open", I combined its original meaning to create a representation of an object being opened and its contents falling off.

Dash：

I have made some designs about Dash, trying to make it look like it is moving and landing heavily on the ground.

swim:

About swim, I also combined its own meaning to make it show a sense of swaying.

Final-Task 1: Exercises - Typ Expression

Figure 1.1 Draft Part

Figure 1.2 Final Type Expression - PDF

Animation

To choose one of the final types of expressions to animate, I chose 'time' to animate, and before I started animating it, I watched a step-by-step tutorial on how to animate it by Mr Vinod.

I wanted the 'time' to be like an alarm clock that goes off at a predetermined time, so I added a swinging animation at the end to represent the vibration of the alarm clock.

Figure 1.3 Process in AI

Figure 1.4 process in PS

So i made first animation'TIME'

Figure 1.5 GIF TIME

Exercise 2 : Text Formatting

1.Kerning & Tracking:

We are assigned to work with kerning and tracking our name using the 10 typefaces provided. We are allowed to use different fonts and type sizes in a typeface.

Fig1.6 without Kerning & Tracking

Fig1.7 with Kerning & Tracking

2. Layout exercise

We are to create a final layout using the texts given and work with the text formatting setting. Black and white photography should be added to the layout with a caption.

Fig 1.8 process in Indesign

I explored different layouts

Fig 1.9 layout #1

Fig 1.9 layout #2

Fig 2.0 layout #3

Fig 2.1 layout #4

Fig 2.2 layout #5

Fig 2.3 Layout #6

Final Text Formatting Layout

Fig2.4 Final Text Formatting

Fig2.5 Final Text Formatting

Fig 2.6 Final Text Formatting

HEAD LINE

Font/s: Bembo Std

Type Size/s: 60pt/30pt

Leading: 36 pt

Paragraph spacing: 0

BODY

Font/s: Bembo Std

Type Size/s: 9 pt

Leading: 11 pt

Paragraph spacing: 11 pt

Characters per-line: 55

Alignment: left justified

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

Columns: 2

Gutter: 10 mm

FEEDBACK

Week1:

General feedback:In the first week we set up a new blog and learnt how to use the blog to edit and complete tasks, as well as being able to tag posts and copy links to fill in forms.

Week2:

General feedback:Refined the personal information and downloaded the fonts and tried to manipulate them using ai, some of the sketches were screened and commented on by the lecturer.

Specific feedback:'time' doesn't show the feeling of the hour hand turning and the word 'open' doesn't show the feeling of opening very well.The 'Dash' is well designed and shows the feeling of a dash.'Swim' doesn't reflect the waves

Week3:

General feedback:I learnt a lot about how to design fonts using AI skills in this lesson this week and learn how to digitise fonts using different selection tools

Specific feedback：I designed the 'time' in the shape of an alarm clock, the 'O' of 'open' in the shape of a key, and the 'P' in the shape of a key, thus highlighting the feeling of a key being opened by a lock.The 'O' of 'open' is in the shape of a key, and the 'P' is in the shape of a key, so that the whole thing highlights the feeling of a key being opened by a lock, and the 'swim' is divided and the bottom part is in the shape of a reflection on water.

Week4:

General feedback:In this lesson, we learnt a lot of animated typography techniques and also learnt about frame-by-frame animation in ps.
Specific feedback：I chose 'time' for the animation, I wanted it to feel like a timed alarm clock going off at the right time.

Week5:

General feedback:In this class,we know the how to use the InDesign,We following the tutorials and text provided, started working on InDesign.This week we briefly learned a lot of tips about using In Design and will be using different fonts for simple typography.
Specific feedback：Finally, Mr.Max suggested that I could go with a fourth layout with a submission request

REFLECTION

Experience:

This five week class was particularly intense for me, we had to update task1 a little bit each week to ensure progress and get feedback from Mr Max to adjust our assignments, Mr Viond showed me blogs from previous students to make us better learners, in the process we also watched a pre-recorded video of a lecture given by Mr Viond, which I think was extremely helpful for us to learn typography and the basics.I think this lecture video was very helpful for us to learn the basics of typography and layout.

Observations:

I have observed that I have done my work in a more detailed way, I have noticed that the way of working a little bit every week can get timely guidance and absolute feedback, and the weekly update of the eprotfolio can help us to consolidate our knowledge, in the process of learning, I missed Mr viond's message to the extent that I didn't use 10 fonts in my first font design, and in the process of changing the fonts to different fonts, I had difficulty in expressing the meaning of the animation work because I was not familiar with how to make animation work.When I was drawing, I was not familiar with how to make animation works and it was difficult for me to express the meaning of the animation works.

Findings:

Throughout task1, I learnt about typography and fonts, during the learning process I found out that designing fonts with adobe Illustrator to express its original meaning and using photo shop's frame by frame to make the fonts move would make me feel happy because I have never used these design software before, HOWEVER, during the secondI learnt a lot of technical details about typography during the second exercise of Task 1, and the weekly feedback helped me a lot.

FURTHER READING

'Typographic design':From and communicaton

Fig 1.0 Typographic design: Form and communication

This book aims to provide a concise yet comprehensive overview of the information,

vocabulary, tools, and methods used in effective typographic-design practice.

projects that explore a variety of contexts; and case studies devoted to traditional and nontraditional typographic design processes.

A knowledge of typographic kinetic typography provide the designer with an expanded awareness of legibility factors and enable compelling new ways to communicate.Case studies in applied problem solving are meant to inspire and

show readers how to use their newfound knowledge to communicate.

An understanding of typographic classification and subtlety of form is gained from the study of type specimens.Through the thirteen chapters of this book, the authors share

It yields both insights and inspiration, bringing order to the

complex and diversified subject of typographic design.

QIULIHUA 0365036

Search This Blog

Typography - Task 1: TYPOGRAPHY EXERCISES

Comments

Post a Comment