Typography/ Task 3 Type Design & Communication

Ms Hsin introduced to us the expectations and guidelines for this new project and gave us an outlook on the final work expected from us. Mr Vinod brief us on the types of pens to get for our typeface sketching and also provided some example videos for us to look through before we begin. He also suggested us to do ample research before constructing our own letterforms.

2. Project 3 - Type Design & Communication (Font Design)

Research:

Before I get started on anything, i decided that it is vital to do some background research to understand letterforms more.

Anatomy of typefaces :

I looked into depth the small details that contributes to a typeface and used it to provide a guide and baseline to what i should take note of when constructing my own letterform. :Basic Typographic Design I - II, History of Typography, Design with Typography I - II, Advanced Type I - II: The Perfect Paragraph, Communication, Design and Typography.

week07(11/8/2023)

In this task:

Fig 1.1 Anatomy Of A Typeface, Week 7 (7/11/2023)

To learn about the anatomy and structure of a typeface, Mr. Vinod instructed us to carry out an exercise of directing the letterforms of "H, O, G, B". We were allowed to select a few typefaces to study from the given typefaces at the beginning of the module.

Deconstruction of letterforms

Ms Hsin tasked us to choose a serif and sans serif typefaces to deconstruct and analyse how did they designed that particular font and understanding what was changed.

I chose Futura ST Book for my sans serif font and Bembo STD Book for my serif font to deconstruct

- Deconstruction of Futura ST Book

Fig 2.2.1 Deconstruction of Futura ST Book , Week 7 (11/12/2023)

- Letter 'H' : I can tell that both the vertical stems has been kept consistent on both sides but the black stroke of the inner cross bar has been made thinner.

- Letter 'o' : The vertical stress is the same on both axis

- Letter 'g' : The size of the closed counter of 'g' is not consistent on the letters and i can tell that the black stroke has been reduced

- Letter 'b' : Similar to letter 'g' , the closed counter of the letter 'b' is not the same as the size of the bowl outside, the black stroke has been reduced

- Deconstruction of Bembo STD Book

Fig 2.2.3 Deconstruction of Bembo STD Book , Week 7 (11/12/2023)

- Letter 'H' : The vertical stroke of the letter has been made much thinner compared to the two vertical strokes

- Letter 'o' : I can tell they used diagonal axis stress on the letter 'o' and the inner counter form has been shrinked

Fig 2.2.3 Deconstruction of Bembo STD Book , Week 7 (11/12/2023)

- Letter 'g' : For the bowl of letter 'g' they used diagonal axis as well and the stroke of the ear has been made thinner as well. The stroke of the link has been made thinner and the loop has been adjusted as well

- Letter 'b' : The stroke of the head has been made thinner and the stroke of the bowl has been thinned too

Sketches— O D H N G:

Fig 2.1 Type of markers, Week 8 (14/11/2023)
Fig 2.1 Sketch, Week 8 (14/11/2023)

My personal preference was rounded nib number 5 and art line calligraphy pen number 1, Mr Vinod and Ms Hsin prefers rounded nib number 5 as well as they find the concept of thinner to thicker strokes interesting. I proceeded with the style to write out the rest of the words (o,l,e,d,s,n,c,h,t,i,g and , . # )

Week9:Digitization Process:

Final Outcome

Fig 3.5 Research before digitalization, Week9 (23/11/2023)

I started off by constructing the main shapes (shared parts) I would be using throughout the rest of my letterforms so that they will all be consistent in shape and size.

After constructing the letters, I then went ahead and constructed the punctuations using the link Mr. provided us as references.

Fig 1.41 Same downstroke terminal angle for letters 'g, t, e, c, s' | Week 9 (20/11/23)

The letterforms in my sketch followed a vertical angle, hence I needed to make sure that all the downstroke terminal angles for the letters 'g, t, e, c, s' as well as the punctuation ',' had the same vertical angle.

Fig 1.42 Process of designing the 'comma' | Week 9(27/11/23)

The design for my comma followed a squarish style (see option no. 4 in the first image above). When constructing the comma, I followed the guide and used 2 stacked periods from my typeface.

Fig 1.43 Process of designing the 'period' | Week 9 (27/11/23)

When constructing the period, I followed the guide and made sure that the period was at least 3 pts bigger than the dot used in the letter 'i'.

Week10:

My typefaces are no constancy and I need to remake them. As a result, they were all failed and still no constancy but I couldn’t notice that. My mistake was I thought that I need to make constancy in stroke thickness. However that is completely wrong and Mr.Vinod said me again and again, “You need to make typefaces in same angle. They are no constancy.” I need to remake them one more time.

Figure 2.13 Process digitization (28/11/2023)

I made a research before digitalize my typefaces. These are Futura Std Bold Condensed and comparing comma in Gill Sans Bold. I choose this typeface as reference because this is similar as my typefaces and more sophisticated than mine. Also I compared comma because Futura comma is simply straight stroke and I forgot what comma looks in other typefaces.

Final Type Design：

Figure 2.21 Final Type Design (04/12/2023)

Week11:

Font Lab 7

Before bringing our font into Font Lab, a guideline of adjusting the side bearings of each letter is provided by Mr Vinod.

Figure 2.37 Side Bearing Guidelines

Following Week11 tutorials,We need to export typefaces from AI to FontLab. I had a problem in export fonts, but it is a setting issue.

Note: Check your FontLab7 > Preferences > Check Keep stroke and colors, Import original position, keep position if available

Do not click “Round” when you paste fonts. Click on “Keep”.

Figure 2.22 Letters in Font Lab 7 (04/12/2023)

Figure 2.25 Final Font Submission JPEG (11/12/2023)

Figure 2.24 Side Bearings of Remaining Letters (04/12/2023)

Week12:

Fig 4.7,8 Final Typeface Poster white/black, JPEG, Week13 (18/12/2023)

FEEDBACK

Week 08 (Independent Learning Week)

Specific Feedback: -

General Feedback: -

Week 09

Specific Feedback:

Practice the skeleton (main structure strokes) of the letterforms before to enhance the consistency of the letterforms

Make sure not all of the letters are hero letters (letters that stand out among other letters). Select a few in a range to stand out and for a clearer readability and recognization of each letterforms.

Drawing baseline/ x-height lines beforehand helps to create a more consistent letterform in size.

General Feedback:

Using the stroke tool on Adobe Illustrator is useful when digitizing the sketches.

Short cut key cmd y for stroke line structure

Stroke window > Check whether the stroke is the same thickness to avoid weight changes during size adjustments

To create outlines from the letter strokes: object > path > outline stroke

The digitized sketch should have raw strokes, an outlined shape, and a united version of the overall letterform to avoid problems caused during the manipulation stage.

Changing brush type can change the shape of strokes/ edges of strokes (for example, expressing the rough edges from a brush pen

Make sure to unite the object from the pathfinder tool/ compound path to flatten the objects

Avoid drawing the letterforms

Try out different weights within the same writing style.

Pay attention to the small details when writing thin strokes.

Week 10

Specific Feedback:

Mr Vinod suggested referring to the post about punctuation design for enhanced stability of punctuations as well as taking a look at other existing typefaces such as Bodoni and Univers.
As my median was placed higher, Ms. Hsin Yin suggested decreasing the x-height of the letterforms for a more consistent look.
The overall letterforms (specifically letters 's' and 'e') should follow the base shape structure of my design which is similar to a parallelogram.
For the letter 'g', widen the bottom part of the letterform horizontally and make the middle line more curvy.
For the letter 't', the horizontal cross of the letterform should follow the x-height horizontally rather than placing it diagonally.
The overshoot and x-height of the letterforms should be the same on the letters 'n' and 'h'.

General Feedback:

Create guidelines (baseline median etc) below the letterforms so that the overall letterforms are placed consistently.

Week 11

Specific Feedback:

you can use the smooth tool but you still have to tidy it up again, delete any lines that are not important.Superscript dot is needed more round. Exclamation mark is needed to taper to the end part.

General Feedback:

When we using a pen tool in AI, some path left but we should adjust distortion parts. Press Shift and minus anchor point tool is only delete a anchor point but not break its shape. We need to control the end part in stroke. Pay attention to counter part. Not only black shapes decide its qualities. Make a gap between Exclamation mark and its dot. Overlap part is fine but do not make them looks like a part of fonts. Keep it simple, do not make a mess in typeface. Do not make the same stroke length in typeface is considered as lazy design and no skills to control shapes. Thickness in letterform is the first thing to make a constancy. Add some explain in next week instruction, we need to adjust side space and kerning in just certain pair. When we start at lowercase letters, we can start from letter N and O.

Week 12

Specific Feedback:

Overall letters are fairly consistent on its construction, all have similarly rounded edges which is good. Width of letter S can be wider. Comma, period and dot of exclamation mark can be more square-ish but with rounded edge and distance of hashtag stroke should be brought closer.

General Feedback:

The comma is no need to completely round when we make a square typeface. When we adjust letters pace in large point size, it only allow in large size. Sharp mark is start from base line and touch inn cap line. In poster design, the letters are needs same point size. We need to write name of our font, who made this, when made this. The background is white/black/gray Punctuation is optional.

REFLECTION

Experience

Out of the 3 tasks I have done for this module, I would say this was the most fun to do. My favourite part would be writing the letters on paper with different kinds of pens. It was satisfying to see the consistency in each one. I also learnt how to use a flat tip pen.

Observations

observed that I overly relied on the brush tool most of the time while creating. Even though I used the pen tool to create the basic shapes, the direction of the strokes were done with the brush settings. I also noticed that all my letters had a bunch of un-needed anchor points. The smooth tool was a life saver.

Findings

I found that making fonts is actually way harder than I thought it would. The amount of precision needed to make one was shocking. Honestly, I felt like I could have done better, but it is kind of too late. However, I might try creating a new one in my free time. It is pretty calming (when its not graded).

From the 7 books recommended, I chose Typography reference as my reading material for my further reading.

Precise visual communication requires first-rate typography skills

Typographic Design: Form and Communication, Sixth Edition is the latest update to the classic typography text that covers all aspects of designing with type. Revised to reflect the shift in graphic design conception and understanding, the book contains a brand-new exploration of typography in media versus typography in motion, and provides the latest information on emerging trends and technology in the design process. Full-color images showcase recent design examples and a companion website features a robust collection of resources for students and instructors. Striking a balance between fundamental information and pivotal new knowledge and ideas, the book provides the perfect basis for engaging new learners as well as seasoned professionals.

Typography is the comprehensive design of type, encompassing selection, placement, manipulation, and communication. An integral element of the graphic designer's arsenal, typography skills translate across industry boundaries into print, video, film, television, packaging, advertising, digital design, and more. Typographic Design provides insight, information, and practical instruction for every step in the process, from concept to execution. Topics include:

Letterforms, syntax, and legibility
Communication and the typographic message
Evolution and technology of typography
Typographic design processes, and using the grid

The book also contains case studies that illustrate the successful use of typography, demonstrating the impact of good type on the overall design, and a listing of type specimens that exhibit good communication through good design. Words are an important part of the human condition, and presentation can have a major impact on the message. Graphic designers must be able to manipulate type to convey precisely what's intended, and Typographic Design is a comprehensive guide to mastery.

Format

Before creating a design, a designer should always start by taking note of the size and proportion of the page / screen that they are going to work with.

The Evolution of Typography

Typography is an evolution of the written word, and as such it participates in a history of visual communication extending thousands of years. That evolution is presented here in the form of a timeline that traces a development from hand, to mechanical, to digital practice, in the context of world-historical and art-historical events.

The history treated in the first section of the timeline predates) typography. It begins with the invention of writing over five thousand years ago and ends with the invention of movable type in Europe during the middle of the fifteenth century. The second section covers the long era of the handpress and hand-set metal types. This period, from Gutenberg's invention of movable type to the end of the eighteenth century, lasted about 350 years. In the third section, the Industrial Revolution and nineteenth century are revealed as an era of technological innovation and an outpouring of new typographic forms. The fourth section begins with the year 1900 and covers the twentieth century, a time when type was shaped by the aesthetic concerns of modernism, the need for functional communication, technological progress, and the digital revolution in typography.

The final section showcases typographic design in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.

The Evolution of Typography

The final section showcases typographic design in the twenty-first century, as it expands to mobile devices and embraces the many possibilities afforded by digital production.

The Typographic Grid

A grid is a skeletal framework used by designers to organize information within a spatial field. It is a system characterized by the dualities of freedom and constraint, simplicity and complexity.

It provides a strategy for composing text and other visual information in two- and three-dimensional space, including those of printed materials, film, computer screens, built environments, and typographic installations. Grid systems aid designers in making information clear and optimally accessible highly desirable traits in a world increasingly inundated by visual noise.

When used effectively, typographic grids provide form and space with proportional harmony and aesthetic beauty. The final result is clearer and more accessible communication.

Syntax and Communication

Like typographic anatomy, typographic syntax has a language that must be learned if one is to understand typographic design. Syntax is the connecting of typographic signs to form words and sentences on the page. The elements of design-letter, word, line, column, and margin—are made into a cohesive whole through the use of typographic space, visual hierarchy, ABA form, and grid systems.

Typographic Design Education

The rapid advance of technology and the expanding role of visual and media-based communication in contemporary society have created new challenges for typographic education. Faced with a complex communications environment, and the changes that are occurring and are anticipated, how can a designer nurture sensitivity to typographic form and communication? An appreciation of our typographic heritage, an ability to meet the standards of contemporary design practice, and an innovative spirit in facing the future are required.

Typographic Design Education

The way graphic designers use typographic specimens has changed dramatically in the age of digital typography. Earlier generations of designers used specimens to determine which fonts and sizes to specify and order from typesetting companies, and for reference or tracing purposes when drawing layouts. A limited range of sizes were manufactured, and specimen sheets or books showed all available sizes.

阅读更少

搜索此博客

Wang Yifan (0368363)