Professional Documents
Culture Documents
To
TYPOGRAPHY
Ust.Ahmed Magdi
Introduction
Design helps the systems of daily life run smoothly, letting
users and readers ignore how things are put together. Design
should sometimes announce itself in order to shed light on
the system, exposing its construction, identity, personality,
and politics.
– Ellen Lupton (Lupton, 2004, p. 173)
Typography shapes language and makes the written word
‘visible’. As the screen is increasingly becoming the way we
acquire information, the manner in which text is displayed matters.
Our processes of reading and writing are fundamentally reliant
upon our abilities to use and interpret words. Typefaces can link
the writer and the reader in new ways that go beyond the mere
exchange of words on a page. The form and function of type, then
plays a significant role in our ability to make meaning. Moreover
with the proliferation of images in media-rich screen environments
and the unrelenting competition for the user’s attention, words
must also be able to attract, inform and seduce quickly. Helfand
(2001) contends that technological advances pose new creative
challenges for digital typography so it “must be reconsidered as a
new language with its own grammar, its own syntax, and its own
rules” (¶ 1).
To operate in this increasingly image-driven world, type has
evolved as its own visual entity. The distinctiveness of typefaces,
how they function on-screen, how they have evolved for the
computer and how they affect legibility and readability are vital
topics influencing digital type designs today. Finally a move
toward kinetic type also poses considerations for digital
typography practice and digital realms as spaces for reading and
writing.
Introduction to Typography 2
Defining Type
The Screen
Introduction to Typography 4
The screen, as a socio-cultural construction, is for watching and
consequently distances us from writing. The screen moves us into
a world of optical illusion, where words become images – a
‘representation’ of printed text. As there are no physical
letterforms but a collection of computer coding consisting of
pluses and minuses; the text is in fact simultaneously visible and
invisible (Purves, 1998). What we see on screen are “little
unconnected dots that trick our eyes into recognizing pleasant
shapes” (Spiekerman & Ginger, 2003, p. 21). Screen colours are
not created from CMYK (Cyan, Magenta, Yellow and black or
‘key’) but broken down in to course lines or dots in RGB (Red,
Green and Blue), where black is not a colour but the absence of
light. In this environment type struggles to be seen. Script or
trendy fonts in particular have no place on-screen as they “hide
more than they reveal” (Spiekerman & Ginger, 2003, p. 73).
Written texts can provide the reader essential visual
information which becomes part of the process of reading. On-
screen, long texts are typically broken up into chunks so they can
be readily accessed by search engines or hypertext links. Designers
use typography to assist readers to navigate through masses of text
by providing visual cues, such as paragraph indents, to indicate a
new idea or highlighted links, to signal a pathway to further
information (Lupton, 2004). Typography has often been touted as
a tool to assist with readability; however, Lupton (2004) argues
that the design of type actually assists readers to ‘avoid reading’ (p.
63).
The screen emphasizes the visual character of writing. Loxley
(2004) speculates that in the future written language might be
replaced by a system of symbols, ideograms such as dingbats. A
single system of symbols could mean a universal language – read
by anyone. The ‘@’ symbol is an example of how the status of a
typographic symbol can become ubiquitous. Dingbats as a
typographic mark, act as signs that express an idea that would
often take up too many words to explain. These kinds of symbols
act as type; understood by a broad cultural audience.
Introduction to Typography 5
Computer Fonts
Kinetic Type
Typography can now be endowed with dramatic qualities,
among them, subtext (what is really happening beneath the
surface?) and context (how might the surface be extrapolated
and extended across a situation or story?).
–Jessica Helfand (Helfand, 2001, p.117)
In interactive environments, type is often silent and static and
in constant competition with sound and image. With new
technologies type is no longer confined as it can talk – in any
language, with music and at any volume (Helfand, 2001). With
motion pictures, animation and web spaces, type can move through
space and time. In these environments, letterforms become “agents
in an increasingly complex layering of information” (Miller, 1996,
p. 1). This shift takes the traditional printed page, that relies on
hierarchies of small to large, to represent depth to an environment
of spatial and temporal dynamic – near-to-far (Miller, 1996). The
reader navigates textual displays with a sense of moving deeper
and deeper into a document (Miller, 1996). Type then becomes
dimensional or sculptural.
Introduction to Typography 8
Digital texts are infinitely fluid and malleable. In virtual
spaces, typefaces can rotate, twist, extrude, slide, dance, dissolve,
crumble, explode, etc. In this sense, Bolter and Gromala (2003)
argue that digital writing can empower writing as an art of visual
expression. For example, Excretia is a typeface that Diane
Gromala made and used in her publication with Jay Bolter entitled
Windows and Mirrors: Interaction Design, Digital Art, and the
Myth of Transparency. With Excretia the digital letters change and
morph as the writer engages with the text. The look of the
‘biomorphic type’ is dependent upon the heart rate, respiration and
galvanic skin response of the writer. Using a biofeedback device,
data continuously streams affecting the visual character of the
typeface in real-time; making type not just a productivity tool but a
reflective and interactive experience that bridges text and image
(Bolter and Gromala, 2003).
Conclusion
“To think with type is to be in a partnership with the medium—
with its history, its discourse, its systematic nature as a
common cultural artifact.”
– Ellen Lupton (Hunter, 2006, ¶4)
Type is ubiquitous. With the digital realm extending our
abilities to reach diverse audiences, the way in which we
communicate becomes just as important as what we communicate.
It is much easier for others to understand our message if we put in
the right voice – the voice of type – the visual language that links
writer and reader (Spiekerman & Ginger, 2003). Typefaces can
position the reader in a text and bring emotion and character to
writing, beyond the words and intentions of the author.
The post-typographic world has seen an evolution in typeface
design. With technical advances type now lives and breathes in
digital spaces. As the space of the screen renders fonts different
than that of print, legibility and readability influences type designs.
As we are increasingly bombarded with images, sounds and
Introduction to Typography 9
videos, the visualization of language remains essential to capturing
limited attention spans.
TYPOGRAPHICAL ELEMENTS
Typographic strategies help steer visual traffic onto and through your pages.
Typographic strategies include:
• Dropped initial (decorative) initials
• Graphics
• Color
• Bolding and other type weight strategies
• Sidebars
• Pull outs / pull quotes
• Bullets
• Screens and tints
• Reversed type
• Crossing heads
• Variation in point size
• Extra leading
• Subheads, decks, teases
• Exploding the opening paragraph
Mixing typefaces? No surefire tenet, except that less is more. Some faces
are nearly fool proof. Many old-style Romans can be used for just about any
job: Caslon, Garamond, Goudy; as can almost all transitional romans -
Times-Roman, Palatino, Baskerville, New Century Schoolbook. Some
designers vary the weights and widths of the same face to get an array of
affectations without endangering unity. Two or three faces per job are
plenty.
Introduction to Typography 11
UC vs. lc We are creatures of habit and used to reading downstyle.
Lowercase structure is more readable because ascenders and descenders
better shape the words we read. UC takes up more room, is more
monolithic, monotonal, difficult to read, but quite suitable as display.
TYPE SPECIFICATIONS
Introduction to Typography 14
Understanding Typography
What is a typeface—a font?
When you refer to a “font,” it is helpful to understand the meaning
of the term. The terms “typeface” and “font” are often used
interchangeably, but a font is a typeface in a specific size, or, more
accurately, a font consists of three elements: typeface (e.g., Arial,
Times New Roman), weight (e.g., Bold or Italic), and size (e.g., 12
point).
A typeface is a set of characters (letters and numbers) which has
been designed with a certain distinctive shape and is given a name.
The “family” or group name of the typeface is often named after its
designer; or the designer may give it a name that suggests its use,
i.e., Bookman or Century Schoolbook.
Managing fonts was a thorn in the side of graphic designers.
PostScript fonts consisted of a screen font (which kept track of the
font’s spacing characteristics and kerning pairs) and a printer or
outline font (which contained the information about each character
shape).TrueType fonts contained all the information in only one
part. But TrueType fonts often caused problems when printing to a
PostScript imagesetter.
OpenType Typefaces
We now have OpenType fonts, which are based on Unicode (an
international, cross-platform standard that assigns numbers to the
characters in a font). Before Unicode, the recognized standard was
ASCII, which has a character set of 256 characters. But, Macintosh
and Windows use different encoding schemes. Unicode enables a
character set of up to 65,000 (enough characters to include Roman,
Greek, and Cyrillic alphabets, all in the same font). However, all
OpenType fonts do not necessarily have an expanded character set.
Introduction to Typography 15
Special Characters and Glyphs
A glyph is a specific form of a character. For example, in certain
fonts, the capital letter A is available in several forms, such as
swash and small cap. You can use the Glyphs palette to locate any
glyph in a font when using InDesign. OpenType fonts such as
Adobe Caslon Pro provide multiple glyphs for many standard
characters.
OpenType Font Compatibility
OpenType fonts are supported on Mac OS X, Windows 2000 and
Windows XP. With Adobe’s ATM (Adobe Type Manager), you
can use them as far back as Mac OS 8.6 and Windows 98. There
are some older applications that do not recognize PostScript
OpenType fonts. These fonts may not appear in their font menus.
The Adobe applications are: Illustrator 7 and 8, Photoshop 5.0,
Adobe Photo Deluxe Versions 1-3, and Image Ready version 1.
Acrobat version 4.05 and 5 work all right, but text featuring
extended OpenType characters may not copy and paste correctly or
be searchable, depending on how the PDF was generated.
When some documents that are created in some Mac OS
applications are opened in the Windows version of the application,
incorrect fonts are displayed (Even though the same fonts are
installed on Windows). This problem occurs in common Windows
applications such as Microsoft Word, Adobe PageMaker and
QuarkXPress.
Getting well-set type
Good typography is spacing, the way letters and words fit together.
Good spacing is something you achieve by paying attention to how
the printed page looks. Carefully spaced type has an even texture
without black spots from colliding characters or rivers of white
from ill-fitting words. Composition is still not fully automated in
any desktop application. Achieving good spacing involves turning
on kern pairs, using the “Spacing attributes” and “Hyphenation”
Introduction to Typography 16
features, tracking, kerning, and kern pairs. Some programs provide
you with these features and some only partially.
In the days of metal type, spacing was loose by today’s standards,
because it had to be. When photocomposition came in at the end of
the 1930s, tight spacing became fashionable. Now, tight letter
fitting is not as acceptable. Tight spacing requires more
adjustment. If you bring letters close together, other letters—
spaced normally by older standards—look loose. You adjust them,
and still others seem out of balance. Even worse, tightly spaced
type is likely to be hard to read (letters run together), it has poor
color (little optical blobs form when characters get close to each
other), and the characters may appear deformed because of the lack
of balanced space between them.
Well-set type aims at balance and transparency. Letters and other
characters are surrounded by spaces that appear to be equal. Since
every character has a unique shape, the spaces between the
characters will vary, and ideally you want them to look equal.
Ligatures
Ligatures are two or more characters fused into a single character.
One example is the ampersand, which is a stylized abbreviation of
et, the Latin word for “and.” InDesign allows you to substitute
standard ligatures for the lowercase fi and fl combinations.
Whether or not you use ligatures depends on the font you are
using.
Letter spacing
Letter spacing is the distance between letters and includes any
kerning or tracking values you may have applied. A character’s
width is determined not just by the character itself, but also by the
space that the font designer adds around the character
(sidebearing). If you are very particular about how your printed
page looks, then InDesign has more controls than word processing
programs. InDesign ships with the “Desired” letter spacing set to 0
Introduction to Typography 17
percent, which means it leaves the font’s spacing alone when it is
not justifying text. But for justification, you may want to set the
letter spacing to a minimum of -2% to a maximum of 2% in which
most of the word spacing values are used for justification. These
adjustments are expressed as percentages of the spaceband’s width,
which varies from font to font. And, you can change these
percentages to suit your needs.
Other Spacing Problems
Runs of straight-sided letters must be spaced carefully, particularly
when set in sans serif type, to avoid a hard-to-read, picket-fence
effect. To get around this, avoid leaving spaces that are either the
same width as the stems of the characters or as the width of any
opening inside letters like u and m. But do not use the spacing of
straight-sided letters as a model for other pairs. If double o’s are
too close together, for example, the eye will see a blob between
them; such letters should be spaced a bit further apart to avoid this.
Some letters have a tendency to merge visually, forming a different
letter. The rn combination is especially likely to do that, and must
be spaced apart in many typefaces.
Kerning
If letters and other type characters were rectangular, we wouldn’t
need to kern them—the spacing on either side of each letter would
combine to yield evenly spaced type. But the irregularities that
make each character distinctive and legible also make them fit
awkwardly with some other characters. So there is a need for kern
pairs.
InDesign has two kinds of automatic kerning methods: Metrics and
Optical. Either method is adequate for small type sizes. If anything
is noticeable, then you can always resort to manual kerning.
Character pairs to be kerned, and kerning amounts have already
been specified by the font manufacturer, who specifies an
adjustment of the spacing between certain letters, such as A and V,
to make them more aesthetically pleasing. Automatic kerning can
Introduction to Typography 18
be applied locally by selecting a range of text, then choosing
Metrics or Optical from the Control palette (or the Character
palette).
Metrics Kerning
Metrics kerning uses the kern pairs that are built into the font, or
most fonts. The more expensive typefaces tend to have between
500 and 1000 kerning pairs. The cheap font you may have
downloaded from the Web may not have any.
Optical Kerning
This method adjusts the spacing between adjacent characters based
on their shapes and not on kerning pairs. If your font includes few
built-in kerning pairs, you are better off using Optical Kerning.
Decorative and novelty fonts are more likely to have few kerning
pairs.
Tracking
Tracking refers to tightening or loosening all space to the same
degree, without regard for variations in letter shape. If type is
evenly spaced before tracking, it remains that way. If it’s
irregularly spaced to begin with, tracking is likely to exacerbate the
irregularity. Tracking also allows you to compensate for the fact
that, when type is made larger or smaller, the spaces between the
letters may not look right if they are enlarged or made smaller
proportionally.
If you use a typeface that was designed for text setting, tracking
tightens large type, loosens tiny type, and leaves the text sizes
alone. If you are using a display face (one designed to be used at
14 point or above) the track should make no changes in that range
but tighten it at larger sizes and loosen it at smaller size.
Ideally, do not try to set text with display types. You can usually
get away with using text type at large sizes, thanks to tracking, but
it’s always preferable to use a titling or display cut of the same
typeface if it is available for headlines.
Introduction to Typography 19
Word spacing
Word spaces should be approximately equal. In justified text, in
which the extra space is distributed between words, spaces must
appear equal. In today’s technology, our digital fonts include
word-space characters, sometimes called spacebands (the character
that is “printed” when you press the spacebar). Spacebands and
word spaces (among other things) are usually measured in ems.
Although you may hear various definitions of the em, the most
definitive, and the one InDesign uses, is a square that’s the width
and height of the point size being used: for example, in 12-point
type, the em is a square 12 points by 12 points.
Word spaces in many typefaces should be small, around a quarter
of an em, which is the width of the space character in many text
fonts. Spaces should be proportional to the typeface design; for
example, narrow faces need narrow word spaces. They should also
reflect the letter spacing—tighter letters call for smaller word
spaces. Use the same word spaces between sentences as between
words (type the Spacebar once, not twice, at the end of sentences);
the punctuation adds emphasis and a bit more air.
As with all typographic settings, word spacing must be evaluated
from a printed proof for each typeface. Some fonts have much
wider or narrower spacebands, but even if that were not so, the
spaces need to meet your visual test.
Hyphenation
In theory, if the line is long enough and the type size small enough,
you should be able to justify text without breaking words.
However, a long line and small type is probably difficult to read.
InDesign automatically hyphenates words when you justify text. In
InDesign you can set the number of consecutive hyphens and the
hyphenation zone. Even though hyphens are not always desirable,
a few hyphens are preferable to poor spacing, often the only
alternative.
Introduction to Typography 20
Alignment of text
Text alignment plays a part in the readability of a document. Text
aligned on the left is the most readable. It can use the optimum
word spacing and letter spacing that the designer built into the font.
With the alignment on the left, as you read your eye can easily find
the beginning of the next line. When you align text left, make an
effort to keep the right “ragged” side as smooth as possible. Left
alignment is certainly preferable for columns.
When you justify text, the computer forces the lines to extend to a
certain length by adding or deleting space between the words, and
sometimes between the letters. The greatest problem with justified
text is the uneven word spacing. This irregularity is visually
disturbing and interrupts reading. When the text line is longer
(across a page) and the font is not large, there is less chance of
uneven spaces between words.
Text aligned on the right creates a definite look and can be used for
certain effect. There is a drop in readability because your eye must
find the next line to read, and it is not consistent. Robin Williams
suggests that when you use a right alignment for the look it creates,
emphasize the look. Instead of keeping the ragged edge as smooth
as possible, exaggerate it.
For a special effect, use the “Force justify” alignment option to
stretch a single line of text—a headline, for instance—to fill a page
or column width. If you want the spacing to be more evenly
distributed, create non-breaking spaces so that the line of text
would be treated as one long word. In Word, you use the
justification setting and end the line using the Shift+Enter key
combination.
Spacing between lines
The vertical space between the lines of text usually is tied in
automatically to the font size. However, both Word and
WordPerfect allow you to set a precise line height. You may want
Introduction to Typography 21
to have more space between your lines, or you may want to mix
some font sizes within lines of text, which would cause uneven
spaces between the lines of the paragraph unless you specified a
precise line height or leading. A typesetting program such as
InDesign has what it calls “leading” settings. The default is “auto.”
It adds approximately 120 percent of the point size of the font as
the leading setting. You may wish to set your own leading setting
for more control.
Spacing Between Paragraphs
Pressing the Return or Enter key twice between paragraphs (or
after headlines) separates the text with big, awkward gaps. It also
makes it possible to end up with a blank line at the top of a
column. Learn to use styles, and specify in the style the space
before and/or after paragraphs. You can determine exactly the
amount of space you want after headlines and before and after
subheads. A larger space before a subhead and a smaller space
following it tells the reader a new subject is being introduced, and
that it is separated from the preceding material and refers to the
following material.
Underline
Avoid using the underline feature. Underlining was used with
typewriters because typewriters couldn’t set italics. Italicize titles
of books. If you underline italicized type, you are being redundant.
In addition, underlined text usually means that clicking on that text
will take you to another place, as it often indicates a hyperlink.
You may sometimes be tempted to underline to emphasize a
headline or a word, but it is better to use bolding or, for a headline,
a different typeface. Drawing a rule (a line) under text is very
different from underlining. When you draw a rule you have control
over how thick it is, how long it is, and how far below the type it
sits. When you tell your computer to underline, the line bumps into
the letters and obscures the descenders.
Introduction to Typography 22
Using All Caps
Use all capital letters sparingly. They work sometimes when you
consciously choose to accept their lower readability because you
want the look of all caps. We read words by their letters and also
by the shapes of the words. Characters in words set in all caps have
the same shape, so you have to read these words letter by letter.
You can often find an alternate solution to using all caps, such as
bold lowercase, a different typeface, more space surrounding the
text, or a rule beneath or above the text.
Typesetters Quotes
The more advanced word processing programs and page makeup
programs type real quotes (curly quotes). In every program that
does, take advantage of the feature that types them for you
automatically. But do not type curly quotes when you need inch
and foot marks, and don’t type an opening quote at the beginning
of a word that really needs an apostrophe.
Indents
A standard typographic indent is one em space. In 10-point type,
an em space is 10 points wide; in 36-point type, an em space is 36
points wide. When your type is in columns, a half-inch indent is
way out of proportion. You can make first line indents a part of
your styles.
Introduction to Typography 23
Arial Rounded MT Bold, Regular
Baskerville Old Face, Regular
Bauhaus 93, Regular
Bell MT, Regular, Italic, Bold
Bernard MT Condensed, Regular
Bernhard Modern Std, Roman, Italic, Bold, Bold Italix
Century, Regular
Century Old Style Std, Regular, Italic, Bold
Century Schoolbook, Regular, Italic, Bold, Bold Italic
Chaparral Pro, Light, Semibold, Semibold Italic,
Introduction to Typography 25