Typography | Task 1 : Type Expression & Formatting

22/Apr/2024-25/May/2024-Week1-Week5

ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media

Typography/Taylors University

Task Exercise 1 & 2

LECTURES

week 1:

Lecture 01: Introductions

In lecture, Mr. Vinod introduced us to typography. He explained that Typography is an act of creating typefaces or type families. I learned that typography has envolved over 500 years from calligraphy to digitalization. It is "the art and technique of arranging type to make written language legible, readable, and appealing when displayed". And the process also created numbers and symbols. Typography is now something everyone dose.

Typography can be seen at everywhere in our daily lives, Typography is applied in animation, website design, application design, posters, books and more.

Font: refers to the individual font or weight within a typeface, I.e.: Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman.

fig.1.1

Typeface: refers to the various families that do not share characteristics, I.e.: Georgia, Arial, Times New Roman, Didot and Futura

fig 1.2

Lecture 02: Development/ Timeline

In lecture 2, we learnt about the development and timeline about typefaces.

1.Early letterform development: Phoenician to Roman: Initially writing meant scratching into wet clay with sharpened stick or carving into stone with a chisel. The forms of uppercase letterforms (for nearly 2000 years the only letterforms) can be seen to have evolved out of these tools and materials. At their core, uppercase forms are simple combination of straight lines and pieces of circles, as the materials and tools of early writing required.

Fig 2.1

we can see a timeline:

Fig 2.2Phoenician Evolution Timeline

The Greeks changed the direction of writing. Phoenicians, like other Semitic peoples, wrote from right to left. The Greek developed a style of writing called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of text read alternately from right to left and left to right. As they change the direction of reading they also changed the orientation of the letterforms:

fig 2.3

Etruscan (and then Roman) carvers working in marble painted letterforms before inscribing them. Certain qualities of their strokes—a change in weight from vertical to horizontal, a broadening of the stroke at start and finish—carried over into the carved letterforms.

fig 2.4

fig.2.5

Late 1st century B.C.E., Augustan inscription in the Roman Forum, Rome.

2.Hand script from 3rd – 10th century C.E.: square capitals were the written version that can be found in Roman monuments. These letterforms have serifs added to the finish of the main strokes.

fig.2.6

4th or 5th century: Square Capitals

A compressed version of square capitals, rustic capitals allowed for twice as many words on a sheet of parchment and took far less time to write. The pen or brush was held at an angle of approximately 30° off the perpendicular. Although rustic capitals were faster and easier to, they were slightly harder to read due to their compressed nature.

fig.2.7

Late 3rd – mid 4th century: Rustic capitals

Both square and rustic capitals were typically reserved for documents of some intended performance. Everyday transactions, however were typically written in cursive hand in which forms were simplified for speed. We can see here the beginning of what we refer to as lowercase letterforms.

fig.2.8

4th century: 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. ‘Uncia’ is Latin for a twelfth of anything; as a result, some scholars think that uncials refer to letters that are one inch (one twelfth of foot) high. It might, however, be more accurate to think of uncials simply as small letters. The broad forms of uncials are more readable at small sizes than rustic capitals.

fig.2.9

4th – 5th century: Uncials

A further formalization of the cursive hand, half-uncials mark the formal beginning of lowercase letterforms, replete with ascenders and descenders, 2000 years after the origin of the Phoenician alphabet.

fig.2.10

C. 500: Half-uncials

Charlemagne, the first unifier of Europe since the Romans, issued an edict in 789 to standardize all ecclesiastical texts. He entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using both majuscules (uppercase), miniscule, capitalization and punctuation which set the standard for calligraphy for a century.

fig.2.11

C. 925: Caloline miniscule

3.Blackletter to Gutenberg’s type: With the dissolution of Charlemagne’s empire came regional variations upon Alcuin’s script. In northern Europe, a condense strongly vertical letterform know as Blackletter or textura gained popularity. In the south, a rounder more open hand gained popularity, called ‘rotunda’. The humanistic script in Italy is based on Alcuin’s miniscule.

fig.2.12

c. 1300: Blackletter (Textura)

Gutenberg’s skills included engineering, metalsmithing, and chemistry. He marshaled them all to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of northern Europe. His type mold required a different brass matrix, or negative impression, for each letterform.

fig.2.13

c. 1455: 42 line bible, Johann Gutenberg, Mainz

3.Text type classification (Dates of origin approximated to the nearest quarter century.

fig.2.14

Week2:

Lecture 03: Typo_3_Text_Part1

1.Text/ Tracking and Letterspacing

Kerning is often incorrectly referred to as "letterspacing". In fact, it's adjusting the spacing of the letters and spacing the letters means increasing the horizontal space between the letters.

fig.2.15

Normal tracking, loose tracking and tight tracking.

fig.2.16

1. The font form of the field accounts for half of the page.

2. Font size: The font is large enough to stand out.

3. Line spacing: text Settings are too tight, which will cause visual fatigue.

4. To facilitate the reader to find the reading location at that time, it should be designed with memory points.

5. Line length: The proper line spacing of text is also a function of line length, because it is a matter of word size and line spacing. Keep the line length roughly between 35 and 65 characters. Very long or very short. Presidents influence readers to read.

fig.2.17

Font selection and size The choice of font is crucial to the readability of the article. When choosing fonts, you should try to choose concise and clear fonts, and avoid using fonts that are too fancy or difficult to read. The size of the font.Line spacing and segment spacing The setting of line spacing and segment spacing will also affect the readability of the article. Appropriately increasing the line spacing and segment spacing can make the article clearer and easier to read.

fig.2.18

The text draws the reader's attention at a glance.

Text/ Leading and Line Length

The goal in setting text type is to allow for easy, prolonged reading. At the same time a field of type should occupy the page as much as photograph does.

Type size: Text type should be large enough to be read easily at arms length—imagine yourself holding a book in your lap.

fig.2.19

Leading: Text that is set too tightly encourages vertical eye movement; a reader can easily loose his or her place. Type that is set too loosely creates striped patterns that distract the reader from the material at hand.

fig.2.20

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.

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.

Sample Type Specimen Sheet

Compositional requirement: Text should create a field that can occupy a page or a screen. Think of your ideal text as having a middle gray value (on the left, in the diagram on the next slide),

not a series of stripes (as seen of the one on the right)

Week3:

Lecture 04: Typo_4_Text_ Part2

Typography: Text / Indicating Paragraphs

The paragraph option we see here is pilcrow '(¶) (the symbol available in most number bodies), which is left over from medieval manuscripts.

fig.3.1

Paragraph under "Text Display Line Spacing". We can see that if the line spacing is 12pt, then the paragraph spacing is 12pt, which ensures that the text is cross-aligned.

fig.3.2

Because leading usually includes the space taken up by going down; And because most characters are not in descending order, additional white space is created under the lines.

fig.3.3

Format: Text/Widows and Orphans

Typographers work with large volumes of text and print magazines, newspapers, or some online journals, making sure to pick out the gaffes.

fig.3.4

In the text, we know that widows and orphans are typesetting workers and a mistake in text typesetting. The small text on the right will be much thicker than the small text on the left, and the broken text paragraphs will not be cut or shortened.

fig.3.5

Typography: Text / Highlighting Text

In this example, the Univers are reduced by 0.5 to match the X-height of the serif font.

I also reduced the amount of aligned graphics (numbers) or all capitalized acronyms embedded in the text by 0.5% to ensure visual cohesion of the text.

fig.3.6

fig.3.7

Quotes break the rules and create a clearer indent.

fig.3.8

Typography: Text / Headline within Text

Typographers need to make sure that the information they are trying to convey makes the reader aware of what is important in the text.

Headings vary in font size, type, and thickness. Show the following 4 examples.

In the article, several sub-headings of different plates are combined in a screen, and we can see the hierarchy of the article layout.

fig.3.9

Typography: Text / Cross Alignment

Using cross-aligned headings in text, the full alignment of the left and right sides looks neat and organized. Fonts vary in thickness and size.

fig.3.10

fig.3.11

Week 04

Lecture 05: Typo_2_Basic

1. Describing letterforms

It is important for us to know a letterform's component parts to identify specific typefaces. Below are some components we need to know.

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 ‘x’.

fig.4.1

Stroke Any line that defines the basic letterform

fig.4.2

Apex / Vertex The point created by joining two diagonal stems (apex above and vertex below)

fig.4.3

Arm Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).

fig.4.4

Ascender The portion of the stem of a lowercase letterform that projects above the median.

fig.4.5

Barb The half-serif finish on some curved stroke.

fig.4.6

Beak The half-serif finish on some horizontal arms.

fig.4.7

Bowl The rounded form that describes a counter. The bowl may be either open or closed.

fig.4.8

Bracket The transition between the serif and the stem.

fig.4.9

Cross Bar The horizontal stroke in a letterform that joins two stems together

fig.4.10

Cross Stroke The horizontal stroke in a letterform that joins two stems together

fig.4.11

Crotch The interior space where two strokes meet.

fig.4.12

Descender The portion of the stem of a lowercase letterform that projects below the baseline.

fig.4.13

Ear The stroke extending out from the main stem or body of the letterform.

fig4.14

Em/en Originally refering to the width of an uppercase M, and em is now the distance equal to the size of the typeface (an em in 48 points, for example). An en is half the size of an em. Most often used to describe em/en spaces and em/en dashes.

fig.4.15

Terminal The self-contained finish of a stroke without a serif. This is something of a catch-all term. Terminals may be flat (‘T’ above), flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball or a teardrop (see finial).

fig.4.16

2.The font

We should make sure that we are working with a full font and know how to use it to work successfully with type.

Uppercase Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.

fig.4.17

Lowercase Lowercase letters include the same characters as uppercase.

fig.4.18

Small Capitals Uppercase letterforms draw to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called expert set.

Most type software includes a style command that generates a small cap based on uppercase forms. Do not confuse real small caps with those artificially generated.

fig.4.19

fig.4.20

Uppercase Numerals Also called lining figures, these numerals are the same height as uppercase letters and are all set to the same kerning width. They are most successfully used with tabular material or in any situation that calls for uppercase letters.

fig.4.21

Lowercase Numerals Also known as old style figures or text figures, these numerals are set to x-height with ascenders and descenders. They are best used when ever you would use upper and lowercase letterforms. Lowercase numerals are far less common in sans serif type-faces than in serif.

fig.4.22

Italic Most fonts today are produced with a matching italic. Small caps, however, are almost always only roman. The forms in a italic refer back to fifteenth century Italian cursive handwriting. Oblique are typically based on the roman form of the typeface.

fig.4.23

Punctuation, miscellaneous characters Although all fonts contain standard punctuation marks, miscellaneous characters can change from typeface to typeface. It’s important to be acquainted with all the characters available in a typeface before you choose the appropriate type for a particular job.

fig.4.24

Ornaments Used as flourishes in invitations or certificates. They usually are provided as a font in a larger typeface family. Only a few traditional or classical typefaces contain ornamental fonts as part of the entire typeface family (Adobe Caslon Pro).

fig.4.25

3.Describing typefaces

Roman The letterform is so called because the uppercase forms are derived from inscriptions of Roman monuments. A slightly lighter stroke in roman is known as ‘Book’.

fig.4.26

Italic Named for fifteenth century Italian handwriting on which the forms are based. Oblique conversely are based on roman form of typeface

fig.4.27

Boldface Characterized by a thicker stroke than a roman form. Depending upon the relative stroke widths within the typeface, it can also be called ‘semibold’, ‘medium’, ‘black’, ‘extra bold’, or super. In some typefaces (notably Bodoni), the boldest rendition of the typeface is referred to as ‘Poster’.

fig.4.28

fig.4.29

4.Comparing typefaces

fig.4.30

Introduction

Task 1: Exercise 1-Type Expression

Week 1

For the first week of practice, we are going to choose four words and make them in a class arrangement.

-time

-open

-kick

-spark

We need to sketch each word first, and then make a digital illustration.

My Sketch :

fig.1.1 kick;time;open

fig.1.2 spark

week 2

Digitalization:

Mr. Max Goh Wei Lok selected six of the sketches I drew above for me to create digital fonts.

fig.2.1 adobe illustrator （six fonts）

Mr. Max Goh Wei Lok selected four more digital fonts from the above six.

fig,2.2 adobe illustrator （four fonts）

Final Type Expressions

Type expression static artwork for final JPEG and PDF

fig.2.2 JPEG

Colour Model: Grayscale ；Resolution 300ppi

fig.2.3.PDF

Week 3

For this week's homework we need to make an animated GIF, (choose one of the previous 4 words to complete).

fig.3.1 TIME GIF process (adobe illustrator)

fig.3.2 TIME GIF process(adobe photoshop)timeline

fig.3.3 TIME GIF

Final animated GIF

After discussing with Mr. Max in class, the teacher asked me to change the GIF animation to be smoother. So far, I have added two frames of drawing boards to make the GIF animation look smoother.

fig.3.4 Modified TIME GIF process (adobe illustrator)

fig.3.5 Final TIME GIF

Design idea: slowly reduce the pointer to normal size, rotate the pointer clockwise, and the disappearing words will slowly emerge.

Task 1: Exercise 2-Type Formatting

Week 4

Follow the font design given by your teacher and apply it to your name (10 different fonts).

fig.4.1 No spacing adjustment（screenshot）

fig.4.2 With spacing adjustment(jpeg)

During class, Mr. Max introduced us to "I Am Helvetica" by John Doe. We need to create a layout based on the given text and add a title to it. We design through our own knowledge of typography.

LAYOUTS

According to the note Mr. Viond gave to the video, when there is a standard margin with four equal sides, it does not make the document attractive. An attractive layout always has a very attractive space. If you change the bottom to ‘50’, it will make the page layout look more attractive.

Following the tutorials and text provided, I started using InDesign.

fig.4.3 process

After adjusting the technical details, I explored different layouts:

fig.4.4 Layouts

Mr. Viond asked me to do as commented and asked for it to be redone.

Among the six,I liked the first one best because it looked more attractive, so I finally decided to use the first one.

fig.4.5 JPEG 300pi grayscale

fig.4.6 PDF

fig.4.7 JPEG 300pi grayscale-Grid

fig.4.8 PDF-Grid

FINAL Text Formatting Layout

HEAD
Font/s: Bembo Std
Type Size/s: 72 pt
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: 60
Alignment: left justified

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

Things to look

Font size (8–12)
Line Length (55–65/50–60 characters)
Text Leading (2, 2.5, 3 points larger than font size)
Paragraph spacing (follows the leading)
Ragging (left alignment) / Rivers (Left Justification)
Cross Alignment
No Widows / Orphans

Feedback

Week 1

Specific Feedback: Add a description to the profile, and update lecture notes for Lecture 01- Development. Add task explanation, research, and letterform sketches with descriptions.

General Feedback: Update what we learn on the e-portfolio consistently to avoid crashes of upcoming tasks.

Week 2

Specific Feedback:For sketches, please digitize 1st option for Time; 1st and 3rd options for Open; 1st, 2nd and 3rd options for Kick; 1st options (Bold one) for Spark. Good job!

General Feedback:Try to explore more software options in addition to more digital concretization. The illustration course can give more consideration to multiple levels and various fields to provide a visual impact and form of expression.

Week 3

Specific Feedback: I listened to Mr. Max's suggestion and modified the number of frames of the font GIF. After the modification, the teacher was very satisfied, but he still hoped that I could add a few more frames to make it more comfortable to watch.

General Feedback:Mr. Max asked me to change the one after the blog link to the correct one (tag link).

Week 4

Specific Feedback: We need to be more serious about updating the blog.
General Feedback：After this week's study, Teacher Max helped me correct the font style and not align the word spacing with the grid. Through the teacher's operation, I understood that I can change the paragraphs by scrolling the text.

Week 5

Specific Feedback: Supplementary blog and feedback on progress.

REFLECTIONS:

Experience:

By repeatedly watching the content teaching and self-study of the videos recorded in advance by Teacher Vinod, my ability to understand and master design concepts and materials in self-study has been greatly improved in the future. This is of great help to me because I can watch it repeatedly at my own pace. And Mr. Max’s careful teaching to us, teaching me the technology of Adobe software through feedback assignments, and every week we have to carefully check our digital portfolio (blog) to help us make progress, and we also need to improve the improvements we have made. Giving feedback, which is the same as we progress each week, helps me a lot. I also like that the teachers in our class look at our blog assignments and complete our assignments in practice.

Observations:

In Teams, the teacher sent us relevant books for us to read. We can also look up information on the Pinterest website. I saw the creative works and text layout of excellent layout designers that can help us learn. How to use spatial knowledge to stagger layouts.

Findings:

1. Font selection is the first step in typesetting. Different fonts have different personalities and uses. The 10 fonts given by Mr. Viond include body fonts, bold, italics, etc. to ensure consistency and hierarchy.

2. The readability of text is closely related to font size. Generally, the main text uses 10-12 point size, and the title varies according to the level. Line height is between 1.2 and 1.5 times the font size to ensure proper line spacing and increase readability.

3.Adjust the gaps between adjacent characters to make text look more even.

4.Left-aligned, right-aligned, center-aligned, and aligned at both ends, each has different usage scenarios and visual effects. Left-aligned is the most common, and justified is often used in formal documents.

5.By understanding and practicing these layout principles and technical details through the videos given by the teacher, you can achieve beautiful and practical text layout effects and improve the efficiency of information transmission and reading experience.

Search This Blog

ZHANG HANYUAN(0363727)