ADVANCED TYPOGRAPHY TASK 1 / EXERCISES
31.8.2022 - 21.9.2022 (Week 1 - Week 4)
Fadil puthiya madathummal peedikakandy / 0354579 / Bachelor Of Design
(Hons) In Creative Media
Advanced Typography
Task 1 / Exercises: Typographic Systems & Type & Play
Mr Vinod gave us a playlist to watch the advanced typo videos on
youtube
By progressing to an advanced level of typographic design this semester,
we must build on the knowledge we gained in the previous semester.
WEEK-1 TYPOGRAPHIC SYSTEMS
On a few guidelines, a typographic design is created. Elam claims that
there are an unlimited amount of permutations, with 8 major
variations.
- Axial
- Radial
- Dilatational
- Random
- Grid
- Modular
- Transitional
- Bilateral
Axial system: In this arrangement, all of the components are arranged to the left or
right of a single axis; the axis need not be straight.
Radial system: All elements are extended from a point of
focus.
Random system: elements appear to have no specific pattern or relationship.
Grid system: A system of vertical and horizontal divisions.
Modular system: A series of non-objective elements that are constructed as a sa standardized unithe unit can be randomly placed even though not within a larger grid.
Transition system: An informal system of layered banding. The
differences in size and width are also important to create a
hierarchy.
Bilateral system: All text is arranged symmetrically on a
single axis.
WEEK 2 / TYPOGRAPHIC COMPOSITION
Lecture of Typography 2: Typographic Composition
Design Composition Principles: When we think of composition, we
think of dominant principles like emphasis, isolation, repetition,
symmetry and asymmetry, alignment, and perspective, to name a few.
These abstract concepts appear ambiguous when translated into
typographic layouts or compositions. They appear more relevant to
imagery than complex units of information comprised of various
elements.
The Rule of Thirds :
The Rule of Thirds is another way to look at the layout of a
design (be it a web page, a painting, or a photograph). The idea
is straightforward; you place a simple grid overlay (divided equally into thirds, both horizontally
and vertically) on the space to be used for the design.
Typographic Systems:
These 8 systems we have covered in depth in theory and
practice. Of the 8 systems, the most pragmatic and the most
used system is the (or Raster Systeme), which is derived
from the grided compositional structure of Letter Press
printing.
Young designers such as David Carson, Paula Scher, and
Jonathan Barnbrook rebelled against being bound by rules and
pioneered new designs which are seamless combinations of
readability and legibility in the postmodernist era.
Other models / Systems: | Environmental
Grid
This system is based on exploring an existing
structure or combining numerous structures. An extraction of crucial lines both curved and
straight aisformed.
The designer then organizes his information
around this super-structure, which includes
non-objective elements to create a unique and
exciting mixture of texture and visual
stimuli.
Form and Movement
This system is based on the exploration of anisting Grid
Sytems. The placement of a form (irrespective of what it is)
on a page, over many pages creates movement. Whether the page
is paper or screen, this system allows students to explore the
multitude of options the grid offers. It aims to get students
to see the turning of pages in a book as a slowed-down
animation in the form that constitutes the placement of image,
text, and colcolor
WEEK 3 / CONTEXT AND CREATIVITY
Lecture of Typography 2: Context and Creativity
We investigate it because the first mechanically created
letterforms were intended to directly replicate handwriting.
Handwriting would become the foundation or standard for
form, space, and tradition, which mechanical type would try
to emulate.
The materials and techniques used to create hand drawn
letterforms have an impact on their shape and line.
Sharpened bones, charcoal sticks, plant stems, brushes,
feathers, and steel pens all contributed to the letterform's
unique characteristics. The substance used to write the
forms was also taken into account: clay, papyrus, palm leaf,
animal skins (vellum and parchment), and paper.
|
|
Cuneiform : c. 3000 B.C.E. |
Cuneiform, the earliest system of actual writing, was used in a
severalanguages between 34C. B.C. and the 1st century C.E. Its
distinctive wedge form was the result of pressing the blunt end
of a reed stylus into wet clay tablets.
Hieroglyphics : 2613–2160 B.C.E.
Fg.3.3 : Hieroglyphics
The ancient Egyptian hieroglyphic writing system was a mixture
of rebus and phonetic characters. Hieroglyphs were the first
link to a future alphabetic system. Images could have been
used in three different ways: ideograms, determinatives or,
phonograms.
| Early Greek : 5th C. B.C.E.
Fg.3.4 Early greek
Early Greek was comprised of only capital letters, written
between two guidelines to organize them into horizontal rows.
These early Greek letters were drawn freehand, not constructed
with compasses and rule, and they had no serifs. The
Phoenicians system then was adopted by the Greeks who added
the necessary vowels.
Inscriptional letters are written with a flat brush, held at
an angle like a broad nib pen, then carved into the stone with
a mallet and chisel. And those Roman inscriptional letters
have served as models for calligraphers and type designers for
the past two thousand years.
| Roman Uncials
Fg.3.5: roman uncials
By the 4th century ,Roman letters were becoming more
rounded, the curved form allowed for less strokes and could
be written faster.
| English Half Uncials, 8th C.
Fg.3.6 Eng half uncials
In England the uncial evolved into a more slanted and
condensed form. While English and Irish uncials evolved,
writing on the European continent devolved considerably and
needed a reformer.
| Emperor Charlemagne 8C. CE
Fg.3.7 emperor charlemagne
After the fall of the Roman Empire, the end of a central
advanced culture resulted in general illiteracy and the
breakdown of handwriting into diverse regional styles. For
300 years the knowledge of writing was kept alive mainly in
the remote outposts of religious cloisters and retreats.
| Carolingian Minuscule
Fg.3.8 Carolingian Minuscule
A new script emerged, the Carolingian minuscule, during
Charlemagne's patronage book production increased. A court
school was established under the direction of Alcuin of
York. The language was standardized -pronunciation and
spelling as well as writing conventions- capitals and spaces
between words.
| Black Letter 12-15 C. CE
Fg.3.9 black letter
Gothic was the culminating artistic expression of the middle
ages occurring roughly from 1200 to 1500. Characterized by
tight spacing and condensed lettering, Gothic books were
designed to be more aesthetically pleasing to look at than
ornate and ornate works of art from the Renaissance era.
| The Italian Renaissance
Fg.3.10 Italian renaissance
The renaissance embrace of ancient Greek and Roman culture
spurred a creative wave through Italian art, architecture,
literature and letter form design. Humanist named the newly
rediscovered letterforms Antica. The analysis of form
that was being applied to art and architecture was
directed toward letterform.
| Movable Type 11C.—14 C.
Fg.3.11 moveable type
Printing (wood block) had already been practiced in
China, Korea and Japan (Dharani Sutra, AD 750). Earliest
known printed book (AD 868) is the Diamond Sutra: 16'
scroll with the world's first printed illustration. China
had attempted use movable type for printing but was
unsuccessful due to the number of characters and the
material used (clay).
WEEK 4 / DESIGNING TYPE
Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. He trained as a punchcutter at Enschedé and was Mergenthaler Linotype's house designer 1965–1981. Many of Carter's fonts were created to address specific technical challenges posed by early computers.
| Lecture of Typography 2: Designing Type
f.g 4.1 : UNIVERS by Adobe Illustrator, Airport
Signage using Frutiger
“Adrian Frutiger is a renowned twentieth century
Swiss graphic designer. His forte was typeface
designing and he is considered responsible for the
advancement of typography into digital typography.
His valued contribution to typography includes the
typefaces; Univers and Frutiger.”
Frutiger is a sans serif typeface designed by the
Swiss type designer Adrian Frutiger in 1968
specifically for the newly built Charles de Gaulle
International Airport in France. "The goal of this
new typeface was create a clean, distinctive and
legible typeface that is easy to see from both close
up and far away".
f.g 4.2 Frutiger
This book tells the story of the typeface Univers and
its creator, Adrian Frutiger. In particular, this book
uses description and diagrams
f.g 4.3 Frutiger
f.g 4.4 Adrian Frutiger
Adrian Frutiger designed a new Devanagari font for
modern typesetting and printing processes. His goal
was to simplify the sacred characters, without
compromising their ancient calligraphic expression.
The Indian Design Institute saw no "desecration of
something that was, for them, sacred".
f.g 4.5 Georgia and Verdana
Matthew Carter is the son of Harry Carter, Royal Designer for Industry, contemporary British type designer and ultimate craftsman. He trained as a punchcutter at Enschedé and was Mergenthaler Linotype's house designer 1965–1981. Many of Carter's fonts were created to address specific technical challenges posed by early computers.
f.g 4.6 Verdana
Off screen, Georgia and Verdana have also made appearances in
print. In 2010 there was a lot of “fontroversy” when it was
announced that IKEA would be changing from Futura to
Verdana
In 1976, AT&T commissioned a typeface whose sole purpose
would be for use in their telephone directories. The design
had to solve multiple technical and visual problems related
with the existing phonebook typeface, Bell Gothic. The
solution, named in honour of the company's 100th anniversary,
was Bell Centennial.
f.g 4.7 Comparison, font vs printed
Edward Johnston created "Johnston Sans" (1916) for the London
Underground in 1916. Was asked to create a typeface with "bold
simplicity" that was truly modern yet rooted in
tradition.
f.g 4.8 Johnston Sans
Edward Johnston created "Johnston Sans" (1916) for the London
Underground in 1916. Was asked to create a typeface with "bold
simplicity" that was truly modern yet rooted in tradition.
| General Process of Type Design:
1.Research
When creating type, we should understand type history,
type anatomy and type conventions. We should also know
terminologies, side-bearing, metrics, hinting…It is then
important to determine the type’s purpose or what it would
be used for, what different applications it will be used
in such as whether the typeface is for school busses or
airport signages, etc. We should also examine
existing fonts that are presently being used for
inspiration/ideas/reference/context/usage pattern/etc.
f.g 4.9 research
Kon
2. Sketching
Some designers sketch their typeface using the
traditional tool set (brushes/ pens, ink and paper) then
scan them for the purpose of digitization. They are more
confident with their hands and have better control using
it. Some designers sketch their typeface using
digital tool sets, such as Wacom directly into a font
design software (much quicker, persistent, and
consistent) but this can sometimes impede the natural
movement of hand strokes. Both methods have their
positives and negatives.
f.g 4.10 sketching
3. Digitization
There are professional software that are used in the
digitization of typefaces, amongst the leading software
are: FontLab and Glyphs App. There are
designers that also use Adobe Illustrator to design or
craft the letterforms and then introduce it into the
specialized font apps. This however is frowned upon by the
purist. Attention should not only be given to the
whole form at this stage but also to the counter form. The
readability of the typeface is heavily dependent on it.
f.g 4.11 digitalisation
4. Testing
Testing is an important component in the design thinking
process. The results of the testing is part of the process
of refining and correcting aspects of the typeface.
Prototyping is also part of the testing process and leads
to important feedback. Depending on the typeface
category (display type/text typ) the readability and
legibility of the the typeface becomes an important
consideration. However it is not as crucial if the
typeface is a display type, where expression of the form
takes a little more precedence.
5. Deploy
Even after deploying a completed typeface there are
always teething problems that did not come to the fore
during the prototyping and testing phases. Thus, the
task of revision doesn’t end upon deployment.The rigour
of the testing is important in so that the teething
issue remain minor.
Typeface Construction
f.g 4.12 Typeface Construction
Roman Capital: The grid consists of a square and
inside it a circle that just touches the lines of the
square in four places. Within the square, there is
also a rectangle. This rectangle is three-quarters the
size of the square and is positioned in the center of
the square.
Thus, using grids (with circular forms) can facilitate
the construction of letterforms and is a possible
method to build/create/design
your letterform.
Construction and considerations
Classification according to form and construction.
Depending on their form, the 26 characters of the
alphabet can be arranged into groups.
Visual correction is the extrusion of curved and
protruding forms past the baseline and cap line. It is
needed for the distance between letters. The letters
must be altered to a uniform visual white space. This
is called "fitting" the type.
f.g 4.13 Construction and considerations
Most typefaces come about due to a need or demand. The
need/motivation can be intrinsic and extrinsic. For a
design to be successful the designer needs to be invested
in the idea. It is also possible that the designer
identifies a gap/problem and endeavors to solve it through
the design of the typeface.
WEEK 5 / PERCEPTION AND ORGANISATION
| Lecture of Typography 5: Perception and Organisation
Perception in Typography : Its deals with the visual
navigation and interpretation of the reader via contrast,
form, and organization of the content.
| Contrast
7 kinds of contrast (most of which has already been
covered by Rudi Reugg albeit using different terms): 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.
f.g 5.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.
f.g 5.2 Contrast / 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.
f.g 5.3: Contrast / 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.1-34: Contrast / 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.
f.g 5.4 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.
f.g 5.5 Contrast / 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.
f.g 5.6 Contrast / 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.
f.g 5.7 Contrast / Color
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.
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.
f.g 5.8: Form
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.
f.g 5.9 Type Form 1-3
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.
| Organisation / Gestalt
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.
f.g 5.10: Gestalt Theory
Organisation / Gestalt: Perceptual Organisation / Groupings
- Law of Similarity
- Law of Proximity
- Law of Closure
- Law of Continuation
- Law of Symetry
- Law of Simplicity (Praganz)
The Law of Similarity is the 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.
Similarity
The Law of Proximity is the 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.
Proximity
The Law of Closure refers to 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
Closure
Law of (Good) Continuation holds that 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.
Week 1 - Typographic Systems
Utilize the eight typographic systems learned in the lecture to create
each design.
First attempt
I tried to understand how this is done and got a point where I was able
to get the forms correctly
|
| First attempt (07/09/2022) |
Due to my severe illness, I was unable to receive feedback from Mr.
Vinod. Nevertheless, I listened to the lecture and learned from the
mistakes of others to determine my final design
2nd attempt
|
| Axial system Final (07/09/2022) |
|
| Dialational system (07/09/2022) |
|
|
Radial system (07/09/2022) |
|
|
Grid system (07/09/2022) |
|
| Modular system (07/09/2022) |
|
| Random system (07/09/2022) |
|
| Bilateral system (07/09/2022) |
|
| Transitional system (07/09/2022) |
After feedback, I changed the colours a little bit
3rd attempt and final results
|
|
|
|
| Bilateral system final (07/09/2022) |
|
| Dialational system final (07/09/2022) |
|
| Grid system final (07/09/2022) |
|
| Modular system final (07/09/2022) |
|
| Radial system final (07/09/2022) |
|
| Random system final (07/09/2022) |
|
| Transitional system final (07/09/2022) |
8 typographic systems final pdf
Task 1 / Exercise 2A - Type And Play (part 1)
We must choose an image from man-made items, constructions, or nature for
this activity. The deconstructed image must be examined, broken down, and
potential letterforms must be found. After examination, the forms will be
converted to digital format.
I looked around to find some pictures from which I might create a
typographic typeface.
After looking around a lot, I decided to choose the picture of a man
showing the veins on his body
I then went ahead and found some letters on his body
Then I started to refine my typeface
I felt something off about this so I used a similar font to refine
mine
|
| Final version (21/09/2022) |
Week 3 Type & Play Part 2: Type & Image
By combining what we have learned about typography with text formatting,
we must pick an image and apply the given words to it and make it look
like a good wallpaper with well enough text and image blending
Progress
First I chose this image to write the word "RENEWAL"
The I wrote the word
Next, i had to blend it in So I used brush tool, Texture, and blending
modes to get this result
I drew an image using AI with a tropical landscape with red canyons and a
lake below it.
After feedback I refined it a little bit more to add texture with the brush
Final version
|
| Type and play 2A pt 2 final (11-10-2022) |
Feedback
Exercise - 1/ week 2
General feedback: All the compositions are okay, The modular and
axial system could be better but still okay. The grid system is nice,
good usage of colours and arrangement
Axial system - not bad, could be better
Radial - Pretty okay, can explore more arrangements
Dialational - Good arrangement, Could try different ideas
Random - It's okay, Not so readable but doable
Grid - Nice colours and arrangements but could be nicer
Modular - could improve
Transitional - Ok
Bilateral - Not bad, could improve
New feedback- the colours here are not appropriately used at the
moment. Only one colour is allowed to use.
Exercise - 2A/ week 3
General feedback
Some were confused about what area of the image the figure was taken
from and why. Great work can only be accomplished by carefully
following the procedures of tracing the shapes and choosing the
shapes.
Specific feedback
Good choice of image to use as a typeface. To make it look more
consistent, you must further refine it. If you change the size and
evenly distribute the thickness across all of the letters, the type
will look much better.
Exercise 2A/part 2
General feedback
Both compositions aren't bad, but they could be better; the second one is
more interesting; try to work on it more.
specific feedback
Increase the amount of detail and try to make the composition blend in
better with the image.
Reflection
Experiences
I spent a lot of time working on the first task, which is the
typography system. Perhaps it's because I'm not accustomed to it. I
looked up some Illustrator effects to understand how it's curved and
done. So I learned some new things with all the tasks above
Observation
Advanced typography was more difficult than last semester's "typography," but it felt easier for me because of the skills I gained to do this type of work. Last semester helped me work faster now, and I can somehow keep up with the work they assign me.
Findings
To be honest, I enjoyed Exercise 2A because I liked how I created a typeface out of something completely random. Task 2a part 2 was also very interesting; I enjoyed doing it despite how difficult it was.
Comments
Post a Comment