TYPOGRAPHY [ TASK 1: EXERCISES ]
26.09.23 - 24.10.23 / Week 1 - Week 5
Bachelor of Design (Hons) in Creative Media / Typography / Taylor's University
Task 1: Exercises
OUTLINE
Recorded Lectures
- 1 // Typo_0: Introduction
- 2 // Typo_1: Development
- 3 // Typo_3: Text_P1
- 4 // Typo_4: Text_P2
- 5 // Typo_2: Basic
Class Summary
- WEEK 1
- WEEK 2
- WEEK 3
- WEEK 4
- WEEK 5
Instruction
- Experience
- Observations
- Findings
RECORDED LECTURES
1 // Typo_0: Introduction
2 // Typo_1: Development
3 // Typo_3: Text_P1
4 // Typo_4: Text_P2
5 // Typo_2: Basic
Lecture 1 - Typo_0: Introduction
- Typography: The art and technique of arranging type creating written language legible, readable and appealing when displayed.
- Calligraphy: Write the writing styles.
- Lettering: Draw the letters out.
- Font: The individual font and weight within a typeface, l.e.: Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman, etc.
- Typeface: The entire family of fonts and weights that share similar characteristics or styles.
Lecture 2 - Typo_1: Development
- Early letterform development & timeline: Phoenician to Roman
 |
| L2_1. 4th century B.C.E. – Phoenicians votive stele Carthage, Tunisia. |
 |
| L2_2. Evolution from the Phoenician letter |
Phoenicians: wrote from right to left like Semitic peoples.
Greek: developed their writing called 'boustrophedon'. This meant they wrote right to left and left to right alternately.
 |
| L2_3. Greek fragment, stone engraving |
 |
| L2_4. Greeks' writing |
Etruscan and cavers who worked with marble drew letterforms before engraving them.
 |
| L2_5. Evolution from Phoenician to Roman |
- Hand script from 3rd - 10th century C.E.
 |
| L2_6. 4th or 5th century: Square Capitals |
Square capitals: were the written version you can see on Roman monuments.
 |
| L2_7. Late 3rd - mid 4th century: Rustic capitals |
Rustic capitals: are a compressed version of square capitals. These allowed for faster and easier writing, but they were harder to read because of their compressed nature.
 |
| L2_8. 4th century: Roman cursive |
 |
| L2_9. 4th - 5th century: Uncials |
 |
| L2_10. C.500: Half - uncials |
 |
| L2_11. C.925: Caroline minuscule |
Charlemagne: the first unifier of Europe since the Romans, entrusted this task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote the texts using majuscules (uppercase), minuscule, capitalization and punctuation setting the standard for calligraphy for a century.
- Blackletter to Gutenberg's type
 |
| L2_12. C.1300: Blackletter (Textura) |
Regional variations upon Alcuin's script came with the dissolution of Charlemagne’s empire. A condensed strongly vertical letterform known as Blackletter or textura gained popularity in northern Europe. In the south, a rounder more open hand gained popularity, called the ‘rotunda’. The humanistic script in Italy is based on Alcuin’s miniscule.
 |
| L2_13. C.1455: 42 line bible, Johann Gutenberg, Mainz 1 |
 |
| L2_14. C.1455: 42 line bible, Johann Gutenberg, Mainz 2 |
Gutenberg marshalled them all to build pages that accurately mimicked the work of the scribe’s hand – Blackletter of Northern Europe. His type mould required a different brass matrix, or negative impression, for each letterform.
Humanist script to roman type
1460: Lucius Lactantius, Venice.
1472: Cardinal Jonannes Bessarion, Conrad Sweynheym and Arnold Pannartz, Subiaco press, Rome.
Venetian type from 1500
1499: Colona, type by Farncesco Griffo.
1515: Lucretius, type by Francesco Grifo.
The Golden Age of French printing
1531: Illustrissimae Galliaru reginae Helianorae, printed by Robert Estianne, Paris. Type-cast by Claude Garamond.
Dutch printing, c, 1600
1572: Polygot Bible (Preface). Printed by Christophe Plantin, Antwerp.
English type from the eighteen century
1734: William Caslon. Type specimen sheet, London.
Baskerville's innovations
1761: William Congreve, typeset and printed by John Baskerville, Birmingham.
1818 Giambatista Bodoni, Manuale Tipografico, Parma.
- Text type classification
1450 Blackletter
 |
| L2_15. Blackletter |
The earliest printing type was based upon the hand copying styles that were used for books in northern Europe.
1475 Oldstyle
 |
| L2_16. 1475 Oldstyle |
1500 Italic
 |
| L2_17. 1500 Italic |
Italics, initially a separate type, were condensed and close-set, allowing more words per page. Since the sixteenth century, most text typefaces have featured italic forms.
1550 Script
 |
| L2_18. 1550 Script |
The engraved calligraphic form, originally designed for engraved text, is suitable for short texts but has gained widespread acceptance in various forms, ranging from formal to casual.
1750 Transitional
 |
| L2_19. 1750 Transitional |
Advancements in casting and printing led to a refinement of old-style forms, exaggerating thick-to-thin relationships and lightning brackets.
1775 Modern
 |
| L2_20. 1775 Modern |
Scotch Romans, also known as Bell, are English versions of old-style letterforms, with unbracketed serifs and extreme contrast between thick and thin strokes.
1825 Square Serif / Slab Serif
 |
| L2_21. 1825 Square Serif / Slab Serif |
The heavily bracketed serifs were initially designed for heavy-type advertising in commercial printing, but as they evolved, they were dropped.
1900 Sans Serif
 |
| L2_22. 1900 Sans Serif |
Typefaces eliminated serifs, first introduced by William Caslon IV in 1816. Variations favoured humanist or geometric forms, with occasional flares for calligraphic origins. Sans serif, grotesque, and Gothic are also known.
1990 Serif / Sans Serif
 |
| L2_23. 1990 Serif / Sans Serif |
This style expands the family of typefaces to include both serif and sans serif alphabets, often with stages between the two.
Lecture 3 - Typo_3: Text_P1
- Text / Tracking: Kerning and Letter spacing
 |
| L3_1. Without kerning and with kerning |
Kerning: often misunderstood as letterspacing, is the automatic adjustment of space between letters in a word or sentence, also known as tracking.
 |
L3_2. Normal tracking, loose tracking, and tight tracking |
Loose and tight tracking: hinder readability and the capacity to recognise word patterns in texts.
Normal tracking: is simple to read and appropriate for usage in many different texts.
The type community opposes letter-spacing lowercase characters in the text, as lowercase letterforms require a counter form to maintain reading lines, while uppercase letterforms stand independently.
 |
| L3_3. Normal tracking and Loose tracking |
 |
L3_4. Tight tracking |
- Text / Formatting Text
 |
| L3_5. Flush left |
Flush left: Handwriting is asymmetrical, with lines starting at the same location and ending where the previous word ends. Regular spaces between words create an even grey value in this format.
 |
| L3_6. Centered |
Centered: This format creates symmetry by assigning identical values and weights to both ends of a line, transforming text into shapes, but line breaks must be adjusted to prevent raggedness due to its strong page shape.
 |
| L3_7. Flush right |
Flush right: This format highlights the end of a line, useful in situations like captions where text-image relationships may be ambiguous without a strong right orientation.
 |
| L3_8. Justified |
Justified: This format creates a symmetrical text by altering word and letter distances, sometimes leading to vertical white space rivers. To address this, careful consideration of line breaks and hyphenation is necessary.
- Text / Texture
 |
| L3_9. Anatomy of a typeface |
 |
| L3_10. Different types of typefaces 1 |
 | |
|
The text emphasizes the importance of considering the texture differences between typefaces, as a type with a generous stroke produces a darker page mass, and emphasizes the need for sensitivity to these colour differences.
- Text / Leading and Line length
 |
| L3_12. Leading and Line Length 1 |
 |
| L3_13. Leading and Line Length 2 |
- Text / Type Specimen Book
A type specimen book displays typefaces in various sizes, allowing intelligent selection. It provides accurate references for type, size, leading, and line length. Only when the final version is read on screen can the selection be made. This is essential for choosing a suitable typeface.
 |
| L3_14. Sample Type Specimen sheet |
Compositional requirement: Create a text field that can fill a page or screen, with an ideal text having a middle grey value, rather than a stripes pattern, as shown in the diagram on the left.
Lecture 4 - Typo_4: Text_P2
- Text / Indicating Paragraphs
 | |
|
The 'pilcrow' (¶): a medieval manuscript remnant, is a common way to indicate paragraphs, despite its fading usage in modern writing.
 |
| L4_2. Line space |
The example uses a 12 pt line spacing between paragraphs, ensuring cross-aligned text columns.
 |
| L4_3. line space vs leading |
 |
| L4_4. Standard indentation |
This example demonstrates normal indentation, which is typically the same size as line spacing or text point size.
 |
| L4_5. The method of extended paragraphs |
The method of expanding paragraphs leads to extensive text columns, but it may have compelling compositional or functional benefits despite its drawbacks.
- Text / Widows and Orphans
Classical typesetting, still used by commercial publishers, can lead to errors like widows and orphans, requiring designers to exercise caution when handling large text volumes.
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 the new column.
 |
| L4_6. Example of Widow and Orphan |
- Text / Highlighting Text
 |
| L4_7. how to highlight text within a column of text 1 |
 | |
|
 |
| L4_7. how to highlight text within a column of text 3 |
 | |
|
 |
| L4_8. the x-height of the serif typeface |
 |
| L4_9. visual cohesion of the text |
Quotation marks, like bullets, create a visible indent that breaks the left reading axis. The upper indented quote is contrasted with the bottom expanded quote.
 |
| L4_10. Highlighting text with quotation marks |
 |
| L4_11. Prime & quote |
A prime, a shorthand for inches and feet, was replaced by 'stupid quotations' due to limited typewriter keys. Today, they are not just stupid but also unlawful when used in typesetting.
- Text / Headline within Text
A typographer's role is to indicate the text's significance and relationships within subdivisions (A, B, and C) within a chapter's text.
A head in a section clearly distinguishes topics, with 'A' heads larger than the text, small capitals, and bold. In the fourth example, the head is 'stretched' to the left.
 |
| L4_14. B heads 1 |
 |
| L4_15. B heads 2 |
B heads, subordinate to A heads, represent new supporting arguments or examples, reducing text disruption. Displayed in small capitals, italic, bold serif, and bold San serif.
 |
| L4_16. C heads 1 |
 |
| L4_16. C heads 2 |
 |
| L4_17. Hierarchy in a sequence of subheads |
- Text / Cross Alignment
 |
| L4_18. Cross alignment 2 |
 |
| L4_18. Cross alignment 1 |
Cross-aligning headlines and captions with text type enhances page structure and communicates vertical rhythms. For example, four lines of caption type align with three lines of text type.
Lecture 5 - Typo_2: Basic
- Basic / Describing letterforms
Typography, an art with over 500 years of evolution, uses technical terms to describe letterforms, making it essential to understand the components to recognize different fonts.
 |
| L5_1. Baseline, Median and X-height |
Median: The imaginary line defining the x-height of letterforms.
X-height: The height in any typeface of the lowercase ‘x’.
 |
| L5_2. Stroke |
Stroke: Any line that defines the basic letterform.
 |
| L5_3. Apex / Vertex |
Apex / Vertex: The point created by joining two diagonal stems (apex above and vertex below.
 |
| L5_4. Arm |
Arm: Short strokes off the stem of the letterform, either horizontal (E, F, L) or inclined upward (K, Y).
 |
| L5_5. Ascender |
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 some horizontal arms.
 |
| L5_6. Bowl |
Bowl: The rounded form that describes a counter. The bowl may be either open or closed.
Bracket: The transition between the serif and the stem.
 |
| L5_7. Cross Bar |
Cross Bar: The horizontal stroke in a letterform that joins two stems together.
 |
| L5_8. Cross Stroke |
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.
 |
| L5_9. Ear |
Ear: The stroke extending out from the main stem or body of the letterform.
Em/en: Originally refers 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.
Final: The rounded, non-serif terminal to a stroke.
Leg: Short stroke off the stem of the letterform, either at the bottom of the stroke (L) or 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: In some typefaces, the bowl is created in the descender of the lowercase G.
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 articulates the junction of the curved and rectilinear strokes.
Stem: The significant vertical or oblique stroke.
Stress: The orientation of the letterform is, 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 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).
- Basic / The font
 |
| L5_10. Uppercase |
Uppercase: Capital letters, including certain accented vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
 |
| L5_11. Lowercase |
Lowercase: Lowercase letters include the same characters as uppercase.
Small Capitals: Uppercase letterforms drawn to the x-height of the typeface. Small Caps are primarily found in serif fonts as part of what is often called an expert set.
 |
| L5_12. Small Capitals |
 |
| L5_13. Small Capitals |
Most type software's style command generates a tiny cap based on uppercase forms, so avoid mixing actual little caps with artificial ones.
Uppercase Numerals: Lining figures, or numbers with the same height and width as capital letters, are suitable for tabular content or when uppercase characters are needed.
Lowercase Numerals: Old-style figures, also known as text figures, are set to x-height with ascenders and descenders, useful for upper and lowercase letterforms, with lowercase numerals less common in sans serif.
 |
| L5_14. Italic |
Italic: Most fonts have an italic version, with small capitals predominantly being Roman. Italicized forms originate from 15th-century Italian cursive handwriting, while obliques are often based on the typeface's Roman form.
 |
| L5_15. Punctuation, miscellaneous characters |
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.
 |
| L5_16. Ornaments |
- Basic / 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’.
Italic: Named for fifteenth-century Italian handwriting on which the forms are based.
Oblique: conversely is based on the Roman form of typeface.
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’.
Light: A lighter stroke than the Roman form. Even lighter strokes are called ‘thin’.
 |
| L5_17. Condense |
Condense: A version of the Roman form, and extremely condensed styles are often called ‘compressed’.
 |
| L5_18. Extended |
 |
| L5_19. Typefaces |
- Basic / Comparing typefaces
 |
| L5_20. Typefaces |
The slide presents ten fonts from 500 years of type design, aiming for readability and modern aesthetics. These fonts have remained successful representations of human thought, reading, writing, and printing, and are essential for beginner typographers to enhance their talents.
 |
| L5_21. Gross differences in x-height |
CLASS SUMMARY
WEEK 1
It was my nerve-wracking FIRST CLASS. Ms. Hsin and Mr. Vinod guided us to make an E-portfolio after watching one recorded lecture. Therefore, we were required to download and install 10 fonts to use for the next 14 weeks.
They told us what rules and advice we should be aware of course and what we should do WEEK 2 in detail.
WEEK 2
In this class, we got some feedback from our e-portfolio and idea sketches. Ms. Hsin gave detailed feedback to students who wanted feedback by browsing the blog, and then, went directly with Mr. Vinod to those who wanted feedback on the sketch.
Also, I got useful feedback from Ms. Hsin.
WEEK 3
I got some feedback for my Final digitisation from Ms. Hsin again on Week 3. She asked us to choose four of the letters that were eventually digitized to animate. And then I animated my digitised works during the class and I got her confirmation.
WEEK 4
Absent
WEEK 5
This week, we got another piece of feedback from Ms. Hsin for the text formatting session. After getting feedback, we started editing our previous works. Because I had to match the title and paragraphs to each of the horizontal lines, it was kind of tricky work.
INSTRUCTION
<iframe src="https://drive.google.com/file/d/18WY7z2aU45LOQpBW4fRcC8PER_PlClLT/preview" width="640" height="480" allow="autoplay"></iframe>
TASK 1: Exercises 1 - Type Expression
For this Task, Type Expression, we got six words: Chaos, Spring, Dive, Bounce, Float, and Crush to sketch. We are required to pick 4 words from these 6 words, so I have picked Spring, Dive, Crush, and Bounce.
I. RESEARCH
But I didn't understand typography very well. Therefore, I've done some research on what is Typography before starting.
 |
| Fig. 1.1.1 Star Wars Typography' Posters | Star Wars | Displate |
 |
| Fig. 1.1.2 Make Your Typography Stand Out – The Los Angeles Film School |
 |
| Fig. 1.1.3 What is Typography and Why is it Important? |
 |
| Fig. 1.1.4 7 great typography examples in web design |
II. SKETCH
 |
| Fig. 1.2.1 Idea sketch (Week 1 / 26.10.2023) |
- Spring - I drew these sketches to look like a flower by changing its direction and shape.
- Dive - I wanted the sketches of the top to remind us of diving, and the bottom to represent a diving person using an alphabet.
- Crush - I used the image of breaking in the sketch to express the meaning of crush well.
- Bounce - As directly as the meaning of bounce, I used images of the ball bouncing or the letters themselves splashing.
III. DIGITISATION
- [Spring]
 | |
|
First of all, I typed the 'Spring' inside of three different squares using the downloaded fonts.
 |
| Fig. 1.3.2 Digitised letter (Week 1 / 26.10.2023) |
On the top left, I used the Futura Std Light Oblique font for 'Sprin', and the Gill Sans Light Italic font for 'g'. Then I tried to make its shape like a blooming flower. To make it look more like a flower, I added leaves like sketches. Furthermore, I wanted to make it feel a little rough, so I slightly transformed the font's feeling into an effect.
On the top right, I used the Univers LT Std 73 Black Extended font for 'Spring'. When I sketched, the only thing that came to mind when I thought of spring was a flower, so I added a flower figure in the middle of the letter.
On the bottom left, I used the Univers LT Std 47 Light Condensed font for 'Spring'. This design is a little bit like the first one, so I used the effect I used when I worked on the first one. I wanted to give it a softer feel this time, but I didn't have a font similar to a sketch, and I thought it would be difficult to make it feel like that, so I changed the design very slightly. Unlike the first one, this time the only blooming flower in full was expressed.
- [Dive]
 |
| Fig. 1.3.3 Fonts for Dive (Week 1 / 26.10.2023) |
Second, I typed the 'Dive' inside of four different squares using the downloaded fonts.
 | |
|
On the top left, I used the Serifa Std 45 Light font for 'Dive'. I wanted to express how the letters splashed while diving into the water. So I put a splashing shape under the letter 'e'.
On the top right, I used the Univers LT Std 39 Thin Ultra Condensed font for 'Dive'. Diving reminded me of something like jumping into the water, so I tilted the letters about 210 degrees to express jumping into the water.
On the bottom left, I used the ITC Garamond Std Ultra Narrow Italic font for 'Dive'. Once that font was a bit winding, it reminded me of waves, and I turned the 'V' upside down to turn 'the V' into a human diving figure.
On the bottom right, I used the Gill Sans Std Shadowed font for 'Dive'. I wanted to add that element, as much as scuba diving can't be left out once diving. So, I expressed scuba divers using the i-shape. The upper part of 'i was represented by the head of the scuba diver, and the lower part by the torso, oxygen tank, and flippers.
- [CRUSH]
 | |
|
Third, I typed the 'Crush' inside of three different squares using the downloaded fonts.
 | |
|
On the top left, I used the Futura Std Extra Bold Condensed font for 'Crush'. I tried various things because I wanted to express how the glass was cracked a lot. But maybe because I'm not used to Adobe Illustrator yet, it was very difficult to find a way to express it. I tried 4 things, but except for the last one, I chose the last one because others seemed different from the meaning of crush.
On the top right, I used the ITC Garamond Std Book font for 'Crush'. I wanted to express that the letters came out and hit the wall, and both the walls and the letters cracked. As you saw in the article above, I wasn't familiar with the programme, but the second time I got used to it, so it was better to express it. I think it's not enough to do it like a sketch, so I added some images that look like the H-shape is tilted and the letters are broken.
On the bottom left, I used the Univers LT Std 65 Bold font for 'Crush'. This design is a little bit similar to the first one, and as I struggled with that, this one was a little easier. Having similar ways of editing and designing, the first crack element and the second piece of something that breaks were used.
- [BOUNCE]
 |
| Fig. 1.3.7 Fonts for BOUNCE (Week 1 / 26.10.2023) |
Fourth, I typed the 'BOUNCE' inside of three different squares using the downloaded fonts.
|
| Fig. 1.3.8 Digitised letter (Week 1 / 26.10.2023) |
On the top left, I used the Bodoni Std Poster font for ' BOUNCE '. When you think of bounce, what comes to mind is something like a ball bounces. So, like the first one, I also expressed this image in the other three. First, I stepped up the letters and indicated that the ball was going down.
On the top right, I used the Univers LT Std 63 Bold Extended font for 'BOUNCE'. And this time, the letters were represented like a ball bouncing, and I made a stair. I finished it like a sketch, but then I got the feeling that it was an incomplete design. Therefore, a little more design was added by filling the walls of the stairs.
On the bottom left, I used the Bodoni Std Poster font for 'BOUNCE'. As I've said, I wanted to express the feeling of something popping up. So this time, I designed to make each letter bounce and leave an afterimage behind it.
On the bottom right, I used the Futura Std 63 Extra Bold font for 'BOUNCE'. For the last design, the alphabet 'O' was used to express a ball. I used the third design, leaving an afterimage behind it, to represent that the 'O' is a ball.
 |
| Fig. 1.3.9 Attempt 1_1 (Week 1 / 26.10.2023) |
 |
| Fig. 1.3.10 Attempt 1_2 (Week 1 / 26.10.2023) |
 |
| Fig. 1.3.11 Attempt 1_3 (Week 1 / 26.10.2023) |
After that, I got feedback in the Week 2 class, and I fixed some problems Ms. Hsin told me.
Finally, I selected the best and second best of the digitized letters by referring to the feedback. The letters on the first page of the PDF, Digitisation attempt final (Week 2), were the best design.
However I got additional feedback in the Week 3 class, so I modified my digitisation.
 |
| Fig. 1.3.14 Additional digitisation attempt (Week 3 / 10.10.2023) |
 |
| Fig. 1.3.15 Final digitisation attempt JPG (Week 3 / 10.10.2023) |
| Fig. 1.3.15 Final digitisation attempt PDF (Week 3 / 10.10.2023) |
IV. ANIMATION
After digitising, I tried to animate 'Spring'.
 | |
|
TASK 1: Exercise 2 - Formatting Text
First, I started kerning and tracking with my name choosing various types of fonts.
 |
| Fig. 2.1.1 Without Kerning (Week 4 / 17.10.2023) |
|
| Fig. 2.1.2 With Kerning (Week 4 / 17.10.2023) |
II. Layouts
And then I watched 4 Video Lectures about Text Formatting to start working.
- [Layouts 1]
 |
| Fig. 2.2.1 Attempt for Layouts 1 (Week 4 / 17.10.2023) |
 |
| Fig. 2.2.2 Attempt for Layouts 1 with grids (Week 4 / 17.10.2023) |
HEAD
Font/s:
Headline - Univers LT Std 49 Light Ultra Condensed, Gill Sans Light
Byline - Janson Text LT Std 56 Italic
Type Size/s:
Headline - 72 pt, 30 pt
Byline - 14 pt
Leading:
Headline - 86.4 pt, 36 pt
Byline - 11 pt
Paragraph spacing: -
BODY
Font/s:
Body text - Bembo Std Regular
Caption - Bembo Std Regular
Type Size/s:
Headline - 11 pt
Caption - 9 pt
Leading:
Headline - 11 pt
Caption - 10.8 pt
Paragraph spacing: 11 pt
Average Characters per-line: 49 characters
Alignment:
Headline - Left aligned
Byline - Left aligned
Caption - Right aligned
Body text - Left aligned
Margins: 22 mm top, 20 mm left, 20 mm right, 19 mm bottom
Columns: 1
Gutter: - mm
- [Layouts 2]
 |
| Fig. 2.2.3 Attempt for Layouts 2 (Week 4 / 17.10.2023) |
 |
| Fig. 2.2.4 Attempt for Layouts 2 with grids (Week 4 / 17.10.2023) |
HEAD
Font/s:
Headline - Univers LT Std 49 Light Ultra Condensed, Gill Sans Light
Byline - Janson Text LT Std 56 Italic
Type Size/s:
Headline - 72 pt, 30 pt
Byline - 14 pt
Leading:
Headline - 86.4 pt, 36 pt
Byline - 11 pt
Paragraph spacing: -
BODY
Font/s:
Body text - Bembo Std Regular
Caption - Bembo Std Regular
Type Size/s:
Body text - 11 pt
Caption -
9 pt
Leading:
Body text - 11 pt
Caption - 10.8 pt
Paragraph spacing: 11 pt
Average Characters per-line: 49 characters
Alignment:
Headline - Left aligned
Byline - Left aligned
Body text - Left aligned
Margins: 30 mm top, 12.7 mm left, 12.7 mm right, 15 mm bottom
Columns: 2
Gutter: 10 mm
- [Layouts 3]
 |
| Fig. 2.2.5 Attempt for Layouts 3 (Week 4 / 17.10.2023) |
 |
| Fig. 2.2.6 Attempt for Layouts 3 with grids (Week 4 / 17.10.2023) |
HEAD
Font/s:
Headline - Univers LT Std 49 Light Ultra Condensed, Gill Sans Light
Byline - Janson Text LT Std 56 Italic
Type Size/s:
Headline - 72 pt, 30 pt
Byline - 14 pt
Leading:
Headline - 86.4 pt, 36 pt
Byline - 11 pt
Paragraph spacing: -
BODY
Font/s:
Body text - Bembo Std Regular
Caption - Bembo Std Regular
Type Size/s:
Body text - 11 pt
Caption - 9 pt
Leading:
Body text - 13.2 pt
Caption - 10.8 pt
Paragraph spacing: 11 pt
Average Characters per-line: 49 characters
Alignment:
Headline - Left aligned
Byline - Left aligned
Body text - Left aligned
Margins: 5 mm top, 3 mm left, 3 mm right, 5 mm bottom
Columns: 2
Gutter: 24 mm
Fig. 2.2.7 Final Layouts without grids - PDF (Week 4 / 17.10.2023)
Fig. 2.2.8 Final Layouts with grids - PDF (Week 4 / 17.10.2023)
Fig. 2.2.9 After feedback without grids - JPEG (Week 5 / 24.10.2023)
Fig. 2.2.10 After feedback with grids - JPEG (Week 5 / 24.10.2023)
HEAD
Font/s:
Headline - Univers LT Std 49 Light Ultra Condensed, Gill Sans Light
Byline - Janson Text LT Std 56 Italic
Type Size/s:
Headline - 72 pt, 30 pt
Byline - 14 pt
Leading:
Headline - 86.4 pt, 36 pt
Byline - 11 pt
Paragraph spacing: -
BODY
Font/s:
Body text - Bembo Std Regular
Caption
- Bembo Std Regular
Type Size/s:
Body text - 11 pt
Caption - 9 pt
Leading:
Body text - 11 pt
Caption - 10.8 pt
Paragraph spacing: 11 pt
Average Characters per line: 49 characters
Alignment:
Headline - Left aligned
Byline - Left aligned
Body text - Left aligned
Margins: 13.8 mm top, 18 mm left, 14 mm right, 30 mm bottom
Columns: 2
Gutter: 15 mm
FEEDBACK
WEEK 2
Specific Feedback: The designs were interesting, but there were too many graphic images, especially 'Spring'. I should have tried to maintain the original form of the letter. The first one of Fig. 1.3.9 doesn't fit this section, but it is an interesting design, so I'd better keep it for later. The second one of Fig. 1.3.6 should have maintained its letter form.
General Feedback: Ms. Hsin told me to edit the blog so that the post on the site would pop up well once someone clicked on the link. Also, I needed to add the Further Reading on the site.
WEEK 3
Specific Feedback: Fig. 1.3.13, 'Spring' of the first page, is good. Also, Fig. 1.4.1 is acceptable. However, the first 'Dive' one of Fig. 1.3.13 would be nice if I deleted the splashing water image. The second 'Dive' is acceptable. The first 'Crush' in Fig. 1.3.13 will have an interesting design if I convert it into an animation GIF. The second 'BOUNCE' is good, but the first 'BOUNCE' in Fig. 1.3.13 of the first page would be better to change the letter a bit and make U and E black and N white.
General Feedback: There were still some graphic images that didn't fit with this current class. So it would be better if I removed some images. For example, it would be better to get rid of the Fig. 1.3.13 splashing water image of Dive in the first chapter.
WEEK 4
Specific Feedback: Absent
General Feedback: Absent
WEEK 5
Specific Feedback: She asked me to edit it as a horizontal. Other things were good.
General Feedback: I needed to set paragraphs horizontally. Because setting diagonally was a too-fast attempt and didn't fit with the current class.
REFLECTION
Experience
It may be obvious, but this was a very new experience for me. It was also the first time to do typography using the Adobe Illustrator program in the first place, so everything was difficult.
Observations
This class was very interesting. It was amazing to be able to express the meaning of the letter aesthetically without using many graphic images.
Findings
I thought about how to design it to express the meaning of the letters well, but I realized that the design might get more and more excessive. It's good to try to express the meaning, but it's quite tricky to convey the meaning without regurgitating letters.
FURTHER READING
 |
| Typographic Design: Form and Communication |
Among the recommended book lists, I choose 'Typographic Design: Form and Communication'.
This book provides a comprehensive introduction to typographic design practice, including chapters on history, anatomy, visual organization, legibility, the interaction of form and message, media, projects, and case studies. It extends beyond specific technology to underline the need to know typographic foundations for communication in all contexts. Form, grammar, expressiveness, and digital settings are covered in detail, and on-screen and kinetic typography help designers grasp reading concerns. Case studies inspire readers to apply their visual communication expertise to their job. Design educators' theoretical and structural problem-solving skills reinforce the notions. Typographic categorization and form complexity can be better understood by studying type samples.
Typographic Design Education
Typographic education faces challenges due to technology advancements and media-based communication. Successful programs require understanding typographic heritage, design best practices, and innovative thinking to engage in cutting-edge typographic design.
Most of the most interesting parts of the book appeared in this Typographic Design Education. In this section, I have seen examples of new and unique designs and burst into exclamation without realizing it.
QUICK LINKS
Projects
Comments
Post a Comment