Typography Task 3A - Type Design & Communication (Typeface Design)

18/05/2022 - 01/06/2022 (Week 8 - Week 10)
WONG JUN ZHE / 0353613
Typography / B' Creative Media / Taylor's University
Task 3A - Type Design and Communication

LECTURES / TUTORIAL

1. Sketches and deconstruction

Fig. 1.1.1 Sketches

Fig. 1.1.2 Deconstruction of letter 'r'

2. Digitization in Illustrator

Fig. 1.2.1 Create several artboards

Fig. 1.2.2 Create guidelines that determine your letterform (e.g. baseline, caps line, x height, etc.)

Fig. 1.2.3 Start digitization in AI

Fig. 1.2.4 Refining shapes

Fig. 1.2.5 Comparison between letter 'a', before vs after refinement

3. Illustrator to FontLab

Fig. 1.3.1 Measure distance of guidelines from the baseline in pt

Fig. 1.3.2 Outlines before unite

Fig. 1.3.3 Outlines after unite

Fig. 1.3.4 Create new font

Fig. 1.3.5 Place x y coordinates near letter

Fig. 1.3.6 Ctrl c > Ctrl v into FontLab

Fig. 1.3.7 Kerning process

Fig. 1.3.8 Export typeface

INSTRUCTIONS

MIB:

Task 3A - Type Design and Communication

In this task, I will be creating my own font designs for a few letters and punctuations.

1. Week 8 - Research and sketches

To start off this task, I was told to look at some good examples before starting. I can either use the ten typefaces Mr Vinod provided, or search up other good ones from the web. Personally, I find the ten typefaces provided a little boring, as I plan to lean towards unique display fonts rather than versatile, common-looking typefaces. Don't get me wrong, I think they are amazing typefaces that have been developed over decades.

Thus, before sketching, I analyzed and deconstructed letter 'r' s from the typefaces that I find interesting. Typefaces that I selected:

Cinzel Decorative

Fig. 2.1.1 Cinzel Decorative, Week 8 (18/05/2022)

UnifrakturMaguntia

Fig. 2.1.2 UnifrakturMaguntia, Week 8 (18/05/2022)

Spock

Fig. 2.1.3 Spock, Week 8 (18/05/2022)

Arbutus Slab

Fig. 2.1.4 Arbutus Slab, Week 8 (18/05/2022)

Clover

Fig. 2.1.5 Clover, Week 8 (18/05/2022)

After deconstruction of the letter 'r' s, I started sketching my ideas that are inspired by them.

Fig. 2.1.6 Sketches, Week 8 (18/05/2022)

I ended up choosing to continue develop typeface #5. This was one of my preferences among the 5 sketches (2,4 & 5).

Fig. 2.1.7 (Chosen) Sketch #5, Week 8 (18/05/2022)

2. Week 9 - Digitization in Illustrator

First and foremost, I created a new artboard with a height of 1000 px. Then, I used the guides that can be pulled from the ruler to create the baseline, x height, caps line, etc., as demonstrated in the tutorial video.

In this stage of digitization, the tools that I used most are the pen tool, eclipse tool, and the cut tool. The pen tool allows me to draw straight strokes while the eclipse tool helps me draw circles with ease. All of the stroke widths are set to 150 pt, with some exceptions on the 't'.

'a'

Fig. 2.2.1 'a' process 1, Week 9 (27/05/2022)

Fig. 2.2.3 'a' process 3, Week 9 (27/05/2022)

't'

*Horizontal stroke, stroke width: 130 pt

Fig. 2.2.6 't' process 2, Week 9 (27/05/2022)

Fig. 2.2.10 't' process 6, Week 9 (27/05/2022)

Fig. 2.2.11 't' process 7, Week 9 (27/05/2022)

'g'

Fig. 2.2.12 'g' process 1, Week 9 (27/05/2022)

Fig. 2.2.14 'g' process 3, Week 9 (27/05/2022)

Fig. 2.2.17 'g' process 6, Week 9 (27/05/2022)

'r'

Fig. 2.2.21 'r' process 3, Week 9 (27/05/2022)

'e'

Fig. 2.2.23 'e' process 2, Week 9 (30/05/2022)

Fig. 2.2.27 'e' process 6, Week 9 (30/05/2022)

'k'

Fig. 2.2.28 'k' process 1, Week 9 (30/05/2022)

Fig. 2.2.32 'i' process 3, Week 9 (30/05/2022)

'y'

Fig. 2.2.35 'y' process 3, Week 9 (30/05/2022)

Fig. 2.2.36 'y' process 4, Week 9 (30/05/2022)

Fig. 2.2.37 'y' process 5, Week 9 (30/05/2022)

'm'

Fig. 2.2.38 'm' process 1, Week 9 (30/05/2022)

Fig. 2.2.40 'm' process 3, Week 9 (30/05/2022)

'p'

Fig. 2.2.41 'p' process 1, Week 9 (30/05/2022)

'n'

Fig. 2.2.43 'n' process 1, Week 9 (30/05/2022)

Fig. 2.2.44 'n' process 2, Week 9 (30/05/2022)

'!'

Fig. 2.2.45 '!' process 1, Week 9 (30/05/2022)

Fig. 2.2.46 '!' process 2, Week 9 (30/05/2022)

Fig. 2.2.47 '!' process 3, Week 9 (30/05/2022)

'#'

Fig. 2.2.49 '#' process 2, Week 9 (30/05/2022)

Fig. 2.2.51 '#' process 4, Week 9 (30/05/2022)

','

Fig. 2.2.52 ',' process 1, Week 9 (30/05/2022)

Fig. 2.2.53 ',' process 2, Week 9 (30/05/2022)

Fig. 2.2.58 ',' process 7, Week 9 (30/05/2022)

'.'

Fig. 2.2.59 '.' process, Week 9 (30/05/2022)

All letters and symbols

Fig. 2.2.60 Illustrator export, Week 9 (30/05/2022)

Outlines (before vs after unite/merge)

Fig. 2.2.61 Outlines (Before), Week 9 (30/05/2022)

Fig. 2.2.62 Outlines (After), Week 9 (30/05/2022)

3. Week 10 - FontLab 7

Fig. 2.3.1 Insert letters into their designated cells, Week 10 (01/06/2022)

I started off by copy and pasting my letters into FontLab 7, making sure that I place the origin correctly in illustrator. When I paste a letter directly into FontLab, letters that have tails like 'g' and 'y' were not positioned correctly. So, I had to manually adjust the letter, so that the tail sits perfectly on the descender line.

Fig. 2.3.2 'g' before adjustment, Week 10 (01/06/2022)

Fig. 2.3.3 'g' after adjustment, Week 10 (01/06/2022)

Below, I set the spacing for both left and right bearings to 50, as shown in the tutorial video.

Fig. 2.3.4 All letters (except 'p') after initial letterspacing, Week 10 (01/06/2022)

However, during class, Mr Vinod told us that the left bearing should always stay 0, with only the right bearing having a value. So, I made the necessary changes with the letterspacing and kerning until I am happy with it.

Fig. 2.3.5 Final letterspacing and kerning, Week 10 (02/06/2022)

Finally, I filled in the required information under 'Font Info'.

Fig. 2.3.6 Family dimensions, Week 10 (02/06/2022)

Fig. 2.3.7 Font dimensions, Week 10 (02/06/2022)

Fig. 2.3.8 Names, Week 10 (02/06/2022)

Final Outcome

Preview of typeface

Google Drive link to typeface

https://drive.google.com/file/d/1E-E4zj0XCQCFTi7PPH4m7RsBdGX4fOvW/view?usp=sharing

Individual letters

Fig. 2.4.1 All letters (Illustrator export), Week 9 (30/05/2022)

Poster Design

Fig. 2.4.2 Final poster layout, Week 10 (02/06/2022)

PDF File

FEEDBACK

Week 9

General Feedback: Mr Vinod said my sketches are good, and asked about my preference among the five typeface sketches.

Specific Feedback: The fifth one looks cool. He also suggested two existing typefaces for me to refer to that looks similar to mine. The two typefaces are Architype Bayer and Bauhaus 93.

Week 10

General Feedback: Mr Vinod said he has no issues with my typeface and can proceed to create the poster.

Specific Feedback: As for the poster, all the letters have to be the same font size.

REFLECTION

Experience

Overall, it was a really great experience and I was enjoying the process honestly. This task made me understand how a typeface is created from scratch to the final, usable, good looking typeface. A the start, I was too overloaded with ideas, that I didn't know where to start. Serif? Sans Serif? Decorative? I just could not make up my mind. Ultimately, I am glad that I chose to design a bold, sans serif typeface, which ended up the way I want it to be.

Observation

In terms of observation skills, it is important when I am analyzing other good typefaces. This enables me to take inspiration and certain elements from the existing typeface and apply them in mine, without copying exactly. Observation skill is also important throughout the whole digitization process and also when deciding the letterspacing and kerning process in FontLab.

Findings

The main discovery I realized in this project is that designing a good typeface is NOT EASY. It takes a lot of time as well as a lot of efforts for a typographer to design a fully functional typeface. Although I have only designed a few letters and symbols, I can really feel the experience of a typographer. Typographers, you have my respect.

Bauhaus was a school whose approach to design proved to be a major influence on the development of graphic design as well as much of 20th century modern art. It was founded by Walter Gropius in Weimar, Germany in 1919. They made a significant contribution not only in the field of Architecture but also Typography.

The author of this article, Niyazi J., stated that the link between Architecture and Typography often led her to think that, it could be the design discussions across those different disciplines that could have lead to the typography designers to borrow elements of Architecture principles to create type.

One of the pioneers to create Bauhaus as a typeface is Herbert Bayer. He had a strong background in Architecture which led him to create such a typeface.

Furthermore, Bauhaus followed the design principle of “Form follows function”. The philosophy of this group was influenced by technology, machines and changes in the lifestyle of people due to Industrial revolution.

Evolution of the Bauhaus Font

Piet Zwart was one of the contributors to the type specimen. He believed that the less interesting a typeface, the more typographically usable it is. So, he aim to create more “business like letters” termed as jobbing type that can be re-used for presentations and documents. He mainly advocated functional typography over staged typography.

Fig. i In 1923 the graphic design poster created by Piet Zwart (trained as an Architect again) has stark geometric influence on the font

Fig. i shows the graphic design poster (1923) created by Piet Zwart (trained as an Architect again) has stark geometric influence on the font.

Fig. ii Joost Schmidt’s Poster for the 1923 Bauhaus Exhibition in Weimar

Fig. ii shows Joost Schmidt’s Poster for the 1923 Bauhaus Exhibition in Weimar that has elements of an Architectural plan around which the type is wrapped. If we look closely, we can see the graphic elements (and not the type) are quite similar to those of Bauhaus 93.

Fig. iii Bauhaus logo designed by Oskar Schlemmer

The logo designed for Bauhaus has a strong influence of solids and voids. There seem to be a back and forth movement of dialogue within the type family whether the architectural quality has to do with space and volume or have a feel of a mechanical or structural plan.

Fig. iv Universal Alphabet created in 1925

As for the Universal Alphabet font created by Herbert Bayer, it seems to be the font that has elemental quality that derives from both the dialogues from the Bauhaus logo. It could be the starting point which influenced the thought process of typography artists when designing fonts for the Bauhaus family in the future.

*In fact, this typeface was recommended by Mr Vinod for me to refer to, and this was how I found this article.

Modular techniques adopted in the construction of Bauhaus 93

Fig. v Comparison of different letters that are derived from a similar module

The theory of Modular Design, which allowed the system to be subdivided in smaller modules which then can be replicated and mass produced resonated with the initial Bauhaus principles of “Form follows function”.

It is very evident from Fig. x that the type face follows the principles of modularity. The author states that Bauhaus 93 can be categorized into smaller modules which in combination created the character set.

Search This Blog

WONG JUN ZHE (0353613)