Typography - Task 3B: Type Design & Communication

6.6.2022 - 22.6.2022 (Week 11 - Week 13)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Typography
Task 3B: Type Design & Communication

LECTURES

Lectures 01-06 completed in Task 1: Exercise 1&2 (click here to see the previous lectures)

Week 10 (30.5.2022): Brief on Typography Task 3B

In this class, we were given a new task which is also our final task for this module. We were to make a greeting typographical sticker that will be used in Telegram App. Mr Vinod guided us the task through MIB in detail. He provided us with many festive greeting options in the Google Sheets, and we need to choose one festive greeting for this task 3b. Mr Vinod also showed us the sticker he made so that we had a clearer vision of what we should do, and he posted a reminder in the Facebook group about the important things we need to note in this task.

Task 3(B):Type Design and Communication (Sticker Lettering) Things to note:

• Research Lettering

• Read article provided in Module Info

• Select greeting

• Sketch 5 options

• 512 pixel size of the final artwork

• First design your lettering using BW only

• Introduce colour (Taylor's) Red, White & Black

• You must not use gradients only flat tones

• Use the Taylor's Mark in your sticker

• Please do not use existing typefaces directly, as this is a lettering exercise. However, you can use existing typeface/s and modify it.

Fig 1.1 - Example of sticker (30.5.2022)

Fig 1.2 - Example of stickers (30.5.2022)

Fig 1.3 - Example of wording with gradient and without gradient (30.5.2022)

Week 13 (20.6.2022): Brief us on Final submission of Task 3B & Final Compilation

At the end of today's lecture, Mr Vinod ensured us to submit these formats on submission day:

1. Black & White (1024 px min. 2048 px max.) PNG

2. Colour (1024 px min. 2048 px max.) PNG

3. PDF of 1 & 2

4. Sticker pack download link

The submission of task 3b was due on Wednesday, June 22nd 2022, at 5 PM

The submission of final compilation and reflection was due on Monday, June 27th 2022, at 6 AM

INSTRUCTIONS

Task 3B: Type Design and Communication

For this exercise, we were need to combine the knowledge and experience gained in the previous tasks and apply it to create a typographical telegram sticker which consists of a greeting. We were given a list of festive greetings to pick from. The festival that I choose is Christmas as this is my favourite festival and I even eagerly wait for it all through the year. I also feel more relatable, which help me to boost my idea and express my excitement on this task.

1. Visual Research

As usual, to get a clear implication of my topic, I started by doing some research about Christmas design on Pinterest for some inspiration. I search for some of the things that are identical to Christmas, such as presents, santa claus , christmas trees, reindeer, stockings, candy cane and so on. For me, when I think of Christmas, the first things that come up to my mind is a Christmas presents as my memories of being a child and the excitement of the morning and opening gifts. Even until now, every Christmas I will always join the game of exchanging gifts with my family or friends, which have a lot of unforgettable memories.

Fig1.4 - Christmas Moodboard (4.6.2022)

Before I started sketching, I tried to look for some sticker designs and analyze it how they arranged the lettering incorporated with some minor illustration or observe their good skills in adding effect or toning to look impactful. With these research, I went ahead and tried to sketch on my iPad.

Fig1.5 - Analysis on the stickers reference (4.6.2022)

2. Sketches

To start off, I did a few sketches which related to the Christmas theme. I was inspired by the symbolism of Christmas and combining with the letter "Merry Christmas" to explore more ideas. I have created 5 sketches and compare which design is most suitable used for my sticker.

Fig2.3 - Sketches of sticker (4.6.2022)

After the feedback session, I decided to choose the sketches with gift box as it looks like it has the most potential. I was also thinking that this idea will be more interesting to try out in this task as I notice that the other sketches are somehow similar idea with my classmates.

For the sketches that I choose, the main idea that I got is from a reference that I found in Pinterest (Fig 2.4). I like the idea of letters is placed at the surface of a 3-dimensional cube, and to link with the christmas theme, I immediately think of a christmas gift. I got the idea of adding a large bow on top of the wrapped gift box as a presents and I decided to use the shape of the 3 dimensional box as a way to frame and outline the "Merry Christmas" lettering as I thought it was a good way of highlighting the words but it also properly presented that this sticker is meant to be Christmas themed. For me, gift giving are one of the biggest aspects of Christmas and they often denote feelings of happiness, sharing and joy, so I wanted to incorporate it somehow.

Fig2.4 - Inspiration of sketch #5 (4.6.2022)

3. Digitalize (black and white)

1st attempt

To begin with digitalizing my sketch, I duplicated the text and applied the different settings to each one so I could easily compare the type's character and style that fit best with my sticker. As the box's surface is square in size, I preferred to arrange the lettering into two rows. Initially, I preferred the upper row (Merry) letters using a script type of font as I thought they looked very Christmas-like, such as the fonts on seasonal greeting cards or messages. And this could also make it easier to differentiate the two rows of letterings.

Fig3.1 - Testing the letters with several fonts (10.6.2022)

The font I used for the upper row of the letters is Natural Beauty – Regular. I found this font online and downloaded it (click here to download). I like the font has stylish thick strokes with simple subdued swashes and rounded letters. And I also decided to use the font Britannic – Regular for the bottom rows of letters.

Next, I started to modify the font in order to fits within the square shape. As I wanted to make it the letter arranged in the form of a box shape instead of drawing out the outline, so I tried to resize and stretch the letter by using the direct selection tool.

Fig3.2 – Process of modifying the font (10.6.2022)

Fig3.3 – create outlines for all the letters and ungroup them (10.6.2022)

Fig3.4 – closure look of modifying the letter E (10.6.2022)

Fig3.5 – Comparison between before and after resize the letters (10.6.2022)

Then, I moved to the graphical elements part, which is drawing out the shape of the present by using the pen tools. I also drew a big bow on top of the present and added the Taylor's logo in the middle of the bow. To make the Taylors's logo look more integrated with the bow and somehow like printing on the surface of the bow, I used the free distort tool under the panel of free transform tools to slightly distort the logo.

Fig3.6 - Draw the shape of the present (10.6.2022)

Fig3.7 - Add a big bow and Taylor's logo on top (10.6.2022)

Fig3.8 - Distort the logo (10.6.2022)

Next, I placed all the letters that I had modified on the present surfaces by using the distort tool. The reason that the line on top of the box doesn't join together is because I tried to keep the graphical elements as less as possible as this exercise need to be more focus on lettering.

Fig3.9 - Placed the letters on the present (10.6.2022)

Below is the 1st attempt outcome of digitalizing the sticker.

Fig3.10 - 1st attempt of my sticker (10.6.2022)

2nd attempt

After receiving feedback from Mr Vinod, he suggested I add a lid for the presents to make it more realistic to look and he commented that I need to make some improvement on the bow with a nice little ribbon design. Also, he pointed out that the letters of “Merry” not easy to read especially the letters M look like OM and the R look like E. So, I decided to make some improvements on my sticker.

Fig3.11 – redraw the ribbon bow (14.6.2022)

Fig3.12 – redraw the present and place the ribbon on top (14.6.2022)

For the font, I decided to change the "Merry" letters same as the lower row, which is the San serif type of font called Britannic Bold. Thanks for Mr Vinod pointing out the mistake, as I didn't notice that sometimes a script type of font is slightly not so legible to read, especially since I have distorted the letters too much. After changing to a San serif type of font, I felt like it was much more readable than before and had a more minimalist look. Also, I rounded the edges of all letters to make them more friendly and inviting to look at.

Fig3.13 – Changing the font (14.6.2022)

Fig3.14 – Modify the font by resizing and stretching the font (14.6.2022)

Fig3.15 – Rounded the edges of letters (14.6.2022)

Fig3.16 - 2nd attempt in black and white (14.6.2022)

4. Colour Digitization

Moving to the colouring part, first, I start with choosing the colour palette. As following the guide of Mr Vinod, we are only allowed to use the colour of Taylor's logo which is Red, White and Black. And we can use the shade of those colours. So, I went to a website called Adobe Colour, which helped me extract the colour of Taylor's logo and gave me some options of the colour palette.

Fig4.1 – Colour palette of Taylor's logo in Muted mood (14.6.2022)

Fig4.2 – Colour palette of Taylor's logo in Shade mood (14.6.2022)

Fig4.3 – Colouring the ribbon bow (14.6.2022)

Fig4.4 – Colouring the lid of the present (14.6.2022)

Fig4.5 – Colouring the present and the font (14.6.2022)

Fig4.6 – 2nd attempt with colouring (14.6.2022)

3rd attempt

After the second feedback from Mr Vinod, he recommend me to place the Taylor's logo at the font there rather than placed it on the ribbon bow. Also, he suggested that I can add some shade and highlight for the presents and add some tiny Christmas decorations between the space of the font.

Fig4.7 - Add shadow and highlight for the lid and bow (17.6.2022)

Next, I tried out different types of shadow and highlight for the fonts and added some Christmas decoration between the spaces of the letter which help to fill the negative space so it does not look too empty and also look like a Christmas wrapped gift box.

Fig4.8 - Screengrab of my various attempt (17.6.2022)

Below are some of the designs that I found interesting.

Fig4.9 - Option 1 (17.6.2022)

Fig4.10 - Option 1 (17.6.2022)

For this option 2, I have the idea of creating a emboss effect for the font to make it more realistic to look like a font on the wrapped gift box. I searched for some tutorials on youtube and tried out two different type of emboss effect. I ended up choosing the right side design ( Fig4.11) as I think the font will look much more stand out when putting them on the gift box.

Fig4.11- Two types of emboss effect on the font (17.6.2022)

Fig4.22 - Comparison between two types of effect on the present (17.6.2022)

Fig4.23 - Process of applying the emboss effect for all letters (17.6.2022)

Fig4.24 - The outcome of emboss effect for all letters (17.6.2022)

Fig4.25 - 3rd attempt of my sticker (17.6.2022)

4th attempt

For the last feedback on my final artwork, Mr Vinod suggests I make some small changes with the tonality of the lids. As the sunlight is from the right, hence the right surface of the lid should be slighting lighter than the left side. Also, he recommends me to add a little highlight on the middle of the lid.

Fig4.26 – adjust the tonality of the lid (20.6.2022)

Fig4.27 – add a highlight on the middle edge (20.6.2022)

Furthermore, Mr Vinod has mentioned that I can round the present's edges a little bit so that it wouldn't look so sharp and pointy.

Fig4.28 – Rounded the edges (20.6.2022)

Fig4.29 - Final Outcome of the sticker (20.6.2022)

5. Generate the sticker

After I exported the final outcome of my sticker in PNG file type, then I uploaded the sticker to Telegram via @stickers which is an official Telegram bot that converts files into Telegram stickers. However, I had difficulties in uploading the files, it mentioned that my file doesn't fit into 512px square size. So, I resize my sticker in photoshop, and luckily I generated my sticker successfully.

Fig5.1 - Fail to uploading the sticker (20.6.2022)

Fig5.2 - Process of uploading the sticker (20.6.2022)

Fig5.3 - Preview of sticker in Dark Mode (20.6.2022)

Fig5.4 - Preview of sticker in Light Mode (20.6.2022)

Final Submission - Task 3B

Fig 6.1 - Final Submission of Task 3B in Black and White, PNG (21.6.2022)

Fig 6.2 - Final Submission of Task 3B with Colour, PNG (21.6.2022)

Fig 6.3 - Final Submission of Task 3B, PDF (21.6.2022)

Fig6.4 Screenshot of the stickers in Telegram (20.6.2022)

Link for sticker pack: https://t.me/addstickers/tyngsticker

FEEDBACK

Week 11 – Sketch

General feedback:

This is a lettering exercise, so try to keep the drawing as less as possible.
The wording has to be at least 80% of the space.
Remember the final artwork is in a square size, try to maximize the use of space.

Week 12 (Monday class) – Digitization with black and white

Specific feedback

I liked the idea, Good one
The edges of the present look a bit too sharp, you need to round it a little bit.
For the graphical element of the ribbon is a little bit too crude, you need to make it more like a realistic look and nicer sitting on the top of the box.
For the type, I was seeing OM instead of M. And the R look like E.
The lid, instead of making it flat, you can make it 3-dimensional, with nice little corner edges.

Week 12 (Wednesday class) – Digitization with colour

Specific feedback:

You’ve done a good job with your box and ribbon and it’s almost getting there.
I think instead of placing the logo in the ribbon there, you can just place it at the E here as there’s a lot of space. You can kind of put the logo there in white or red.
You can add a small or slightly darker shade just behind the letters and see whether that helps, if that helps then try adding some thin red highlight depending on where the light comes from and see if all works well.
You can also add some kind of Christmas deco such as a little small red dot, some confetti or textured kind of decoration between the spaces. So it would help to look like a wrapping box. That’s all up to your ability and how much you can do.

Fig 7.1 - Screengrab of feedback (18.6.2022)

Week 13 – Final outcome

Specific feedback:

Good Job, all look good.
Just a small things you can make some improvement by adjusting the tonality of the lid. The right side of the lid can make it slightly lighter than the left side.
You can also add a very slight white highlight on the middle corner of the lid.
Also you can round the present’s edges a little bit that would be good. Just a small rounded even unseen but you can feel it, don’t round it like a radius, so it wouldn’t look so pointy.

REFLECTION

Experience

Overall this was a fun project as this was my first experience in creating my own sticker, and we can really implement them on telegram or WhatsApp. I felt like the challenging part of this task was somehow similar to our first task. We were asked to use only minor graphical elements in this task, so we needed to interpret with the typography itself without over-relying on graphical elements to indicate that this was a sticker for a festival. At first, I thought this task would be much easier, but with some amount of restrictions which caused me quite stressed to come up with ideas. I'm glad that my work looked much better when making some improvements after getting feedback from Mr Vinod. All in all, I'm very satisfied with the outcome, it's a great sense of accomplishment.

Observations

I observed that typography can be explored in such a fun way that would attract non-designers to utilize it in different ways. There is still difference between designing a sticker and normal poster as unlike poster, sticker is to be seen as small, so the elements can't be too small if not it would be difficult to see when it's converted into a sticker. Besides, I observe that when coming up with typographical stickers, readability and people can understand it is also one of the crucial parts. Also, I notice that creating multiple versions of the design can help me to know about its differences.

Findings

I found that typography is all about communication. And it takes creativity, sensibility and deliberation to utilize the given spaces and make sure it's communicating effectively and at the same time looking aesthetically pleasing. Through this task, I felt like I need to improve my illustrator skills in order to ease me when creating the effects that I want and using the right tools or more effective ways can really save me lots of time.

FUTHER READING

Reading Article

Reference: 10 kerning tips for improving your typography

1. Take care of leading and tracking before kerning

Tracking is the overall spacing between groups of letters.
Leading is the vertical spacing between lines of type.
It’s important to make the desired adjustments to your leading and tracking first, because doing that after kerning can undo the balance in the kerning adjustments you’ve already made.

Fig8.1 - Labels of Kerning, Leading and Tracking

2. Don’t let your font software kern for you

When it comes to headlines and logotypes, you need to kern the letters yourself rather than relying on the default spacing provided for you in the font software.
Each typeface will have different spatial relationships for its letters, so you’ll have to adjust the kerning differently for each one.
Graphics programs come with auto-kerning tools like the default Metric kerning and Optical kerning, which adjust the spacing between letters based on their shapes. However, kerning manually will give you more control.

Fig8.2 - Showing different type of Kerning methods

3. Create equal perceived space between letters

Kerning isn’t a mathematically equal amount of space, it’s a perceived equal amount of space between letters according to the human eye.
Once common kerning technique is to visualize and sand filling the spaces between the letters, and trying to make the volumes of sand equal.
When you’re kerning, make sure not to zoom in too much on your type, or the spacing will appear deceptively larger than the true final result.

Fig8.3 - Before and after Kerning

4. Understand spatial relationships between different letters

All letters are a combination of straight, round and diagonal edges, so understanding their basic relationships is a helpful starting off point.
One way to gauge the proper kerning for letters is to see the distance between 2 straight letters as 1 unit.
The distance between straight and round letters as slightly less than 1 unit.
The distance between two round letters as even more slightly less than 1 unit.
Diagonal-sided letters like A, V and Y, are the most challenging letters to kern because of the larger negative space they create. These require special attention, but should not be used as a guide for the spacing of the entire word.

Fig8.4 - Spatial relationships between different letters

5. Kern your type upside down

This helps to see your type as a group of equally spaced shapes without being distracted by the meaning of the words.

Fig8.5 - Example of kerning type with upside down

6. Kern in groups of three

Try doing this by starting with the first three letters of a word, and block the rest of the letters with your hand or a piece of paper.
Once you’ve adjusted the spacing between the first three letters, shift your gaze over by one letter until you’ve reached the end of the word

Fig8.6 - Kern the type in groups of three

7. Don’t forget that less is more

It’s better to kern too little than over-kern your type. Type that is too tightly spaced is unattractive and difficult to read.

Fig8.7 - The right way to kerning type

8. Use different kerning solutions for large and small versions of your type

This is especially necessary for displaying smaller and larger versions of a logo.
Kerning differences are not as apparent in smaller type sizes, but in headlines and logotypes they become a lot more obvious.
Sometimes it’s also necessary to have looser kerning for smaller versions of a logo.

Fig8.8 - Kerning with large and small versions of type

9. Watch out for challenging letter combinations

Letters like the uppercase W, Y, V, T, L, and P, the lower case y and k are some of trickier letters to kern.
So are upper and lower case letters that sit next to each other. To fix these spacing problems, try kerning those difficult letters first and then kern the rest of the letters.

Fig8.9 - Challenging letter combinations

10. Practice a lot (and try out this cool kerning game)

All these techniques will take practice before they become second nature.
This fun kerning game that tests your kerning solutions against that of a master typographer, and scores you accordingly.

Fig8.10 - Screengrab of me playing the kerning game

"Kerning is all about creating consistent spatial relationship between a group of letters. The more consistent your spacing is, the more rhythm and harmony your typography will have."

Search This Blog

TAN YI-TYNG (0353327)