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)

1orthography

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)

ABCDEFGHIJKLMNOPQRSTUVWXY&Z

abcdefghijklmnopqrstuvwxyz

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

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.

The Medium is the Message

The Medium Is The Message

The medium is the message

the medium is the message

THE MEDIUM IS THE MESSAGE

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

this is a stylistic choice, not an orthographic convention

preferred for clarity, but not common

only important words need capitalisation

most common

incorrect





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

used in manuscripts but not typesetting

denotes a title by convention

does not commonly denote a title

does not commonly denote a title

Everything in it’s placeIts a beautiful dayRock ‘n’ rollDVD’sThe 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

Common errors

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-typography is an art that can be deliberately misused.

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.

European style: word space + en dash + word space

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.

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

8:30 – 11:30 amMonday – Friday

Use en dashes in place of the word ‘to’

Also use en dashes for compounds

En dashes

Vancouver–SeattleKowloon–Canton RailwayHuman–computer interaction

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

Hyphens or dashes?

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

Yellow highlights = hyphenated words

The shop windows are full of elaborately boxed and be-ribboned who-knows-what. In one window is a bank of TV sets – on the great majority of the screens 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

ice–creamice-cream

Do not use en dashes in hyphenated words!

Quotation marks : single or double

Sam says: ‘A “personnel” transporter? They’ve got it wrong. I had a personal transporter.’

Sam says: “A ‘personnel’ transporter? They’ve got it wrong. I had a personal transporter.”

Single first, then double for quote within quote

Double first, then single for quote within quote

Both styles are correct, as long as it is consistent. I strongly prefer the top one for its stylistic simplicity.

Abbreviations and contractions

Mister = MrMissus = MrsMiss = MsDoctor = DrSaint = StStreet = StRoad = RdLimited = LtdAssistant = Asst

Professor = Prof.Reverend = Rev.Company = Co.Avenue = Ave.

Contractions, first and last letterno need for full point at the end

Abbreviations with missing letters need full point at the end

Acroynms

LASER L.A.S.E.R. laserNATO N.A.T.O. NatoUNESCO U.N.E.S.C.O. UnescoIBM I.B.M. IbmWHO W.H.O. WhoUSA U.S.A. UsaC Y Leung C.Y. Leung —

Can be pronouncedwidely accepted

Archaic format with full points

Without full points

Acroynms

LASER L.A.S.E.R. laserNATO N.A.T.O. NatoUNESCO U.N.E.S.C.O. UnescoIBM I.B.M. IbmWHO W.H.O. WhoUSA U.S.A. UsaC Y Leung C.Y. Leung —

Can be pronounced,widely accepted

confusing

common

not preferred

Archaic format with full points

Without full points

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

2figures (numbers)

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

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 default lining numerals

Plantin with oldstyle numerals – reads better and more refined

Oldstyle (text) figures work well in continuous text

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,

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

News Gothic MT with default lining numerals

Scala Sans with oldstyle figures

Typefaces do not always come with oldstyle figures

132847513946211738942813574841212481

Tabular lining figures (usually the default)

Monospaced and line up neatly in columns. Work well with uppercase text and where absolute clarity is required for factual information, financial figures and office documents.(Typeface: Minion Pro)

Apple 58Banana 1200Lychee 314Starfruit 20312

SD1206250 kcal20 February500 ml

574841212481381247349120384712948113

Proportional oldstyle figures (text figures)

They look out of place alongside uppercase letters but work well with small capitals.

Born 1978 in Hong Kongsd1206SD1206

Proportional oldstyle figures work harmoniously with lowercase text as they have ascenders and descenders, but they don’t line up in columns of figures.(Typeface: Minion Pro)

132811475211738119

Proportional lining figures and tablular oldstyle figures

381247349120384712948113

Proportional lining figuresare cap-height but do not line up neatly in columns (monospaced).

Tabular oldstyle figures have ascenders and descenders but line up neatly in columns.

Use real fraction characters

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

Use real fraction characters

11/2 cup freshly chopped

1234567890/1234567890

specially designed fraction character

denominators

numerators

any fractions could be typset in Minon Pro

8’ x 10”

8’ x 10”

Use dimensions mark & primes

close double quotation markapostrophe

this is a lowercase ‘x’, not a multiplication sign

8' × 10"

8' × 10"

Use dimensions mark & primes

inchesfeet

multiply(dimensions mark)

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.395 Mosley defines the ‘true slab-serif letter’ as a ‘monoline, geometrical

construction, with square, unbracketed serifs’. Mosley, The Nymph and the Grot p.50

Footnotes : use true superior figures in the text & full size ones in the notes

3detailing

'prime' "prime"

‘quote’ “quote”

Prime marks should not be used as quotation marks

Ligatures : two or more characters designed as one

et & &first firstfloor floor difficult difficult

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

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

curriculum vitæ æsthetics œuvre

More ligatures

He was one of the most noticeable members of the Reform Club, though he seemed always to avoid attracting attention; an enigmatical 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.

True small caps and fake small caps

The obvious solution to this communication 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!

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 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.

known as egyptians or antiques).

The exact origin of the slab-serif letterforms 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 main strokes. Its blackness exceeded that of

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

The exact origin of the slab-serif letterforms 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

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

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

4alignment

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.

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.

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

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

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.

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


rag

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: word and/or letter spaces are expanded or contracted to fill the width of the column (without hyphenation)


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

Justified text with hyphenationHyphenation and justification settings are called ‘H&J’ for short

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 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.

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.

Flush right, ragged left setting

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

TheVancouverSymphonyOrchestra

Without optical margin alignment

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

TheVancouverSymphonyOrchestra

With optical margin alignment turned on

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

enter size of the type here

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’.

Without optical margin alignment

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’.

5hyphenation & justifiction (h&j)

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,

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 mean-ing) can be clarified, honoured and shared, or knowingly dis-guised. In a world rife with unsolicited messages, typogra-phy must often draw attention to itself before it will be read. Yet in order to be read, it must

Default settings with no hyphenation, with a rather narrow column width

With hyphenation: slightly better but still not good enough

Minimum Desired Maximum

Word spacing 80% 100% 133%

Letter spacing 0% 0% 0%

Glyph scaling 100% 100% 100%

Default justification values






Desired =normal word spacingwhat 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%

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.

Like oratory, music, dance, cal-ligraphy – 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 ab-sence of meaning) can be clar-ified, honoured and shared, or knowingly disguised. In a world rife with unsolicited messages, typography must often draw at-tention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with




Like oratory, music, dance, cal-ligraphy – 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 ab-sence of meaning) can be clar-ified, honoured and shared, or knowingly disguised. In a world rife with unsolicited messages, typography must often draw at-tention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn. Typography with




Like oratory, music, dance, cal-ligraphy – 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, hon-oured and shared, or knowingly disguised. In a world rife with un-solicited 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


With hyphenation & justification settings adjusted, and optical margin alignment turned on


Like oratory, music, dance, cal-ligraphy – 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, hon-oured and shared, or knowingly disguised. In a world rife with un-solicited 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


With hyphenation & justification settings adjusted, and optical margin alignment turned on

This block of text is far too narrow for justified set-ting. The e n o r m o u s word spaces make read-ing very dif-ficult and not to mention ugly.

Good justification is impossible with columns that are too narrow – avoid!

Justified alignment is good for immersive reading material that are meant to be read largely in a linear fashion, eg novels, with symmetrical layouts.

Flush left, ragged right setting is generally preferred for more structured texts and non-linear reading, eg coffee table books, textbooks, non-fiction, etc. with asymmetrical layouts.

thatilendsiitsigraceitoilanguage

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


Normal word spacing at 100% (optimal)


Word spacing = 60%, words harder to be differentiated

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 spacing = 180%, lines no longer cohere together

end

Date post:	28-Jan-2015
Category:	Design
Upload:	information-design-lab
View:	108 times
Download:	1 times

God (or devil) in the details: text typography

Design