Typography | Task 1 : Exercises
25/09/2023 - 29/10/2023 (Week 1 - Week 5)
Yong Xiao Tong / 0368290
Typography / Bachelor of Design (Honours) in Creative Media / Taylor's
University
Task 1: Exercise
LIST
1. Lectures
2. Instructions
3. Feedback
4.
Reflections
LECTURES
Lecture 1 : Introduction / Briefing
Font: a font refers to the individual font or weight within the typeface. Example: Georgia Regular, Georgia Italic and Georgia Bold or Frutiger Light, Roman, etc.
Typeface: a typeface refers to the entire family of fonts/weights that share similar characteristics/styles. Example: Georgia, Arial, Times New Roman, Didot and Futura.
Physical class
In our first class, we were introduced to the module and received guidance on creating our Eportfolio using Blogger. The instructions provided were straightforward and helped us understand how to create and share content on our blogs. Furthermore, we've been assigned the task of creating a series of typographic expressions. Lastly, it's essential to ensure that Adobe Illustrator is installed before next lecture.
Lecture 2 : Development / Timeline
Early letterform development : Phoenician to Roman
Initially writing meant scratching into wet clay with sharpened stick or
carving into stone with a chisel. The forms of uppercase letterforms
(for nearly 2000 years the only letterforms) can be seen to have evolved
out of these tools and materials. At their core, uppercase forms are
simple combination of straight lines and pieces of circles, as the
materials and tools of early writing required.
|
|
Fig 1.1 4th century B.C.E. – Phoenicians votive stele Carthage,
Tunisia. The stele bears a four-line inscription to Tanit
and Baal Hammon |
|
|
|
The Greeks changed the direction of writing. Phoenicians, like other Semitic
peoples, wrote from right to left. The Greek developed a style of writing
called ‘boustrophedon’ (how the ox ploughs), which meant that the lines of
text read alternately from right to left and left to right. As they change
the direction of reading they also changed the orientation of the
letterforms:
|
| Fig 1.3 Greek like the Phoenicians, did not use letter space or punctuations. Latter or the Greeks would move to a strictly left-to-right writing. |
|
| Fig 1.4 Greek fragment, stone engraving. (Date unknown) |
Etruscan (and then Roman) carvers working in marble painted letterforms
before inscribing them. Certain qualities of their strokes—a change in
weight from vertical to horizontal, a broadening of the stroke at start
and finish—carried over into the carved letterforms.
|
| Fig 1.5 Late 1st century B.C.E., Augustan inscription in the Roman Forum, Rome. |
|
| Fig 1.6 Phoenician to Roman |
Hand script from 3rd - 10th century C.E.
Square capitals were the written version that can be found in Roman
monuments. These letterforms have serifs added to the finish of the main
strokes. The variety of stroke width was achieved by the reed pen held at an
angle of approximately 60° off the perpendicular.
Fig 1.7 4th or 5th century: Square Capitals
A compressed version of square capitals, rustic capitals allowed for twice
as many words on a sheet of parchment and took far less time to write. The
pen or brush was held at an angle of approximately 30° off the
perpendicular. Although rustic capitals were faster and easier to, they were
slightly harder to read due to their compressed nature.
Fig 1.8 Late 3rd - mid 4th century: Rustic capitals
Both square and rustic capitals were typically reserved for documents
of some intended performance. Everyday transactions, however were
typically written in cursive hand in which forms were simplified for
speed. We can see here the beginning of what we refer to as lowercase
letterforms.
Fig 1.9 4th century: Roman cursive
Uncials incorporated some aspects of the Roman cursive hand, especially in
the shape of the A, D, E, H, M, U and Q. 'Uncia' is Latin for a twelfth of
anything; as a result, some scholars think that uncials refer to letters
that are one inch (one twelfth of foot) high. It might, however, be more
accurate to think of uncials simply as small letters.
The broad forms of uncials are more readable at small sizes than rustic
capitals.
Fig 1.10 4th - 5th century: Uncials
A further formalization of the cursive hand, half-uncials mark the formal
beginning of lowercase letterforms, replete with ascenders and descenders,
2000 years after the origin of the Phoenician alphabet.
Fig 1.11 C. 500: Half-uncials
Charlemagne, the first unifier of Europe since the Romans, issued an
edict in 789 to standardize all ecclesiastical texts. He entrusted this
task to Alcuin of York, Abbot of St Martin of Tours. The monks rewrote
the texts using both majuscules (uppercase), miniscule, capitalization
and punctuation which set the standard for calligraphy for a century.
Fig 1.12 925: Caloline miniscule
Blackletter to Gutenberg's type
With the dissolution of Charlemagne's empire came regional variations
upon Alcuin's script. In northern Europe, a condense Strongly vertical
letterform know as Blackletter or textura gained popularity. In the
south, a rounder more open hand gained popularity. called rotunda. The
humanistic script in Italy is based on Alcuin's miniscule.
Gutenberg's skills included engineering, metalsmithing, and chemistry.
He marshaled them all to build pages that accurately mimicked the work
of the scribe's hand - Blackletter of northern Europe. His type mold
required a different brass matrix, or negative impression, for each
letterform.
Fig 1.14 c. 1455: 42 line bible, Johann Gutenberg. Mainz.
Text type classification (Dates of origin approximated to the
nearest quarter century.)
Typeforms have developed in response to prevailing technology.
commercial needs, and aesthetic trends. Certain models have endured
well past the cultures that spawned them.
The following typeforms classification here, based on one devised by
Alexander Lawson only covers the main form of text type.
The earliest printing type, its forms were based upon the
hand-copying styles that were then used for books in northern
Europe.
Examples: Cloister Black, Goudy Text
|
| Fig 1.15 1450 Blackletter |
Based upon the lowercase forms used by Italian humanist scholars for
book copying (themselves based upon the ninth-century Caroline
minisule) and the uppercase letterforms found inscribed on Roman
ruins, the forms evolved away from their calligraphic origins over
200 years, as they migrated across europe, from Italy to England.
Examples: Bembo, Caslon, Dante, Garamond, Janson, Jenson, Palatino
|
| Fig 1.16 1475 Oldstyle |
Echoing contemporary Italian handwriting, the first italics were
condensed and close-set, allowing more words per page. Although
originally considered their own class of type, italics were soon cast
to complement roman forms. Since the sixteenth century, virtually all
text typefaces have been designed with accompanying italic forms.
|
| Fig 1.17 1500 Italic |
Originally and attempt to replicate engraved calligraphic forms, this
class of type is not entirely appropriate in lengthy text settings. In
shorter applications, however, it has always enjoyed wide acceptance.
Forms now range from the formal and traditional to the casual and
contemporary.
Examples: Kuenstler Script, Mistral, Snell Roundhand
|
| Fig 1.18 1550 Script |
A refinement of oldstyle forms, this style was achieved in part
because of advances in casting and printing. Thick to thin
relationships were exaggerated, and brackets were lightened.
Examples: Baskerville, Bulmer, Century, Time Roman
|
| Fig 1.19 1750 Transitional |
This style represents a further rationalization of oldstyle
letterforms. Serifs were unbracketed, and the contrast between thick
and thin strokes extreme. English versions (like Bell) are also known
as Scotch Romans and more closely resemble transitional forms
Examples: Bell, Bodoni, Caledonia, Didot, Walbaum
|
| Fig 1.20 1775 Modern |
Originally heavily bracketed serif, with little variation between
thick and thin strokes, these faces responded to the newly developed
needs of advertising for heavy type in commercial printing. As hey
evolved, the brackets were dropped.
Examples: Clarendon, Memphis, Rockwell, Serifa
|
| Fig 1.21 1825 Square Serif / Slab Serif |
As their name implies, these typefaces eliminated serifs alltogether.
Although the forms were first introduced by William Caslon IV in 1816,
its use did not become wide-spread until the beginning of the the
twentieth century. Variation tended toward either humanist forms (Gill
Sans) or rigidly geometric (Futura). Occasionally, strokes were flared
to suggest the calligraphic origins of the form (Optima). Sans serif
is also referred to as grotesque (from the German word grotesk) and
Gothic.
Examples: Akzidenz Grotesk, Grotesk, Gill Sans, Franklin Gothic,
Frutiger, Futura, Helvetica, Meta, News Gothic, Optima, Syntax, Trade
Gothic, Univers
|
| Fig 1.22 1900 Sans Serif |
A recent development, this style enlarges the notion of a family of
typefaces to include both serif and sans serif alphabets (and often
stages between the two).
Examples: Rotis, Scala, Stone
|
| Fig 1.23 1990 Serif / Sans Serif |
Physical class
In today's lecture, we were tasked with sharing our typographic expression sketches on the Facebook typography group. Mr. Vinod reviewed and provided feedback on several sketches, highlighting theirs errors and offering valuable advice and suggestions. Following that, we were instructed to digitise our sketches using Adobe Illustrator.
Lecture 3 : Basic
Describing letterforms
As with any craft that has evolved over 500 years, typography employs a
number of technical terms. These mostly describe specific parts of the
letterforms. It is a good idea to familiarize yourself with the
lexicon.
Knowing a letterform’s component parts make it much easier to identify
specific typefaces.
Baseline The imaginary line the visual base of the letterforms.
Median The imaginary line defining the x-height of letterforms.
X-height The height in any typeface of the lowercase ‘x’.
|
| Fig 2.1 Baseline, Median, X-height |
Stroke Any line that defines the basic letterform
|
| Fig 2.2 Stroke |
Apex / Vertex The point created by joining two diagonal stems
(apex above and vertex below)
|
| Fig 2.3 Apex / Vertex |
Arm Short strokes off the stem of the letterform, either
horizontal (E, F, L) or inclined upward (K, Y).
|
| Fig 2.4 Arm |
Ascender The portion of the stem of a lowercase letterform that
projects above the median.
|
| Fig 2.5 Ascender |
Barb The half-serif finish on some curved stroke.
|
| Fig 2.6 Barb |
Beak The half-serif finish on some horizontal arms.
|
| Fig 2.7 Beak |
Bowl The rounded form that describes a counter. The bowl may be
either open or closed.
|
| Fig 2.8 Bowl |
Bracket The transition between the serif and the stem.
|
| Fig 2.9 Bracket |
Cross Bar The horizontal stroke in a letterform that joins two
stems together
|
| Fig 2.10 Cross Bar |
Cross Stroke The horizontal stroke in a letterform that joins two
stems together
|
| Fig 2.11 Cross Stroke |
Crotch The interior space where two strokes meet.
|
| Fig 2.12 Crotch |
Descender The portion of the stem of a lowercase letterform that
projects below the baseline.
|
| Fig 2.13 Descender |
Ear The stroke extending out from the main stem or body of the
letterform.
|
| Fig 2.14 Ear |
Em/en Originally referring to the width of an uppercase M, and em
is now the distance equal to the size of the typeface (an em in 48
points, for example). An en is half the size of an em. Most often used
to describe em/en spaces and em/en dashes.
|
| Fig 2.15 Em / en |
Finial The rounded non-serif terminal to a stroke.
|
| Fig 2.16 Finial |
Leg Short stroke off the stem of the letterform, either at
the bottom of the stroke (L) or inclined downward (K, R).
|
| Fig 2.17 Leg |
Ligature The character formed by the combination of two or more
letterforms.
|
| Fig 2.18 Ligature |
Link The stroke that connects the bowl and the loop of a
lowercase G.
|
| Fig 2.19 Link |
|
| Fig 2.20 Loop |
|
| Fig 2.21 Serif |
|
| Fig 2.22 Shoulder |
|
| Fig 2.23 Spine |
|
| Fig 2.24 Spur |
Stem The significant vertical or oblique stroke.
|
| Fig 2.25 Stem |
Stress The orientation of the letterform, indicated by the thin stroke in round forms.
|
|
Fig 2.26 Stress |
Swash The flourish that extends the stroke of the letterform.
|
|
Fig 2.27 Swash |
Tail The curved diagonal stroke at the finish of certain
letterforms.
|
| Fig 2.28 Tail |
Terminal The self-contained finish of a stroke without a serif.
This is something of a catch-all term. Terminals may be flat (‘T’ above),
flared, acute, (‘t’ above), grave, concave, convex, or rounded as a ball
or a teardrop (see finial).
|
| Fig 2.29 Terminal |
The Font
The full font of a typeface contains much more than 26 letters, to
numerals, and a few punctuation marks.
To work successfully with type, you should make sure that you are
working with a full font and you should know how to use it.
Uppercase Capital letters, including certain accented vowels, the
c cedilla and n tilde, and the a/e and o/e ligatures.
|
| Fig 2.30 Uppercase letters |
Lowercase Lowercase letters include the same characters as
uppercase.
|
| Fig 2.31 Lowercase letters |
Small Capitals Uppercase letterforms draw to the x-height of
the typeface. Small Caps are primarily found in serif fonts as part of
what is often called expert set.
Most type software includes a style command that generates a small cap
based on uppercase forms. Do not confuse real small caps with those
artificially generated.
|
| Fig 2.32 Small Capitals (i) |
|
| Fig 2.33 Small Capitals (ii) |
Uppercase Numerals Also called lining figures, these numerals
are the same height as uppercase letters and are all set to the same
kerning width. They are most successfully used with tabular material
or in any situation that calls for uppercase letters.
|
| Fig 2.34 Uppercase Numerals |
Lowercase Numerals Also known as old style figures or text
figures, these numerals are set to x-height with ascenders and
descenders. They are best used when ever you would use upper and
lowercase letterforms. Lowercase numerals are far less common in sans
serif type-faces than in serif.
|
| Fig 2.35 Lowercase Numerals |
Italic Most fonts today are produced with a matching italic.
Small caps, however, are almost always only roman. The forms in a
italic refer back to fifteenth century Italian cursive handwriting.
Oblique are typically based on the roman form of the typeface.
|
| Fig 2.36 Italic |
|
| Fig 2.37 Italic vs Roman |
Punctuation, miscellaneous characters Although all fonts
contain standard punctuation marks, miscellaneous characters can
change from typeface to typeface. It’s important to be acquainted
with all the characters available in a typeface before you choose
the appropriate type for a particular job.
|
|
Fig 2.38 Punctuation, miscellaneous characters |
Ornaments Used as flourishes in invitations or certificates.
They usually are provided as a font in a larger typeface family.
Only a few traditional or classical typefaces contain ornamental
fonts as part of the entire typeface family (Adobe Caslon Pro).
|
| Fig 2.39 Ornaments |
Describing typefaces
Once you can recognise the parts of a letterform, you can apply what
you know to identify different type-faces. Keep in mind that some,
all, or combinations of these styles may be found within one type
family.
Roman The letterform is so called because the uppercase forms
are derived from inscriptions of Roman monuments. A slightly lighter
stroke in roman is known as ‘Book’.
|
| Fig 2.40 Roman |
Italic Named for fifteenth century Italian handwriting on
which the forms are based. Oblique conversely are based on roman
form of typeface.
|
| Fig 2.41 Italic |
Boldface Characterised by a thicker stroke than a roman
form. Depending upon the relative stroke widths within the
typeface, it can also be called ‘semibold’, ‘medium’, ‘black’,
‘extra bold’, or super. In some typefaces (notably Bodoni), the
boldest rendition of the typeface is referred to as
‘Poster’.
|
| Fig 2.42 Boldface |
Light A lighter stroke than the roman form. Even lighter
strokes are called ‘thin’.
|
| Fig 2.43 Light |
Condense A version of the roman form, and extremely condense
styles are often called ‘compressed’.
|
| Fig 2.44 Condense |
Extended An extended variation of a roman font.
|
| Fig 2.45 Extended |
|
|
Fig 2.46 Roman, Italic, Boldface, Condensed, and Extended |
Comparing typefaces
What is worth noting isn’t the similarities but rather the
differences – the accumulation of choices that renders each
unique.
Beyond the gross differences in x-height, the forms display a wealth
of variety, in line weight, relative stroke widths and in feeling.
For any typographer these feelings connote specific use and
expression.
The Rs display a range of attitudes, some whimsical, some stately,
some mechanical, others calligraphic some harmonious and some
awkward.
|
| Fig 2.47 Comparing typefaces |
Physical class
Today, we were sharing our digital font on the Facebook group. Mr. Vinod reviewed and provided feedback on several works. Following that, we were instructed to animate our font.
Lecture 4 : Text (Part 1)
Tracking: Kerning and Letterspacing
The term ‘kerning’ refers to the automatic adjustment of space between
letters. It is often mistakenly referred to as ‘letterspacing. In fact,
letterspacing means to add space between the letters. The addition and
removal of space in a word or sentence is referred to as ‘tracking’.
|
| Fig 3.1 Without kerning and with kerning |
|
| Fig 3.2 Normal tracking, loose tracking and tight tracking |
|
| Fig 3.3 Normal tracking, loose tracking, tight tracking |
Texture
Beyond learning about the unique characteristics of each typeface—and
understanding its place in history, it is important to understand how
different typefaces feel as text. Different typefaces suit different
messages. A good typographer has to know which typeface best suits the
message at hand.
Consider, too, the different textures of these typefaces. Type with a
relatively generous x-height or relatively heavy stroke width produces
a darker mass on the page than type with a relatively smaller x-height
or lighter stroke. Sensitivity to these differences in colour is
fundamental for creating successful layouts.
|
| Fig 3.4 Anatomy of a typeface |
|
| Fig 3.5 Comparison of different typefaces (i) |
|
|
|
|
| Fig 3.7 Comparison of different typefaces (iii) |
|
| Fig 3.8 Comparison of different typefaces (iv) |
|
| Fig 3.9 Comparison of different typefaces (v) |
Leading and Line Length
The goal in setting text type is to allow for easy, prolonged
reading. At the same time a field of type should occupy the page as
much as photograph does.
Type size: Text type should be large enough to be read easily
at arms length—imagine yourself holding a book in your lap.
Leading: Text that is set too tightly encourages vertical eye
movement; a reader can easily loose his or her place. Type that is
set too loosely creates striped patterns that distract the reader
from the material at hand.
Line Length: Appropriate leading for text is as much a
function of the line length as it is a question of type size and
leading. Shorter lines require less leading; longer lines more. A
good rule of thumb is to keep line length between 55-65 characters.
Extremely long or short lines lengths impairs reading.
|
| Fig 3.10 Type size, leading and line length (i) |
|
| Fig 3.11 Type size, leading and line length (ii) |
|
| Fig 3.12 Type size, leading and line length (iii) |
Type Specimen Book
A type specimen book shows samples of typefaces in various different
sizes. Without printed pages showing samples of typefaces at different
sizes, no one can make a reasonable choice of type. You only determine
choice on screen when its final version is to read on screen.
A type specimen book (or ebook for screen) is to provide an accurate
reference for type, type size, type leading, type line length etc.
|
| Fig 3.13 Sample Type Specimen Sheet |
It is often useful to enlarge type to 400% on the screen to get a
clear sense of the relationship between descenders on one line and
ascenders on the line below.
Nothing replaces looking closely at an actual
print out of your work. The best screen is still an electronic
approximation of the printed page.
Physical class
Today, Mr. Vinod asked us to anonymously share our thoughts about the first three weeks of classes. We should reflect on any challenges we have encountered and provide feedback on our experience with him as our lecturer. Additionally, we can also suggest any changes we'd like to see.
Lecture 5 : Text (Part 2)
Indicating Paragraphs
There are several options for indicating paragraphs. In the first example,
we see the ‘pilcrow’ (¶), a holdover from medieval manuscripts seldom use
today.
|
| Fig 4.1 Pilcrow Paragraph Indicator |
The example here displays a ‘line space’ (leading*) between the
paragraphs. Hence if the line space is 12pt, then the paragraph space is
12pt. This ensures cross-alignment across columns of text.
|
| Fig 4.2 Line Space Paragraph Indicator |
|
| Fig 4.3 Line space vs leading |
The example here displays the standard indentation. Typically here the
indent is the same size of the line spacing or the same as the point size
of your text.
|
| Fig 4.4 Standard indentation |
The method of extended paragraphs below creates unusually wide columns of
text. Despite these problems, there can be strong compositional or
functional reasons for choosing it.
|
| Fig 4.5 Extended paragraphs |
Widows and Orphans
In traditional typesetting (the kind that still endures among
conscientious commercial publishers), there are two unpardonable
gaffes—widows and orphans. Designers (specifically those that deal with
large amounts of text in websites or books on online magazines or
printed magazines, news papers or online journals) must take great care
to avoid the occurrence of the the above mentioned.
A widow is a short line of type left alone at the end of a column
of text.
An orphan is a short line of type left alone at the start of new
column.
|
| Fig 4.6 Widows and orphans |
In justified text both widows and orphans are considered serious
gaffes. Flush right and ragged left text is some what more forgiving
towards widows, but only a bit. Orphans remain unpardonable.
The only solution to widows is to rebreak your line endings through
out your paragraph so that the last line of any paragraph is not
noticeably short.
Orphans, you might expect, require more care. Careful typographers
make sure that no column of text starts with the last line of the
preceding paragraph.
Highlighting Text
The following are some simple examples of how to highlight text within
a column of text. Different kinds of emphasis require different kinds
of contrast.
|
| Fig 4.7 Italic Highlights and Bold Highlights |
|
| Fig 4.8 Bold San Serif Highlights and Colour Highlights |
In this example the sans serif font (Univers) has been reduced by .5
to match the x-height of the serif typeface. 8 ≠ 7.5
|
| Fig 4.9 7.5 points and 8 points sans serif font (Univers) |
This time reduce aligned figures (numbers) or All Capital acronyms
embedded in text by .5 as well, to ensure visual cohesion of the
text.
|
| Fig 4.10 8 points and 7.5 points numbers |
Also take note, when highlighting text by placing a field of colour at
the back of the text, maintaining the left reading axis (right
example) of the text ensures readability is at its best.
|
| Fig 4.11 Text with background colour |
Sometimes it is necessary to place certain typographic elements
outside the left margin of a column of type (extending as opposed to
indenting) to maintain a strong reading axis.
|
| Fig 4.12 Text with typographic elements |
Quotation marks, like bullets, can create a clear indent, breaking the
left reading axis. Compare the indented quote at the top with the
extended quote at the bottom.
|
| Fig 4.13 Highlighting text with quotation marks |
Headline within Text
There are many kinds of subdivision within text of a chapters. In
the following visuals these have been labeled (A, B and C) according
to the level of importance.
A typographers task is to make sure these heads clearly signify to
the reader the relative importance within the text and to their
relationship to each other.
A head indicates a clear break between the topics within a
section. In the following examples ‘A’ heads are set larger than the
text, in small caps and in bold. The fourth example shows an A head
‘extended’ to the left of the text.
|
| Fig 4.14 A heads |
|
| Fig 4.15 B heads |
The C heads, although not common, highlights specific facets of
material within B head text. They not materially interrupt the flow of
reading. As with B heads, these C heads are shown in small caps,
italics, serif bold and san serif bold. C heads in this configuration
are followed by at least an em space for visual separation.
|
| Fig 4.16 C heads |
Putting together a sequence of subheads = hierarchy.
Obviously there is no single way to express hierarchy within text;
in fact the possibilities are virtually limitless.
|
| Fig 4.17 Hierarchy in a sequence of subheads |
Cross Alignment
Cross aligning headlines and captions with text type reinforces the
architectural sense of the page—the structure—while articulating the
complimentary vertical rhythms. In this example, four lines of
caption type (leaded 9 pts.) cross-align with three lines of text
type (leaded to 13.5pts).
|
| Fig 4.18 Cross alignment (i) |
Below, one line of headline type cross-aligns with two lines of text
type, and (right; bottom left) four lines of headline type
cross-align with five lines of text type.
|
| Fig 4.19 Cross alignment (ii) |
Physical class
In today's class, we were asked to share our text formatting on Facebook, and Mr. Vinod reviewed and provided feedback on several works. Following that, we were instructed on the next task, which is task 2.
Lecture 6 : Letters
Understanding letterforms
The uppercase letter forms below suggest symmetry, but in fact it is
not symmetrical. It is easy to see the two different stroke weights
of the Baskerville stroke form (below); more noteworthy is the fact
that each bracket connecting the serif to the stem has a unique arc.
|
| Fig 5.1 Baskerville 'A' |
The uppercase letter forms may appear symmetrical, but a close
examination shows that the width of the left slope is thinner than
the right stroke. Both Baskerville (previous) and Univers (below)
demonstrate the meticulous care a type designer takes to create
letterforms that are both internally harmonious and individually
expressive.
|
| Fig 5.2 Univers 'A' |
The complexity of each individual letterform is neatly
demonstrated by examining the lowercase ‘a’ of two seemingly
similar sans-serif typefaces—Helvetica and Univers. A comparison
of how the stems of the letterforms finish and how the bowls meet
the stems quickly reveals the palpable difference in character
between the two.
|
| Fig 5.3 Helvetica vs Univers |
|
| Fig 5.4 The overlap of Helvetica and Univers |
Maintaining x-height
The x-height generally describe the size of the lowercase
letterforms. However, you should keep in mind that curved strokes,
such as in ‘s’, must rise above the median (or sink below the
baseline) in order to appear to be the same size as the vertical and
horizontal strokes they adjoin.
|
| Fig 5.5 Median and baseline (i) |
|
| Fig 5.6 Median and baseline (ii) |
Form / Counterform
Just as important as recognizing specific letterforms is
developing a sensitivity to the counterform (or counter)—the space
describes, and often contained, by the strokes of the form. When
letters are joined to form words, the counterform includes the
spaces between them.
The latter is particularly and important concept when working with
letterforms like lowercase ‘r’ that have no counters per se. How
well you handle the counters when you set type determines how well
words hang together—in other words, how easily we can read what’s
been set.
|
| Fig 5.7 Form / Counterform |
One of the most rewarding way to understand the form and counter
of a letter is to examine them in close detail. The examinations
also provide a good feel for how the balance between form and
counter is achieved and a palpable sense of letterform’s unique
characteristics. It also gives you a glimpse into the process of
letter-making.
Its worth noting here that the sense of the ‘S’ holds at each
stage of enlargement, while the ‘g’ tends to loose its identity,
as individual elements are examined without the context of the
entire letterform.
|
| Fig 5.8 Helvetica Black vs Baskerville |
Contrast
The basic principles of Graphic Design apply directly to
typography. The following are some examples of contrast—the most
poweful dynamic in design—as applied to type, based on a format
devised by Rudi Ruegg.
The simple contrasts produces numerous variations:
small+organic/large+machined; small+dark/ large light
|
| Fig 5.9 Helvetica Bold vs Baskerville |
|
| Fig 5.10 Contrast |
Lecture 7 : Screen & Print
|
| Fig 6.1 Screen Design for Website |
Typography in Different Medium
In the past, typography was viewed as living only when it reached
paper. Once a publication was edited, typeset and printed, it was
done. Nothing changed after that. Good typography and readability
were the result of skilled typesetters and designers.
Today, typography exists not only on paper but on a multitude of
screens. It is subject to many unknown and fluctuating parameters,
such as operating system, system fonts, the device and screen
itself, the viewport and more. Our experience of typography today
changes based on how the page is rendered, because typesetting
happens in the browser.
Print Type Vs Screen Type :
Type for Print
- Primarily, type was designed intended for reading from print
long before we read from screen. It’s the designer’s job to ensure
that the text is smooth, flowing, and pleasant to read.
- A good typeface for print-Caslon, Garamond, Baskerville are the
most common typefaces that is used for print. Because of their
characteristic which are elegant and intellectual but also highly
readable when set at small font size.
- They are versatile, easy-to-digest classic typeface, which has a
neutrality and versatility that makes typesetting with it a
breeze.
|
| Fig 6.2 Type for print (i) |
|
| Fig 6.3 Type for print (ii) |
Type for Screen
- Typefaces intended for use on the web are optimised and often
modified to enhance readability and performance onscreen in a
variety of digital environments. This can include a taller
x-height (or reduced ascenders and descenders), wider letterforms,
more open counters, heavier thin strokes and serifs, reduced
stroke contrast, as well as modified curves and angles for some
designs.
- Another important adjustment especially for typefaces
intended for smaller sizes is more open spacing. All of these
factors serve to improve character recognition and overall
readability in the non-print environment, which can include the
web, e-books, e-readers, and mobile devices.
Hyperactive Link/ hyperlink
A hyperlink is a word, phrase, or image that you can click on to
jump to a new document or a new section within the current
document. Hyperlinks are found in nearly all Web pages, allowing
users to click their way from page to another. Text hyperlinks
are normally blue and underlined by default. When you move the
cursor over a hyperlink, whether it is text or an image, the
arrow should change to a small hand pointing at the link.
Font Size for screen
16-pixel text on a screen is about the same size as text
printed in a book or magazine; this is accounting for reading
distance. Because we read books pretty close — often only a
few inches away — they are typically set at about 10 points.
If you were to read them at arm’s length, you’d want at least
12 points, which is about the same size as 16 pixels on most
screens
|
| Fig 6.4 Font size for screen vs print |
System Fonts for Screen/ Web Safe Fonts
Each device comes with its own pre-installed font selection.
Which is based largely on its operating system. The problem
is that each differs a little bit.
Windows-based devices might have one group. While MacOS ones
pull from another. Then Google’s own Android system uses
their own as well.
Pixel Differential Between Devices
The screens used by our PCs, tablets, phones and TVs are
not only different sizes, but the text you see on-screen
differs in proportion too, because they have different
sized pixels. 100 pixels on a laptop is very different
from 100 pixels on a big 60″ HDTV.
Even within a single device class there will be a lot of
variation
|
|
Fig 6.5 Pixel Differential Between Devices |
Static Vs Motion
Static typography has minimal characteristic in expressing
words. Traditional characteristics such as bold and italic
offer only a fraction of the expressive potential of
dynamic properties.
From billboards to posters, magazines to fliers, we
encounter all forms of static typography with wide ranging
purposes. Whether they are informational, promotional,
formal or aspirational pieces of designs, the level of
impression and impact they leave on the audience is
closely knitted to their emotional connection with the
viewers.
|
| Fig 6.6 Static typography (i) |
|
| Fig 6.7 Static typography (ii) |
Motion Typography
- Temporal media offer typographers opportunities to
“dramatise” type, for letterforms to become “fluid” and
“kinetic” (Woolman and Bellantoni, 1999). Film title
credits present typographic information over time, often
bringing it to life through animation. Motion graphics,
particularly the brand identities of film and television
production companies, increasingly contain animated
type.
Fig 6.8 Se7en (1995) title sequence; motion typography
INSTRUCTIONS
Task 1: Exercise 1 - Type Expression
Sketches
For this exercise, our task was to produce a series of typographic
expression sketches using a set of provided words: Dizzy, Electric, Fire,
Cry, Gun, Slide, and Freeze. These words were selected through a voting
process and served as creative prompts.
We are tasked with choosing four words from the given list and to
interpret and represent these words visually while adhering to the
constraints of 10 given fonts (Adobe Caslon Pro, Bembo Std, Bodoni
Std, Futura Std, Gill Sans Std, ITC Garamond Std, ITC New Baskerville Std,
Janson Text LT Std, Serifa Std, and Univers LT Std).
My sketches for the selected words: Slide, Dizzy, Fire, and Cry.
Fig 7.1 'Slide' sketch
Fig 7.2 'Dizzy' sketch
Fig 7.3 'Fire' sketch
Fig 7.4 'Cry' sketch
Digitalisation
The next step is to transform our initial sketch draft into a digital
format. The font below was created using Adobe Illustrator.
|
| Fig 7.5 First attempt at creating a digital format |
Since I'm not satisfied with some of the details, I have decided to make a few small adjustments.
|
||
Fig 7.6 Readjust the word 'slide'
|
|
|
Fig 7.8 Second attempt at creating a digital format |
After making some adjustments, I have decided to choose this as my final
work.
Final Type Expression
|
|
Fig 7.9 Final Type Expression jpg - 16/10/2023 |
Fig 7.10 Final Type Expression pdf - 16/10/2023
Type Expression Animation
In this exercise, we are tasked with transforming our type expression into a type animation.
 |
| Fig 7.11 First attempt at creating an animated gif |
 |
| Fig 7.12 animated gif |
 |
Fig 7.13 Second attempt at creating an animated gif (i) |
The second attempt at creating the animated type expression still didn't meet the quality, so I decided to create again.
 |
| Fig 7.15 Third attempt at creating an animated gif |
In the third attempt to create the animated type expression, I deleted Artboard 1, Artboard 2, and Artboard 3 because they appeared odd. I replaced them with Artboard 8 and Artboard 9. This is why the final outcome consists of only 9 frames.
 |
| Fig 7.16 Total of 9 frames |
 |
| Fig 7.17 Final Type Expression Animation |
Task 1: Exercise 2 - Text Formatting
Kerning & Tracking
For this exercise, our task is to create a final layout that encompasses
various aspects of text formatting using our name. This includes kerning
and tracking, which relate to letter spacing. We will continue to work
with the 10 fonts provided.
Fig 8.2 Text formatting (with kerning) - 22/10/2023
 |
| Fig 8.3 Text formatting (without kerning) - 22/10/2023 |
Text Formatting Layout
Following the text formatting exercise using our names, we are now applying our kerning and tracking skills to design an article layout.
 |
| Fig 8.4 Text formatting layout without grid |
 |
| Fig 8.5 Text formatting layout with grid |
After showing this layout to Mr. Vinod, he suggested that the title should be presented as a single line rather than two lines to create alignment contrast. So, he made some minor adjustments to the layout, and these subtle changes significantly improved its overall impact.
 |
| Fig 8.6 Text formatting layout adjustment |
Final Text Formatting Layout
|
|
Fig 8.7 Final Text formatting layout jpg (without grid) - 23/10/2023 |
.jpg)
|
|
|
Fig 8.9 Final Text formatting layout jpg (with grid) - 23/10/2023 |
Fig 8.10 Final Text formatting layout pdf (with grid) - 23/10/2023
HEAD
Font/s: Bodoni std (Bold)
Type Size/s: 36pt
Leading: 36pt
Paragraph spacing: 0
BODY
Font/s: Bodoni std (Book)
Type Size/s: 10pt
Leading: 12pt
Paragraph spacing: 12pt
Characters per-line: 61
Alignment: Align Left
Margins: 12.7 mm top, 12.7 mm left + 12.7 mm right + 12.7 mm
bottom
Columns: 2
Gutter: 5mm
FEEDBACK
Week 1
General Feedback: In response to the instruction regarding
Eportfolio, we should focus on updating our research and sketches.
Specific Feedback: While no specific feedback was provided
during the session, it remains essential to emphasise the completion
of the tasks assigned for today before our next class. Meeting these
deadlines and successfully accomplishing our assignments will
contribute to our overall progress in the course.
Week 2
General Feedback: We need to ensure that we make the most
out of our learning experience.
Specific Feedback: I didn't receive specific feedback
because I didn't share my sketches on Facebook on time. However, Mr.
Vinod shared a message titled "Understanding Feedback" on Teams, which
led me to a crucial realisation. It is importance for us to actively
applying the knowledge gained during class sessions and using the
judgment when refining our work. The idea that making judgments,
whether right or wrong, is an integral part of the learning
process. Education is framed as a journey of learning itself
rather than being solely focused on grades or correctness. Ultimately,
we are encouraged to wholeheartedly embrace the uncertainty that comes
with creative work, as it is a fundamental aspect of our learning
journey.
Week 3
General Feedback: We should make it a practice to update our
Eportfolio upon completing our classes. The Eportfolio serves as a
comprehensive collection of our individual work and progress throughout
our academic journey.
Specific Feedback: I asked about the visual representation
of the font "fire" and if it resembled the actual appearance of fire,
my lecturer responded that the font indeed came close to capturing the
shape of fire, so no significant changes were necessary.
Week 4
Specific Feedback: Regarding the GIF, the word "dizzy"
didn't effectively convey the feeling of dizziness. In fact, it appeared
somewhat annoying. Therefore, I should consider redoing it.
Week 5
General Feedback: If you create alignment, you create a good
layout. When you establish proper alignment in your design, you lay the
foundation for an effective and aesthetically pleasing layout. Alignment
ensures that elements harmonise, offering clarity and visual balance to
your work.
Specific Feedback: Contrast in text formatting plays a
significant role in aesthetics, it can enhancing the overall quality of
your works. Effectively managing contrast in your design can ensure the
content's aesthetic.
REFLECTIONS
Experience: Before embarking on this course, I had no
knowledge of typography; my design pursuits were mainly centred around
drawing. I initially held a somewhat unenthusiastic view, fearing that
typography might constrain my creative freedom due to its heavy reliance
on text. However, during these five weeks, my comprehension has
significantly deepened. I have come to recognise that typography is a
potent and indispensable tool in the realm of design. I have
transitioned from a state of ignorance, where I knew very little and was
largely uninterested, into someone who fully appreciates the power and
significance of typography. I am no longer the individual who remained
unaware and disinterested in typography. This transformation has been
substantially influenced by the valuable feedback and guidance offered
by Mr. Vinod, in conjunction with our learning environment. These
factors have played essential roles in shaping my journey into the realm
of typography.
Observation: Throughout the weeks, I observed that attention
to detail is paramount in design. Even the smallest nuances, like the
visual representation of a font or the choice of words in a GIF, can
significantly impact the overall message and aesthetics. Feedback from
the instructor was instrumental in fine-tuning these aspects.
Additionally, the course emphasised the crucial role of contrast in text
formatting, both functionally and aesthetically. Effective contrast
management can elevate the quality and appeal of a design. Lastly, I was
also observed that clarity and simplicity in instruction can greatly
facilitate my learning process.
Findings: One of the key findings from these weeks is the
critical role of alignment in design. Proper alignment creates a solid
foundation for an aesthetically pleasing layout and ensures clarity and
visual balance. This understanding has made me more conscious of the
structure and arrangement in my design work. Moreover, the significance
of contrast in text formatting has been highlighted. It not only
enhances the quality of work but also contributes to the overall
aesthetics. In conclusion, my journey in this course has underscored the
importance of attention to detail, alignment, and contrast management in
design. These insights will undoubtedly shape my approach to future
projects and assignments.
FURTHER READING
Typographic Design Form and Communication 6th Edition - Rob
Carter
Fig 9.1 Typographic Design Form and Communication 6th Edition
The book offers a deep dive into the world of typography, tracing
its evolution from ancient origins to Gutenberg's revolutionary
movable type. It thoroughly examines letterforms, fonts, and type
classifications while emphasising legibility in traditional and
digital typography. Structural elements, grids, and spatial dynamics
in typographic backgrounds are explored in detail, along with the
fusion of verbal and visual elements in typographic messages.
Also, the book takes me on a historical journey through typographic
technology, from hand composition to digital typesetting,
highlighting its significance in screen and time-based media. It
also covers type selection, legibility, and web design technology.
It guides me through the whole typographic design process
smoothly.
Furthermore, the book addresses typographic design education, which
offering practical exercises works from others designer in order to
fostering our creativity. Besides, various typefaces, from Old Style
to Decorative fonts, are introduced to provide a comprehensive
understanding of typographic choices.
Overall, this book provides a thorough exploration of typography's
history, principles, and applications, serving as an essential
resource for novices like me.
Comments
Post a Comment