Typography - Task 3
05/11/2024 - 17/12/2024 / Week 7 - Week 13
SOFIA CHEW / 0377902Typography / Bachelor of Design (Hons) in Creative Media
Task 3: Type Design & Communication
.png)
Table of Content
1. Lecture
2. Instruction
3. Task 3
4. Feedback
5. Reflection
1. Lecture
2. Instruction:
Document 2.1 Module Information Booklet (MIB) of Typography
3. Task 3: Type Design & Communication
1. Visual Reference / Research
Most of the references I look through the web tend to be boxy, wavy and curvy which is what I'm going for my text design.
.png)
Fig 3.1.1 Font Reference From Pinterest
2. Deconstruction
Before starting my sketches, I dissected the given letterform at teams. The letterform I chose to deconstruct was Univers LT Std.
Fig 3.2.1 Letterform Deconstruction
3. Sketches
After dissecting the letters, I started doing sketches in graph paper. We were told to use the letter H, O, G and B to practice with 3 different pen nib ( Flat nibs, pointed nib/brush and rounded felt-tip ).
.png)
Fig 3.3.1 Practice with three different nibs
After several practice and try-outs , I ended with three final sketch. I decided to go with the design that uses flat nibs. I then also started to come out with a new font design using the flat nibs marker.
.png)
Fig 3.3.2 Final outcome and new design
4. Digitizing Written Letter
After finishing the sketches, I started digitizing my final letter sketch into Adobe Illustrator. Before starting, I watched the tutorials video provided by Mr. Vinod in order to know how to design font with Adobe Illustrator.
I also added few grids into my artboards as guide for the ascender line, descender line and baseline etc. The letterform I used for reference was Gill sans. I wanted to compare the outcome of using uppercase and lowercase before finalizing my options. So, I ended up digitalizing both uppercase and lowercase form.
Fig 3.4.1 Grid line
I found that I have been heavily using the rectangle shape tool for my design. After grouping all the rectangular using the pathfinder tool I started to design the curve details for my font.
.png)
Fig 3.4.2 Progress
I also decided to create to version one with serifs and another without sans serifs.
.png)
Fig 3.4.4 Process 2
Fig 3.4.5 Final Font Design Using Adobe Illustrator
I continued importing the letters into Fontlab. But before this, I watched video tutorial shared by Mr. Vinod again to understand how to use the application. We were required to download the 7th edition. I kept the spacing of each letter on 67 to keep it consistence. As for the symbol I adjusted them according to the reference of normal symbol placement.
Fig 3.4.6 Process in Fontlab
5. Poster Design
After finishing creating our font, we are assigned to design two A4 poster ( 1 black , 1 white). I chose to create different sentence for each poster. The white poster was done smoothly. As for the black poster, I encounter major problem which was my font can't change it's color. I seek help from Ms. V and the solution was it was to change the letterform into outline mode.
Fig 3.5.1 White A4 Poster Design
Fig 3.5.2 Black A4 Poster Design
6. Final Font
Figure 6.1 New Metric Window with sentence Screengrab
Figure 6.2 Final construction of 'THICO'(JPEG)
Figure 6.3 Final construction of 'THICO'(PDF)
Figure 6.4 Final Poster 'Bold Design Echoes' JPEG
Figure 6.5 Final Poster 'Bold Design Echoes' JPEG
Figure 6.7 Final Poster 'Bold Design Echoes.' PDF
Figure 6.8 Final Poster 'Bold Design Echoes.' PDF
Test the font by typing some words below:
Feedback
Week 12:
General Feedback: For this week, Ms. V told us that we should finish generating our font and start with our poster design. We were also reminded to do our TES feedback form.
Specific Feedback: I showed my font design before going to the Mac Lab. After getting green light from Ms. V, I went to the lab to generate my font out. While designing my poster, I found that my font was unable to switch color. Thankfully Ms. V show me an option which was changed it into an outline format.
Week 11:
General Feedback: This week we were asked to download font lab 7. We had to finalize our digitized font and import into font lab 7. We were also required to update our E-portfolio and feedback sheet.
Specific Feedback: I continued working on my e-portfolio for this week and got my task 2 re-checked by Ms. V. She said that my outcome was ok but it lacks of connection.
Week 10
General Feedback: For this week, we were brief about the marking of our previous task. After that we were given time to proceed with our task 3 and also time to edit our e-portfolio.
Specific Feedback: I showed Ms. V my letter design. I told her it looks ok but not good and she agreed with that. I was told that I can do better.
Week 9:
General Feedback: This week, Ms. V brief with us about things we need to look out in our e-portfolio. We need to remember to label all our post under Typography. We are also reminded to keep our portfolio clean. We also have to look out on the given comment in this feedback form and response it with date in order to get our e-portfolio re-checked.
Specific Feedback: I shown my sketches and digitalized work to Ms. V. She gave me greenlight to continue my work. But I will need to make decision of my own about using lowercase or uppercase.
Reflection
Experience
For the experience, I will say it's fun and challenging. The research process for this time was quite overwhelming for me as I can't make the decision on which type of font design I want to go for. But thankfully, I was able to make up with my mind on the design. Next was the digitalize process, it indeed is fun but the details was what makes it challenging. I not only have to draw out the lines (ascender line, descender line, x-height, etc..). I also have to make sure each blocks are connected by it's line in order to be able to create curve smoothly. The next challenge was the usage of FontLab as it was our first time approaching this application, I indeed was pretty lost. But, thankfully with the tutorial video provided by Mr. Vinod, I was able to get a hand on it. At last, comes with the poster design because most of our previous task are about composition basic. It surely helps me in finishing it smooth and efficiently.
Observation
I find that it's very very important to look up on the regularity of every character shapes. I got this mainly from the letterform deconstruction task. Not only by that, I was able to observe this conclusion went I started typing out my font in FontLab. My I and G at first was very out of regularity of my others design. Hence, I clearly learnt this fact by my mistake. Still, the more we practice, the more we find out.
Finding
The more we practice, the more we find out. I never new creating font will need such a long process. I will say the brainstorming stage was the most time consuming as I need to draw out different sketch to test out if it will work out. Thankfully, this process make the digitalize stage to go on more smoothly. I also found that at the digitalize part, it is important to do practice again. This is because at star, I always forgot to put attention on the details. For example, I will forget to ensure every letter touches the ascender line, or that I will forget if each blocks are connected correctly or not. So by practice, I eventually was able to digitalize it in a more efficient time.
Further Reading
1. Typography Design Form and Communication
.png)
Fig 6.1 Front Cover of Typography Design Form and Communication
CASE STUDY Buenos Aires Underground (Subte) (pg 199-201)
The typography design of the Buenos Aires underground (Subte) system is a good example to illustrate how effective communication can be achieved through visual elements.
Background
The Subte, one of the world's oldest underground rail systems was in need of both a redesign that honours it roots and modern needs for its users.
Fig 6.2 A subway entrance before the Subte system was implemented.
Color Scheme: The colors are not just chosen for aesthetic but to serve functional purposes in helping the lines and stations standout better.
Fig 6.3 Coloured Subway line
Signage system: the layout of signs establishes a hierarchy that allows for stations to be navigated through effectively. For example, directional arrows and noticeable station names to make the entire navigating experience clear.
Fig 6.4 Noticeable exit signs.
Cultural Integration: Typography exhibits the origin and history of local culture, integrating native elements for users to resonate and build a sense of community through heritage.
User-centered Design: The typeface is easy to read under low-light and small sizes conditions that are very common on the subway system, so this design focus improves the travel experience for passengers.
CASE STUDY Information design: Metropolitan World Atlas (pg 202 - 205)
The Metropolitan World Atlas is also a good case study for typographic design and information communication.
Background
The atlas is designed for urban planners, researchers and public. The aim of it is to present complex data into an accessible and engaging format.
Font: There is a mix of serif and sans-serif to ensure visual hierarchy. Therefore increases the reading efficiency by presenting different data types/stage of information.
Visual Hierarchy: The Right Font Size, Weight and Spacing help to guide the reader´s eye leading toward critical information which allows for a better overall comprehension.
Fig 6.5 Sample Spreads
Incorporate Graphics into Text: Typography should strive to create a balance between maps, diagrams and any other visual displays that are included alongside the written materials. The main benefit of this synergy is that communications for geographically and demographic information are clearer.
Fig 6.6 Graphics inside the atlas
Cultural Integration: The design is created with an inspiration deriving from the culture of big cities, making its information more applicable and meaningful to a wider range of audiences
User Interaction: The way users interact with the atlas will impact typographic decisions that are made, such as readability and navigation for information.
2. Vignelli Canon on Design
Fig 6.2 Front Cover of Vignelli Canon on Design
In this book, Massimo Vignelli guides us through his design philosophy and working style He is a famous designer who strongly believes in simplicity, timeless design and clarity. The canon exists in two parts: the Intangibles and The Tangibles.
Intangibles:
In this part, Vignelli focus on the fundamental rules of his design thinking.
Semantics: The design must have the right meaning and context. Designers should be aware of what they are communicating to have a powerful and efficient message.
Syntactics: This means design structure and the discipline. Vignelli recommends using the grid to build structured, ordered and coherent designs.
Pragmatics: Instead of making the design visually appealing only, It must serve it's practical purpose and also be functional.
Tangibles:
Part of this is on the technical and material side:
Typography :Vignelli supports a limited palette of timeless fonts, such as Helvetica and Bodoni; as they aid in establishing uniformity while keeping the design free from extra dimensions.
Grid Systems: The first thing on his list is how to get the order of a site.
Color: Vignelli recommend using limited range of color, black/white colors and primary for a timeless design modern beauty.
Discipline in Design: The designer needs to act with discipline and be simple, straightforward and consistent within a design; so that it will no longer look like patch work but as one whole theme.
.png)
Comments
Post a Comment