TYPOGRAPHY/TASK 3: TYPE DESIGN AND COMMUNICATION

November 30, 2023

TYPOGRAPHY/TASK 3: TYPE DESIGN AND COMMUNICATION

17/11/2023 - 22/12/2023 / Week 8 - Week 13
Marsya Arisa Binti Mahmud / 0359684

Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 3: Type Design and Communication

Table of Content

LECTURES

Lectures from Week 1 - Week 5 completed in Task 1: Exercise 1 & 2 and Week 6 completed in Task 2: Typographic Exploration and Communication

INSTRUCTIONS

Type Design and Communication

Create a typeface that consists of the letters: O L E D S N C H T I G , . #. Upon completion of the fonts, create a basic A4 size poster displaying your fonts.

a) Final Type Construction in JPEG: (1024px, 300ppi, Grayscale)

b) Final JPEG A4 Black & White Poster: (1024px width, 300ppi, Grayscale)

c) A4 Poster: Same font size, byline <name><by_name>,<2023> in Univers LT Std. at 8pts

PROCESS WORK

1. Font Dissection- 10/11/2023

Futura Medium, 90pts

Figure 1.1: Futura Medium, 90pts, "Hogb"

Futura is a san-serif font which means that they do not have serifs at the ends of the letterforms. For this font dissection, the letter 'H' is a capital letter. Since the upper part of the letter is flat, it goes until the cap height. The vertical stroke for the letter is also slightly below the x-height, whereas all the small letters goes up at most the x-height (no vertical strokes upwards). For the letter 'o', it curves slightly below the baseline and up to the x-height, all the curves are consistent, keeping a standard width. For 'g', the circle on the right side from the midpoint is smaller than the left. The wing for the 'g' goes down until the descender line and a wing upwards goes slightly below x-height. Lastly, the letter 'b' is similar to 'g', except it is inverted.

2. Sketches - 17/11/2023

In Week 8, Mr. Vinod instructed us to sketch out the letters: odhng/ODHNG. This task required 3 different markers with the size being more than 0.3 and each marker requires 3 different sketches. We were then asked to upload it for Mr. Vinod's feedback.

These are the sketches I came up with:

Figure 2.1: Sketches with 3 different markers

I tested out a few markers when choosing the sizes and found that 0.6 and 1.2 had a significant difference. I also chose a slanted marker because to see how different it would look opposed to the other two markers.

Sketch 1 - 3: 0.6 black marker
Sketch 4 - 6: 1.2 black marker
Sketch 7-8: 0.3 to 2.0 slanted black marker

3. Digitisation - 24/11/2023

Within the digitisation process, we were given tutorials to assist with creating the letters in the approved style on Adobe Illustrator.

Figure 3.1: Letter Sketch

I sketched out the letters based on the approved style in the previous task, which is Sketch 6. The purpose of sketching out these letters before digitising is so I could get a grasp of how it is meant to look like on Adobe Illustrator later on.

3.1 Original Digitised Font - 1/12/2023

Figure 3.1: Draft 1 of Digitisation Process

Figure 3.2: Outline for Draft 1

3.2 Updated Digitised Font - 8/12/2023

In this process, I find that the letters that require curves need a lot more consistency and during tutorials, Mr Vinod suggested changing the cap of the strokes to squares. With the feedback given, I altered my font.

Figure 3.3: Updated Letters

The strokes of the letters are different compared to the original because the cap of the strokes are now squares but the curves still remain rounded. The 'D' and the 'S' are now significantly different, and looks like it suits the typeface a lot more. Mr. Vinod taught me a cut method in class that helped me copy strokes from different letters in order to create new ones.

Figure 3.4: Anatomy of Font

The measurements of the baseline, x-height, cap height, ascender line and descender line is determined using the rectangle shape tool by measuring the height of the rectangle from the baseline. This will then be used to help me position the letters on FontLab.

4. FontLab - 15/12/2023

Mr. Vinod taught us how to import our letterforms from AI to FontLab by setting the relevant measurements and keeping the raw shape from AI.

Figure 4.1: Importing Letterforms

My first attempt at setting the bearings did not go very well. I find that setting the bearing with the respective sequence looked even at the time, but when typing a different sequence of letters, it looked uneven.

Figure 4.2: First Draft for Bearings

Reference Image for Bearings (Capital Letters):

Figure 4.3: Bearings for Capital Letters

After receiving feedback, I made a few alterations to the bearings to ensure that it was consistent throughout. Mr. Vinod suggested I test out letters with flat vertical lines beside one another to make it easier and to reduce the bearings on some of the letters.

Figure 4.4: Final Bearing

5. Poster - 22/12/2023

For the B&W Poster, we were required to use all the typeface created to form a phrase/sentence/words on Adobe Illustrator. The idea is to display our typeface as much as possible.

I created a few drafts for my poster to figure out phrases I could form as well as seeing which layout looked the most presentable:

Figure 5.1: Poster Drafts

I decided to go with the first layout (top left), mainly because it uses all the letterforms and I think it came out the nicest. Initially, Mr. Vinod mentioned the 6th layout (2nd row, 2nd from the left) was a good display for the letterforms, but I needed to avoid negative space. Therefore, I chose the first layout because it also takes up most of the canvas space.

Figure 5.2: Reducing Opacity

Mr. Vinod suggested reducing the opacity for my background, so I reduced it to 90%. I also reduced the opacity to 80% and 70% to "IS COOL!" to give a shadow-like texture to the poster.

6. FINAL SUBMISSION

Link to Download Font here: https://drive.google.com/drive/folders/1tM2BE-Y1kfe_-ZKWkcg9cHwerPW_uK_r?usp=sharing

Figure 6.1: FontLab Screengrab

Figure 6.2: Final Type in AI, "SciFI" (JPG)

Figure 6.2: Final Type in AI, "SciFI" (PDF)

Figure 6.3: Final Poster (JPG)

Figure 6.4: Final Poster (JPG)

FEEDBACK

Week 8 - 17/11/2023

Specific Feedback: Go with Sketch 5 for digitisation.

Week 10 - 01/12/2023

General Feedback Consistency of the strokes is important and letters should not be too decorative. There is a specific way to do signs, refer to video tutorial. Specific Feedback Curve needs to be controlled especially 'S', because it looks drawn. For '#' reduce the amount of space for the vertical lines and increase line length of horizontal lines. Full stop, comma and exclamation mark needs rework.

Week 12 - 15/12/2023

General Feedback Try your best to express the typeface as much as possible. Specific Feedback Avoid negative space by making the font size bigger or form more words.

REFLECTION

WEEK 8 - 17/11/2023

Experience

I bought graph paper and 3 different markers to sketch out my fonts. It was difficult choosing the size of the markers because I was not entirely sure how different it would look on graph paper. I tested it out at the store and found that 0.6, 1.2 and 0.3 to 2.0 came out drastically different. When it came to the sketching process, I had trouble coming up with ideas, given I wanted a lot of varieties. I looked up ideas on Pinterest and compared the fonts with the type of strokes used.

Observation

The marker size when sketching out my fonts on the graph paper meant being careful with my strokes being inside or outside the gridline. This also meant using different gridlines as a guide.

Finding

I find that using graph paper helps a lot as a guideline because I can keep track of the lines and curves to sketch the rest of the letters later on. This also helps the letters stay within their shapes so that it looks like similar typefaces.

WEEK 9 - 24/11/2023

Experience

After showing Mr. Vinod my drafts and deciding on my preferred sketch (Sketch 5), I had to sketch out the letters: "OLEDSNCHTIG,.!" using the same concept. To do this, I observed the baseline, x-height and cap-height from my original sketch and applied it to the rest of the letterforms.

Observation

Graph paper is extremely helpful with keeping the letterforms consistent and keeping your wrists at the same angle helps with keeping the strokes even.

Finding

The same rules apply to other characters than just letters. The full stop, comma, exclamation mark and hash needs the same type of stroke. For instance, the end of the 'S' should also be applied to the ends of the comma.

WEEK 10 - 01/12/2023

Experience

We were given time to watch tutorials provided by Mr. Vinod in order to digitise our sketches on Adobe Illustrator. I used gridlines and applied the same concept when sketching out my font on graph paper. In the video tutorials, we were taught multiple ways to illustrate our sketches, I chose the pen tool. Personally, I had trouble digitising the letter 'S' because the curves were not consistent and did not look like it came from the same typeface. I also struggled with symbols, it took time to illustrate the wings for the comma because it had excess going around the circle.

Observation

Consistency is highly important to maintain a consistent appearance to the letterforms. Illustrating is not as easy as drawing on graph paper, it requires more attention and precision to keep the original font.

Finding

Having an even amount of space between each character when digitising helps me judge the letterforms better, to make sure they do not fall out of the gridlines and to determine whether my sketches are similar to my illustrations.

WEEK 11 - 08/12/2023

Experience

We were given this time to re-evaluate our drafts after feedback. For my first draft, I noticed my letters did not seem like it was from the same typeface. Mr. Vinod taught me a way to duplicate my strokes and forming new letters by using the knife tool. We were also given a video tutorial on symbols, this meant I had a better guide on illustrating my symbols. In addition, I changed the cap strokes to squares because Mr. Vinod suggested that it would look better. The font now reminds me of a spaceship, which led me to calling it 'SciFi'.

Observation

Instead of tracing out each letter from scratch, I find it much easier to duplicate the strokes from letters I have already completed. That way, it is more efficient and consistent. I followed the tutorial given from Mr. Vinod for the symbols, following the instructions helped with illustrating the symbols smoothly.

Finding

I find that measuring the baseline, x-height, cap height, ascender line and descender line is necessary when creating a font because it helps keep the overall font look similar to one another. There are also a few rules that apply when creating a font. For instance, flat lines at the top of the letter is normally the height of the cap height instead of the ascender line.

WEEK 12 - 15/12/2023

Experience

The next stage was to import my font from Adobe Illustrator to FontLab. FontLab 7 kept crashing for me so I had to use FontLab 8, which was a hassle to navigate because the UI is different. Eventually, I did manage to find the tabs Mr. Vinod used in his tutorials. I set the necessary measurements onto FontLab and imported my fonts. Then, I had to set the bearings for each letter. Mr. Vinod had provided a guide for us to refer to. I took awhile to set bearings for letters that had to be kerned by eye. The main problem I faced when setting the bearings was that the gaps looked even when I typed it out in sequence except when I tried to form a sentence, it did not look correct. Mr. Vinod looked through my work and found that I had set auto bearings when it was not necessary for my letters.

Observation

Despite having a general reference to bearings, I still had to ensure the gaps were even through eye and that it requires precise attention. The understanding of auto bearings impacts the font overall, given it had significant effect to the letters.

Finding

Adjusting the bearings for each letter highlights the complexity of achieving proper letter spacing, I find that I need to pay closer attention to the bearings and adjust them manually when I need to.

WEEK 13 - 22/12/2023

Experience

For my poster design, I needed a phrase or a bunch of words that uses all the letters I have created. I came up with multiple drafts with black or white backgrounds to have a good idea for a layout.

Observation

The right layout requires a good representation of my typeface. The phrase I intend to use needed to take up most of the canvas space, this is to avoid negative space.

Finding

Adding more words or increasing the font size is necessary when displaying my typeface. It is to display that I worked with a fair amount of space.

FURTHER READING

Typographic Design: Form and Communication by Rob Carter, Philip B. Meggs, etc.

Figure 1.1:

Typographic Design: Form and Communication by Rob Carter, Philip B. Meggs, etc.

Parts of letterforms

Nomenclature evolved to identify letterform components for designers.
Learning this enhances understanding of visual harmony in typography.
Imaginary guidelines now replace medieval horizontal ones.
Characters align optically on the baseline, with lowercase at the x-height and capitals at the capline.
Typeface designers make optical adjustments for precise alignments.

Proportions of the letterforms

Typography considers stroke proportions, weight, width, and x-height relations for effective design.
Changes in stroke width and weight reflect historical influences and technological advancements.
Old Style typography mimicked pen writing, while modern designs moved towards uniform strokes.
Sans serif typefaces may have consistent, monoline strokes without thickness variation.
Expanding or condensing letterforms drastically alters a typeface's appearance.
Proportional relationships, especially x-height, influence the optical qualities of typography.
Varying x-heights affect the visual appearance of typefaces and impact legibility.

Typography Referenced by Alan Halley, Richard Poulin, etc.

Figure 1.2: Typography Referenced by Alan Halley, Richard Poulin, etc.

Typographic Principles

Free Placement

Designers have diverse approaches to initiating the composition process.
Many start by building a grid, but others prioritize the primary image or illustration.
Some focus on laying down visual elements first, allowing typographic information to follow.
Working with a primary image can be beneficial, especially when it's a crucial element.
Even in an all-typographic layout, freely positioning elements can create dynamic compositions.

The Grid

The grid is a tool for creating unified and varied compositions.
Designers can use default grids or create their own based on elements like media, format, and image size.
Considerations for grid creation include typographic scope, word count, and expandability.
Different projects, like books or websites, require specific grid structures for optimal design.

Hierarchy

Typographic hierarchy denotes text importance, influenced by factors like size, weight, color, and position.
Motion-based text adds animation characteristics to the hierarchy.
Despite using three typefaces, shifts in size, weight, case, and tracking guide reader attention.
In multitasking environments, designers must ensure clear typographic hierarchy for effective communication.

Unity and Variety

Unity in design is achieved when elements appear cohesive.
Consistency across documents or website areas signals completeness.
Designers use Gestalt to describe the organized whole.
Repetition, such as in color or shape, contributes to unity.
Typographic variety, in size, tone, and color, is crucial for hierarchy.
Optimal variation is key; too much repetition can confuse the reader.

Symmetry and Asymmetry

Graphic designers balance compositions with symmetrical or asymmetrical layouts.
Symmetry equals weight on both sides, creating a less dynamic, mirror-imaged layout.
Asymmetry has no similarity between sides, leading to more dynamic and less predictable compositions.
Both methods are tools for a designer's intention, with neither being inherently better.

White Space

Designers use white space or negative space for areas without text or graphics.
It adds sophistication and focus, directing attention to key elements and enhancing the intended message.
However, it should be used sparingly and functionally to avoid a sterile look.

Contrast

Contrast in typography, using elements like size, weight, color, and position, highlights important information and captures the viewer's attention.

Typeface Pairing

Prioritise contrast when pairing typefaces for visual impact.
Consider typeface knowledge and ensure fonts align with content and conceptual undertones.

Marsya Arisa Binti Mahmud (0359684)

TYPOGRAPHY/TASK 3: TYPE DESIGN AND COMMUNICATION

Comments

Post a Comment