Advanced Typography / Task 3: Type Exploration & Application
Advanced Typography
Task 3 / Type Exploration & Application
LECTURES
 |
| Fig 1.0: Thumbnail |
Link to:
LECTURE 5: Perception & Organisation
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. However our focus today is in typography.
Contrast
There are several methods in typography to create contrast the one on the left is devised by Rudi Ruegg. They are self-explanatory. Carl Dair on the other hand adds a two more principles into the mix; texture and direction “to make design work and meaning pop out — clearly and unambiguously, and with flair.” via the use of contrast in typography. Dair posits 7 kinds of contrast, and most of which has already been covered by Rudi Reugg albeit using different terms.
Fig 1.1: Contrast
- 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 1.2: Contrast / Size
 |
| Fig 1.3: Contrast / Weight |
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 1.4: Contrast / Form
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 1.5: Contrast / 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 1.6: Contrast / Texture
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 1.7: Contrast / Direction |
- Contrast / Colour
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 1.8: Contrast / Colour |
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.
 |
| Fig 1.9: Example of form #1 |
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. When a typeface is perceived as a form, it no longer reads as a letter because it has been manipulated by distortion, texture, enlargement, and has been extruded into a space.
 |
| Fig 1.10: Example of form #2 |
 |
| Fig 1.11: Example of form #3 |
 |
| Fig 1.12: Example of form #4 |
Organisation / Gestalt
Gestalt is a german word meaning the way a thing has been “placed” or “put together”. Gestalt Psychology is an attempt to understand the laws behind the ability to acquire and maintain meaningful perceptions.
Gestalt theory emphasizes that the whole of anything is greater than its parts—this is based on the idea that we experience things as unified whole: Instead of breaking down thoughts and behavior to their smallest elements, the gestalt psychologists believed that you must look at the whole of experience.
Therefore in design, the components/elements that make up the design is only as good as its overall visual form. While each component may be functional at an elemental level, the sum of its parts is not greater than the whole or the overall form.
Fig 1.13: Gestalt Principles of Grouping
A gestalt grouping law that states that elements that are similar to each other tend to be perceived as a unified group. Similarity can refer to any number of features, including color, orientation, size, or indeed motion.
 |
| Fig 1.14: Law of Similarity |
2. Law of Proximity
A gestalt grouping law that states elements that are close together tend to be perceived as a unified group. This straightforward law states that items close to each other tend to be grouped together, whereas items further apart are less likely to be grouped together.
 |
| Fig 1.15: Law of Proximity |
The mind’s tendency to see complete figures or forms even if a picture is incomplete, partially hidden by other objects, or if part of the information needed to make a complete picture in our minds is missing. The principle of closure is particularly crucial in mark and logotype design.
 |
| Fig 1.16: Law of Closure |
4. Law of Continuation
Humans tend to perceive each of two or more objects as different, singular, and uninterrupted object even when they intersect. The alignment of the objects or forms plays a major role for this principle to take effect.
Fig 1.17: Law of Continuation
The idea in the end, is to ensure awareness and inform your work process. Organisation of information in the form of laying out complex content in a hierarchical manner requires practice and the knowledge gained herein but also elsewhere. Knowledge obtained from reading, listening and viewing must be exercised or put to use for it to be retained and of standard.
INSTRUCTIONS
Task 3: Type Exploration & Application
In this final project, students are given task to explore and develop a typeface with the knowledge and experience gained in the Exercises, Project 1 and 2, with the accumulated knowledge from the lectures and own reading (library books and online sources), with the experience gained in the different software covered in the programme thus far, synthesize and apply the learning in the tasks to be mentioned, allow the knowledge gained guide and inform our decisions for the effective execution of your final project.
There are two options that can be chosen by students, one is to develop a font that is intended to solve a larger problem or meant to be part of a solution in the area of your interest be it graphic design, animation, new media or entertainment design or any other related area not necessarily reflecting our specialization. The other option is to explore the use of typeface in our area of interest, understand its existing relationship, identify areas that could be improved upon, explore possible solutions or combinations that may add value to the existing typeface.
To be effective, students will need to study their area of interest, look at how type is used in the area and identify potential weaknesses or possible areas of further exploration. Students can then attempt to provide a creative solution or add value to an existing use.
The end outcome could be a designed font and its application in the form or format that it is intending to provide a solution for, or an exploratory process that solves a problem or adds value to an existing use. The work can manifest into any kind of format related to the issue being solved or explored: animation, 3D, print, ambient, projection, movie title or game title, use of different material etc.
Below is the proposal of my idea for the final project.
Before deciding on what to apply later, I had started designing my typeface that I mentioned in the proposal. I began to extract some bars from barcode image to have the standard width of barcode. I'm doing this in Adobe Illustrator.
 |
| Fig 2.1.1: Designing Typeface #1, 10.06.22 |
 |
| Fig 2.1.2: Designing Typeface #2, 10.06.22 |
Here is my first attempt. Some letters, numbers, and punctuations are not finished yet and I also have not fixed some errors.
 |
| Fig 2.1.3: 1st attempt of designing typeface, 10.06.22 |
Since some of them are not standing on the same line, I tried to repair everything using the pen tool and also the guide lines to help me to align them together.
 |
| Fig 2.1.4: Designing Typeface #3, 12.06.22 |
 |
| Fig 2.1.5: Fixing some parts #1, 12.06.22 |
 |
| Fig 2.1.6: Fixing some parts #2; 12.06.22 |
 |
| Fig 2.1.7: Importing typeface to FontLab7, 17.06.22 |
For the kerning, I tried several times to have the best spacing, and finally I decided to use +5 for Left, and +30 for Right. I have no idea why some letters have +31 for the right kerning even though I've already changed them to +30 several times.
 |
Fig 2.1.8: Kerning letters #1, 17.06.22 |
 |
| Fig 2.1.9: Kerning letter #2, 17.06.22 |
Below is the final outcome of my typeface. I named the typeface 'Barcoda' because it looks similar to a barcode.
 |
| Fig 2.1.10: Barcoda Final Outcome, 19.06.22 |
 |
| Fig 2.2.1: Application 1st attempt, 20.06.22 |
 |
| Fig 2.2.2: Application 2nd attempt, 20.06.22 |
 |
| Fig 2.2.3: Poster application process #1, 25.06.22 |
 |
| Fig 2.2.4: Poster application process #2, 25.06.22 |
To have a more decent look, I went to Google to search for circuit board image. Then I put it on my poster as the background, but I lower the opacity to 10% so it doesn't look so disturbing.
I created several different designs but my most favorite is this two. I can't really choose on which one to use for the final submission. Actually it's not that good because I always struggle in designing poster.
 |
| Fig 2.2.5: Application attempt #1, 25.06.22 |
 |
| Fig 2.2.6: Application attempt #2, 25.06.22 |
At the end, I finally chose the 1st design since I think it looks more interesting, while the second attempt tends to be a bit boring. The size of my poster is the standard poster size that was picked from Illustrator. However, when I was about to move my poster to the mockup billboard, the size didn't fit. So, I decided to resize and rearrange some parts but it's only for the mockup version. For the original poster I will still use the old size for the submission.
 |
| Fig 2.2.7: Poster Application, 25.06.22 |
 |
| Fig 2.2.8: Collateral Application #1, 25.06.22 |
 |
| Fig 2.2.9: Collateral Application #2, 25.06.22 |
Final Submission
- Generated Typeface Download
Download Barcoda by clicking here
 |
| Fig 2.3.1: Barcoda Final Outcome, 19.06.22 |
- Application
 |
| Fig 2.3.2: Poster Application #1 |
 |
| Fig 2.3.3: Poster Application #2 |
 |
| Fig 2.3.4: Collateral Application #1 |
 |
| Fig 2.3.5: Collateral Application #2 |
- PDF Compilation of Task 3
Fig 2.3.6: Final Compilation in .pdf
FEEDBACK
WEEK 10
WEEK 11
WEEK 12
- It is very important to think carefully about the application of the typeface that you are creating
WEEK 13
- Finalize Task 3 and the e-portfolio by next Monday
REFLECTIONS
FURTHER READING
 |
| Fig 3.1: Typographic Design: Form and Communication |
Typography evolved from handwriting, which is created by making a series of marks by hand; therefore, the fundamental element constructing a letterform is the linear stroke. Each letter of our alphabet developed as a simple mark whose visual characteristics clearly separated it from all the others. The marking properties of brush, reed pen, and stone engraver’s chisel influenced the early form of the alphabet. The reed pen, used in ancient Rome and the medieval monastery, was held at an angle, called a cant, to the page. This produced a pattern of thick and thin strokes. Since the time of the ancient Greeks, capital letterforms have consisted of simple geometric forms based on the square, circle, and triangle. Lowercase letters evolved with reed-pen writing. Curved strokes could be written quickly and were used to reduce the number of strokes needed to write many characters.
The parts of letterforms
Over the centuries, a nomenclature has evolved that identifies
the various components of individual letterforms. By learning
this vocabulary, designers and typographers can develop a
greater understanding of and sensitivity to the visual harmony
and complexity of the alphabet.
In medieval times, horizontal guidelines were drawn to
contain and align each line of lettering. Today, letterforms and
their parts are drawn on imaginary guidelines to bring uniformity
to typography. All characters align optically on the baseline.
The body height of lowercase characters aligns optically at
the x-height, and the tops of capitals align optically along the
capline. To achieve precise alignments, the typeface designer
makes optical adjustments.
 |
| Fig 3.2: Letterform components #1 |
- Capline
Imaginary line that runs along the tops of
capital letters and the ascenders of lowercase letters.
- Meanline
Imaginary line that establishes the
height of the body of lowercase letters.
- x-height
Distance from the baseline to the
meanline.
- Baseline
Imaginary line upon which the base of
each capital rests.
- Beard line
Imaginary line that runs along the
bottoms of descenders.
 |
| Fig 3.3: Letterform components #2 |
Projecting horizontal stroke that is unattached on one or both ends, as in the letters T and E.
- Stem
Major vertical or diagonal stroke in the
letterform.
- Terminal
The end of any stroke that does not
terminate with a serif.
 |
| Fig 3.4: Letterform components #3 |
Short strokes that extend from and at an angle to the upper and lower ends of the major strokes of a letterform.
- Counter
The negative space that is fully or
partially enclosed by a letterform.
- Spur
A projection smaller than a serif that
reinforces the point at the end of a curved stroke,
as in the letter G.
 |
| Fig 3.5: Letterform components #4 |
The peak of the triangle of an uppercase A.
- Hairline
The thinnest stroke within a typeface that
has strokes of varying weights.
- Fillet
The contoured edge that connects the serif
and stem in bracketed serifs.
- Crossbar
The horizontal stroke connecting two sides
of the letterform or bisecting the
main stroke.
 |
| Fig 3.6: Letterform components #5 |
Curved stroke projecting from a stem.
- Stroke
Any of the linear elements within a
letterform.
- Tail
Diagonal stroke or loop at the end of a letter,
as in R or j.