Typography Task 3 - Type Design & Communication

4/11/2024-  15/12/2024( Week 7 - Week 13 )

TANG LILIN (0376668)

Bachelor OF DESIGN (HONERS) IN CREATIVE MEDIA || TYPOGRAPHY

Typography

Task 3 

---

LIST

• LECTURE
• INSTRUCTION
• TASK 3 - Type Design & Communication
• FEEDBACK
• REFLECTION
• FURTHER READING

---

LECTURE

There is no lectures during this task.

---

INSTRUCTION

---

TASK 3 - Type Design & Communication

Structural font

According to the requirements, we need to choose one font from the given ten fonts to explore the letters H, o, g, and b.

fig 3.1.1 H o g b of then ten fonts

I briefly examined the ten fonts provided in the AI system and then chose Bembo Std Regular as my font of choice.

fig 3.1.2 The measurement of H o g b 

This is my brief analysis of the ascender height, cap height, x-height, baseline, and descender height for the letters H, o, g, and b, using a font size of 750 pt.

First, I analyzed the uppercase letter "H." The following images illustrate the process of analyzing its serifs and structure:

• Uppercase letter "H"

 

fig 3.1.3  Analyzing the Structure of the Uppercase Letter "H"

• Basic Structure: In the Bembo Std font, the uppercase "H" has two widely spaced vertical strokes. The horizontal stroke is not centered but positioned slightly higher.

• Stroke Thickness: The vertical strokes are thick, while the horizontal stroke is thinner. The vertical strokes are more than twice as thick as the horizontal stroke. The uppercase "H" in Bembo Std features serifs. On the vertical strokes, there is a variation in thickness where the serifs connect to the strokes. In contrast, the horizontal stroke shows no such variation. The lengths of the serifs differ. Serif ① is the shortest, and serif ④ is the longest. Their positions also vary slightly. Serifs ① and ③ end at the same position, but serif ③ is longer, as can be clearly seen in the top-left corner of the image below. Serifs ② and ④ differ in both starting and ending positions, with serif ② being shorter than serif ④. The serifs connect to the vertical strokes with curved transitions, and the design of the serifs is consistent across all parts. The addition of serifs gives the uppercase "H" a more elegant and refined appearance.

• Proportions and Width: The letter "H" is relatively wide, which makes it appear more stable and grounded.

• Negative Space: The internal negative space of the "H" is large, giving it an open and relaxed feel.

• Curves: The connection between the serifs and the vertical strokes features smooth curves. This design choice enhances the visual flow of the letter, making it appear more dynamic and visually appealing.

• Lowercase letter "o"

fig 3.1.4  Analyzing the Structure of Lowercase Letter "o" 

• Basic Shape: The lowercase "o" is a closed elliptical shape. It is not a perfect circle but rather a slightly elongated ellipse. The inner contour of the letter forms another slightly elongated ellipse at a different angle. The letter is sans-serif and asymmetrical. The outer contour of the "o" has a slight tilt, while the inner contour is noticeably tilted at a different angle. The letter slightly extends beyond the baseline and x-height.

• Stroke Thickness: The stroke thickness is not uniform. The top and bottom are thinner, while the left and right sides are thicker. Based on online research, this variation in stroke thickness is referred to as "contrast."

• Negative Space: The negative space inside the "o" is quite large, giving it an open and lightweight appearance.

• Lowercase letter "g"

 

fig 3.1.5  Analyzing the Structure of Lowercase Letter "g" 

• Double-Layered Structure: The lowercase "g" features a two-layered structure, with a closed circular upper part and an elliptical (or circular) lower part.

• Upper Circle (Eye): According to research, the upper circle in the double-layered "g" is often referred to as the "eye." Its shape is similar to the letter "o," with a slightly tilted outer elliptical contour and a distinctly tilted inner elliptical curve. The tilt angles of the two curves are opposite. The letter has serifs, which are rounded rather than straight, and the serifs end with a vertical stroke.

• Lower Elliptical Shape: The lower part is more of a circular stroke rather than an ellipse. It displays significant variation in stroke thickness, with thinner strokes at the points where they connect. This contrast in thickness adds a sense of dynamism to the design, enhances visual impact, and maintains readability.

• Connection Between the Two Parts: The upper and lower sections are tightly integrated through a short connecting stroke, forming a cohesive whole that enhances the letter's visual stability. The upper part is lighter, while the lower part is heavier, giving the letter a bottom-weighted center of gravity. This design choice increases the sense of stability and balance.

• Lowercase letter "b"

 

fig 3.1.6  Analyzing the Structure of Lowercase Letter "b" 

• Basic Structure: The vertical stem extends from the baseline to the ascender height, while the bottom of the right elliptical stroke slightly exceeds the baseline. The circular stroke is thinner at the connection point with the vertical stem.

• Stem: The top of the stem features a serif with a perfectly rounded curve. The lower part of the serif is also a smooth curve. These curves do not intersect or directly connect with the vertical stem but maintain a slight distance, creating a softer visual effect rather than sharp edges. At the bottom, the stem intersects the lower part of the circular stroke with another curved arc. The stem itself remains upright without any slant.

• Right Circular Stroke: The circular stroke shows a clear variation in thickness. It is thinner at the upper connection with the stem and thicker at the lower connection. The elliptical part is tilted at an angle, contributing to the dynamic design of the letter.

Next, as required, I first reviewed the reference provided by Mr. Vinod.

fig 3.1.7 The Reference of "the writing tools and letterform styles"

I have read the provided reference on "the writing tools and letterform styles."

Here is the summary:

Broad-Edge Pen

• Characteristics: Writing produces strokes with noticeable thick-thin contrast, forming an oblique axis style.
• Representative Typefaces: Adobe Jenson, Bembo Book.
• Features: Moderate contrast between thick and thin strokes, with letter proportions closely resembling traditional Roman calligraphy.

Flexible Pointed Pen

• Characteristics: Thick strokes are created by applying pressure, while thin strokes result from light pressure, forming a dramatic thick-thin contrast.
• Representative Typefaces: Baskerville, Bodoni.
• Features: Vertical axis, significant contrast between thick and thin strokes, extremely fine thin strokes, suitable for display purposes.

Non-Flexible Pointed Pen

• Characteristics: Produces strokes with little to no variation in thickness, resembling monolinear styles.
• Representative Typefaces: Gill Sans, Futura, Univers, Helvetica.

Next, I used three different nibs with sizes above 3.0 to explore the writing styles.

• Non-Flexible Pointed Pen

fig 3.1.8 The Writing Style of Non-Flexible Pointed Pen

The top-left of the image shows the stroke width variations that can be achieved with this pen.

• The first writing style in the top image: This font design uses Gill Sans Std as a reference. The overall font is relatively narrow, giving it a slim and elongated appearance. It is sans-serif, and since the strokes lack width variation, the overall look is smooth and fluid.

• The second writing style in the top image: This font is designed to be more rounded, with added serifs for a distinctive appearance.

• The third writing style in the top image: This font design uses Univers LT Std as a reference. It features rounded forms, consistent stroke width, and no serifs.

• Flexible Pointed Pen

fig 3.1.9 The Writing Style of Flexible Pointed Pen

The top-left of the image shows the variations in stroke width achievable with this pen.

• The first writing style in the top image: I designed the font with serif strokes that vary in thickness, making the font look less rigid and more dynamic. The design takes ITC Garamond Std as a reference.

• The second writing style in the top image: I added straight serifs to the font and designed the main strokes to be thick, while the other strokes are thin, creating a distinct contrast in thickness.

• The third writing style in the top image: I incorporated a brush-style writing technique into the design of this font. 

• Broad-Edge Pen

fig 3.1.10 The Writing Style of Broad-Edge Pen (Sketch 1)

The top-left of the image shows the variations in stroke width achievable with this pen.

• The first writing style in the top image: Inspired by Gothic fonts, this font design includes serifs. The strokes are composed entirely of straight lines without any curves, resulting in a non-rounded appearance.

• The second writing style in the top image: Also inspired by Gothic fonts, this font features downward-angled slanted strokes instead of straight ones. It is sans-serif, elongated, and non-rounded.

fig 3.1.11 The Writing Style of Broad-Edge Pen (Sketch 2)

The top-left of the image shows the variations in stroke width achievable with this pen.

• The first writing style in the top image: A very full and rounded font.

• The second writing style in the top image: A slender yet full font with variations in stroke thickness.

• The third writing style in the top image: A design with rounded serifs and variations in stroke thickness.

fig 3.1.12 Sketch of My Font

Ms. Vitiyaa gave me feedback, saying that the second font designed with a flexible pointed pen looks the best. So, I used this font as the basis for my digital sketch and incorporated some elements of brush fonts. Then, I followed the tutorial video to begin the digitization process.


Fail attempt

fig 3.2.1 Measurement of the Universe LT Std 55 Roman

First, following the steps taught by Mr. Vinod in the video, I chose the baseline data of the Universe LT Std 55 Roman font as the reference lines for my digital sketch.

During this process, I used the shape tool, brush tool, and occasionally the pencil tool to adjust the strokes. I also used the Cut tool and the Shape Builder tool to create the shapes I envisioned.

I used Align to align each letter and stroke, making them look more unified.

fig 3.2.2 Process of Creating

• First row: Original strokes
• Second row: Digitized based on the original strokes and sketch, with the first adjustments
• Third row: All strokes were outlined and refined with a second round of adjustments
• Fourth row: Final work

Afterward, I optimized the less-than-perfect strokes to make them appear smoother and more fluid.

During the adjustment process, the curve of the letter "S" was the hardest to adjust. I worked on several versions before achieving the desired result. Since the font I created was derived from handwriting, the curves weren’t as regular. During the adjustment, I redesigned the strokes using circular curves, making them appear smoother within the font.

Below are several versions of the letter "S" that I modified.

fig 3.2.3 Modifying Process of Lower Letter "S"

Final version:

fig 3.2.4 FInal Font

Successful effort

But in week twelve, we were asked to create a poster, and I realized that the font I designed wasn't professional enough. Some of the font rules hadn’t been clearly defined from the beginning. It looked okay at first glance, but not when examined closely. So, I decided to redo my font. Based on the previous sketches and process, in this new creation, I decided that all the strokes would be drawn using circles and rectangles, and then I would use the Shape Builder to piece them together.

This time, I established all the stroke rules at the very beginning.

Stroke Rules:

• Vertical stroke width: 92pt
• Serif width: 170pt, height: 10pt
• Lowercase letter width: 495pt, height: 500pt
• Lowercase letter "o" stroke thickness variation: 15pt - 96pt

Measurement (derived from the Univers LT Std font baseline):

• Ascender: 722 pt
• Cap height: 736 pt
• X-height overshoot: 508 pt
• X-height: 500 pt
• Baseline: 0 pt
• Baseline overshoot: -8 pt
• Descender: -211 pt
• Descender overshoot: -215 pt

fig 3.3.1 Measurement of Universe LT Std

Font style description: The font features noticeable stroke thickness variation with serifs. I modified the dot above the lowercase "i" into a star (made using a square shape) and placed the star in the middle of the letter "o" to enhance the font style. The serifs are designed to resemble Roman columns, establishing a graceful and elegant style for the overall font. The unique star element adds a celestial, romantic touch. All lowercase letters are designed to be full and balanced.

Here is my creation process:

First, I created the letter "o," followed by "i" and "l."

Next, I created the letters "d" and "g," modifying them based on the "o."

Then, I created the letters "c" and "e," again based on the "o."

 

fig 3.3.2 Process of Creating Lowercase Letter“o”“d”“g”

Next, I created the letters "n" and "h," while the letter "m" was prepared for the poster.

fig 3.3.3 Process of Creating Lowercase Letter “n” “h” “m”

Finally, I created the letters "t" and "s."

fig 3.3.4 Process of Creating Lowercase Letter “t” “s”

Below are additional letters "y," "v," "w," "r," and "a," all prepared for the poster design.

fig 3.3.5 Process of Creating Lowercase Letter "y," "v," "w," "r," and "a,"

First version of the font:

fig 3.3.6 First Version of the Font

Afterward, I refined the letters and added some new ones based on the existing ones for the poster:

Refining letter "d": I made the transition between thick and thin strokes smoother. Based on the letter "d," I also created letters "b," "p," and "q."

Refining letter "s": I made the connection in the middle part smoother.

Refining letter "g": I shortened the strokes and adjusted them to the correct proportions.

Refining letter "e": I shortened and narrowed it, adjusting it to the correct proportions.

Refining letter "t": I shortened the strokes and ensured the bottom curve didn’t exceed the horizontal line. I also created the letter "f" for the poster.

Refining letters "n" and "h": I made the connection between thick and thin strokes smoother.

fig 3.3.7 Refining Letter Process

After refining all the letters:

fig 3.3.8 After Refining All the letters

I imported the letters into FontLab and began adjusting the kerning.

fig 3.3.9 the Process of adjusting the kerning

After adjusting side bearings:

fig 3.3.10 After Adjusting the Side-Bearing

After sentence adjustment :

fig 3.3.11 After Adjusting the Sentence 

Poster Design

For the poster creation: For the sentence selection, I decided to include all the letters from "oledsnchtig" in the poster. Given that my font's style is elegant, romantic, and mysterious, with a theme related to the night sky, I chose a romantic and poetic sentence about the stars to match the font style. Since the poster is black and white, I chose black as the background color. I added the star element from the font to tie the poster's style with the font and make the composition more dynamic.

Seraphina, derived from "Seraph" (the six-winged angel), represents purity, nobility, and spirituality, carrying profound and elegant connotations. The font's flowing curves and delicate details resemble the wings of an angel, exuding a sense of lightness and mystery, perfectly aligning with the essence of this name. At the same time, Seraphina evokes the romantic imagery of the starry sky, as if each letter is bathed in starlight, radiating an otherworldly brilliance. This name not only highlights the artistic beauty of the font design but also imbues it with a sacred and dreamlike soul, captivating at first glance.

fig 3.3.12 Poster Creation Process

Poster layout design:

fig 3.3.13 Poster Composition #1 & #2 & #3

               

fig 3.3.14 Poster Composition #4 & #5 & #6

Final Poster Composition:

fig 3.3.15 Final Poster - JPEG

• Use dots (stars) to fill the poster, creating a starry sky effect.
• "Chase," meaning "to pursue," should be visually separated from other content to convey the sense of chasing. Place a less opaque "chase" in the background to create a dynamic feeling of pursuit.
• Deepen the color of "secrets of" to align with the concept of secrecy.
• "Divine Starlight" is the focal point of the entire poster. Therefore, make "divine" the brightest part of the poster. For "starlight," apply an outlined effect with a white fine line that looks like it’s glowing, and add a layer of Gaussian blur to enhance the starry light effect.

FINAL SUBMISSION

Here is the link to download my font:

TTF file:

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

OTF file:

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

Here is the font tester container I created. The lowercase letters that can be input are: "abcdefghilmnopqrstvwy" 

-----type playground end-----

fig 3.4.1 Screen Grab of FontLab process (side-bearings)

fig 3.4.2 Final Font Design "Seraphina Regular" - JPEG

MEASUREMENTS (derived from the Univers LT Std font baseline):

• Ascender: 722 pt

• Cap height: 736 pt

• X-height overshoot: 508 pt

• X-height: 500 pt

• Baseline: 0 pt

• Baseline overshoot: -8 pt

• Descender: -211 pt

• Descender overshoot: -215 pt

Letter widths:

• Lowercase "o": 556 pt

• Lowercase "l": 230 pt

• Lowercase "e": 533 pt

• Lowercase "d": 545 pt

• Lowercase "s": 454 pt

• Lowercase "n": 565 pt

• Lowercase "c": 503 pt

• Lowercase "h": 565 pt

• Lowercase "t": 406 pt

• Lowercase "i": 230 pt

• Lowercase "g": 545 pt

fig 3.4.3 Final Font Design "Seraphina Regular" - PDF

fig 3.4.4 Final Font Design "Seraphina Regular" - PDF （All Letter） 

fig 3.4.5 Final Poster - JPEG

fig 3.4.6 Final Poster - PDF

---

FEEDBACK

Week 13

General Feedback: 
This week, we need to create an E-portfolio of Final Compilations & Reflections. We must ensure that all photos and files in our E-portfolio are accessible. Ms. Vitiyaa suggested having friends check whether the files in our E-portfolio can be viewed properly.

Specific Feedback: 
This week, Ms. Vitiyaa checked my font and said it was fine, but mentioned that the poster could be improved. I also asked her to review my E-portfolio, and she suggested organizing the images together as much as possible to avoid making the E-portfolio too long and boring.

Week 12:

General Feedback:
I couldn't download the ttf file exported from FontLab. It only worked when I saved it as an otf file. This week, we need to start working on the poster.

Specific Feedback:
There was an issue with uploading my ttf file to Google Drive; after uploading, it couldn’t be previewed. Ms. Vitiyaa asked me to go to the D407 classroom to remake it, but the issue still wasn't resolved.

Week 11:

General Feedback:
We will continue working on digitizing the font. This week, we need to import the fonts we designed into FontLab to generate a typeface that can be used for typing in AI or PS.

Specific Feedback:
When I imported my designed font into FontLab during class, I encountered some issues. Ms. Vitiyaa mentioned that she couldn't assist me, so I sought help from my classmates and managed to resolve the problem.

Week 10:

General Feedback:
We will continue working on digitizing the font. This week, we were assigned to digitize punctuation marks, specifically the period and comma.

Specific Feedback:
Ms. Vitiyaa said my work is OK. I am still trying to improve and refine my digitized font.

Week 9: 

General Feedback:

I explored the different writing styles of three pens and decided to combine two writing styles from the same pen for digitization.

Specific Feedback:

Ms. Vitiyaa mentioned that these two writing styles are feasible, but I can only choose one for digitization. She also suggested creating a rough sketch before digitizing the letters to better compare the differences between the digitized version and the sketch. Therefore, I refined my rough sketches for digitization and combined these two writing styles.

Week 8: independent learning week

---

REFLECTION

Experience

For my experience with Task 3, I found it interesting. I first carefully observed the strokes and shapes of the Bembo font and its writing style. Based on the provided reference, I learned about the different types of pen tips. I explored the various writing methods for different pen tips and discovered the writing style I liked. I then digitized it, and throughout the digitization process, I experienced the journey from sketching the font to digitizing it. I made continuous minor adjustments until it looked perfect.

Observation

When using different pen tips to explore various writing styles, I found that writing on paper wasn't difficult, but the challenge was developing and exploring different writing methods. I realized that transitioning from a sketch to a digital version in AI involves some differences. During the digitization process, whether using the brush tool or the rectangle tool, it was difficult to get the exact desired shape on the first try. It required multiple adjustments.

Finding

I found that detailed adjustments require patience. Additionally, when designing, it is important to save every step and stay organized. By saving each step, if later adjustments are needed, we won't panic or waste time repeating actions. Also, when designing fonts, we need to maintain the overall style consistently.

SPECIAL

During this task, I recreated the font, and I realized that this task is a series of interconnected steps: first, we explore writing styles, then digitize, create the font, and finally design the poster. I believe that doing research and finding references before starting the design process is very important. For this task, whether designing lowercase or uppercase letters, we should first understand font design mechanisms and rules. At the beginning of the design process, we should establish the design rules based on the sketch, such as the thickness of vertical strokes, the width of lowercase letters, etc. We need to consider both readability and design compatibility. Since the font will be displayed on a computer screen, it is best to use shape tools during the creation process to ensure smooth and visually appealing strokes. Also, we should export the font repeatedly to review the overall effect and fine-tune it continuously. Only after multiple attempts will we achieve the final result.

---

FURTHER READING

fig 6.1.1 Serif Old Style & Serif Transitional

Serif Old Style & Serif Transitional

The development of serif fonts can be summarized in the following key stages:

Ancient Origins (Roman Inscription Period)

Serif fonts originated from Roman inscriptions, where serifs enhanced both aesthetics and functionality.

Medieval Writing Period

Humanist calligraphy evolved into more rounded styles, laying the foundation for serif fonts.

The Rise of Printing (15th-17th Centuries)

• Venetian Old-Style Fonts (e.g., Jenson) marked the golden age of serif typography in printing.
• Fonts like Garamond popularized elegant and practical serif designs, becoming the mainstream choice.

Formation of Modern Serif Fonts (18th-19th Centuries)

• Transitional Fonts (e.g., Baskerville) emphasized higher stroke contrast and straight serifs.
• Modern Fonts (e.g., Didot, Bodoni) pursued ultimate elegance and refinement.

Industrialization and Diversification (19th-20th Centuries)

• Serif fonts were adapted for various media, such as newspapers and advertisements.
• Digital technology revived classic fonts and facilitated their widespread use.

Modern and Contemporary Developments (21st Century)

• Combining tradition with innovation, serif fonts optimized for screen reading (e.g., Georgia) were designed.
• Serif fonts became a blend of functionality and artistic expression.

fig 6.2.1 Typographic Pronciples

Typographic Pronciples

• The Combination of Science and Art

Typography design is both a science and an art, requiring balance among elements within the layout to deliver solutions that are both functional and aesthetically pleasing.

• Experience and Intuition

Exceptional designers often rely on professional training and experience, using intuition to apply proven forms and aesthetic principles effectively.

• Contrast in Design Elements

Contrast in size, shape, tone, placement, and color directly influences the visual impact of a layout. Designers must possess visual literacy to integrate text and images into a cohesive composition.

• Understanding and Application of Font Characteristics

Designers need to understand the attributes of different fonts (e.g., serif and sans-serif), their applications, and their unique properties, as well as how they interact when combined.

• Style and Principles

Typography is not only an art but also rooted in design principles. Designers use knowledge and experience to create works that reflect specific styles, enhancing communication. Sometimes, they break the rules intentionally to achieve innovative visual effects.

• Priority of Purpose and Function

Functionality is the core of typography. For instance, book design prioritizes readability, while advertising design often requires larger and more attention-grabbing typography.

• Design Rules and Flexibility

Mastering more design rules expands a designer’s capabilities, enabling them to choose appropriate tools and methods to create richer solutions.

In summary, typography is an interdisciplinary field that combines artistry and practicality. Designers must blend experience, principles, creativity, and flexibility to produce high-quality work.

fig 6.3.1 Modular Design

Modular Design

Summary of Modular Design

Modular design uses geometric shapes as fundamental modules to build and organize visual elements, giving the design a unique sense of form and diversity. Below are the characteristics and applications of different module types:

fig 6.3.2 Circle Module

Circle Modules

• Circles are visually compelling, but due to the lack of corners or edges, they are difficult to align or create relationships with other elements.
• Overlapping, transparency, and sub-modules (such as semicircles) increase unity and diversity in compositions.
• Irregular placement and cropped text can break monotony and make the composition more lively.

fig 6.3.3 Square Module

Square Modules

• Square modules are closely related to grid systems and can be seen as units of visual fields.
• Variation in tone, rotation, and removal of modules adds interest and layers to the design.
• Irregular placement of square modules introduces diversity and enhances visual appeal.

fig 6.3.4 Rectangle Module

Rectangle Modules

• Long rectangles naturally correspond to the shape of text lines, making them suitable for text modules.
• Arrangement, cropping, and free movement of modules can break regularity, creating dynamic compositions.
• Module overlap and changes in background space create new shapes and points of visual interest.

fig 6.3.5 Transparency and Overlapping

Transparency and Overlapping

• Transparent modules and overlapping methods add complexity and depth to space.
• Negative space is divided into irregular shapes, and overlapping modules form new visual effects.
• Outlined modules further enhance transparency and dynamic visual experiences.

Core Concept
Modular design organizes and arranges geometric shapes to create compositions that are diverse, layered, and full of energy. Designers can break regularity and create works that combine both diversity and unity through the movement, rotation, cropping, and tonal variation of modules.