TYPOGRAPHY TASK 1:EXERCISES
4/4/2023 - /4/2023
Adriena Tan Yan Zi / 0351236
Typography /
Bachelor of Design in Creative Media
Task 1 Exercises
Lecturers
Development
-It is important to be doing research on local content or content that comes from our civilization. It does not have to be a major community or any community that was not given a voice to.
-”Give voice to the voiceless”, remember that while doing research for methodology.
Early letterform development: Phonician to Roman
Writing meant scratching into wet clay with a hardened stick carving into
stone with a chisel.
Uppercase forms are simple combinations of straight
lines circles as the materials and tools of early writing.
The Greeks changed the formation of writing, written from right to left.
Greeks developed a style of writing called boustrophedon, line read
alternatively from right to left or left to right.
As they changed the
direction of reading they also changed the orientation of the letterforms:
Greek
did not use punctuation.
Strictly left to right writing.
Entruscan (and then Roman) carvers working in marble painted letterforms
before inscribing them.
Qualities of their strokes - change in weight
from vertical to horizontal
Hand script from 3rd - 10th Century C.E.
Square capitals were written and found in Roman monuments.
Variety of strokes widths was achieved by the reed, pen held by an angle
of approximately 60 degrees off the perpendicular.
A compressed version of square capitals, rustic capitals allowed for twice as
many words on a sheet of parchment.
Pen and brushes are held at 30
degrees angle off the perpendicular.
Rustic capitals were faster and
easier to, they were harder to read due to their compressed nature.
Both
rustic and square capitals were typically reserved for documents of some
intended performances.
Everyday transactions typically written in
cursive hand in forms were simplified for speed.
Unicials incorporated
some aspect of roman cursive hand, in the shape of A, D, E, H, M, U, Q.
“Uncia” is latin 12 for anything, some schoolers thought uncials refers to the
letters that are 1 inch high.
It’s more accurate to think of unicials as small letters.
Further
formalisation of cursive hand, half unicials mark mark the formal beginning of
lowercase letterforms.
Replete ascenders and descenders, 2000 years
after the origin of the Phonecian alphabet.
Charlemagne, 1st unifier
since the Romans, issued and edict to standardize all ecclesiastical texts
Entrusted
to Alcuin of York, Abbot of St Martin Tours
The monk rewrote the text
using uppercase, miniscule, capitalization and punctuation which set the
standard for calligraphy in that century
Dissolution of charlemagne empire led to a condense and strongly vertical
letterform in northern europe known as the Blackletter or textura
In the
south a rounder more openhanded letterform was used known as rotunda
Humanistic script in Italy is based on Alcuin’s miniscule
Blacketter
BLACKLETTER TO GUTENBERG'S TYPE
Build a machine that can mimic the work of a scribes hand
Johann
Gutenberg bible
Text type classifications
1450 Blackletter
The earliest printing type
Forms were based on hand copying styles used
for books in Northern Europe.
Example: Cloister Black . Goudy Text
1475 Oldstyle
Based on lowercase style used by Italian humanist
Uppercase letterforms
found inscribed on Roman ruins
Forms evolved away from their calligraphic
origins 200 years
Migrated across europe
Example: Bembo, Caslon,
Dante, Garamond, Janson, Jenson, Palatino
1500 Italic
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.
1550 script
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 Srcipt • Mistral • Snell Roundhand
1750 Transitional
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
1775 Modern
This style represents a further rationalisation 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
1825 Square serif/ slab serif
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 they evolved, the brackets were dropped.
Examples: Clarendon • Memphis • Rockwell • Serifa
1900 sans serif
As their name implies, these typefaces eliminated serifs altogether. 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 • Universe
1990 Serif/ 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
Typo 3: Text P1 Kerning and Letterspacing
Kerning refers to the automatic adjustment of space between letters
Mistakenly referred to letterspacing
Letterspacing add space
between the letters
Addition and removal space in a word or sentence
referred as tracking.
Normal tracking and loose tracking
Designers always letterspace uppercase letters.
Resistance with the type
of community to letterspace lowercase letters within text
Uppercase
letterforms are drawn to be able to stand on their own
Lowercase
requires counterform created between letters to maintain the line of
reading
Formatting text
Flush left: this format most closely mirrors the asymmetrical
experience of handwriting.
Each line starts at the same point but ends
wherever
Space between words is consistent throughout
Centered: imposes symmetry upon text
Assigning equal value and
weight to both ends
Transforms fields of text into shapes
Creates
a strong shape on the page
Important to amend line breaks so that the
text does not appear to jagged
Flush right: the format places emphasis at the end of the line opposed
its start
Can be useful in situation like caption
Relationship
between test and image might be ambiguous without a strong orientation to the
right
Justified: like centering, the format imposes a symmetrical shape on
the text.
Achieved by expanding or reducing space between words and
letters
Resulting in openness of lines occasionally
Careful
attention to line breaks and hyphenation is required to amend this
problem
Type that calls attention to itself before reader can get to the actual words
is simply interference, should be avoided
Quite simply if you see the
type before you see the words, change the type
Text/ Texture
Learning about the unique character of each typeface
Understanding its
place in history
Important to understand how typefaces feel as text
Different typefaces suit different messages
Good typographer has
to know which typefaces best suits the message at hand
Type with
relatively generous x-height or heavy stroke width produces a darker mass on
the page than the type than the smaller x-height and lighter stroke
Sensitivity to these differences in colour is fundamental for creating
successful layout
Text/ leading and line length
The goal insetting text type is easy
Field of type should occupy the
page as much as photography does
Type size: text type should be large
enough to be read easily at the arm's length
Leading: text that is set
too tightly encourages vertical eye movement, a reader can easily lose his or
her place
Creates a stripe pattern that distracts the reader from the
material at hand
Line length: appropriate leading for text is as much a
function of the line length
Shorter lines requires less reading; longer
lines more
A good rule of thumb is to keep line length between 55-65
characters
Extremely long or short line lengths impairs reading
Type/ Type Specimen Book
Provide an accurate reference of type, type sizes, type leading, type line length etc.
Compositional requirement: text should create a field that can occupy a page
or a screen
Think of your ideal text as having a middle gray value.
It’s often used 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 point out of
your work
The best screen is still electronic approximation of the
printed page
Unless designing for a screen then judging type on screen
is accurate
Typo 4: Text Part 2
Text/ Indicating Paragraphs
Several options for indicating paragraph
Example: pilcrow, a holdover
from medieval manuscripts seldom used today
The example displays a line space leading between the paragraphs
If the
line space is 12pt, paragraph space is 12pt
Ensures cross alignment
across columns of text
Line space vs leading
Displays standard indentation
Indent is the same size of the line
spacing or the same as the point size of your text
The method of
extended paragraphs below creates unusually wide columns of text
There
can be strong compositional or functional reasons for choosing it
Text/ Windows Orphans
Two unpardonable gaffes- widows and orphans
Designers with a large
amount of texts in (websites or books online magazines or printed magazines,
newspapers or online journals) must take care to avoid the occurrence of the
above mentioned
A widows 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 the new column
Justified both text widows and orphans are considered serious gaffes
Flush right and flagged left text is somewhat more forgiving
Orphans remains unpardonable
Only solution to widows is to rebreak
your line endings throughout your paragraph so that the last line is not
visible
Orphans require more care
Careful typographers make sure
that no column of text starts with the last line of the preceding
paragraph
Text/ Highlighting text
Examples of how to highlight text within a column of text
Different
kinds of emphasis require different kinds of contrast
In this example
the sans serif font (Univers) has been reduced by .5 to match the x-height of
the serif typeface
When highlighting text by placing a field of colours at the back of the
text
Maintaining left reading axis of the text ensures readability is at
its best
Quotation marks like bullets, can create clear indent, breaking
the left reading axis
Compare the indented quote at the top with extended
quote at the bottom
Headline within text
There are many types of subdivision within the text of a chapters
Visuals have been labelled (A, B and C) according to the level of
importance.
Make sure these heads clearly signify to the reader the
relative importance within the text and their relationship with each
other
A head indicates a clear break between the topics within a section
A are
set larger in text, in small caps and bold
A extended to the left of the
text
The B subordinate to A heads
B heads indicate a new supporting argument
or example for the topic at hand
They should not interrupt the text as
strongly as A heads do
C heads are not common
Highlights specific facets of materials within B
head text
They dont materially interrupt the flow of the reading
C
heads in this configuration are followed by at least an em space for visual
separation
Putting together a sequence of subheads = hierarchy
Text/ Cross Alignment
Cross aligning headlines and captions with text type reinforces the
architectural sense of the page
Articulating complementary vertical
rhythms
Typo 2 :Basic
Basic/ Describing letterforms
Revolved over 500 years
Employs a number of technical terms
Good to familiarise ourselves
with lexicon
Baseline: The imaginary line visual base of the letterforms
Median: The
imaginary line defining the x-height letterforms
X-height: the height in
any typeface of the lowercase “x”.
Stoke: Any line that defines the basic letterform
Apex/ Vertex: the
point created by joining two diagonal stems (apex above and vertex below)
Arm: Short strokes off the stem of the letterform, either horizontal or
inclined upward
Ascender: the portion of the stem of a lowercase
letterform that projects above the median.
Barb: the half serif finish
on some sort of stroke
Beak The half serif finish on some sort of
horizontal terms
Bowl the rounded form that describes a counter. The
bowl may be either open or closed.
Bracket: the transition between serif
and stem.
Cross stroke: the horizontal stroke in a letterform that joins
2 stems together
Crotch: the interior space where 2 strokes meet
Ear: the stroke extending out from the main stem or body of the
letterform
Em/en Referring to the width of the uppercase M, and em is now the distance equal to the size of the typeface, an en is half a size of the em. Most often used to describe em/en spaces and em/en dashes.
Ligature the character formed by the combinations of 2 or more letterforms.
Serif the right angle or oblique foot at the end of the stroke
Spine The curved stem of the S
Spur the extension articulates the
junction of the curved and rectilinear stroke.
Stress The orientation of
the letterform, indicated by the thin stroke in round forms
Swash The
flourish that extends the stroke of the letterform
Terminal:
self-contained finish the 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 final).
Basic/ The font
Full font typeface contains much more than 26 letters, to numerals, few
punctuation marks.
To work successfully with type, make sure we’re
working in 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.
Lowercase Lowercase letters include the
same characters as uppercase.
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.
Uppercase Numerals
Called lining figures
Numerals are the
same height as uppercase letters
Set to the same kerning width
Used with tabular material
Lowercase Numerals
Old style figures or text figures
Numerals are set to x-height with ascenders and descenders
Lowercase numerals are far less common in sans serif type-faces than in
serif.
Italic
Most fonts today are produced with a matching
italic
Small caps, almost always only roman
Italic refer back to
the fifteenth century
Oblique are typically based on the roman form of
the typeface
Punctuation, miscellaneous, characters
fonts contains
standard punctuation marks
Miscellaneous characters can change from
typeface to typeface
To be acquainted with all the character available in
a typeface before you choose the appropriate type particular job
Ornaments
Used as flourishes in invitation or certificates
Usually are provided as a font in a larger typeface family
Traditional or classical typefaces contain ornamental fonts as part of
the entire typeface family (Adobe Caslon Pro)
Basic/ Describing typefaces
Recognise the parts of a letterform
Identify different typefaces
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”.
Italic Named for fifteenth century Italian handwriting
on which the forms are based. Oblique conversely are based on roman form of
typeface
Boldface:
Characterised by a thicker stroke than a roman
form
Relative stroke widths within the typeface
Semibold, medium,
black, extra bold, or super.
Typefaces, the boldest rendition of the
typeface is referred to as Poster.
Light A lighter stroke than the roman form, lighter strokes are called “thin”.
Condense A version of the roman form, and extremely condens styles are
often called ‘compressed’. Extended A variation of roman font.
Typo 5: Understanding
Typography: Letters/ understanding letterforms
Uppercase letter forms below suggest symmetry
It is not symmetrical
Two different stroke weights of Baskerville stroke form
Each
bracket connecting the Serif to the stem has a unique arc
Letters
may appear symmetrical
Close examination shows the width of the left
slope is thinner than the right stroke
Both baskerville and univers
demonstrates the meticulous care
Creates letterforms that are both
internally harmonious and individually expressive
Complexity of each
individual letterform is nearly demonstrated by examining the lowercase ‘a’
Two
seemingly similar typefaces - Helvetica and Univers
How the stems of the
letterforms finish
How the bowls meets the stems
Maintaining x-height
X-height generally describes the size of the lowercase letterforms
Curved strokes such as ‘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
Form and counterform
Recognising specific letterforms is developing a sensitivity to the
counterform - the space describes
Often contained by the strokes of the
form
Letters are joined to form words, counterforms include the space
between
Latter is particularly an important concept when working with
letterforms like lowercase ‘r’ that have no counter.
How easily we can
read what’s been set
To understand the form and counter of a letter is to examine them in close
detail
Examinations provide a good feel of how the balance between form
and counter is achieved and palpable sense of letterform’s unique
characteristics
A glimpse into the process of letter making
Contrast
Basic principles of graphic design apply directly to typography
Most
powerful dynamic in design
Applied to type, based on a format devised by
Rudi Ruegg
Simple contrast produces numerous variations
small+organic/ large+machined; small+dark/ large+light
Typo 6: Screen & Print
Different Medium
Typography was viewed as living only when it reached paper
Publication
was edited, typeset and printed
Good typography and readability were the
result of skilled typesetters and designers
Today typography not only
exists on papers but on a multitude of screens
Subject to many unknown
and fluctuating parameters
Operating system, system fonts, device and
screen itself, viewpoint
Based on how the pages rendered
Typesetting happens in the browser
Print type vs Screen type
Type for Print
A good typeface for print caslon, Garamond, Baskerville
are the most common used for print
Characteristic which are
elegant, intellectual but also highly readable when set at small font size
Versatile , easy to digest typefaces
Neutrality and versatility that
makes typesetting with it a breeze
Type for screen
Typefaces intended for use on the web are optimised and
often modified to enhance readability and performance on screen in a variety
of digital environments
Include a taller x-height (reduced ascenders and
descenders), wider letterforms, more open counters
Heavier thin strokes
and serifs
Reduced stroke contrast
Modified curves and angles for
some designs
Important adjustment - typefaces intended for smaller sizes
More open spacing
Factors serve to improve character recognition
Overall readability in the non-print environment
Include the web,
e books, e readers and mobile devices
Hyperactive link/ hyperlink
Hyperlink is a word, phrase, or image that
you can clink onto jump to a new document or a new section within the current
document
Found in nearly all webpages
Allowing users to click
their way from a page to another
Text hyperlinks are normally blue
Underline by default
Move the cursor over a hyperlink whether it
is text or image
Arrow should change to 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
Accounting for reading distance
We read books pretty close, often only a few inches away
Typically
set at about 10 points
System font for screen/ Web sale fonts
Each device comes with their own
pre-installed font selection
Based largely on its operating system
Problem is that each differs a little bit
Window based devices
might have one group
MacOS ones are pull from another
Google’s own
android system uses their own as well
Designer picked some obscure paid
font family for this site’s design
Font you see in default back to some
basic variation like Times New Roman
‘Web safe’ ones appear across all
operating systems
Small collection of fonts overlap from window to mac
to google
Open Sans, Lato. Arial, Helvetica, Times New Roman, Times,
Courier New, Courier, Verdana, Georgia,, Palatino and Garamond
Pixel Differential Between Devices
Screen used by our PCs, tablets, phones and TVs are not only different sizes
The text you see on screen differs in proportion too
They have
different size pixels
100 pixels on a laptop is very different from 100
pixels on a big 60 HDTV
Static Vs Motion
Static typography has minimal characteristic in expressing words
Traditional characteristic such as bold and italic after only a fraction
of the expressive potential of dynamic properties
Billions of posters,
magazines to fliers
informational , promotional, formal or aspirational
pieces of designs
Level of expressions and impacts
Knitted
audiences’ emotional connection with viewers
Motion Typography
Temporal media offer typographers opportunities to dramatise type
Letterforms to become fluid and kinetic
Film title credit present
typographic information over time
Bringing it to life through animation
Type is often overlaid onto music videos and advertisements
Set in
motion following the rhythm of a soundtrack
On screen typography has
developed to be more expressive
Helping to establish the tone of
associated content
Express a set of brand values
Prepare audience
for the film by evoking a certain mood
Instructions
Task 1 / Type Expression
-01.jpg)
Feedbacks
General Feedback: Join the FB group: https://www.facebook.com/groups/797387290414796/. All the important stuff is in featured. 10 typefaces we have to download from Facebook. Lecture videos playlist is in Facebook. Doing E-Portfolio Task 1: Exercises: Rain, Fire, Water, Dissipate, Crush, Freedom, Sick Watch video 10, 11
Week 2:
General Feedback:
Few repeating feedbacks
and concepts that we have to follow. We should not use too much graphical
elements, little graphicalchanges is acceptable. Do sketches before going
into digilisation. Use of mere space.
Week 3: General Feedback: Start working on our e-portfolio or it will be hard for us later. Specific Feedback: Fix the paragraph line and instructions are not shown so update it. Start doing weekly reflection and document the feedbacks given. Update my lectures sections and start doing further reading, 2 pages a day is enough. Digitalise our type expression and try animate it.
Week 4:
General feedback :
The less graphical elements involved the better. Gave 30minutes for us to
fix our animation. Try to avoid making the e-portfolio’s background black.
Please arrange our e-portfolio in the assigned order, take time doing and
editing instead of rushing it. Try to make the background off-white. Watch
the video tutorials for text formatting. Facebook: files – Task 1 formatting
task.
Week 5
General feedback: When we change the font size, we will need to change the letterspacing,
paragraph spacing and leading as well. Use image that does not look like it
is part of the layout. To stop abbreviation, reduce the font size of that
abbreviation. Watch the video tutorial to know how to manipulate In Design
software. Turn off hyphenation and do a little bit of kerning and tracking
to adjust the space between phrases. Place the images to be aligned with
something in the layout.
Reflections
Experience: My experience while progressing in Task 1: Exercises was up and down, as it was my first time learning the tools and how to manipulate the Adobe Softwares associated with this exercise. For type expression, it was fun as I get to express the words with some graphical elements and explore my potential with the challenges intended in this exercise. At the end, we even get to animate them however progress was a bit rushed to me as there are so much to do in so little time given. I found the lecture recordings for the tutorials to be exceptionally helpful during the exercises. Learnt a lot from these pre-recorded videos.
Observation: From what I've observed, text formatting was as challenging as type expression however still i learned quite a lot from. Before leaning text formatting, I don't even realise how a layout of an article can affect the overall vibe when the viewer is reading. I am glad that I learned kerning, letterspacing, scaling, tracking that aided in the overall view of a text body or article.
Findings: I learned to pay attention to the details in this exercise and there is so many ways to express typo even with the restrictions given which forces us to explore our own creativity. Overall, I felt like I have learnt a lot of basics in typo which might be helpful in the upcoming assignments.
Further Reading
The Elements of Typographic style by Robert BringHurst (Second Edition)
(Rhythm and Proportion)
Flexible texture that they called written
page textus, that means cloth. Typographers usually aim the weave text as
evenly as possible. Good letterforms give a lively, even texture. Careless
spacing of letters can tear the fabric apart. Evenness of colour is usually a
typographer's aim. Depends on four things: the design of the type, spacing
between letters, spacing between words and lines.
Defining the word and space to suit the size and letterfit of the font
Typesetting machines usually divide them into units. Typographers are
ore likely to split them into fractions. Language has effect on the word
space.
Choose a more comfortable measures
Anything from 45 to 75
characters is widely regarded as satisfactory length of line for a
single-column page set in serifed text face or text size. 66-character line is
ideal, for multiple column work, a better average is 40 to 50 characters. The
simplest way to computing them is by copyfitting table like on page 29.
The Complete Manual of Typography by James Felici (Second Edition)
Fonts Formats
What's inside a font depends on its format.
Refer to the platform which the font is designed. For example, two fonts of
the same data for the same typeface may have different file formats depending
on whether they're designed for used on IOS or Windows PC. Another kind
of font format reflects how the typographic information itself is described
and organized.
Finding the characters you need
Windows and the Mac os offer
tools to see exactly which characters are in a particular font.
Applications are beginning to offer the same services. These font browsing
tools are indispensable in the absence of standard character sets and are the
only way to get many of a font's glyphs into our documents.
Using Windows Character Map 59
Shows all character in a font in
the form of a scrollable grid. You can select and copy a character or a group
of character into our document. Selecting a character also indicates if there
is a keystroke sequence you can use to access the character directly from the
keyboard. Unicode number. In this case, you type the four-character Unicode id
for a character followed by Alt-x.
Comments
Post a Comment