Advanced Typography: Task 2 Key Artwork & Collateral
16/10/2024-ending week
FENG SHIWEN / 0374595
Bachelor of Design in Creative Media / Advanced Typography
Taylor's University
CONTENTS
LECTURES
INSTRUCTION
EXERCISE
FEEDBACK
REFLECTIONS
LECTURES
WEEK 4
Designing Type
- Univers and Frutiger
Adrian Frutiger was a renowned Swiss graphic designer who significantly advanced digital typography. His notable typefaces include Univers and Frutiger. Designed in 1968 for Charles de Gaulle International Airport, Frutiger was created to be clean, distinctive, and legible from various distances, even in poor lighting or when viewed in motion, with thorough testing to ensure effective letterforms.
|
| Fig 1.1 Univers and Frutiger |
- Verdana
Matthew Carter, son of Royal Designer Harry Carter, is a renowned British type designer. He trained as a punchcutter under Paul Rädisch and was Mergenthaler Linotype's house designer from 1965 to 1981. Carter's fonts often address specific technical challenges, such as Verdana (1996) for Microsoft, designed for legibility at small sizes on screens. Its pixel-based characteristics help clarify commonly confused characters like lowercase i, j, and l.
|
| Fig 1.2 Georgia and Verdana |
- Johnston Sans
Edward Johnston created the influential London Underground typeface, later known as "Johnston Sans," in 1916. Commissioned to design a font with "bold simplicity" that balanced modernity and tradition, Johnston combined classical Roman proportions with humanist warmth. The London Underground needed a cohesive typeface for its posters and signage, as various companies used inconsistent lettering. Johnston's design unified the visual identity, reflecting elegance and simplicity while being rooted in traditional calligraphy.
|
| Fig 1.3 Johnston Sans |
The general process of type design involves several key steps:
Designers should familiarize themselves with type history, anatomy, and conventions, as well as terminology like side-bearing, metrics, and hinting. It's essential to define the typeface's purpose and its intended applications, such as whether it will be used for school buses or airport signage. Additionally, examining existing fonts for inspiration, ideas, and usage patterns is crucial.
2. Sketching:
Designers can use traditional tools like brushes and paper for sketching, which offers better control. These sketches are then scanned for digitization. Alternatively, some use digital tools like Wacom tablets to draw directly in font software, which is quicker but may limit natural hand movement. Each method has its pros and cons.
3. Digitization:
Typeface digitization usually involves professional software like FontLab and Glyphs App. Some designers use Adobe Illustrator to create letterforms before importing them into these apps, though purists often criticize this method. It's important to pay attention to both the overall letterforms and counterforms, as they greatly impact readability.
4. Testing:
Testing is a vital part of the design process, helping refine and correct the typeface. Prototyping also plays a role, providing valuable feedback. Readability and legibility are crucial considerations, especially for text typefaces, but less so for display types, where the expression of form takes precedence.
5. Deploy:
Even after a typeface is deployed, minor issues may arise that weren't identified during prototyping and testing. Therefore, the revision process continues post-deployment. Thorough testing is crucial to ensure that any teething problems remain minor.
Typeface Construction
The Roman Capital grid includes a square with a circle touching its sides and a centered rectangle that is three-quarters the size of the square. This grid system, with circular elements, helps in designing letterforms effectively.
|
| Fig 1.4 Roman Capital |
Designing a new typeface involves considering various forms and corrections. Curved forms should extend beyond the baseline and cap line, and alignment between curved and straight shapes is crucial. Letter spacing must also be adjusted for uniform visual white space, a process called "fitting" the type.
|
| Fig 1.5 "fitting" the type |
WEEK 5
Perception And Organisation
Perception is "the way in which something is regarded, understood, or interpreted".
Perception in typography deals with the visual navigation and interpretation of the reader via contrast, form and organisation of the content. Content can be textual, visual, graphical or in the form of colour.
Dair posits 7 kinds of contrast : 1. Size, 2. weight, 3. contrast of form, 4. contrast of structure, 5. contrast of texture, 6. contrast of colour and 7. contrast of direction.
- Contrast / Size
A contrast of size provides a point to which the reader's attention is drawn. For example if you have a big letter and a small letter you will obviously see the big letter first before the small. The most common use of size is in making a title or heading noticeably bigger than the body text.
|
| Fig 2.1 Size |
- Contrast / Weight
Weight describes how bold type can stand out in the middle of lighter type of the same style. Other than then using bold, using rules, spot, squares is also provide a "heavy area" for a powerful point of visual attraction or emphasis, therefore not only types of varying weight.
|
| Fig 2.2 Weight |
- Contrast / Form
Contrast of form is the distinction between a capital letter and its lowercase equivalent, or a roman letter and its italic variant, condensed and expanded versions of typeface are also included under the contrast of form.
|
| Fig 2.3 Form |
- Contrast / Structure
Structure means the different letterforms of different kinds of typefaces. For example, a monoline sans serif and a traditional serif, or an italic and a blackletter.
|
| Fig 2.4 Structure |
- Contrast / Texture
By putting together the contrasts of size, weight, form, and structure, and applying them to a block of text on a page, you come to the contrast of texture. Texture refers to the way the lines of type look as a whole up close and from a distance. This depends partly on the letterforms themselves and partly on how they're arranged.
|
| Fig 2.5 Texture |
- Contrast / Direction
Contrast of direction is the opposition between vertical and horizontal, and the angles in between. Turning one word on its side can have a dramatic effect on a layout. Text blocks also have their vertical or horizontal aspects of direction. Mixing wide blocks of long lines with tall columns of short line can also create a contrast.
|
| Fig 2.6 Direction |
- Contrast / Color
The use of color is suggested that a second color is often less emphatic in values than plain black on white. Therefore it is important to give thought to which element needs to be emphasized and to pay attention to the tonal values of the colors that are used.
|
| Fig 2.7 Color |
Form
For refers to the overall look and feel of the elements that make up the typographic composition. It is the part that plays a role in visual impact and first impressions. A good form in typography tends to be visually intriguing to the eye; it leads the eye from point to point. it entertains the mind and is most often memorable.
Originating from the Greek words "typos" (form) and "graphis"(writing), typography means to write in accordance with form. Typography can be seen as having two functions:
- to represent a concept
- to do so in a visual form.
Displaying type as a form provides a sense of letterforms' unique characteristics and abstract presentation.The interplay of meaning and form brings a balanced harmony both in terms of function and expression.
Organisation / Gestalt
Gestalt theory posits that the whole is greater than the sum of its parts, emphasizing the importance of experiencing things as unified wholes. In design, particularly in typographic layouts, this means that individual elements are only valuable within the context of the overall visual composition. While each component may function well on its own, their combined effectiveness is defined by how they contribute to the overall form.
Gestalt theory includes principles of perceptual organization, particularly the Law of Similarity and the Law of Proximity. The Law of Similarity states that elements with similar features—such as color, orientation, size, or motion—are perceived as a unified group. The Law of Proximity indicates that items that are close together are also perceived as grouped, while those that are farther apart are less likely to be associated with each other.
|
| Fig 2.8 Similarity and Proximity |
Gestalt principles of perceptual organization include the Law of Closure and the Law of Good Continuation. The Law of Closure describes the mind's ability to perceive complete figures or forms even when they are incomplete or obscured. The Law of Good Continuation suggests that people perceive intersecting objects as distinct, uninterrupted entities, with alignment playing a crucial role in this perception.
|
| Fig 2.9 Continuation and Closure |
INSTRUCTION
EXERCISE
- Task 2 (A+B) Key Artwork & Collateral
Begin Task 2 by making a mind-map (of who you are or like to be), create a mood-board or an inspo. for direction and produce sketches of possible wordmark/lettering of your name (first name or pet name or pseudonym — minimum 4-5 characters). Document said process in Task 2 eportfolio.
Mood-board ：
I tried three styles, The first refers to the original meaning of the nickname word, a tall pine wood, which symbolizes toughness and eternity. I designed a shape like a cedar, and another shape like a pine cone🌲
The second one was a star-themed font, the four-pointed star symbolizing connectivity, creativity, peace and harmony, while the five-pointed star symbolizing the spirit of victory, which was the element I wanted to convey🌠
- Sketches ：
- Once Key Artwork is complete :
- Task 2A Key Artwork :
|
|
Black wordmark on white background ( week6 30/10/2024 ) |
|
|
White wordmark on black background ( week6 30/10/2024 ) |
|
|
Colour Palette ( week6 30/10/2024 ) |
|
|
key artwork (wordmark) using main colours ( week6 30/10/2024 ) |
|
|
Wordmark in actual colours on lightest shade of colour
palette ( week6 30/10/2024 ) |
|
|
Wordmark in lightest shade of colour palette on darkest shade
of colour palette ( week6 30/10/2024 )  |
- Task 2B collateral (3 items)
For inspiration view Pentagram site and study how identities are expanded.
|
|
Collateral .1 Record album ( week9 20/11/2024 ) |
|
|
Collateral .2 Skateboarding ( week9 20/11/2024 ) |
|
|
Collateral .3 Hoodie ( week9 20/11/2024 ) |
|
|
Instagram Feed Design Layout ( week9 20/11/2024 ) |
|
|
Screenshot of Instagram page ( week9 20/11/2024 ) |
Instagram link : https://www.instagram.com/laurel.yx?igsh=d3NkbGczNjVpY2h4&utm_source=qr
FEEDBACK
Week 5
Specific Feedback: The fifth sketch can be digitized. And needs to be refined and taken to the next step
General Feedback: Mr. Vinod gave us suggestions on the sketch of the key word logo and then instructed us on how to do the next
Week 6
Specific Feedback: Digital is good. You can move on
General Feedback: In this week, the digitization of key artwork was approved by Mr. Vinod, and the three collateral items could be selected and designed
Week 7
Specific Feedback: Several of the styles need to be further expanded; the design of eye shadow needs to be modified into more popular items to make it easy to distinguish.
General Feedback: In next week, we need to complete the design of task2 and release 9 final works to ig
Week 8
General Feedback: This week is the week of independent learning, there are no physical courses, we continue to complete the design of Tasks by ourselves
REFLECTIONS
Experiences
Task2 was my first encounter with Collateral's design, and when I first finished designing the font I was a little confused as to how to make an impact product. I went through some mistakes and modifications, tried a lot of software operations that I had never used before, and became more familiar with the composition than before. All in all, with Mr. Vinod's guidance, the mission was successfully completed, and I will continue to focus on the Collateral design case to strengthen my design skills
Observations
I observed that the Collateral design needed to have a concise or representative logo theme that embodied the key elements of a product. During this period of study, I also went online to look at the logos of some brands or companies, and they all did a good job of relating their products to the actual situation, simplifying the ICONS and keeping the most critical parts so that users can recognize and remember them at first glance. Not only that, the color choice is also important, eye-catching or coordinated collocation will enhance the effect of the design
Findings
In the process of making concept images, I found that element repetition is also a good way to typeset. Sometimes placing a single or small number of elements will make the picture look boring, if more than a few copies or tile design may achieve better results, very direct emphasis on the theme. However, it is also necessary to preserve the distance, otherwise some elements will accumulate too much and make the picture look messy
FUTHER READING
- Lucian Bernhard and Oswald Cooper:
Lucian Bernhard: A notable type designer who created several well-known typefaces. Bernhard began his career in Germany and later moved to the U.S., producing over thirteen typefaces, including Bernhard Gothic and Bernhard Tango.
Oswald Cooper: An American lettering artist and graphic designer famous for Cooper Black, a typeface known for its readability, especially for farsighted or nearsighted readers. Though Cooper created multiple type families, he remained humble, considering himself merely a lettering artist.
- Paul Renner and Bruce Cooper:
Paul Renner: Best known for designing the geometric sans serif Futura, Renner’s designs aimed to express modern aesthetics rather than revisiting older styles. Futura’s lowercase letters were notably experimental for their time.
Bruce Cooper: An American designer who avoided fame and focused on designing advertising typefaces. His typefaces were patterned after his hand-lettering style and contributed to the field of typography.
- William Addison Dwiggins:
A prominent figure in American typography, Dwiggins was known for his ability to balance beauty and utility in type design. His most famous works include typefaces for Linotype, such as Electra and Metro. Dwiggins’ career was sparked by a challenge to create a Gothic typeface, leading to a long association with the Mergenthaler Linotype Company.
- Frederic Goudy and Morris Fuller Benton:
Frederic Goudy: One of the most prolific American type designers, Goudy was self-taught and began his career at the age of 30. He was known for designing a wide range of typefaces, promoting them through specimen books and promotional materials.
Morris Fuller Benton: Played a key role in U.S. type design, leading the American Type Founders (ATF) program. Benton designed well-known fonts like Franklin Gothic and Century Schoolbook, contributing to a significant legacy in American typography.
- Emil Rudolf Weiss, Rudolf Koch, and Other European Designers:
Weiss: Known for his association with the Bauer foundry and for creating typefaces during the 1930s and 1940s.
Rudolf Koch: A German designer renowned for his calligraphic style and typefaces such as Kabel and Neuland.
- Early Nineteenth Century Developments:
William Caslon IV created the first sans serif font, while Bodoni’s Manuale became the benchmark for modern typography with numerous revivals of his designs.
Other notable milestones included the introduction of Clarendon, a heavy face designed for advertising purposes.
Comments
Post a Comment