Typography / Task 3: Type Design & Communication

The task is to select a typeface from a list of ten given typefaces. Mr. Vinod recommends using lowercase letters with ascenders, descenders, and x-height, and capital letters with cap height. The activity involves drawing lines, circles, and specific letters using various tools, ensuring consistent angles and pressures. This exercise helps practice coordinating minds and hands, as creating a cohesive writing style requires consistent angles, pressures, and speed. Using fine, bold, brush, semi-bold, and broad pens, the activity requires full concentration to maintain the correct angle, speed, and pressure, allowing for the observation of the distinctions between different tools.

Week 8

This week is independent learning week, so there was no any physical or online classes. Therefore in this week, we continue to proceed on our writing activity from week 7. We chose the one we preferred out of the 5 selected options from different tools and continue to practice and explore the particular writing style.

Week 9

In week 9, the writing activity led to task 3, which involved digitising letterforms using Adobe Illustrator. Mr. Vinod demonstrated various methods, including brush and pen tools, as well as a more precise method using basic shapes and pen tools. After the demonstration, students began digitising letterforms in the classroom, following Mr. Vinod's guidance to create an art board that met the requirements. The process involved resizing and re-editing the letterforms to ensure they resembled the original designs.

Week 10

This week, Mr. Vinod discussed the importance of observing and researching commercial vehicle labels in Malaysia, which often goes unnoticed. He highlighted the handwritten words on vehicles and the digitisation of writings as the initial stage in designing a typeface. The process of refining digitised letters requires time and attention, and the students received feedback, advice, and ideas from Mr. Vinod throughout the process.

Week 11

Mr. Vinod provided feedback on the refined version of the digitised letterforms this week. He advised further research on punctuation marks and demonstrated steps for transferring the letterforms to FontLab. He also demonstrated how to adjust kerning of typefaces using FontLab. The students were also briefed on creating a poster for their font, allowing them to craft their own phrases or sentences using the limited set of letters. The poster size was A4, the phrase or sentence was 6-7 words, and the information text is set in 12 pt Helvetica or Univers LT Std.

Week 12

Mr. Vinod provided detailed explanations and examples of how our final submission for task 3 should be presented on the blog. He instructed us to create an additional post encompassing all submissions from tasks 1 to 3. He also provided feedback on our posters, ensuring they adhered to the rules. After receiving feedback, we made necessary amendments and finalised our work.

INSTRUCTIONS

Figure 1.1 Assignment Guidelines for Typography

TASK 3: TYPE DESIGN AND COMMUNICATION

Our task for this assignment is to develop a typeface. The letters I will be working on are " a e t g r i y m p n , . ! # . "We have to first sketch out our ideas and explore different options. After that, we'll proceed to digitise our letters using software such as Adobe Illustrator and FontLab. After completing the font, the final step will be to create an A4 size poster to showcase the typeface we've created.

1. Research

Before creating my own typeface, I first have to understand the anatomy of a typeface as it is crucial for accurate description, legibility, visual harmony, typeface selection, layout, and type design. The elements of a typeface, such as x-height, counter size, and proportions, directly impact legibility and readability. By considering the anatomy, I can create visually balanced and cohesive typefaces. It aids in making informed decisions about appropriate typefaces for specific contexts and helps in proper placement and alignment in layouts.

Figure 2.1 Anatomy of a Typeface

Figure 2.2 Explanation Type Anatomy

Overshoot

The overshoot of a round or pointed letter (like O or A) is the degree to which it extends higher or lower than a comparably sized "flat" letter (like X or H), to achieve an optical effect of being the same size.

Figure 2.4 Overshoot

2. Exploration

The assignment begun with a simple exercise provided using 5 different writing tools. We are required to complete:

Writing diagonal, horizontal, vertical and circular lines for all 5 tools in 5 different ways for each tool.
Writing 'AOTMX' for all 5 tools in 5 different ways for each tool.
Select 1 option from the 5 different options from each tool and write "a e t l g r i y m p n" in the selected style. Choose either uppercase or lowercase to write in.

The tools that I have chosen are:

Artline Calligraphy Pen 3.0 (Semi-Broad)
Tombow N15 (Brush)
Sharpie Marker (Round)
Artline Decorite 3.0(Calligraphy)
Artline Drawing System 0.7 (Standard Fine)

Figure 3.1 Tools, Week 8 (22/5/2023)

Figure 3.2 5 Different Nibs, Week 8 (22/5/2023)

Figure 3.3 Brush Nib, Week 8 (22/5/2023)

Figure 3.4 Semi-Broad Nib, Week 8 (22/5/2023)

Figure 3.5 Round Nib, Week 8 (22/5/2023)

Figure 3.6 Calligraphy Nib, Week 8 (22/5/2023)

Figure 3.7 Standard Fine Nib, Week 8 (22/5/2023)

After practicing writing different styles in each tool, I have picked my favourite style from each tool.

Figure 3.8 5 Tools Written in Favourite Writing Style, Week 8 (22/5/2023)

After we received our feedback, Mr Vinod picked Semi-Broad which is the typeface that I will be using for this assignment. However I dislike the way I wrote the letters in Semi Broad which is in Figure 3.8. So I went to Google Font to look for some typefaces that are written in Semi-Broad.

Figure 3.9 Carter One - Google Font

Figure 3.10 Bubblegum Sans - Google Font

Figure 3.11 Yatra One - Google Font

After that I continued practice writing my letters in Semi-Broad in diagonal direction without changing the direction of the nib.

Figure 3.12 Semi Broad Nib, Week 9 (25/5/2023)

3. Digital Exploration

These are the handwritten letters I picked from Figure 3.12 to digitise my typeface.

Figure 4.1 Semi Broad Nib, Week 10 (5/6/2023)

Mr. Vinod gave a tutorial on how to digitise our hand written letters, I decided to use the calligraphy brush tool in Adobe Illustrator to write and mimic the letters I wrote.

I decided to elongate the horizontal stroke of the letter A and E, because I thought it'll look interesting.

Figure 4.2 Digitised letter A and E, Week 10 (5/6/2023)

Then I used the same strokes from the letter T on the letter I, so it looks more consistent.

Figure 4.3 Digitised letter T and I, Week 10 (5/6/2023)

I also used the same strokes from the letter R on the letter P.

Figure 4.4 Digitised letter R and P, Week 10 (5/6/2023)

This is my first attempt, I still think there's room for improvement.

Figure 4.5 Digitisation Progress, Week 10 (5/6/2023)

Mr Vinod said that we should redefine our letterforms so it looks more consistent and neat. Then I redefine the letters by sharpening and straightening the edges.

Figure 4.6 Redefined Letters, Week 10 (9/6/2023)

This week, we have to create punctuations for our typeface. I went to do some research on sans serif typeface's punctuations and this is what I came up with.

Figure 4.7 Punctuations, Week 11 (12/6/2023)

Figure 4.8 Letterforms with Punctuations, Week 11 (12/6/2023)

After receiving feedback from Mr. Vinod, he said my fonts look fairly consistent and clean, however the hashtag and the comma don't really match with my typeface, so I did some research and came up with another punctuation style.

Figure 4.9 Redefined Punctuations, Week 11 (16/6/2023)

Figure 4.10 Letterforms with Redefined Punctuations, Week 11 (16/6/2023)

However, I still don't think the punctuations match with the typeface, so I went and did some more research and came up with these punctuations and I finally think it belongs to this typeface.

Figure 4.11 Another Redefined Punctuations, Week 12 (19/6/2023)

Figure 4.12 Letterforms with Punctuations, Week 12 (19/6/2023)

4. FontLab

Now it's time to paste all of my letterforms into FontLab! I followed the steps from recorded lecture and successfully paste all the letters in FontLab.

Figure 5.1 Letter A in FontLab, Week 12 (20/6/2023)

Figure 5.2 All Letterforms and Punctuations in FontLab, Week 12 (20/6/2023)

After I typed all of my letters in FontLab, it's time to kern and adjust these letterforms!

Figure 5.3 Letterforms Before kerning and Adjustment, Week 12 (20/6/2023)

After kerning and adjustment, it looks so much better.

Figure 5.4 Letterforms After Kerning And Adjustment, Week 12 (20/6/2023)

This is the sentence I created only using the alphabets that are provided.

Figure 5.5 Caption for Poster, Week 12 (20/6/2023)

5. Poster Progress

After generating my font, I then went to Adobe Illustrator to create the poster. Below are my drafts.

Figure 6.1 Poster #1, Week 12 (20/6/2023)

Figure 6.2 Poster #2, Week 12 (20/6/2023)

Figure 6.3 Poster #3, Week 12 (20/6/2023)

Then I came up with a new sentence and design, however I don't think it's working.

Figure 6.4 Poster #4, Week 12 (20/6/2023)

Then I created another new sentence, this time I used six words and split them in half, three words at the top left corner then the other three at the bottom right corner so it creates balance.

Figure 6.5 Poster #5, Week 12 (23/6/2023)

After getting Mr. Vinod's approval, he said that we could take photo of a textured wall and placed it as the background for our poster.

This is the photo I took because I think this wall looks interesting and can create depth for my poster.

Figure 6.3 Textured Wall, Week 12 (23/6/2023)

Then I brought the image to photoshop to lower down the opacity and darkness.

Figure 6.4 Textured Wall After Photoshop, Week 12 (23/6/2023)

Then I pasted it on my poster.

Figure 6.5 Poster with Textured Wall Background, Week 12 (23/6/2023)

FINAL OUTCOME

Font Download Link: https://drive.google.com/file/d/1Kf4BMLuMLPBfY77AQ3zdoeuvCQcWOYAE/view?usp=sharing

Screen Grab of "New Metrics Tab" in FontLab

Figure 7.1 Screen Grab of "New Metrics Tab" in FontLab, Week 13 (25/6/2023)

Final Font "Cumberbatch"

Figure 7.2 Final Font "Cumberbatch" - JPEG, Week 13 (25/6/2023)

Figure 7.3 Final Font "Cumberbatch" - PDF, Week 13 (25/6/2023)

Final Poster "Cumberbatch"

Figure 7.4 "Cumberbatch" Poster - JPEG, Week 13 (25/6/2023)

Figure 7.5 "Cumberbatch" Poster - PDF, Week 13 (25/6/2023)

FEEDBACK

Week 8

General Feedback: It was independent learning week, we have to continue practice writing the letters that were suggested by our lecturer.

Specific Feedback: Continue practice writing in Semi-Broad, and identify the best letters I can use for digitisation.

Week 9

General Feedback: Practice writing the letter, not design the letter. Take the time to explore and improve. don't directly skip into the final option.

Specific Feedback: Continue study and practice writing the letter "R" and "P".

Week 10

General Feedback: We need to refine our digitised letters. Go to Google Font to search for inspiration and improve our digitised letters.

Specific Feedback: Use the diagonal brush tool, do more research on the fonts and punctuations.

Week 11

General Feedback: Insert our letters into Fontlab and create a sentence using the given letters and make it into a poster.

Specific Feedback: Typeface looks fairly consistent and neat, however need to change the hashtag as it looks like it doesn't belong to the same typeface.

Week 12

General Feedback: The poster must have dynamism, impact and balance. This enhances legibility and create a sense of harmony between the placement of each element.

Specific Feedback: The composition looks alright but need to have more dynamism and balance. Don't make the texture part of your design.

REFLECTION

Experience

Designing a typeface was a fulfilling and challenging task that required a harmonious blend of creativity, attention to detail, and technical proficiency. The process involved exploring various writing tools and techniques, pushing the boundaries of creativity, and analyzing existing fonts. Mr. Vinod's critique sessions played a pivotal role in shaping the work, providing constructive feedback and honed my skills. The iterative process involved careful consideration of proportions, curves, spacing, and consistency across the character set. The technical aspect of font creation added complexity, requiring a comprehensive understanding of software tools and encoding standards. Despite the challenges, the experience of creating a typeface was immensely rewarding, as it allows me to explore the intersection of art and functionality.

Observation

The typeface design process emphasizes the importance of contrast, curves, and stroke consistency in creating a visually appealing and legible typeface. Striking the right balance between these elements is crucial for creating harmony and aesthetic charm. Smooth curves are crucial for creating visually pleasing letters, but achieving them requires meticulous attention to detail and manipulation. Consistency in stroke widths and proportions is also crucial for a well-balanced design. The exploration of contrast, smooth curves, and consistent stroke widths highlights the intricate artistry and technical precision required in typeface design. Even the smallest details can significantly impact the overall composition and effectiveness of a design.

Findings

The task highlighted the importance of meticulous digitization in translating hand-drawn sketches into a refined typeface. Investing time in digitization using software like Adobe Illustrator and FontLab is crucial for a polished and professional outcome. Exploring different tools, styles, and existing fonts during the design process allowed for a deeper understanding of typography and personal satisfaction. Combining knowledge from existing fonts with experimentation and informed decisions led to a more refined and visually appealing typeface. Overall, the task highlights the significance of digitization, attention to detail, and exploration of various tools, styles, and fonts in creating a unique and satisfying typeface.

FURTHER READING

Figure 8.1 Typography, Referenced: A Comprehensive Visual Guide to the Language, History, and Practice of Typography (2012)

REFERENCE:

Haley, A. et al. (2012) Typography, referenced: A comprehensive visual guide to the language, history, and practice of typography. Beverly, MA: Rockport Publ.

Chapter 3: Type Classification and Identification

Figure 8.2 Type Classification and Identification

The section "Typography, Referenced" provides an overview of the different type classification systems, including the Vox-ATypI and Thibaudeau classifications. It then moves on to a detailed examination of the different type categories, including serif, sans-serif, script, and display. It also covers the importance of identifying typefaces correctly, such as using tools such as WhatTheFont and Identifont, and the different factors that can affect the legibility and readability of typefaces, such as size, spacing, and colour. The section also includes examples of typefaces from different categories, as well as practical advice on how to choose the right typeface for a particular design project.

Figure 8.3 Typeface Possible Weight Variants

A study of a typeface’s possible weight variants can be extremely helpful for publications such as magazines that need to combine different typefaces for headings, straplines, main text, captions, pull quotes, and so on.

Figure 8.4 Serif Fonts

Serif Old Style: The first Roman types were created between the late 15th and mid-18th centuries. The curved strokes in these designs typically inclines to the left, with weight stress falling at approximately eight and two o'clock. Hairlines are heavy, and some Venetian Old Style designs feature a diagonal cross stroke. Serifs are bracketed, and head serifs are often angled.

Serif Transitional: In the 18th century, John Baskerville developed Transitional typefaces, allowing for finer character strokes and subtler shapes. These typefaces represent the transition between Old Style and Neoclassical designs, featuring bracketed serifs and oblique head serifs.

Serif Neoclassical: Typefaces from the late 18th century, such as those by Giambattista Bodoni, were initially classified as Classical designs. However, they evolved into Modern and Neoclassical or Didone styles. These typefaces feature abrupt contrast between thick and thin strokes, vertical curved stroke axis, and often ball-shaped stroke terminals.

Serif Glyphic: Typefaces in this category reflect lapidary inscriptions, have minimal stroke weight, and have a vertical curved stroke axis. They are distinguished by a triangular-shaped serif design. Type classification systems divide them into Greek and Latin.

Serif Clarendon: Typefaces inspired by Clarendon style, first released in the mid-19th century, were boldfaces with slight stroke contrast and medium-length serifs. Later, they evolved into display types with more prominent character stroke weight and longer serifs.

Serif Slab: Slab serif typefaces gained popularity in the 19th century for advertising display designs with heavy serifs and minimal bracketing. They are often viewed as sans serif designs with heavy serifs added.

Figure 8.5 Sans Serif Fonts

Sans Serif Grotesque: The first commercially popular sans serif typefaces featured contrast in stroke weight, squared curves, and bowl-and-loop lowercases. Modern sans serif designs, derived from Grotesques, are refined in form, with less pronounced stroke contrast and lost squareness in curved strokes. Their distinctive characteristic is single-bowl g and monotone weight stress.

Sans Serif Humanist: Roman inscriptional letters proportions influence these typefaces, with contrast in stroke weight. They are legible, easily read, and closely match serif design characteristics, with strong calligraphic influence.

Sans Serif Geometric: Geometric shapes influence typeface construction, with strokes and perfect forms, but less readable than Grotesques.

Sans Serif Square: Grotesque designs feature dramatic squaring of curved strokes, more character spacing than sans serif, and are limited to display designs.

Figure 8.6 Script Formal

Figure 8.7 Script Casual

Figure 8.8 Script Calligraphic

Script Formal: These typefaces derive from seventeenth-century formal writing styles. Many characters have strokes that join them to other letters.

Script Casual: These script typefaces appear informal and quickly drawn, often using brush strokes to connect letters.

Script Calligraphic: Calligraphy-like script faces, connecting or non-connecting, often written with flat-tipped tools.

Figure 8.9 Script Blackletter/Lombardic

Figure 8.10 Ornamental Antiques, Art Nouveau, and Art Deco

Figure 8.11 Ornamental Decorative

Script Blackletter / Lombardic: These typefaces look like manuscript lettering prior to the invention of movable type.

Ornamental Antiques, Art Nouveau, and Art Deco: These typefaces and their revivals were used for display applications between the mid 1800s and early 1900s. They have a distinct feeling of time and place.

Ornamental Decorative: These typefaces challenge pigeonholing, resembling stenciled letters or decorated with flowers, and using unconventional shapes and proportions for distinctive, dramatic effects

Search This Blog

Lim Jia Zhen (0349294)

Typography / Task 3: Type Design & Communication

Comments

Post a Comment

Popular Posts

Design Principles - Task 1: Exploration

Design Principles - Task 3: Design