Typography | Task 1: Exercises
- Date: 21/04/2025 - 26/05/2025 (Week 1 - Week 6)
- Aishath Eshal Shihab, 0381863
-
Bachelor of Design (Honours) in Creative Media - Taylor's University
- Task 1: Exercises
TABLE OF CONTENTS
LECTURES
Week 1: Introduction
Typography is a fundamental aspect in design
studies because of its disciplined attention to detail and the skill sets
learnt here are applicable to all the different areas of design. It allows
you to develop features, attributes, and characteristics of yourself that
will serve you well in the future.
Typography can be deemed as the act of creating letters, the creation of
typefaces and type families. It can come in animated forms like the
beginning of movie titles or gif animations. It is also prevalent in website
design, application design,, signage design, labels, books, posters, etc.
Typography is also found in logo types. A logo type is
a trademark or a mark that consists of letters. Creating logo types in an
art.
Calligraphy refers to the writing
styles, lettering is when you draw the letters out. The difference between
calligraphy and lettering is that in calligraphy you write, in lettering you
draw.
Oxford Dictionary defines typography
as "the style and appearance of printed matter".
Wikipedia describes typography to be "the art and technique of
arranging type to make written language and legible, readable, and appealing
when displayed. The arrangement of type involves selceting typefaces, point
size, line length, leading, tracking, kerning. The term is also applied to
the style, arrangement, and appearance of the letters, numbers, and symbols
created by the process.
Typesetters,
compositors, typographers, graphic designers, art directors, manga artists,
comic, book artists, graffiti artists, and now anyone who arranges words,
letters, numbers, and symbols for publication, display, or distribution
practice typography. Until the digital age typography was a specialized
occupation, digitization opened up typography to new generations of
designers.
Terminology
Font: refers to the individual font
or weight within the typeface.
Typeface: refers to the entire family of fonts/weights that
share similar characteristics/styles.
Week 1: Development
Early Letterform Development: Phoenician to Roman
In the beginning, writing meant scratching
into wet clay using sharpened sticks or chiseling into stone. The forms of
uppercase letterforms (the only letterforms for nearly 2000 years) evolve
out of these tools and materials. At their core, uppercase forms are simple
combinations of straight lines and circles due to the tools they used.
The Greeks changed the direction of writing. Originally
Phoenicians wrote from right to left and then the Greek created
"boustrophedon" (meaning - how the ox ploughs), a style of writing where the
text read alternatively from right to left and left to right. As they
changed the direction of reading the letterforms changed too.
Etruscan (and then Roman) carvers in marble painted
letterforms before inscribing them. Due to this, certain qualities of their
strokes carried over into the carved letterforms.
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 these strokes were achieved
by the reed pen held at an angle of about 60° off the perpendicular.
A compressed version of this, rustic capitals
allowed for twice as many words on parchment and took far less time to
write. Here the pen/brush was held at a 30° angle off the perpendicular.
Although rustic capitals were faster and easier, they were slightly harder
to read because of their compressed nature.
Both square and rustic capitals typically used for documents. Everyday
transactions were written in cursive hand where forms were simplified for
speed. This is where lowercase letterforms begin.
Uncials incorporated some aspects of the Roman cursive hand
(especially A, D,E, H, M, U, and O). "Uncia" in Latin for twelfth of
anything, so some scholars think that uncials refer to letters that are one
inch high. It might be more accurate to think uncials simply as small
letters. They are more readable at small sizes than rustic capitals.
Half-uncials marked the beginning of formal lowercase
lettterforms, it used ascenders and descenders, 2000 years after the origin
of the Phoenician alphabet.
In 789,
Charlemagne, the first unifier of Europe after the Romans, entrusted Alcuin
of York, Abbot of ST Martin of Tours to standardize all holy texts. The
monks rewrote the texts using both uppercase, lowercase, capitalization, and
punctuation which set the standard for calligraphy for a century.
Blackletter to Gutenberg's Type
When Charlemagne's empire ended, variations of
Alcuin's script started appearing. In northern Europe, a condensed strongly
vertical letterform - Blackletter or Textura - gained popularity. In the
south a rounder more open handed one - Rotunda. In Italy, the humanist
script is also based on Alcuin's script.
Gutenberg's skills included engineering, metalsmithing, and chemistry. He
arranged them all to build pages that accurately mimicked the work of the
scirfbe's hand. His type mold needed a different negative impression for
each letterform.
Text Type Classification (Dates Approximated to the Nearest Quarter Century)
1450 Blackletter - The
earliest printing type, its forms were based on the hand copying styles that
were used for books. Ex: Cloister Black, Goudy Text.
1475 Oldstyle - Based on lowercase forms used
by Italian humanist scholars for book copying and the uppercase letterforms
found inscribed on Roman ruins. Ex: Bembo, Caslon, Dante, Garamond
1550 Italics - Mimicking contemporary
Italian handwriting, the first italics were condensed and close set,
allowing more words per page. Although at first considered their own class
of type, they were soon cast to complement roman forms.
1550 Script - Originally an attempt to
replicate engraved calligraphic forms, this class of type is not appropriate
for lengthy texts. Ex: Kuenstler Script, Mistrlal, Snell Roundhand
1750 Transitional - A refinement of
oldstyle forms, this style was achieved in part because of advances in
casting and printing. Ex: Baskerville Bulmer, Century, Times New Roman
1775 Modern - This represents a
further rationalization of oldstyle letterforms. Serifs were unbracketed and
the contrast between thick and thin stroke extreme. Ex: Bell, Bodoni,
Celdonia, Didot
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. As they evolved the brackets were dropeed. Ex: Clarendon,
Memphis, Rockwell, Serifa
1900 Sans Serif - These typefaces eliminated serifs all together. Althought first
introduced in 1816 by William Caslon IV it did not become popular until the
20th century. This face is also referred to as Grotesque and Gothic. Ex:
Grotesk, Gill Sans, Futura, Helvetica, News Gothic, Univers
1990 Serif/Sans Serif - A recent
development that enlarges the notion of a family of typefaces to include
serif, sans serif, and stages between the two. Ex: Rotis, Scala, Stone
Week 2: Text - Part 1
Tracking: Kerning and Letterspacing
Kerning [Alt+Left Arrow to
reduce the space, Alt+Right Arrow to add space] is the automatic
adjustment of space between letters. It's often confused with
"letterspacing" but letterspacing means to add space between the
letters. Tracking is adding and removing space between words in a
sentence. There is Normal Tracking, Loose Tracking, and Tight
Tracking.
Designers always letterspace uppercase
letters but there is a strong resistance in the type community to
letterspace lowercase letters. This is because uppercase letterforms are
able to stand on their own but lowercase letterforms need the counterform
created between letters to maintain the line of reading.
Formatting Text
Flush Left: Closely resembles the
asymmetry of handwriting. Each line starts at the same point but ends
wherever the last word on the line ends. Letterspacing is consistent. There
is ragging at the right.
Centered: Assigns symmetry to on the text and equal value and weight to both ends of
any line. Centered type creates a strong shape on the page so it's important
to fix line breaks so the doesn't look too jagged.
Flush Right: Emphasises the end of the line. Can be used
where text and image might be ambiguous without a strong orientation to the
right. Ragging is at the left.
Justified: Imposes a symmetrical shape on the left. This
is done by expanding or reducing space between the words and sometimes the
letters. This can create "rivers", white spaces running vertically
through the text. Attention to hyphenation and line breaks is a must to fix
this.
Texture
Beyond the unique characteristics of each typeface and understanding it's place in history it's imortant to understand how different typefaces feel as text. Type with a generous x-height or a heavier stroke width produces a darker mass on the than type with a smaller x-height or lighter stroke.
Leading and Line Length
Type Size: Text type should be large
enough to be read easily at arms length.
Leading: Text that is too tight encourages vertical eye
movement making readers lose their place. Type that is too loose creates
striped patterns distracting the reader.
Line Length: Shorter lines require less leading, longer lines more. (Keep line
length between 55-65 characters) Extremely long or short lines impairs
reading.
Type Specimen Book
This is a book showing samples of typefaces in
various different sizes. Without printed pages showing samples of typefaces
and different sizes no one can make a reasonable choice of type. These books
are to provide an accurate reference for type, type size, type leading, type
line length, etc.
Compositional
Requirement: Text must create a field that occupies a page or a screen.
Ideal text should have a middle grey value not a series of stripes.
It's useful to enlarge type to 400% on the screen to a
clear sense of the relationship between the descenders and ascenders.
Nothing beats looking closely at an actual print out of your work, the best
screen is still an electronic approximation of the printed page.
Week 3: Text - Part 2
Indicating Paragraphs
The Pilcrow (¶): a handover from medieval manuscripts, are still used
today.
Line Space: Also called
"Leading". If the line space is 12pt, the paragraph space in 12 pt.
This ensures cross alignment across the text.
Standard Indentation: Typically the indent in the same
size of the line spacing/point size of the text.
Extended Paragraphs: Creates unusually wide columns of
text but there can be strong functioncal reasons for using it.
Widows and Orphans
Designers dealing with large amounts of text must
be careful to avoid widows and orphans. A Widow is a short
line of type left alone in a column of text. An Orphan is a
short line of type left alone at the start of a new column.
In justified text widows and orphans are serious
blunders. Flush right and ragged left text is a bit forgiving towards widows
but orphans are inexcusable. The only solution to widows is to rebreak your
line endings throughout your paragraphs so that the last line is not
noticeably short. For orphans you must make sure that no column of text
starts with the last line of the preceding paragraph.
Highlighting Text
You can highlight certain important information is text by italicising, increasing the stroke weight by making it bold, change the typeface and then make it bold, or by changing the colour of the text. If you are changing the typeface of the text, you might want to reduce or increase the type size to match the typeface of the entire text. Also, if you choose to highlight your text by placing a field of colour behind it, maintain the left reading axis to ensure readability. This can be applicable to certain typographic elements - like bullet point and quotation marks - where appropriate as well.
Headline Withing Text
"A" Heads: Indicates a clear break
between topics withing a sections. "A" head are set larger than the text, in
small caps and in bold. "A" head can also extend to the left of the text.
"B" Heads: Subordinate to "A" heads. They
indicate a new supporting argument or example from the topic, so they
shouldn't interrupt the text as much as "A" heads do.
"C" Heads: They are uncommon but they highlight
specific facets of material within "B" head text. They don't interupt the
flow of reading.
Cross Alignment
Cross aligning headlines and captions with text type reinforces the architectural sense of the page while articulating the complimentary vertical rhythms.
Week 4: Basic
Describing Letterforms
Baseline: The imaginary line that is
the visual base of the letters.
Median: The imaginary line defining the x-height of
letterforms.
X-Height: The
height in any typeface of the lowercase "x".
Stroke: Any line that defines the basic
letterform.
Apex/Vertex: The point Created by joining 2 diagonal
stems.
Arm: Short strokes
off the stem of the letterform, either horizontal (E, F, L) or inclined (K,
Y)
Ascender: The protion
of the stem of a lowercase letterform that projects above the median
line.
Barb: The hafl-serif
finish on some curved strokes.
Bowl: The rounded form that describes a counter, it
may be open or closed.
Bracket: The transition between the serif and the
stem,.
Cross Bar: The
horizontal strike in a letterform that joins 2 stems together.
Cross Stroke: The horizontal stroke in
a letterform that goes through a stem.
Crotch: The interior space where 2 strokes
meet.
Descender: The
portion of the stem of a lowercase letterform that projects below the
baseline.
Ear: The stroke
extending out from the main stem or body of the letterform.
Em/En: An em is the distance
equal to the size of the typeface, an en half the size on an en.
Finial: The rounder non-serif terminal
to a stroke.
Leg: A short
stroke off of the stem of the letterform, either at the bottom of
the
stroke (L) or inclined downwards (K, R)
Ligature: The character formed the the
combination of 2 or more letterforms.
Link: The stroke that connects the bowl and the loop
of the lowercase g.
Loop: In some typefaces the bowl created in the
descender of the lowercase g.
Serif: The right-angled or oblique foot and the end
of a stroke.
Shoulder: The
curved stroke that is not part of a bowl.
Spine: The curved stem of the S.
Spur: The extension that articulates the
junction of the curved and rectilinear strokes
Stem: The significant vertical or oblique 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.
Tail: The curved diagonal stroke a the finish of
certain letterforms.
Terminal: The self-contained finish of a stroke
without a serif. They may be flat ("T" above), flared, acute ("t" above),
grave, concave, convex, or rounded.
The Font
To work successfully with type, we should
work with a full font and know how to use it.
Uppercase: Capitals letters, including accented
vowels, the c cedilla and n tilde, and the a/e and o/e ligatures.
Lowercase: Includes the same
characters as uppercase.
Small Capitals: Uppercase letterforms drawn to the x-height of
the font typeface. Primarily found in serif fonts as part of the expert
set.
Uppercase Numerals: Also
called Lining Figures are the same height as uppercase letters and are set
to the same kerning width. Mostly used with tabular material.
Lowercase Numerals: Also called Old Style
Figures/Text Figures, are set to x-height with ascenders and descenders.
These are less common in sans serif typefaces than serif.
Italic: Most fonts today are produced with a
matching italic but not normally in small caps. Obliques are usually based
on the roman form of the typeface.
Punctuation/Miscellaneous Characters: All fonts contain standard
punctuation marks but miscellaneous characters can change from typeface to
typeface.
Ornaments: Used as
flourishes in invitations or certificates. Usually provided as a font in a
larger typeface family. Only a few traditional/classical typefaces contain
ornaments as part of the entire typeface.
Describing Typefaces
Roman: The uppercase forms are
derived from inscriptions of Roman monuments. A slightly lighter stroke of
this is called "book".
Italic: Named after 15th century Italian handwriting.
Obliques are based on Roman forms of the typeface.
Boldface: Characterized by a thicker stroke than
Roman. Depending on the stroke width it can be known as "semibold",
"medium", "black", "extra bold", or "super". In
some typefaces the boldest rendition may be called "poster".
Light: Lighter stroke than Roman. Even
lighter than this is "thin".
Condense: A version of the Roman. Even more condensed than this
is called "compressed".
Extended: An extended version of Roman.
Comparing Typefaces
It's worth noting the differences that render each typeface unique rather than their similarities. Beyond the differences in x-height, the forms vary in line weight, stroke widths and even in feeling. Comparing typefaces tells you how you feel about type and specific typefaces, and what you bring to the discussion of choosing appropriate typefaces. When you study other designers work you'll notice that people who work seriously with type might go their entire career using only one or two typefaces.
INSTRUCTIONS
Module Information Booklet
<iframe src="https://drive.google.com/file/d/1e_gGLKcLUbJ8WXAD5rGqLhvleztoS7U3/preview" width="640" height="480" allow="autoplay"></iframe>
Task 1: Exercises
Description -
1) Type Expression:
Compose and express the 4 words roll, jump, melt and chill. First sketch 4 ideas for each word and once the best one is approved of use Adobe Illustrator to digitize them. Only use one of the 10 typefaces provided, keep the illustrations grayscale - no colors - and avoid adding extra elements to the words.
2) Text Formatting:
With the given text and text formatting i.e. type choice, type size, leading, line-length, paragraph spacing, forced-line-break, alignment, kerning, widows and orphans, and cross-alignment; use Adobe InDesign to arrange and organize the text and appropriate images of our choice to demonstrate what we have learnt. Color is not allowed and we can only use the 10 typefaces provided.
Marking Criteria -
- Each expression has been explored with a great variety of ideas.
- All the expressions are perfectly matched in meaning.
- The typographic solutions are extremely well composed and balanced.
- The expression is excellently crafted (technical), memorable and engaging.
- The textual information is extremely well formatted (font size, line-length, leading, alignment, cross alignment, reading rhythm, information hierarchy, sans widows and orphans).
Timeframe -
Week 01 - Week 05
Deadline -
Week 06
Learning Goals -
a) To be able to compose and express using textual information
b) To be able to format text for effective
communication
PROCESS
3.1 Type Expression
Research
|
| Figure 3.1.1 Reference Images for Type Expression Week 2 (24/04/2025) |
Sketches
1. ROLL
|
| Figure 3.1.2 Sketches for Roll Week 2 (29/04/2025) |
Roll was the one I had to redraw he most. The
first sketch is expressing each individual letter of roll, rolling to the
right. The second sketch shows the letters of roll that have become the
outline of a ball or circle, rolling to the right. The third sketch is
similar to the second but in this one the letters from a spiraled ball. The
fourth sketch is an out of the box idea I had where I tried to make the
letters look like a tissue roll. the circular end of the "r" is the hole in
the roll and the other letters are close together to make the tissue falling
off the roll.
I presented these to Mr. Max and he
told me the best one was the third sketch but to put the "o" in the middle
and other letters around the "o". This is the fifth sketch. When I showed
this one to Mr. Max he said that because the "R" is flipped it makes it
difficult to read, so he suggested I fit all the letters inside the circle
without changing the place of the letters. The sixth and last sketch is this
one, and this is the idea I went with for the final outcome.
2. JUMP
|
| Figure 3.1.3 Sketches for Jump Week 2 (29/04/2025) |
I had a little trouble coming up with ideas for jump as it is
a pretty simple word and most of the ideas have been done. The first sketch
is inspired by the way people instinctively put their hands up when they
jump, I didn't want to draw hands on the letters so i used the ends of the
letters. The second sketch is the obvious one with the letters "U" and "P"
jumping up. The third sketch I did because of skipping ropes. The letters
are jumping over the skip rope which makes that curved shape. The
fourth sketch is also of the letters itself jumping but this time they are
all jumping at the same wavelength.
These sketches
were not creative enough so I did ore research and found a way to make the
letters "J" and "M" look like people who were in a jumping position, in
addition to that i rearranged the letters to look like there were in
mid air.
3. MELT
|
| Figure 3.1.4 Sketches for Melt Week 2 (29/04/2025) |
For the first sketch the letters have come closer together and distorted from melting. The second sketch shows the different stages of melting through all the letters. The third sketch is supposed to be all the letters inside an ice cube shape and the end of the "t" is melted water from the ice cube. The last sketch has a similar concept to the first sketch but the letters are melting in a different way. I used the first sketch for my final illustration.
4. CHILL
|
| Figure 3.1.5 Sketches for Chill Week 2 (29/04/2025) |
First sketch I did for chill was very basic, I took the idea that when something gets colder or chilled, the atoms get more rigid and closer together, hence why the letters are big block letters and close together. The second sketch is inspired from getting a chill down the spine. In animations this is illustrated using spikes at the sides. For the third sketch I turned the "c" in chill into a snowflake. And the last sketch is based on the other meaning of chill which is to "take it easy".
Digital Exploration
1. ROLL
|
| Figure 3.1.6 Digital Exploration for Roll (06/05/2025) |
For roll I tried to use the curve tool and the direct selection tool to reshape the actual letter from the type but it wasn't working so i used rectangles to make the letter "R" but the other letters are from the typeface. I used the circle outline to see where to keep the letters but didn't keep it for the final one.
2. JUMP
|
| Figure 3.1.7 Digital Exploration for Jump (06/05/2025) |
For jump I added the arm of the "J" at the end using a rectangle that I curved using the curve tool and, 2 circles for the heads of "J" and "M". Then I used the direct selection tool to manipulate the shape of the "M" and rotated the letters into position.
3. MELT
|
| Figure 3.1.8 Digital Exploration for Melt (06/05/2025) |
Melt was an easy one. I used only the warp tool to distort the letters and then moved them around until I was satisfied with the way it looked. I also played with the stroke point a little to see what fit best.
4. CHILL
|
| Figure 3.1.9 Digital Exploration for Chill (06/05/2025) |
I used a simple letter "c" here with the capital letters "HILL" because it made the process simpler. The first needle on the snowflake is made using rectangles and I just copied and pasted the rest of the needles in the appropriated positions.
Animation
|
| Figure 3.1.10 Animation Frames for "ROLL" Week 4 (18/05/2025) |
|
Figure 3.1.11 Animation Frames for "ROLL" Week 4 (18/05/2025) |
|
Figure 3.1.12 Animation Frames for "ROLL" Week 4 (18/05/2025) |
|
Figure 3.1.13 Animation Frames for "ROLL" Week 4 (18/05/2025) |
Initially my plan was to have the word roll out of the screen to the right only but that seemed a little bland and unfinished so I added more frames to have it roll back in from the left and create a seamless loop.
3.2 TEXT FORMATTING
Research
Figure 3.2.1 Reference Images for Text Formatting Week 5
(21/05/2025)
I used references I found online as inspiration for my sketches. I didn't use many of the references because I felt that they didn't fit the task at hand but they were the closest I found to what I wanted to do.
Sketches
|
| Figure 3.2.2 Digital Sketches for Text Formatting Week 6 (26/05/2025) |
When I did these sketches I was going for a more artistic look. Something eye-catching and unique but after getting feedback from Mr. Max I realized that it was a more minimalist style that they were looking for, with more white spaces. So I went with the last sketch shown in the figure.
FINAL OUTCOME
Type Expression
|
| Figure 4.1 Type Expression Final Outcome (JPG) Week 4 (13/05/2025) |
|
| Figure 4.3 Final Animation "ROLL" (GIF) Week 4 (18/05/2025) |
Text Formatting
|
|
Figure 4.4 Text Formatting Final Outcome (JPG) Week 6
(25/05/2025)
|
|
|
Figure 4.6 Text Formatting Final Outcome With Grids (JPG) Week
6 (25/05/2025)
|
HEAD LINE
Typeface: Bembo Std
Font/s: Bembo Std Bold
Type Size/s: 36 pt
Leading:
36 pt
Paragraph spacing: 0
BODY
Typeface: Bembo Std
Font/s: Bembo Std Regular
Type Size/s: 9 pt
Leading:
11 pt
Paragraph spacing: 11 pt
Characters per-line: 57
Alignment:
left justified
Margins: 123 mm top, 26 mm left + right + bottom
Columns:
2
Gutter: 10 mm
FEEDBACK
Week 2
General Feedback: Try not to add any extra elements to the words like
shapes or lines, a little distortion is okay but the text must be legible.
Do not use any colours, it must be only grayscale.
Specific Feedback:
Redo the sketches for roll and jump. Think outside the box and try to make
something unique.
Week 3
General Feedback: Use at least 8 frames for the animation. The more
frames there are the smoother the animation will be.
Specific
Feedback: Try another sketch for roll because the last one was hard to read.
Week 4
General Feedback: Use leading, kerning and tracking to make text and
paragraphs look better. It is better to use your eyes and check instead of
using a ruler because even if all the letters have equal spacing it can
still look odd.
Specific Feedback: Play with the stroke point a little
bit and see if a bolder stroke makes the sketches look better.
Week 5
General Feedback: Mr. Max further explained and showed us examples of how we
can arrange the layouts.
Specific Feedback: For the text formatting it
is better to do cleaner simpler layouts while playing with the title a
little bit. Being neat and legible is most important.
REFLECTIONS
Experience
Out of all the classes I am taking this semester, Typography is the
most clear-cut. All the assignments and tasks had clear instructions on how
to complete them and how to submit them.
Before I started, I had
already used and gotten familiar with Adobe Illustrator and Adobe Photoshop
but this was my first time using Adobe InDesign. It was explained in class
very well, I got the hang of it almost immediately.
Overall I would say
that during the first week I felt overwhelmed from all the new things I
would learn to do but it wasn't that hard especially with the lecturers
feedback.
Observations
I observed that when we follow the lecturer as he is doing an example
of the task it helps more than just listening to the lecture. After a while
it can be hard to remember everything that was said but once you do it
you have the memory of exactly how it was done.
I also noticed that
when it comes to formatting paragraphs it's better to go for a cleaner,
neater, and more legible layout but we can be a little more artistic with
the headings.
Something else I observed was that right now it's not as
easy to do something completely unique and not-done-before since there have
been so many creative minds before me but it is fun to see that there are
others who thought like me.
Findings
I need to work on recording my process a little more. I tend to forget in
the moment when I'm doing the work and have to either redo the work or try
to reconstruct what I already completed to get images that I can submit.
I
also found that I need to do more research and find inspiration from more
places before I start sketching. It helps to get a better feel of what is
expected and I learn a lot more designs and techniques this way.
I
should also complete the tasks closer to when they are assigned, after too
much time the things discussed during the lecture aren't as clear as they
were.
FURTHER READING
|
| Figure 7.1 Book Cover Week 6 (29/05/2025) |
This book is Typographic Design: FORM AND COMMUNICATION by Ben Day, Philip B. Meggs, and Rob Carter. It is about "providing a concise yet comprehensive overview of the information, vocabulary, tools, and methods used in effective typographic-design practice." as quoted in the Introduction.
From this book I read the chapter, The Basic Principles of Legibility.
Legibility is achieved by controlling the qualities deep-rooted in typography to make type readable to allow readers to comprehend it with ease. This is important because designers have a responsibility to their readers to communicate clearly through their art.
The most legible typefaces are those characterized by the three qualities legibility is dependent on; contrast, simplicity, and proportion. A prime example of this would be typefaces like Garamond, Baskerville, and Bodoni. However, well designed typeface does not guarantee legibility, factors including the communications context and the subtle adjustment of letterforms and their spatial relationships effect how easily typography is read.
Distinguishing Characteristics of Letter
All twenty six letter of the alphabet have gradually evolved over the years and it is no coincidence that each individual letterform developed to improve the communication process. In spite of the countless variations of size, proportion, weight and, elaboration the basic structure of each letterform must remain the same.
|
| Figure 7.2 Basic Structure of Letterforms |
Letters can be put in four groups according tho their contrasting properties. These are letterforms with strokes that are vertical, curved and a combination of vertical ad curved. Obviously letters with similar characteristics are more likely to be confused.
|
| Figure 7.3 Four Groupings |
The upper halves of letters provide more visual cues for letter recognition than lower hales. Similarly, the right halves of letter are more distinguishable than the left halves.
|
| Figure 7.5 Right and Left Halves of Letters |
|
| Figure 7.4 Upper and Lower Halves of Letters |
There is a lot of controversy surrounding whether serif or sans serif typefaces are more legible. One side claims that serif reinforces the horizontal flow of each line hence it's more legible and serif typefaces offer more character definition. However this argument is negligible as reader familiarity and the control of other factors are for more important.
The Nature of Words
There are two important factors involved in the reading process: word shape and internal pattern. Words are identified by their distinct word shapes permitting the reader to grasp content easily. When these internal spaces are altered enough, the perceptual clarity of a word might also be altered. The weight of letters is crucial to word recognition and influences an internal pattern.
|
| Figure 7.6 Word Shape |
Capital and Lowercase Letters
Text that is entirely in capital letters loses some of its legibility. When text is all capitals it is characterized by a straight horizontal alignment, creating an even word outline. A reader would not be provided with the necessary visual cues to identify the words.
TEXT SET IN ALL CAPITAL LETTERS ALSO USES A
MUCH GREATER AMOUNT OF
SPACE THAN TEXT SET
IN LOWERCASE LETTERS OF THE SAME SIZE. AS MUCH AS
35
PERCENT MORE SPACE CAN BE CONSUMED WHEN USING ALL
CAPITAL
LETTERS.
On the other hand, text set in lowercase letters are more distinct due to their irregular word shapes and internal patterns. A variety of letter shapes, ascenders, and descenders provides contrasts that assure satisfactory perception. Once a specific word shape is perceived, it is stored in the reader’s memory until the eye confronts it again while reading.
Interletter and Interword Spacing
Though not very noticeable, the spacing of letterforms significantly impacts legibility. Typographic texture and tone are affected y the spacing of words, letters, and lines.
|
| Figure 7.7 Spacing of Words, Letters, and Lines |
It is not easy to generalize which is the best size of type, how long lines should be or how much is sufficient enough space between lines - these choices are based on the designers judgement, no guideline can replace the sensitive, trained eye.
Type that is too small or too large makes reading difficult. Small type reduces visibility while larger type forces readers to perceive in sections rather than as a whole.
An appropriate line length is crucial to achieve a nice reading rhythm. Overly short or long lines will tire a reader as excess energy is spent reading long lines; it can also be hard to find the next line; and short lines require more eye movement when changing lines.
|
| Figure 7.8 Longer Line Length |
|
| Figure 7.9 Shorter Line Length |
inadequate space between lines, the eye takes in other lines as well. If lines are too widely spaced, a reader may have trouble locating the next line.
Typefaces with larger x-heights need more interline spacing than those with smaller x-heights. Also, when working with display types, the frequency with which ascenders and descenders occur makes a difference. They can optically lessen the amount of white space between lines. Optical adjustments in display types should be made when spaces between lines appear inconsistent because of ascenders and descenders.
|
| Figure 7.10 Interline Spacing Intervals |
A typeface that is too light cannot be easily distinguished from their background and a typeface that is too heavy may lose its internal pattern of counterforms.
|
| Figure 7.11 How Weight Affects Legibility |
Character Width
Generally a condensed typeface is more difficult to read than an expanded typeface.
|
| Figure 7.12 How Character Width Affects Legibility |
Italics and Obliques
|
| Figure 7.13 Black, White and Grayscale Text |
Appropriate contrast between type and its background requires that designers carefully weigh the three basic color properties of hue, value, and saturation. Hue and tone are simply more specific names for color. Value refers to the lightness or darkness of a color, and saturation is the relative brightness of a color.
|
| Figure 7.14 Violet Type on Blue Background |
By exploring the roles of value, hue and contrast you can improve the legibility of visually challenging typefaces with extreme proportions.
|
| Figure 7.15 Extreme Typefaces Made More Legible |
The smaller and more delicate a type is, the more contrast it will require to be legible enough.
|
| Figure 7.16 Smaller Types Made More Legible |
If you find it necessary to present large amounts of text type in color, try increasing slightly the amount of space between lines. Even an additional point of space can make a significant difference, and a reader might be encouraged to continue rather than stop.
|
| Figure 7.17 The Effect of Typographic Colour |
Justified and Unjustified Typography
setting, all lines are of equal length. Lacking are visual cues that promote easy reading.
Comments
Post a Comment