Typography Task 1

Week 1 - Week 6 [6/2/2024 - 21/3/2024]

Edlin Raihana binti Mohamad Firdaus 0359096 Bachelor in Design Creative Media

GCD60104 Typography

__________________________________________________________________________________

《LECTURES》

Week 1 - Type 0 _Introduction

    Throughout the Lecture, we explored the concept of Typography and how it is applied.

Typography involves crafting letters and encompasses the development of Typefaces and Type Families. This field has evolved for over 500 years due to calligraphy, lettering and typography practices. 

    Therefore it is easily found in our everyday lives, incorporated in all of the ways you can think of but are not limited to: 

• Animation
• Web Design
• App Design
• Signage
• Labelling
• Logo Types

    There are two terms commonly found in Typography, which are, Typeface and Fonts.

    Typeface refers to the entire family of fonts/weights that share similarities in style or element

fig 1.1 Typefaces

    Fonts refers to the individual font/weight within a typeface; Usually used as a descriptor (Myriad Pro Regular, Myriad Pro Italic, Myriad Pro Bold)

fig 1.2 Fonts

Week 2 - Typo 1_Development
    There's a significant timeline that showcases the evolution of Typography, providing valuable insights in the history and context of the development of letterforms

Early Letterform Development

    From the Phoenicians to the Romans, people had etched their words into wet clay using the tools they had at the time (chisels or sharpened sticks). At their essence, uppercase forms are a basic combination of straight lines and circular segments, created using the tools available during the period.

    The Greeks introduced a new style of writing called "boustrophedon", which translates to "how the ox ploughs" which differed from the traditional format. In this style, the text was formatted to be read from left to right, then right to left alternately. This led to the shift in the orientation of letterforms, making them move more vertically upright in a modern manner

    Etruscan (then Romans) carvers first painted over the letterforms before inscribing them. The qualities from their strokes carried over into their carried letterforms.

    From Phoenicians (1000 B.C.E) to Greek (900 B.C.E) to Roman (100 B.C.E)

    Hand-scripts from 3rd to 10th Century C.E. had Square Capitals that were the written version found in Roma Monuments, the letterforms also have a serif at the edge  of the main strokes and had stoke widths vary by the angle of pen strokes

    Compressed versions of Square Capitals called Rustic Capitals allowed the writer to fit more words in less time on a piece of parchment. However, due to its compression, it became harder to read.

    Both previous letterforms were considered too formal and serious for everyday use. Common people typically used cursive writing, which simplified forms for faster writing. This is when Lowercase Letterforms were initially developed

    Uncials, derived from the word 'Unica' meaning 'the twelfth of anything' in Latin, refer to letters that are one inch tall and are more easily readable than Rustic Capitals. They included aspects of Roman Cursive  hand, especially in the shape of A, D, E, H, M, U & Q

    Half-Uncials further formalized cursive hand & marked the formal beginnings of Lowercase Letterforms

    An order was given by Charlemagne to standardize all ecclesiastical texts. The monks then revised the texts to incorporate uppercase letters (majuscules), lowercase letters (minuscules), capitalization, and punctuation. This effort established the benchmark for calligraphy for a span of a century.

    Blackletters to Gutenberg's type: After the dissolve of Charlemagne's empire, there came regional variations upon Alcuin's script.

    Northern Europe saw the rise of Blackletter (Textura), a condense and strongly vertical letterform.

    Whereas in the south, a rounder, more open hand letterform called Rotunda became wildly popular

    Gutenberg's wide skillset, including engineering and metalsmithing, allowed him to marshal the people to build pages that mimic the scribe's hand of Blackletter, using a different brass matrix for each letterform. This made documenting quick and efficient using the printing technique. 

    Text-Type Classification: The Development of letterforms

• 1450 Blackletter;
• Based on the hand-coping styles then used for books (Cloister Black, Goudy Text)
• 1475 Old-style;
• Based on Lowercase forms of Carolina Miniscule & Uppercase forms of Roman Ruins (Bembo, Garamond)
• 1500 Italic;
• Based on contemporary Italian handwriting is now used to complement almost all typefaces
• 1550 Script;
• AN attempt to replicate the engravings of calligraphic forms
• Ranges from formal to casual
• 1750 Transitional;
• A refinement of old-style form, achieved part of advances in casting & printing
• 1775 Modern;
• Represents further rationalization of old-style letterforms
• 1825 Square/Slab Serif;
• Originally heavily bracketed serif, with little variation between thick and thin strokes
• 1900 Sans Serif;
• Eliminated serifs, it tended towards the humanist forms or being rigidly geometric
• 1990 Serif/Sans Serif;
• The most recent, this style enlarges the notion of family typefaces to include both serif and sans serif.

Week 3 - Typo 3_Text_P1

Tracking: Kerning & Letterspacing

    Kerning, refers to the automatic adjustments of space between letters.

    Letterspacing is the addition of space between the letters

    Tracking, refers to  to the addition and removal of space in a word or a sentence

    Uppercase letterforms are mainly used to be stand on its own, whereas lowercase letterforms require the counter form created between letters to maintain the line of reading

Formatting Text

    Flush Left - This format most closely mirrors the asymmetrical experience of handwriting. Each line starts at the same point but ends wherever the last word on the line ends. Spaces between words are consistent throughout the text, allowing the type to create an even grey value.

    Centered - This format imposes symmetry, assigning equal value and weight to the both ends at any line. It transforms the text into shapes that adds a pictorial quality to them, but can look jagged. This can be fixed by line breaks

    Flush Right - This format adds emphasis to the opposed side the start line. Useful in certain situations like captions, where the relationship between the text and image is ambiguous

    Justified - Similar to Centered, this technique imposes a symmetrical structure on the text through the adjustment of spacing between words & sometimes letters. It can result in the generation of different sizes of spacings between text.

Texture

    Contrast is the difference between the gray values that can be spotted in the variation of typefaces

Leading and Line Length

    Type Size, should be of ample size for it to be readable

    Leading, refers to the gaps between the lines. Gaps too tight or too loose will make the readers lose their placements in their block of text and can distract them

    Line Length, refers to the gaps between the letters and is ideally kept between 55 to 66 letters

Type Specimen Book

    These books sample the typefaces in different sizes, leadings, line lengths etc. in order to make a reasonable type choice

    Compositional Requirement, refers to the text should create a field that can occupy a screen or a page, ideally to have a middle grey line value opposed to a series of stripes.

    To get a clear sense of the relationship between the descenders on one line and the ascenders from the line below, optimally you should enlarge type to 400% on the screen

Week 4 - Typo 4_Text_P2
Indicating Paragraphs - There are multiple ways to indicate paragraphs

• Pilcrows
• Line Spacing (Leading)
• Indentation
• Extended Paragraphs

Widows & Orphans

    Widows, refers to a short line left alone at the end of the column

    Orphans, refers to a short line left alone before the column

    These two terms are unacceptable mistakes and should be carefully avoided

Highlighting Text

    There are different ways to put emphasis on certain words by creating contrast

• Italics
• Increasing Weight (Using BOLD)
• Changing Type Families
• Using a different colour

Headline within Text

    There are various types of subdivisions within chapters where one clearly indicate to their reader their relative importance and their relationships with each other

• A Head, shows the clear breaks in between topics within a section, usually set different from the text
• B Head, shows a new supporting agreement/example which doesn't support the text strongly
• C Head, is uncommon but is used to highlight specific parts within the text and does not interrupt the text itself

Cross Alignment

    Cross alignment strengthens the architectural essence and the page's structure while articulating the complementary vertical rhythms

Week 5 - Typo 2_Basic

    Terminology

• Baseline, the imaginary line with 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'
• Stroke, lines that define the basic letterform
• Arm, short stories extended from the stem of the letterform (horizontal or inclined upward)
• Ascender, the portion of the stem of a lowercase letter that exceeds the median
• Barb, the portion of the stem of a lowercase letterform that exceeds the median
• Beak, the half-serif on horizontal arms
• Bowl, the rounded form that describes a counter (opened or closed)
• Bracket, the transition between the serif and the stem
• Cross Bar, the horizontal stroke in a letterform that joins two stems along
• Cross Stroke, the horizontal stroke in a lowercase letterform that joins two stems along
• Crotch, the interior space where two strokes meet
• Descender, the portion of the stem of a lowercase letterform that is placed bellow the baseline
• Ear, the stroke extending out from the main stem or the body of the letterform
• Em/En, the width of an uppercase letter 'M' or a lowercase 'm'
• Finial, the rounded non-serif terminal to a stroke
• Leg, short stroke off the stem of letterform
• Ligature, the character formed by the combination of two or more letterforms
• Link, the stroke that connects the bowl and the loop of lowercase 'g'
• Loop, bowl created in the descender of lowercase 'g'
• Serif, the right angled or oblique foot at the end of the stroke
• Spine, curved stem of 'S'
• Spur, the extension that articulated the junction of the curved and rectilinear stroke
• Stress, the orientation of the letterform indicated by the think stroke in rounded forms
• Swash, the flourish that extends the stroke of the letterform
• Tail, the curved diagonal stroke at the finished of certain letterforms
• Terminal, the self-contained finish of a stroke without serif. Terminals come in flat, flared, acute, grave, concave, convex, or rounded as a ball or a teardrop

The Font

• Lowercase, includes same character as uppercase
• Uppercase, capital letters, containing certain accented vowels
• Small Capitals, uppercase letterforms drawn to x height of typeface
• Uppercase Numerals, same height as the uppercase letters with the same kerning width
• Lowercase Numerals, x-height with the ascenders and descenders
• Italics, refers back to the 15th century Italian cursive handwriting, oblique are based on the roman form of the typeface
• Punctuation/Misc. Characters, can change from typeface to typeface and should be familiarized before deciding on the right type for a job
• Ornaments, used as flourishes in invitations or certificates, usually provided as a font in a larger typeface

Describing Typefaces

• Roman, derived from the inscriptions of roman monuments (a higher stroke in Roman is known as 'Book')
• Italic, is named after 15th century Italian handwriting
• Boldface, has a thicker stroke than a Roman form and depending on their relative strokes, the name can vary from bold to semi bold to medium, black and extrabold
• Light, a lighter stroke compared to the Roman form (even lighter strokes are called 'thin')
• Condense, an extreme condensed style of the roman form are called 'compressed'
• Extended, an extended variation of Roman font

Comparing Typefaces

    The ten typefaces symbolizes 500 years of type design, aiming to achieve legibility and express contemporary aesthetics. Various typefaces can convey different senses and expressions. Designers should be capable of selecting the suitable type family that accurately and respectfully conveys the intended message.

✹✸✷✶✶✷✸✹

《Task 1 (20%)》

    Learning Goal: These exercises will aid and benefit you in your quest to gain theoretical and practical knowledge in Typography that will inform and provide you with the necessary experience to take on the module's task

    Submission: E-Portfolio (with all the information gathered documented logically and chronologically in the portfolio for the duration of the task in one post)

    Exercises:

• Type Expression, 4 words will be chosen to be expressed iteration, usage of the appropriate typeface and composed in a manner that allows the meaning of the word to be visible (still and in motion)
• Type Formatting, An incremental amount of text that address different areas within text formatting (type choice, type size, leading, line length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans and cross-alignment is given) Formatting Text 1:4 to 4:4A
• The task ends with the submission of one layout in A4 size demonstrating what you have learned from the incremental exercises

    Deadline: Week 6 (28th May 2024)

《Progress Work》

Task 1

     The class started a vote on the 6 words that we will be using for our type expression which were Balance, Jump, Roll, Crash, Flow, Spark.

    We then had to choose 4 out of the 6 to create a type expression for these words to be composed in a manner that allows the meaning of the word to be visible without altering the lettering from the 10 font typefaces that was given to us. I chose the words; Balance, Jump, Roll and Spark.

    I originally sketched out my drawings on Ibis Paint to brainstorm a few ideas.

figure 1.1 First plannings

    I got some feedback from Ms Hsin and some of the sketches are more graphical and some are just not in tandem to the 10 typefaces that was given to us. There was also a problem with the readability of some words, with the placements of certain letters made it hard to reference the word.

figure 1.1.5 First plannings (reviewed + shortlisted)

    I brainstormed more designs and expanded on some designs that I thought were conveyed the word and this was the outcome of it.

figure 1.2 Second round of designs

figure 1.2.5 Second round of designs (reviewed + finalised)

    I tried to play around with the placeholders for the text and started choosing the typeface that I would use for the final

    After this I would start experimenting the words and start exporting them into Adobe Illustrator. Honestly I had a little bit of a hard time whilst working with Adobe Illustrator, trying to find what the best way to perfect my designs.

figure 1.3.1 First trial of ROLL

figure 1.3.2 Second trial of ROLL

figure 1.3.3 Using actual fonts

    After awhile, I managed to get the hang of it and these were the Final Four:

figure 1.4 Final Digitized Type Express

    With this, kickstarts the animating part of this task that was the most unbelievably hardest and the most confusing thing I have ever had the duty to have been done in the past 5 weeks. Throughout this part of the task, I kept on wondering why we weren't allowed to use Adobe Animate instead of Adobe Photoshop, but I digress

    Without further ado, here is my animation for the word SPARK:

figure 1.5 SPARK gif

Task 2

    For task 2 we had to work with our names by applying kerning and tracking on the ten typefaces that were provided to us.

figure 2.1.1 'Edlin Raihana' text with Kerning

figure 2.1.2 'Edlin Raihana' text without Kerning

figure 2.1.3 'Edlin Raihana' text with and without Kerning comparisons

    After doing that part, we got an extract of "I am Helvetica" by John Doe to apply to formats. In addition to that, we were also to relate a picture to our choice of layout and give a caption to it.

figure 2.2.1, 2.2.2 & 2.2.3 Layout plans for 'I AM HELVETICA' by John Doe

    In between these 3 layouts, I decided to go with the second layout. But to end this chapter, I had to add a few more changes to the final to refine it

 

figure 2.3 Semi-Final Layout (Gridless)

figure 2.4 Semi-Final Layout (Grid)

    Head

• Font/s: Bodoni Std. Bold (title) & Garamond Regular (byline)
• Type size: 33pt (title) & 17pt (byline)
• Leading: 39.6pt (title) & 20.4pt (byline)

    Body

• Font/s: ITC New Baskerville Std. Roman
• Type size: 14pt/13pt
• Leading: 15.6pt
• Paragraph spacing: 12pt
• Characters per line: Average 24.3 Characters
• Alignment: Justify with last line aligned center, Align right, Align left & Justify with last line aligned center

Margins: 127mm (top,left,right & bottom)

Columns: 2

Gutter: 6mm

Feedback Time!

    I was told that my grids were improper so I tried to clean things up by applying proper column grids. Ms Hsin also recommended that I try to keep a constant with using Align right as it helps with the readability of my work. In addition to that, My font was way too big so I had to choose a smaller font from 14pt to 12pt whilst making some text bigger like the starting paragraph and ending paragraph.

    I did take a few artistic liberties by changing a few typefaces for the tittle and formatted the picture to fit the composition better. Here are the results!

figure 3.1 Final Layout Composition (Gridless)

figure 3.2Final Layout Composition (Grid)

    Head

• Font/s: Bodoni Std. Bold (title) & ITC Garamond Std. Book Condensed Italic (byline)
• Type size: 26pt (title) & 17pt (byline)

    Body

• Font/s: ITC New Baskerville Std. Roman
• Type size: 12pt
• Leading: 18pt
• Paragraph spacing: 12pt
• Characters per line: Average 24.3 Characters
• Alignment: Align left

Margins: 127mm (top,left,right & bottom)

Columns: 3

Gutter: 0.3mm

《Reflection》

    Throughout this task, I have learnt many things and developed skills that I have never learnt before. It made me familiarize myself with the multitude of Adobe software (mainly including Adobe Illustrator, Photoshop and InDesign).

    I enjoyed learning about the history of Typography and how the type letters came to be. I have definitely improved on my critical thinking skills since I had encountered multiple roadblocks throughout this task and had to hurdle over them with more unconventional methods and had to take research into my own hands. Although most of the lectures are established online through Youtube, I had a hard time focusing on the material. But other than that, the classes proved productive to me as I could plan out my slot for feedback and work around my mates.

    Of course, engaging in the classroom are essential in growth and improvement, whether from a fellow classmate or the lecturer themselves. Getting feedback from classmates help me broaden my perspective on what makes Typography, well typography and the readability of my sketches. Although, I have noticed that it was pretty challenging for me to keep up with the weekly updates as well, in tandem to doing the task itself due to my habit of zero-ing in and my inability to take process pictures whilst in that state.

✹✸✷✶✶✷✸✹

《Further Reading》

figure 3.0 Vignelli Canon on Design by Massimo Vignelli

    Vignelli Canon on Design by Massimo Vignelli, describes the 12 principles that are important and all designers should know which are Discipline, Appropriateness, Timelessness, Ambiguity, Knowign how to Design one, Visual Power, Intellectual Elegance, Responsibility, Equity, Semantics, Syntactics and Pragmatics.

Background Information

    With the creation of the National Parks, American Airlines' emblem, the New York City subway map, and numerous other projects, Massimo Vignelli left behind an indisputable legacy. He was the one who popularized the Helvetica typeface, produced a ton of useful and everyday items, including numerous instructional books you should read and a ton of commercial designs.

"If you can design one thing, you can design everything" - Massimo Vignelli

    With his use of simple, geometric shapes, he is able to create a timeless, logical, and visually striking design is the central theme of all of his works. His passion for the designs are remarkable as to when to asked which project he enjoyed the most, Vignelli replied, 

"Every project, from the very first one that I made yesterday to the last one that I made."

Additionally, he thought that all it takes to produce a masterpiece is the three colours red, white, and black.

    Neue Haas Grotesk, the latest digital version of Helvetica. [Note: It was the initial name for Helvetica when it was launched in 1957 by the Haas Type Foundry in Switzerland.] It's flawless and comes in a variety of weights, including thin, light, standard, medium, bold, and extrabold. Fonts he also used included Times Roman (1931), Garamond (1532), Bodoni (1788), and Century Expanded (1900).

Semantics

    Semantic represents the meaning of your future design; begin by investigating the history of your subject. Masimo Vignelli could begin by doing additional research on the business, the product, the intended usage, or the end consumer. The designer suggests paying attention to your diagnostic instincts and gut feelings, and attempting to express your ideas as naturally as possible. This is how semantics can assist you in connecting your design's message from sender to recipient so that it makes sense to both.

Syntactics

    Here, the syntactic portion refers to how your design's pieces should be put together. All of the elements—the headlines, pictures, typefaces, and grid—should work together to paint a complete picture. It covers everything, including the relationships between typefaces and images on the grid. In order to ensure that your design has the proper syntactic picture, the designer suggests that you align with the grids.

Pragmatics

    The harmony of syntactic and semantic components is symbolized by pragmatics. The pragmatic portion thrives where the first two converge. Everything in your concept should make sense and convey the precise message you intend to convey. Make sure you accurately communicate your goal (created by semantic and syntactic analysis) for your design to function. A disorganized and complex design will indicate a disorganized and complex intellect. If your design defies trends and achieves elegance and timeless recognition, then everything is done correctly.

Epilogue

    One of the most significant individuals in the history of design, and graphic design specifically, is Massimo Vignelli. Every day, his method benefits countless millions of people, and his projects and references to them are available everywhere in the globe. He might be regarded as one of the most notable persons to model after because the ideas he developed will be applicable for the entirety of design history and beyond.