Labels

Typography / Task 3A : Type Design & Communication

15.10.2021-22.10.2021(Week 8- Week 9)
Chang Jia Yee / 0350402 
Bachelor of Design in Creative Media / Taylor's Design School
Typography
Task 3A : Type Design & Communication


Quick Links
LECTURE
To view the recap of video tutorials 1-4, please click here.

Typo_5_Understanding

- X-height generally describe the size of the lowercase letterforms.
- All letter forms that are curved generally will exceed the median line because if put it in a same size will look optically smaller that other letter forms.
- The simple contrast produces numerous variations : small+organic / large+machined; small+dark / large light......

Fig . Examples of contrast

- When designing a typeface, one can try to sketch out using "O,H,T,A" because these constitute the basic letterforms in order to design any typeface.
- Rounded form always look smaller because it has less surface area than a form that has a flat edge. So it will overshoot the x-height of the border of the letterform.

Fig . Overshoot of letter "r" & "a"

-non-negotiable the x-height has to be 500 by 500 points.

Typo_6_Screen&Print

Print type vs screen type
type for print: A good typeface for print-Caslon, Garamond, Baskerville are the most common typefaces that is used for print. Because of their characteristic which are elegant and intellectual but also highly readable when set at small font size.


type for screen : Typefaces intended for use on the web are optimized and often modified to enhance readability and performance onscreen in a variety of digital environments. This can include a taller x-height (or reduced ascenders and descenders), wider letterforms, more open counters, heavier thin strokes and serifs. Reduced stroke contrast, as well as modified curves and angles for some designs.


-Georgia, Verdana was specifically designed for screen, it is not suitable for print


-16 pixel text on a screen is about the same size as text printed in a book or magazine; this is accounting for reading distance. For text printed, at least 12 points if you were to read them at arm's length, which is about the same size as 16 pixels on most screens.


Fig . Pixel differential between devices

motion typography : On-screen typography has developed to become expressive, helping to establish the tone of associated content or express a set of brand values. In title sequences, typography must prepare the audience for the film by evoking a certain mood.


Week 8
Independent Learning Week
Week 9
In this week, Mr Vinod look at the works each of us. We gained our feedback and also learned from our peers' work.
INSTRUCTION


html link :
<iframe src="https://drive.google.com/file/d/1To5TiszuFlDPuK68ygh3xtlNSC8yVyWZ/preview" width="640" height="480" allow="autoplay"></iframe>

Task 3A : Type Design & Communication 

For this task, I have to create a typeface that has the hallmarks of a good typeface; subtlety, character, presence, legibility and readability. Below are the letters I will design :
a i m e p y t g d o b ! .

Visual Research :






Fig 2. Different versions and designs of letter "a", week 8(12/10/2021)




Through the figure above, I saw the initial draft of a design, which was constantly revised and optimized to the final draft. The original draft is similar to the fonts well known to the public, and it has its own characteristics after constant revision. For final draft, the contrast of the stroke thickness is stronger, and the whole font is more rounded.

Fig 4. Variety of serif, week 8(12/10/2021)

The figure above shows variety of san-serif and serif. There are some classic ones and some complicated ones. According to the designed font, it can be matched with a relatively suitable serif to make the font look more complete.

The figure above shows the development of a new typeface. Firstly, drew the position line on the basic draft, and then created a new typeface by disassembling and expanding the position line.
This is one of the interesting way to create a new typeface. The author describes the shape and outline of subtitles on dots of equal size, distance and creates a new typeface.



Fig 7. Font of Harry Potter, week 8(12/10/2021)

The font of Harry Potter has its own feature to distinguish it from other designs. It has lightning-like graphics at the end of some stem, which not only conforms to the theme but also adds its own characteristic.

Sketches
Fig 8. Initial sketches, week 8(13/10/2021)
Fig 9. Sketch I decided to digitalize, week 8(15/10/2021)


Deconstruction of letter

In order to understand the structure of the letter better, I found an exist typeface that is similar to the typeface I designed to do the deconstruction. The typeface I deconstructed is Bembo Std.

Fig 10. Deconstruction of letter a, week 8(15/10/2021)


Fig 11. Deconstruction of letter b, week 8(15/10/2021)


Fig 12. Deconstruction of letter p, week 8(15/10/2021)


Fig 13. Deconstruction of letter r, week 8(15/10/2021)


After finishing the deconstruction of letters, I continued to execute my typeface design in Illustrator.

Fig 14. Comparison of two attempts, week 8(15/10/2021)
 
Fig 15. Modification of letter g, week 8(16/10/2021)

According to my sketch, the letter g in my design is in left of the figure above. When I completed the construction, I found that it didn't seem to be in line with my imagination wizardry feeling, and there was still room for improvement. So I designed another version of letter g, just like the one on the right of the figure above. I think the second version is better and more appropriate to my design.

Fig 16. Modification of letter e, week 8(16/10/2021)

As you can see, the one on the left of the figure above is the execution of my sketch. I thought it was weird and can be improved. I came out with version 2 which is more harmonious and does not disobey.
Fig 17. Two versions of letter b, week 8(16/10/2021)

The figure above is two versions of the letter b. In my perspective, I think the one on the right is better than the one on the left because it looks more coordinated and amiable. So my final decision is to use the one on the right side.


Fig 18. Digitalisation in AI with guidelines, week 8(16/10/2021)



After attending week 9 class, I gained some feedbacks from Mr. Vinod and I widen the highlighting gap of the letters to make them visible in smaller point sizes.

Fig 19. Modification compare, week 9 (22/10/2021)
Fig 20. Combining various shapes into vector artwork, week 9 (22/10/2021)


Fig 21. Final version with guidelines, week 9 (22/10/2021)

Measurements (from baseline) 
Ascender line :735 pt
Capline  : 700 pt
Median line : 500 pt
Descender line : -224 pt


Fig 22. Modifications of my typeface design, week 9 (22/10/2021)




After finishing construction in AI, it is the turn to execute in Fontlab. I used Fontlab 7 to complete this task. Below are the screenshots of my process in Fontlab.

Fig 23. Import letter e from AI to Fontlab, week 9 (22/10/2021)


Fig 24. Process in Fontlab, week 9 (22/10/2021)



Fig 25. 4 version of poster, week 9 (23/10/2021)

Fig 26. Colour changes of highlighted part, week 9 (23/10/2021)

The highlighted part can change colour according to the background colour.

For the typeface I designed, I named it as 'Wizardry' as it look like magical typeface. It sharp corner and diamond-shaped decorations highlight its magic. At the same time, I also make it look angular as a whole, inspired by the fonts designed by Harry Potter. 





Final Submission

Fig 27. Final typeface design-jpeg, week 10 (25/10/2021)

Fig 28. Final Submission poster- jpeg, week 10 (25/10/2021)

<iframe src="https://drive.google.com/file/d/1WqyzlYf1LBLxLVubbmRx7K3DftNknRdw/preview" width="640" height="480" allow="autoplay"></iframe>


<iframe src="https://drive.google.com/file/d/1Zg6_6jOO5N7vU-Nh5SKAoYX5e78oDqxy/preview" width="640" height="480" allow="autoplay"></iframe>

Hours spend for Task 3A : 48 hours

FEEDBACK

Week 8
General Feedback : Exclamation mark and letter t should be lower than capline, letter b and d should be between capline and descender line.

Week 9
General Feedback : Consistency should be pay attention to. Especially the thickness and bending angle of each letter should be as consistant as possible.

Specific Feedback : Overall is good and Mr. Vinod said he likes the design of letter "g". The highlighted part have a problem which is it is not visible in smaller font size and should widen the highlighted gap. Comma is a bit small and too decorative, should reduce the decorative stuff.


REFLECTION

Experience:
It is very interesting and exciting to develop my own font. When doing research, I also found that other people used some methods I didn't know to design fonts, only to know that fonts could be designed like that!

Observation:
I think in this project, the most difficult part is the initial; design. It's not easy to design my own font, and it's not as simple as I thought. It takes a lot of basic knowledge to design. correct and usable fonts. After the preliminary draft is finished, I think the most interesting thing is digitizing in illustrator. Try my best to put my own sketch into practice. When I see the outcome, I have a sense of accomplishment and satisfaction.

Finding:
I think a good design needs many modifications and continuous improvements so that the fonts look pleasing to the eye and there is no sense of contradiction between them. Most importantly, at the beginning of the design, it is necessary to read relevant knowledge and do sufficient research before starting the design. When designing, try to rely on the data in your mind, and don't look the reference when designing. The fonts designed in this way will have their own style and will not be too similar to the reference.

FURTHER READING

Fig 29.  "A Type Primer" book cover

-Type intended primarily for presentation at between 6 pt and 12 pt. Type presented at 18 pt and above, for headlines or call-outs, is referred to as display type. 


Form/ counterform
Fig 30. Form/Counterform (Screen grab from the book)

The space described, and often contain, by the strokes of the form. When letter are joined to form words, the counterform includes the space between them. how well handle the counters when you set type determines how well words hang together-in order words, how easily we can read what's been set.

Fig 31. Demonstration of letterform

- The complexity of each individual letterform is neatly demonstrated by examining the lowercase 'a' of two seemingly similar sans serif typefaces- Helvetica and Univers. A comparison of how the stems of the letterforms finish and how the bowls meet the stems quickly reveals the palpable difference in character between the two.

Fig 32. Linotype Didot (Screen grab from the book)

-Norman Ives, an eminent graphic designer, collagist and muralist, worked extensively with pieces of letterforms in his complex constructions.


Labels:

Comments

Post a Comment

Popular Posts