Typography - Task 3: Type Design & Communication
Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media
Typography
Task 3
INDEX:
1.
Class Summary
2.
Task 3
Type Design & Communication
3.
Feedbacks
4.
Reflection
5.
Further Readings
6. BARANG2 SENDIRI S’JA – Commercial Vehicle Labels in Malaysia
LECTURES
Completed in Typography - Task 1: Exercise
CLASS SUMMARY
Week 7 / Task 3 + Activity
After that, sir brief us on our new task. We are to choose a typeface from the given 10 typefaces and a typeface from Fontshare to analyse their anatomical parts - dissection of letters. Mr Vinod suggested us to choose small letters that have ascenders, descenders, x-height and capital letters that have cap height. Then, we proceed to doing our activities, which we try using different tools to draw out different lines (horizontal, vertical, diagonal), circle and some letters. We should maintain the same angle throughout a style as different angles, pressures, etc will cause different results. This activity will help us to practice on the coordination of our mind and hand as to create a style (same angle, same pressure, same speed, etc) of writing requires a lot of practices. I used fine, bold, brush, semi-bold and broad pens for this activity. Mr Vinod also urged us not to write a letter with only 1 stroke because most of the time, the letters are written with more than one stroke. I think this activity may look simple, but it requires our concentration to focus on our angle, speed, pressure so that we see the differences between the tools.
Week 8 / Independent Learning Week
Week 8 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 / Task 3
In week 9, we continue with the writing activity that lead us to task 3. Mr Vinod first explained to us how are we going to proceed with task 3. We were going to the digitisation phase after choosing the final version from our practice. Mr Vinod then showed and demoed to us the ways we could digitise our letterforms using Adobe Illustrator. The first way is using brush tool and then combined with pen tool to work on the details. The second way is using the pen tool first before using the brush tool. The other way is to use basic shapes and use pen tool to amend them until they look similar to the letterforms we wrote. This method required more time but it is most precise method. After that, we started to try digitising the letterforms in the class. Mr Vinod advised us to watch the video he posted first so that we could understand the ways to create artboard following the requirements.
*We are advised to join a talk by Ms Low Hsin Yin titled "BARANG2 SENDIRI S’JA – Commercial Vehicle Labels in Malaysia" on this week.
Week 10 / Task 3
In week 10, Mr Vinod explained to us how the talk "BARANG² SENDIRI S’JA – Commercial Vehicle Labels in Malaysia" by Ms Low Hsin Yin can benefit us. Sometimes, we noticed something but don't really go into it and do research about them, this talk had given us the knowledge that we did not notice in daily life although we see them. I think this talk is interesting as well because I did not know and never thought that the words on the vehicles are handwritten.
After that, Mr Vinod checked on our work from last week, which is the digitisation of our writings. He then told us that writing is just the beginning of the process of designing a typeface. To design a typeface, we need to refine what we had digitised and the process of refining takes time. We then started the work of refining our digitised letters, while Mr Vinod gave us some feedbacks/advices and ideas.
Week 11 / E-portfolio + Task 3
In week 11, Mr Vinod requested us to checked on the e-portfolio of other peers and give them feedbacks. We had to pick 4 peers (2 locals, 2 foreigners) and looked through their e-portfolios, then tell them what we had noticed.
After giving feedbacks on the e-portfolios, Mr Vinod gave us feedbacks on the refined version of our digitised letterforms. The designing stage ends today, therefore if there are any issues of our designs, we have to amend and fix them so that we can move to FontLab. Mr Vinod advised us to do more research about the punctuations because we should understand the characteristics of the punctuations when we designed them. Then, Mr Vinod showed us the steps to move our letterforms to FontLab, including the settings (preferences). He also explained and showed to us how to do individual kerning on FontLab.
Then, we were briefed about the poster for our font. The poster should be displaying our font, Mr Vinod allowed us to come out with our own phrases or sentences with the limited letters we designed. There are a few rules we have to follow, the size of the poster have to be A4, there should be 6-7 words, we should not use more than one font size, the information should be 12 pt, Helvetica or Univers LT Std.
Week 12 / Task 3
Mr Vinod explained and showed us the examples of how our final submission of task 3 should look like, what to include in our blog. Besides, we also had to create one more blog post that includes all of our final submissions for all the tasks, from task 1 to task 3.
After that, Mr Vinod gives us feedbacks on our poster that showcase our typeface. We have to make sure that the posters follow the rules that are stated last week. After receiving feedbacks from Mr Vinod, we were given time to amend our work and finish it.
INSTRUCTIONS
1. Type Design Researches
A) Typography Anatomy
Typography anatomy introduces us to different parts of a letter, such as x-height, stem, ascender, descender, baseline, serif, counter, and more. We have to aware of these elements when sketching and creating a typeface.
B) Basic Concepts
The basic concepts of type design include stroke, counter, body and structural groups.
i) Stroke refers to the main, continuous line that forms the shape of a letter. It can be thick or thin and may have different degrees of modulation or contrast within a typeface.
ii) Counter refers to the enclosed or partially enclosed space within a letterform. It is the negative space surrounded by the stroke.
iii) Body group includes the letters that have a similar basic shape or structure, such as the lowercase letters in a typeface. These letters typically share similar characteristics, such as x-height, baseline, and overall proportions, to maintain consistency and harmony within the typeface.
iv) Structural group comprises letters that share similar constructional elements. Archetypal groups can be made on the basis of the dominant strokes of each letter: verticals and horizontals (E F H L T), diagonals (V W X), verticals and diagonals (K M N Y), horizontals and diagonals (A Z), circular strokes (C O Q S), circular strokes and verticals (B D G P R U), and verticals (I J).
C) Typography Illusions
i) Overshoot
Human perception makes circles look smaller than squares of the same width and height. Designers have to utilise optical corrections: they draw circle-shaped glyphs slightly bigger than their square based counterparts. This makes them protrude slightly beyond the baseline and the cap-height line.
ii) Vertical – Horizontal
We perceive horizontal elements as longer than vertical elements of the same length. Optical corrections are needed to make symmetrical shapes appear symmetrical. Horizontal strokes seem thicker than they actually are. They also need optical corrections.
iii) Diagonal Thickness Variations
There is a variation in thickness of diagonal lines even in sans-serif typefaces. This effect is a legacy of ancient and medieval calligraphy. It is sometimes used even in glyphs without diagonal lines, like /U. This illusion can be very helpful when drawing typefaces. Designing a /V with both legs of the same thickness could lead to it being perceived as having the right leg thicker.
When two lines of differing widths intersect at an angle other than 90°, the thinner line seems not to be continuous. This occurs most often in the glyphs /X and /x. To counteract it, the diagonals need to be optically corrected.
Wherever two lines cross, especially at a steep angle, the illusion of a congestion appears. To combat this, type designers make some lines thinner near the joints. This is called tapering. Even the most geometric of typefaces use this trick to actually appear more geometric.
Many glyphs rendered upside down look wrong. As if their proportions were distorted. This is due to an optical illusion making the top of two objects seem bigger. Type designers often have to design the lower part of a glyph bigger, to make it look balanced.
Reference: https://www.piotrlukaszkiewicz.pl/blog/?lang=en
D) Deconstruction References
By deconstructing letters, designers gain a deeper understanding of their structure, enabling them to create more informed and intentional typographic designs. It facilitates exploration, experimentation, and customization, leading to innovative and impactful typographic solutions.
2. Writing Activity
W7_Instructions:
- 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 k g r i y m p n" in the selected style. Choose either UPPERCASE or lowercase to write in.
5 tools in 5 different ways for each tool:
5 selected options:
From this activity, I found that it is not easy to recreate the same style of writing after changing from one style to another. I tried to record the angles I used for each style so that I am able to rewrite the style. I think another challenge in this activity while rewriting the 5 selected options is we have to use the same pressure as when we wrote in 5 different ways. Overall, I think this activity is quite fun as we can explore different styles of writing using a tool and also explore & practice on different writing styles using different tools.
W8_Instructions:- Take the selected writing style and tool and explore and practice writing in that style. Write more lines. Use the selected letterforms: a e t k g r i y m p n.
- Write until you find the letterforms have a consistent look and feel. They must looks like they are part of a family.
- Analyse the letters, look for the letterforms that don’t seem consistent and resolve them.
Practising and resolving the letters:
Final option:
3. Analysis
We are to choose a typeface from the given 10 typefaces and a typeface from Fontshare to analyse their anatomical parts - deconstruction of letters. As Mr Vinod advised us to choose small letters that have ascenders, descenders, x-height and capital letters that have cap height, I chose 'n', 'k', 'y' and 'A' to do deconstruction. By deconstructing the letters, we are able to gain insight into how each part contributes to the overall shape and visual identity of a letter. Deconstruction of letters also help us to examine the proportions, balance, and relationships between various parts of a letter.
A) Janson Text LT Std Bold
Fig.2.19 Deconstruction of 'A' (Janson Text LT Std
Bold) (16.5.2023 - Week 7)
B) Bespoke Serif (from Fontshare)
C) My Own Writing
D) Punctuations
After finished digitising the letters, we also need to complete some punctuations: . , ! and #. Before starting to create and design the punctuations, I went to Google Fonts and Fontshare to do some research about the height, the shapes, etc of those punctuations.
i) Google Font
From Google Font, I tried to find a few typefaces that are similar with my letterforms and observe the shapes of the punctuations especially for '!', I wanted to know whether the exclamation mark is the same as the shape of letter 'i' or not.
From my observations on these 4 fonts, the exclamation marks are not exactly the same with the letter 'i' (except Fig.2.25 - Nova Cut). The vertical stroke of the exclamation mark has a wider top and a narrower bottom. For '#', the angle of the vertical stroke can be straight or slightly incline.
ii) Fontshare
I tried to observe the height of the punctuations from Fontshare as this website displayed the letters and punctuations with the measurements like cap height, baseline, x-height and descender height.
From here I know that, the height of the exclamation mark is according to the cap height, same goes to the '#'; while the ',' is on the middle of the baseline and the '.' is above the baseline (exceed the baseline due to overshoot).
Comma
4. Digitisation
1000pt x 1000pt art board; 500pt x-height*; cap line; descender and ascender line; baseline and median line)
*subject to your design, it can be smaller or bigger
I started to digitise the letterforms after determining the final option of my letterforms [Fig.2.17]. As there are different ways to digitise the letterforms. I try using different method initially to see which of them is the most effective method for the letterforms I created. I used basic shapes, pencil tool and brush tool to try out the outcome.
Fig.2.32 Digitisation of letterforms using brush tool (30.5.2023
- Week 9)
Fig.2.34 Creating outlines from strokes and uniting the shapes
(30.5.2023 - Week 9)
Then, I started to amend some parts of the letterforms to make them more alike with my sketch. I duplicated them so that if I made any mistakes and want to go back to the previous step, I still have the file. I united the strokes and fixed some of the parts that need to be fixed. From analysing the letters, I realised that the vertical stroke is longer than the shoulder for letters like 'm' and 'n'. Therefore, I also made the vertical strokes longer for those letters.
Fig.2.36 Digitisation Process #2 - Outline View (30.5.2023 - Week
9)
5. Refinement
After digitising the letters directly from our writing, we proceeded to the refinement stage where we add details and different ideas on the letters. I decided to add some characteristics on the letters, one of them is extending the strokes with perpendicular angle. I refined all letters one by one until I'm satisfied with it. While refining, I duplicate some of the strokes I had refined and put them aside so that I could make the following letters that have the same strokes with the strokes I already have.
After receiving feedbacks from Mr Vinod, I amend the letters 'i', 'k' and 'r'. I used the original version of the dot of the letter 'i'; I also made the end of the ear of 'k' and 'r' thicker and rounded the edge like what Mr Vinod had advised me.
After completing the letters, I proceed to create the punctuations. Similarly, I used the existing strokes in the 'bank' to complete these punctuations: . , ! and #. After doing researches and observations, I started to digitise them. For ',' and '.', instead of using circle, I used rounded rectangle so that they have a similar angle and same characteristic as other letters. For '!', I used the vertical stroke of the letter 'i' as starting point and add basic shapes for the dot below. For '#', I used the horizontal stroke from 't' and diagonal stroke from 'k' to create a slightly incline (for vertical stroke) '#'. However, I feel like it does not have characteristic like part of the family of other letters, I tried to use a vertical stroke to replace the diagonal stroke from 'k'.
After receiving feedbacks from Mr Vinod in week 11, I amended some of the 'r' and the punctuations. I made the ear of the letter 'r' thicker, like what Mr Vinod advised. I also amend the hashtag to become slightly incline from the straight hashtag. I'm not sure about how to improve the period sign and the comma sign, so I referred back to the Instagram link Mr Vinod posted about designing the period and comma signs. For comma sign, I followed the steps like [Fig.2.30], create the comma sign from 2 period signs. I realised that the head of the comma sign should be smaller than the period, so I decrease the size after I derived the shape of comma from the period sign.
6. FontLab
After finalising the letters and punctuations on Adobe Illustrator, we continue our task on FontLab 7. We need to copy and paste our artwork into FontLab 7. So before I started to transfer my artwork, I watch the video posted by Mr Vinod where he show us how to set up the app and copy them according to the measurements. I followed the video and move the letters and punctuations into FontLab 7.
After I pasted all the letters and punctuations I had in Adobe Illustrator, I proceed to next step, which is kerning. As I need to do individual kerning for each letter, I used some time to complete individual kerning for all letters. As we need to take care of the kerning of different combinations of letters, I started with 'a' and 'e', then I continue with individual kerning of 'a' with the following letters: 't', 'k', 'g', ...... After completed with 'a', I repeated the step with letter 'e' so that I won't miss out different combinations of letters.
Fig.2.46 Testing the Outcome (6.6.2023 - Week 10)
After readjusted the letterform and punctuations on week 11, I repeated the same process for those glyphs, moving them from Adobe Illustrator to FontLab 7. I also redo some of the kerning because I found some of them is too close or too far away from each other. In week 12, I also increased the size of the comma and period sign
Fig.2.48 Testing the Final Outcome (13.6.2023 - Week 11)
7. Poster
After we generated the typeface, we have to create a poster using the typeface. We are allowed to come out with our own phrase with the limited letters. It is quite challenging for me to think of a phrase/slogan of 6-7 words as the letters are limited, so I started from identifying the words with those letters and arrange them into a phrase/sentence. I used a word generator website to generates words that only contain these letters and figured out what phrases I can create.
Shortlisted Posters
Fonts: Outliner; Univers LT Std (Roman)
Point size:
145 pt; 12 pt
Leading: 130 pt; 14 pt
Fonts: Outliner; Univers LT Std (Roman)
Point size: 150 pt; 12 pt
Leading: 120 pt; 14 pt
I chose poster #1 as the sentence consists all letters. After receiving feedbacks on week 12, I increased the size of the comma and decrease the opacity of the black background for my poster #1. I also readjusted the ear of the 'r' to make it become more thicker.
Final Type Design & Communication
Font download:
https://drive.google.com/file/d/19BwM1Ov2qQlRAGFmBRGcFqaCwnAMWi78/view?usp=sharing
Fig.2.54 Final Task 3: Type Design and Communication "Outliner" -
PDF (20.6.2023 - Week 12)
Fig. 2.56 "Outliner" A4 Poster - JPEG (20.6.2023 - Week 12)
Fig.2.57 "Outliner" A4 Poster - PDF (20.6.2023 - Week 12)
FEEDBACKS
Week 8
General Feedback: [ILW]
Take the selected writing style and tool and explore and practice writing in that style. Write more lines. Use the selected letterforms: a e t k g r i y m p n. Write until you find the letterforms have a consistent look and feel. They must looks like they are part of a family.
Specific Feedback:
Mr Vinod suggested me to go with semi-broad. I need to practice writing in that style a few more times to identify the best letters you can use for digitization later (when instructed). For now, keep writing in that style.
Week 9
General Feedback:
Follow the procedures step by step for writing activity and don't directly skip to designing the 5 selected options without writing out 5 styles using 5 tools.
Specific Feedback:
The descenders looks a little longer than they should be, either (preferably) shorten the descenders while digitising in Adobe Illustration or adjust the size of the letters as a whole.
Week 10
General Feedback:
The digitisation we completed last week are a digitised version of our writing. Next, we need to refine them from our digitised letters. Start over when refining the letters and don't continue (to refine) using what we already had because it limits us.
Specific Feedback:
After the first refinement, I should keep refining on the dot of the letter 'i', and also for the ear of letters 'k' and 'r', make the end thicker and rounded the edge.
Week 11
General Feedback:
The hashtag mark may be different due to different typefaces; analyse different type of hashtags to understand the nuances. The size of the stem stroke of explanation mark is not the same (top & bottom).
Specific Feedback:
The ear of the r can be thicker, can improve on the punctuations because they are not really working out.
Week 12
General Feedback:
Include the letters as many as possible; the information can be used to link the sentence. Always look at the kerning between the letters when typing out the sentence as some may be off depends on the shape of the letterforms.
Specific Feedback:
The comma is too small. Decrease the black background to 95% or 90% so it doesn't look too black. Otherwise, the poster is ok.
REFLECTION
Experience
This task
is very different from what we had done in the previous tasks as in the
previous tasks, we focused more on layout and expression, but in this task, we
are going closer and deeper into designing a typeface. From exploring different
writing styles with different tools and angles, pressure with our own
experiences on writing on paper, to digitizing and refining the writings in
Adobe Illustrator and last but not least, doing individual kerning for each
letter, every step required our dedication on expressing our ideas. I feel like
the hardest part of the whole task is the process of individual kerning as
sometimes some letters (like rt) just seem unnatural for me no matter I
distance or closer them. However, it was a very interesting process to be able
to generate a typeface from the beginning of the task until I see the outcome
and I feel so fascinating. I can’t say that it’s an easy process but I think
this task increased my interests in typography.
Observation
From this
task, I can observe the first step, which is the writing exercise, is very
important for us to proceed with this entire task because it allowed to know
the natures of the stroke with different tips/brushes, angles, pressures and
more. With different factors, the outcome of the strokes will be very
different, therefore, we have to keep on practicing on the same angles,
pressure so that we are able to come out with letterforms that look like one
family before we start digitizing. I also observed that besides the tools can
affect the writings, the medium we writing on can also affect the writings.
Furthermore, through type analysis which required us to deconstruct the
letters, I am able to observe different characteristics I didn’t notice before,
for example, the vertical stroke is longer than the shoulder for letters like
'm' and 'n'.
Findings
Through this task, I found that the process of designing a typeface required a delicate balance between creativity, precision, and attention to detail. I gained a deeper appreciation for the importance of research and analysis in typeface design. Through the researches, I am able to gain knowledge about typography illusions that enable me to pay attention to the details while designing a typeface. Overall, I found that the process of designing a typeface required a lot of findings, observation, research, analysis and also our patience, dedication, concentration as we need to pay attention to the details of every step.
FURTHER READINGS
Typography, Referenced is the ultimate source of typographic information and inspiration, documenting and chronicling the full scope of essential typographic knowledge and design from the beginnings of moveable type to the present "golden age" of typography.
The contents of this book are divided into 12 chapters, including type history and timeline, type design and development, type classification and identification, type designers, type foundries and more. I think this book is very related to what we are learning in this module and it can provide us more extra information about typography.
Chapter 3: Type Classification and Identification
In this chapter, the book explains that most typefaces usually fall into 3 groups, which are those with serifs, those without serifs and the scripts. A classification system is important as it can help designers to identify and combine various typefaces.
15 Groups of Type Styles
1. Serif Old Style
The axis of curved strokes normally inclines to the left in these designs, the contrast in character stroke weight is not dramatic
2. Serif Transitional
Moderate contrast in stroke weight, bracketed serifs, and a more vertical stress than their Old Style predecessors
3. Serif Neoclassical/Didone
Extreme contrast in stroke weight, hairline serifs, and a vertical stress that emphasizes their geometric structure
4. Serif Glyphic
Distinctive carved or chiseled appearance, with serifs that taper to sharp points or have irregular shapes reminiscent of stone carving or engraving
5. Serif Clarendon
Their stroke contrast is slight and serifs tend to be short to medium length
6. Serif Slab
Thick, block-like serifs and uniform stroke weight, often with little contrast between thick and thin strokes
7. Sans Serif Grotesque
Uniform stroke weight, simple geometric shapes, and lack of ornamentation, giving them a modern and functional appearance
8. Sans Serif Humanist
Contrast in stroke weight is readily apparent, display a strong calligraphic influence
9. Sans Serif Geometric
Strokes appear like strict mono-lines, and seemingly perfect geometric forms make up the character shapes
10. Sans Serif Square
Usually have more latitude in character spacing than their sans serif cousins, and tend to be limited to display designs
11. Script Formal
Characters have strokes that join them to other letters, flowing letterforms that emulate the look of handwriting with a formal and refined style
12. Script Casual
Intentionally look informal or quickly drawn with brush
13. Script Calligraphic
Can be connecting or non-connecting in design; many appear written with a flat-tipped writing instrument
14. Script Blackletter/Lombardic
Look like manuscript lettering prior to the invention of movable type
15. Ornamental Antiques, Art Nouveau, and Art Deco
Intricate and stylized forms that were inspired by historical motifs, natural forms, and modern design principles, respectively
16. Ornamental Decorative
Defy simple pigeonholing; can look like letters cut from stencil or decorated with flowers, or can appear three-dimensional
BARANG2 SENDIRI S’JA – Commercial Vehicle Labels in Malaysia
This is a sharing session by Ms Low Hsin Yin about the commercial vehicle labels in Malaysia. In this talk, we are introduced to the typography on the vehicles in Malaysia. The speaker first introduced herself and her educational background to us, she is a type and graphic designer from Malaysia.
Ms Low shared to us that she started to use photography as a medium to document and also research into vernacular typography. She then introduced to us the guidelines of commercial vehicles in Malaysia to us so that we can have a better understanding on the context later.
There isn't any specification on the style other than colour and size. The writer has to squeeze all of the information into the door. As there's limited space for them, they will use superscript or subscript to suggest short form Barang-Barang to Barang2. The speaker shared that she went to 3 different places to interview different people while investigating this topic and she would share to us in this session.
From the process we can know that they started with using a tape to measure the letter height as what is stated in the guidelines. After writing all of the information, the tapes are peeled off.
The method of writing over tapes will cause the overshoots of the rounded letters to disappear and create an unique outline of the letterforms.
The D.I.Y style might be written by the drivers themselves when the original writings are faded, therefore they may look bad or not consistent.
Comments
Post a Comment