God (or devil) in the details: text typography

God (or devil) in the details :
text typography

Keith Tam

1 Orthography

2 Figures (numbers)

3 Detailing

4 Alignment

5 Hyphenation & justification (H&J)

1
orthography

An orthography is a standardized system for using a
particular writing system (script) to write a particular
language. It includes rules of spelling. Other elements
of written language that are part of orthography include
hyphenation, capitalization, word breaks, emphasis, and
punctuation. (Wikipedia)

Capitals (uppercase) and small letters (lowercase)
Inherent in the language, not simply stylistic variants

ABCDEFG abcdefghij
HIJKLMNO klmnopqr
PQRSTUV stuvwxyz
WXY&Z
Capital and small letters have specific uses in the English
language. Other languages might have other orthographic
conventions for the use of capital and small letters.

Different capitalisation methods for a book title
(inherent in the orthography)

The Medium is the Message most common

The Medium Is The Message only important words
need capitalisation

The medium is the message preferred for clarity,
but not common

the medium is the message incorrect

THE MEDIUM IS THE MESSAGE
this is a stylistic choice, not
an orthographic convention

Stylistic variants denoting a ‘title of work’ using sentence case
(external to the character set)

The medium is the message used in manuscripts
but not typesetting

The medium is the message denotes a title by
convention

The medium is the message does not commonly
denote a title

The medium is the message does not commonly
denote a title

Common errors

Everything in it’s place
Its a beautiful day
Rock ‘n’ roll
DVD’s
The 1980’s

Common errors

Everything in its place belong to ‘it’

It’s a beautiful day = it is

Rock ’n’ roll use an apostrophe for what’s missing

DVDs no apostrophe for plurals

The 1980s no apostrophe for decades: it is plural

Hyphens are different from dashes

Like oratory, music, dance, calligraphy -- like
anything that lends its grace to language --
typography is an art that can be deliberately
misused.

Like oratory, music, dance, calligraphy-like
anything that lends its grace to language-
misused.

Hyphens are different from dashes

European style: word space + en dash + word space

Like oratory, music, dance, calligraphy – like
anything that lends its grace to language –
misused.

North American style: thin space + em dash + thin space

Like oratory, music, dance, calligraphy — like
anything that lends its grace to language —
misused.

En dashes

Use en dashes in place of the word ‘to’

8:30 – 11:30 am
Monday – Friday
Also use en dashes for compounds

Vancouver–Seattle
Kowloon–Canton Railway
Human–computer interaction

Hyphens or dashes?

The shop windows are full of elaborately boxed and
be - ribboned who - knows - what. In one window is a
bank of V sets - on the great majority of the screens
T
is the face of Mr Helpmann - the Deputy Minister of
Information. He is being interviewed. No - one both-
ers to listen to Helpmann.

Yellow highlights = hyphenated words

be-ribboned who-knows-what. In one window is a
bank of V sets – on the great majority of the screens
T
is the face of Mr Helpmann – the Deputy Minister of
Information. He is being interviewed. No-one bothers
to listen to Helpmann.

Yellow highlights = dashes

be-ribboned who-knows-what. In one window is a
bank of V sets – on the great majority of the screens
T
is the face of Mr Helpmann – the Deputy Minister of
Information. He is being interviewed. No-one bothers
to listen to Helpmann.

Do not use en dashes in hyphenated words!

ice–cream
ice-cream

Quotation marks : single or double

Single first, then double for quote within quote

Sam says: ‘A “personnel” transporter?
They’ve got it wrong. I had a personal
transporter.’
Double first, then single for quote within quote

Sam says: “A ‘personnel’ transporter?
They’ve got it wrong. I had a personal
transporter.”
Both styles are correct, as long as it is consistent. I strongly
prefer the top one for its stylistic simplicity.

Abbreviations and contractions

Contractions, first and last letter Abbreviations with missing letters
no need for full point at the end need full point at the end

Mister = Mr Professor = Prof.
Missus = Mrs Reverend = Rev.
Miss = Ms Company = Co.
Doctor = Dr Avenue = Ave.
Saint = St
Street = St
Road = Rd
Limited = Ltd
Assistant = Asst

Acroynms

Without full points Archaic format with Can be pronounced
full points widely accepted

LASER L.A.S.E.R. laser
NATO N.A.T.O. Nato
UNESCO U.N.E.S.C.O. Unesco
IBM I.B.M. Ibm
WHO W.H.O. Who
USA U.S.A. Usa
C Y Leung C.Y. Leung —

Acroynms

Without full points Archaic format with Can be pronounced,
full points widely accepted

LASER L.A.S.E.R. laser
not NATO N.A.T.O. Nato
preferred
UNESCO U.N.E.S.C.O. Unesco
IBM I.B.M. Ibm
WHO W.H.O. Who confusing
USA U.S.A. Usa common

C Y Leung C.Y. Leung —

Stylistic variant : italics

Foreign words

His raison d’être is to enjoy life to the fullest.
She went to a cha chaan teng for breakfast.
Ship name

The Titanic was an ocean linear built in Liverpool.
Movie, play or TV show title

I like Brazil very much – it is an excellent movie.
Book title

The image of the city is a classic text on urban design.
Song title

Whitney Houston’s Greatest love of all was a hit.

Stylistic variants for emphasis

Italic (gentle emphasis)

What on earth are you doing?
Small caps (gentle emphasis)

What on earth are you doing?
Bold, same or different typeface (stronger emphasis)

What the hell are you doing?
Underline (use sparaingly, or better yet, avoid)

What the hell are you doing?
Capital letters (use sparaingly, or better yet, avoid)

What the HELL are you doing?

Dates

20 June 1978 no punctuation necessary, the clearest
20th June 1978 no punctuation necessary, ordinal number
June 20, 1978 cardinal number (twenty), comma needed
June 20th, 1978 ordinal number (twentieth), comma needed
20/6/1978 date, moth, year (British format)
6/20/1978 month, date, year (US format)
1978.6.20 year, month date

Oldstyle (text) figures work well in continuous text

Plantin with default lining numerals

Mr Phileas Fogg lived, in 1872, at No. 7, Saville
Row, Burlington Gardens, the house in which
Sheridan died in 1814. He was one of the most
noticeable members of the Reform Club, though

Plantin with oldstyle numerals – reads better and more refined


Typefaces do not always come with oldstyle figures

News Gothic MT with default lining numerals

Sheridan died in 1814. He was one of the
most noticeable members of the Reform Club,

Scala Sans with oldstyle figures

Mr Phileas Fogg lived, in 1872, at no. 7, Saville

Tabular lining figures (usually the default)

132847513946 Monospaced and line up
neatly in columns. Work
well with uppercase text

211738942813 and where absolute clarity
is required for factual
information, financial figures

574841212481 and office documents.
(Typeface: Minion Pro)

Apple 58 SD1206
Banana 1200 250 kcal
Lychee 314 20 February
Starfruit 20312 500 ml

Proportional oldstyle figures (text figures)

574841212481 Proportional oldstyle figures
work harmoniously with

381247349120
lowercase text as they have
ascenders and descenders,
but they don’t line up in

384712948113 columns of figures.
(Typeface: Minion Pro)

Born 1978 in Hong Kong
sd1206 They look out of place

SD1206 alongside uppercase
letters but work well with
small capitals.

Proportional lining figures and tablular oldstyle figures

132811475 Proportional lining figures
are cap-height but do not
line up neatly in columns

211738119 (monospaced).

381247349120 Tabular oldstyle figures have
ascenders and descenders

384712948113 but line up neatly in columns.

Use real fraction characters

1-1/2 cup freshly chopp
this is typing, not
professional typesetting

Use real fraction characters

11/2 cup freshly chopped
specially designed fraction character

numerators

1234567890/1234567890
any fractions could be typset in Minon Pro denominators

Use dimensions mark & primes

apostrophe close double quotation mark

8’ x 10”
8’ x 10”
this is a lowercase ‘x’,
not a multiplication sign

Use dimensions mark & primes

feet inches

8' × 10"
8' × 10"
multiply
(dimensions mark)

Footnotes : se true superior figures in the text full size
u
ones in the notes

The exact origin of the slab-serif letterforms is unknown,
but it is likely that they came from signwriting.4
According to James Mosley however, no reliably dated
examples of a ‘true slab-serif letter’ exist before the début
of the first egyptian printing type by Figgins.5

4 McLean: ‘An examination of egyptians’ p.39
5 Mosley defines the ‘true slab-serif letter’ as a ‘monoline, geometrical
construction, with square, unbracketed serifs’. Mosley, The Nymph and
the Grot p.50

Prime marks should not be used as quotation marks

'prime' prime
‘quote’ “quote”

Ligatures : two or more characters designed as one

et
first first
floor floor
difficult difficult

More ligatures

Th ft fj
st ct sp ſh ſi archaic ligatures used in old books

æ œ ß language-specific ligatures : aesc, ethel, eszett

curriculum
vitæ æsthetics œuvre

True small caps and fake small caps

He was one of the most noticeable members of
the Reform Club, though he seemed always to
avoid attracting attention; an e n i g m at i c a l per-
sonage, about whom little was known, except
that he was a polished man of the world.

He was one of the most noticeable members
of the Reform Club, though he seemed always
to avoid attracting attention; an enigmatical
personage, about whom little was known, except
that he was a polished man of the world.

problem was to make the type as big and as
bold as possible. Michael Twyman writes,‘[…]
the need for bold type related to what might
be described as the growth of non-linearity in
graphic design’. During the first few decades
of the nineteenth century, three main variet-
ies of display typefaces emerged. They were,
in order of appearance the fat faces, sanser-
ifs (more generally known as grotesques or
antiques) and slab-serifs (widely known as
egyptians or antiques).

The exact origin of the slab-serif letterforms

Orphan : when paragraphs begin on the last line at the
bottom of a page or column – avoid!

however, no reliably dated examples of a ‘true
slab-serif letter’ exist before the début of the
first egyptian printing type by Figgins. The first
slab-serif typeface called ‘antique’ appeared
in a supplement to a 1815 type specimen pub-
lished by Vincent Figgins in 1817. It only had
capitals, with serifs that were as thick as the
main strokes. Its blackness exceeded that of
the fat faces which was unprecedented.

The origin of slab-serif letterforms

Orphaned subhead : when a subhead
appears at the bottom of a page, separated
from the paragraph that follows it.

Widow : when paragraphs end on the top of
a new page or column – avoid!

known as egyptians or antiques).

is unknown, but it is likely that they came
from signwriting. According to James Mosley
however, no reliably dated examples of a ‘true
slab-serif letter’ exist before the début of the
first egyptian printing type by Figgins. The first
slab-serif typeface called ‘antique’ appeared
in a supplement to a 1815 type specimen pub-
lished by Vincent Figgins in 1817. It only had
capitals, with serifs that were as thick as the

is unknown, but it is likely that they came
from signwriting. The first slab-serif typeface
called ‘antique’ appeared in a supplement to
a 1815 type specimen published by Vincent
Figgins It only had capitals, with serifs that
were as thick as the main strokes. Its black-
ness exceeded that of the fat faces which was
unprecedented.

Single words on the last line of a paragraph : as long as
it is not hyphenated and not too short, it is not a problem.
Could edit the text to avoid.
(some call this a widow)

‘Keep options’ can be used to automatically avoid orphans
and widows and keep lines together

keep headings with how
many lines of text in the
next paragraph

to have at least how
many lines in a paragraph at
the start and end of
the paragraph

Centered setting (auto text wrap)

Like oratory, music, dance, calligraphy, like anything
that lends its grace to language, typography is an
art that can be deliberately misused. It is a craft
by which the meanings of a text (or its absence of
meaning) can be clarified, honoured and shared, or
knowingly disguised. In a world rife with unsolicited
messages, typography must often draw attention
to itself before it will be read. Yet in order to be
read, it must relinquish the attention it has drawn.
Typography with anything to say therefore aspires to
a kind of statuesque transparency.

Lines broken for sense with generous leading (manual line breaks)

Like oratory, music, dance, calligraphy,
like anything that lends its grace to language,
typography is an art
that can be deliberately misused.
It is a craft by which the meanings of a text
(or its absence of meaning)
can be clarified, honoured and shared,
or knowingly disguised.

Flush left, ragged right setting without hyphenation (hard rag)

typography is an art that can be deliberately misused.
It is a craft by which the meanings of a text (or its
absence of meaning) can be clarified, honoured and
shared, or knowingly disguised. In a world rife with
unsolicited messages, typography must often draw
attention to itself before it will be read. Yet in order
to be read, it must relinquish the attention it has
drawn. Typography with anything to say therefore
aspires to a kind of statuesque transparency.

Flush left, ragged right setting without hyphenation (hard rag)

rag
typography is an art that can be deliberately misused.
It is a craft by which the meanings of a text (or its
absence of meaning) can be clarified, honoured and
shared, or knowingly disguised. In a world rife with
unsolicited messages, typography must often draw
attention to itself before it will be read. Yet in order
to be read, it must relinquish the attention it has
drawn. Typography with anything to say therefore
aspires to a kind of statuesque transparency.
The rag here is said to be quite
‘wild’, meaning very rough.

Flush left, ragged right setting with hyphenation (soft rag)

Like oratory, music, dance, calligraphy – like any-
thing that lends its grace to language – typography is
an art that can be deliberately misused. It is a craft
by which the meanings of a text (or its absence of
meaning) can be clarified, honoured and shared, or
knowingly disguised. In a world rife with unsolicited
messages, typography must often draw attention to
itself before it will be read. Yet in order to be read, it
must relinquish the attention it has drawn. Typogra-
phy with anything to say therefore aspires to a kind
of statuesque transparency.
Hyphenation makes the rag softer.
Hyphenation does not affect readability
too much if not excessive.

Justified: ord and/or letter spaces are expanded or contracted to
w
fill the width of the column (without hyphenation)

Like oratory, music, dance, calligraphy – like anything
that lends its grace to language – typography is an art
that can be deliberately misused. It is a craft by which
the meanings of a text (or its absence of meaning)
can be clarified, honoured and shared, or knowingly
disguised. In a world rife with unsolicited messages,
typography must often draw attention to itself before it
will be read.Yet in order to be read, it must relinquish the
attention it has drawn.Typography with anything to say
therefore aspires to a kind of statuesque transparency.

Word spaces could vary too much
if hyphenation is not turned on in
justified setting. The texture could
become quite uneven.

Justified text with hyphenation
Hyphenation and justification settings are called ‘HJ’ for short

Like oratory, music, dance, calligraphy – like anything
that lends its grace to language – typography is an art
the meanings of a text (or its absence of meaning) can
be clarified, honoured and shared, or knowingly dis-
guised. In a world rife with unsolicited messages, ty-
pography must often draw attention to itself before it
will be read. Yet in order to be read, it must relinquish
the attention it has drawn. Typography with anything
to say therefore aspires to a kind of statuesque trans-
parency.
Spacing is more even with hyphenation
turned on.

Flush right, ragged left setting

Like oratory, music, dance, calligraphy – like anything that
lends its grace to language – typography is an art that can be
deliberately misused. It is a craft by which the meanings of
a text (or its absence of meaning) can be clarified, honoured
and shared, or knowingly disguised. In a world rife with
unsolicited messages, typography must often draw attention
to itself before it will be read. Yet in order to be read, it
must relinquish the attention it has drawn. Typography with
anything to say therefore aspires to a kind of statuesque
transparency.

Not suitable for long texts, and certainly not for
body texts. Use sparingly, and break lines for
sense (manual line breaks).

Without optical margin alignment

The
Vancouver
Symphony
Orchestra
The left edge of the text block doesn't
seem to be aligned, as the shapes of
the letters vary.

With optical margin alignment turned on

The
Vancouver
Symphony
Orchestra enter size of the type here

The left edge is aligned optically
instead of mathematically. This tends
to work better with smaller text sizes.

Without optical margin alignment

The obvious solution to this com-
munication problem was to make
the type as big and as bold as pos-
sible. Michael Twyman writes, ‘the
need for bold type related to what
might be described as the growth
of non-linearity in graphic design’.

Optical margin alignment (hanging punctuation)

The obvious solution to this com-
munication problem was to make
the type as big and as bold as pos-
sible. Michael Twyman writes, ‘the
need for bold type related to what
might be described as the growth
of non-linearity in graphic design’.

5
hyphenation
justifiction (HJ)

Default settings with no hyphenation, With hyphenation: slightly better but
with a rather narrow column width still not good enough

Like oratory, music, dance, Like oratory, music, dance,
calligraphy – like anything that calligraphy – like anything that
lends its grace to language – lends its grace to language –
typography is an art that can typography is an art that can
be deliberately misused. It is be deliberately misused. It is a
a craft by which the meanings craft by which the meanings of
of a text (or its absence of a text (or its absence of mean-
meaning) can be clarified, ing) can be clarified, honoured
honoured and shared, or and shared, or knowingly dis-
knowingly disguised. In a world guised. In a world rife with
rife with unsolicited messages, unsolicited messages, typogra-
typography must often draw phy must often draw attention
attention to itself before it will to itself before it will be read.
be read.Yet in order to be read, Yet in order to be read, it must

Default justification values

Minimum Desired Maximum
Word spacing 80% 100% 133%
Letter spacing 0% 0% 0%
Glyph scaling 100% 100% 100%



Desired =
normal word spacing
what we really want



Maximum =
how much you allow to
expand until it would
not look good



Minimum =
how much you allow to
contract until it would
not look good



Word spacing = spaces between words

This sample shows word spacing reduced to 60%
This sample shows word spacing expanded to 180%



Letter spacing = spaces between letters

This sample shows letter spacing reduced to –5%
This sample shows letter spacing expanded to +10%



Glyph scaling = digitally condensing and expanding the type
(use with extreme caution or not at all!)

This sample shows a glyph scaling of 90%
This sample shows a glyph scaling of 110%

Default settings with no hyphenation, With hyphenation: slightly better but
with a rather narrow column width still not good enough

Like oratory, music, dance, Like oratory, music, dance, cal-
calligraphy – like anything that ligraphy – like anything that lends
lends its grace to language – its grace to language – typography
typography is an art that can is an art that can be deliberately
be deliberately misused. It is a misused. It is a craft by which
craft by which the meanings of a the meanings of a text (or its ab-
text (or its absence of meaning) sence of meaning) can be clar-
can be clarified, honoured and ified, honoured and shared, or
shared, or knowingly disguised. knowingly disguised. In a world
In a world rife with unsolicited rife with unsolicited messages,
messages, typography must typography must often draw at-
often draw attention to itself tention to itself before it will be
before it will be read.Yet in order read. Yet in order to be read, it
to be read, it must relinquish must relinquish the attention
the attention it has drawn. it has drawn. Typography with

Default settings with no hyphenation, With hyphenation justification
with a rather narrow column width settings adjusted, and optical margin
alignment turned on

Like oratory, music, dance, Like oratory, music, dance, cal-
calligraphy – like anything that ligraphy – like anything that lends
lends its grace to language – its grace to language – typography
typography is an art that can is an art that can be deliberately
be deliberately misused. It is a misused. It is a craft by which the
craft by which the meanings of a meanings of a text (or its absence
text (or its absence of meaning) of meaning) can be clarified, hon-
can be clarified, honoured and oured and shared, or knowingly
shared, or knowingly disguised. disguised. In a world rife with un-
In a world rife with unsolicited solicited messages, typography
messages, typography must must often draw attention to itself
often draw attention to itself before it will be read.Yet in order
before it will be read.Yet in order to be read, it must relinquish the
to be read, it must relinquish attention it has drawn. Typogra-
the attention it has drawn. phy with anything to say therefore

Good justification is impossible with This block of
columns that are too narrow – avoid!
text is far too
Justified alignment is good for immersive
reading material that are meant to be read
narrow for
largely in a linear fashion, eg novels, with
symmetrical layouts.
justified set-
Flush left, ragged right setting is generally
ting. The
preferred for more structured texts and non-
linear reading, eg coffee table books, textbooks,
enormous
non-fiction, etc. with asymmetrical layouts.
word spaces
make read-
ing very dif-
ficult and not
to mention
ugly.

Word spacing = 100%
said to be about the width of the lowercase i

thatilendsiitsigraceitoilangua

Normal word spacing at 100% (optimal)

deliberately misused. It is a craft by which the meanings of
a text (or its absence of meaning) can be clarified, honoured
and shared, or knowingly disguised. In a world rife with
unsolicited messages, typography must often draw attention
to itself before it will be read. Yet in order to be read, it
must relinquish the attention it has drawn. Typography with
transparency.

Word spacing = 60%, words harder to be differentiated

deliberately misused. It is a craft by which the meanings of a
text (or its absence of meaning) can be clarified, honoured and
shared, or knowingly disguised. In a world rife with unsolicited
messages, typography must often draw attention to itself
before it will be read.Yet in order to be read, it must relinquish
the attention it has drawn.Typography with anything to say
therefore aspires to a kind of statuesque transparency.

Word spacing = 180%, lines no longer cohere together

Like oratory, music, dance, calligraphy like anything
—
that lends its grace to language typography is an art
—
the meanings of a text (or its absence of meaning)
can be clarified, honoured and shared, or knowingly
disguised. In a world rife with unsolicited messages,
typography must often draw attention to itself before
it will be read. Yet in order to be read, it must
relinquish the attention it has drawn. Typography with
transparency.

God (or devil) in the details: text typography

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to God (or devil) in the details: text typography

Similar to God (or devil) in the details: text typography (20)

Recently uploaded

Recently uploaded (20)

God (or devil) in the details: text typography