Week 1 - Week 4 [24/4/2024 - 15/5/2024]
Kong Ga Wai 0359692
Bachelor in Design Creative Media
LECTURES
TYPOGRAPHIC SYSTEM
Axial System:
All elements are organised to the left or right of a single axis. Information
is grouped together on a different angle or side of a single axial line.
Radial System:
All elements are extended from a point of focus. The sentences are spread out
according to the point of focus and they will be pointing at the point of
focus.
Dilatational System:
All elements expand from a central point in a circular fashion. Sentences can
be arranged in a hierarchical manner from the less important sentence in the
smaller inner ring to the more important sentences in the bigger outer
ring.
Random System:
Elements appear to have no specific pattern or relationship. Despite being a
random pattern it is still possible to make it presentable.
Grid System:
A system of vertical and horizontal divisions. It is the most common system
used because it is divided into clean and simple sections and easy to be
read.
Transitional System:
An informal system of layered banding. It has a wave-like structure where the
sentences flow with it.
Modular system:
A series of non-objective elements that are constructed as a standardised
unit.
Bilateral System:
All text is arranged symmetrically on a single axis.
TYPOGRAPHIC COMPOSITION
Principle of Design Composition
The most common compositions we think about are the dominant principles
underpinning design composition:
Emphasis, Isolation, Repetition, Symmetry and Asymmetry, Alignment,
Perspective, etc.
However, when they are to be translated into typographic layouts or
composition it looks ambiguous. They are more relevant to imagery than
complex units of information that consist of different elements.
The Rule of Third
This rule is a photographic guide to composition, it suggests that a
frame/space can be divided into 3 columns and 3 rows. The intersecting lines
are used as a guide to place the points of interest within the given
space.
Environmental Grid
It is based on exploring an existing structure or combining numerous
structures. An extraction of crucial lines both curved and straight are
formed. Then the information will be organised around this super-structure
which includes non-objective elements to create an interesting mixture of
texture and visual stimuli.
Form and Movement
It is based on the exploration of an existing grid system. It was developed to
explore the multitude of options the grid can offer. The placement of a form
on a page over many others to create movement.
DESIGNING TYPE
There are two reasons for designing a typeface:
1) Type design carries a social responsibility so one must continue to improve
its legibility.
2) Type design is a form of artistic expression
These two reasons are suggested by Xavier Depre.
Adrian Furtiger
He is a renowned twentieth-century Swiss graphic designer. He is the one who
created the typefaces Univers and Frutiger. Typeface designing
is his specialty and he is considered to be responsible for the advancement of
typography to digital typography.
Frutiger is a sans serif typeface designed by him in 1968 for the newly
built airport (Charles de Gaulle International) in France. The goal for this
typeface was to be clean, distinctive, and legible so that it was easy to see
from both close and far away.
|
| Typeface Furtiger |
|
| Typeface Frutiger for Arabic |
Carter
Matthew Carter is the son of Harry Carter, a royal designer for industries, a
contemporary British type designer and an ultimate craftsman. Carter was
trained as a punchcutter and Enschede by Paul Radisch who is responsible for
Crosfield's typographic program in the early 1960s.
Verdana
Most of Carter's fonts were created to address specific technical challenges
such as the early computers. The typeface was popular on the internet and
electronic devices because it can still be readable even in small sizes. The
lowercase letters 'i' and 'j' are commonly confused and it is derived from
pixels rather than a pen, brush, or chisel.
|
| Typeface Verdana |
Edward Johnston
He is the creator of the hugely influential "London Underground" typeface,
which would later be known as "Johnston Sans" (1916). He was asked to create a
typeface with "bold simplicity" that was modern yet traditional. In 1916, his
font was completed with a combination of classical Roman proportions with
humanist warmth.
Johnston Sans
London's Underground Railway ordered a new typeface for its poster and signage
from him. The idea for the typeface was to unite the London Underground Group,
with the different companies using the same rails and tunnels. Roman capital
letters were applied to the typeface, it is rooted in traditional calligraphy
but it is also elegant and simple and fits in the modern age.
|
| Typeface Johnston Sans |
General Process of Type Design:
1) Research
- Research about the type history, type anatomy, and type conventions.
- It is important to determine the type's purpose.
- Examine existing fonts for inspiration, ideas, reference, context, usage,
pattern, etc.
2) Sketching
- Stage to sketch out the ideas created.
- Traditional sketches have more control of the brush/pen and paper.
- Digital sketches are quicker, persistent, and consistent.
3) Digitization
- Import the sketch to digitalise it and fix some minor errors.
4) Testing
- Test the typeface to refine and correct aspects of it.
- Get feedbacks.
- Make sure it is readable.
5) Deploy
INSTRUCTIONS
EXERCISE 1 - TYPOGRAPHIC SYSTEM
We have to explore the 8 Typographic Systems:
Axial, Radial, Dilatational, Random, Grid, Modular, Transitional and
Bilateral. For this, we were allowed to use one colour of our choice along with
black and white.
Process
The line I chose was "All Ripped Up: Punk Influence on Design" and the
colour I chose to pair with black and white is blue.
|
| All Ripped Up: Punk Influence on Design |
|
| Aligning words |
|
| Axial System Process |
I use circles to indicate where the lines are angling from.
|
| Radial System Process |
It is here where I learn how to use a Text Warp. First I made a circle. Then I use the Text Warp to warp the text around the circle. It was simpler than I thought it would be.
|
| Dilatational System Process |
Random System is, random.
|
| Random System |
Grid, Modular, and Bilateral Systems are straight forward.
|
| Grid System Process |
I will say I like what I did to "PUNK" here.
|
| Modular System Process |
For the Transitional System, I drew some wavy lines and used Text Warp. At the end of the top line (Suzy Sulaiman, 11pm - 12pm) I made it facing down to lead the readers to the next line with blue text (June 25, 2021).
|
| Transitional System Process |
|
| Bilateral System Process |
Final
|
| Axial System |
|
| Radial System |
|
| Dilatational System |
|
| Random System |
|
| Grid System |
|
| Modular System |
|
| Transitional System |
|
| Bilateral System |
TASK 1 - TYPE & PLAY
We had to select an image of either a man-made object,
structure, or something natural and then analyse, dissect, and
identify potential letterforms within the dissected image. The image should
not contain many different elements. After that, we had to combine the
letterforms with an image that was extracted for the letters.
Process
The picture I chose is a Leopard because of its pattern in the fur. I
specifically chose this because I can imminently see some potential
letterforms in it.
|
| Highlighted Letterforms |
The font I choose to base the letterform to is SerifaStd.
|
| SerifaStd-Bold |
I had come up with two different ways to form it, one with just lines (the
last 2) and another with a silhouette inside (the first 2). I ended up
settling with the first 2 and modifying them with the font I chose.
.png)
|
| Letterforms Ideas |
After finishing making the letterforms, I start to design the poster.
I arrange the letters to form "VOCALS". Went through different pictures for
the background before settling with a close-up of a leopard's fur (Plus it
was to be related to our letterform as well).
.png)
|
| Choosing Background |
After that, I start to add the details for the poster.
I applied a roughen effect to the letterform to simulate a fur texture, but
not too much. After all that I made sure they were centered properly.
.png)
|
| Applied Roughen Effect |
.png)
|
| Centered Evenly |
Final Poster
FEEDBACK
Week 1: ---
Week 2: (Labour Day)
Week 3
Feedback: Keep the spacing and size consistent throughout the letters.
Week 4
Feedback: The movie title design and poster have to be related. Make sure the movie title is readable.
REFLECTION
I understand more about the different design styles that can be made by using the typographic system and how a letterform can be extracted from an image.
Designing posters using the typographic system has some limits but it wasn't my biggest problem. I struggled with coming up with a unique design for each poster that didn't look similar to the ones that were presented by classmates. The system that I thought would be the easiest was the Random System, but it ended up being the hardest for me. It has to be random while still making sense, but it is a good way to get out of a comfort zone. We are used to making sure things are aligned correctly and neatly, then this system threw those out and didn't want the neat and tidy look.
Extracting letterforms from an image was easy for me since I always had a habit of forming shapes with things such as rain droplets, dried-up stains, clouds, etc. The only thing I wish I could have done with the letterform is mimicking the furry texture from the image.
FURTHER READING
 |
| Typography Referenced by Various Writers |
(Page4 – Page 11)
Typography has
always evolved since ancient times and awareness of the importance of
typography is on the rise. This book touches on many aspects of typography,
with a focus on breadth rather than depth. It introduced the
history of type and accounts for the evolution of type through a timeline
starting from but not limited to:
- Fifth century BCE
- Second century BCE
- First century BCE
- Fourth and Fifth centuries CE
- Eight to Eleventh Centuries
- Fourteenth and Fifteenth
centuries
- Sixteenth century
- Seventeenth and Eighteenth
centuries
The evolution of type:
- Roman lapidary letters introduced modern Roman letterform shapes and proportions.
Roman monumental capitals are the foundation for Western design.
- Carolingian minuscule became the basis for the lowercase alphabet.
- Johannes Gutenberg created the art of typography.
- Nicolas Jenson was one of the first printers to cut and use fonts based on the Roman letterform.
- William Caxton introduced England to the craft of printing with movable type. He eventually had 8 fonts produced mostly in Blackletter style.
- Aldus Manutius commissioned Francesco Griffo to create several typefaces, one of which was revived as Bembo. They were also credited with inventing the italic type.
- Garamond was important in the adoption of Roman typeface design in France to replace Gothic or Blackletter fonts. He was also one of the first to create obliqued capitals.
- Robert Granjon introduced the italic type form as a complement to Roman faces popular at the time.
- Jean Jannon created the typeface on which most modern Garamond revivals are based.
- William Caslon I founded the Caslon Type Foundry. He focused on creating a font that looked perfect when set in a block of text copy, despite the vagaries and individuality of each letterform. His font eventually became the standard for British type.
- John Baskerville improved in virtually all aspects of the printing process. He made his own superior printing press, developed ink that was so dark and rich it was difficult to match even today, and invented the hot-pressing process to create smooth paper stock, even built a small mill on his property to produce quality paper.
- Pierre Simon Fournier's work is the foundation for much of Giambattista Bodoni's first typeface designs: Monotype Fournier, Barbou, and Dwigggins Electra.
- Giambattista Bodoni created typography and type
designs that are still regarded as the most refined and elegant ever
produced.