ŢŦŸÝ

̓ ̑ ́ ̊ ̄ ̉ ̏ ˟̃
Accents — A Visual
That annoying
Problems
Latin diacritic
Adam Twardoch
Victor
noiseJourney
of diacritic
around letters
design
character
Gaultney • (here)
design
& Victor Gaultney (elswhere)
SIL International
Zwei Boxkämpfer jagen
Victor quer durch Sylt.
[Two boxers hunt Victor all the way through Sylt.]
 Chytří čtou knihy, jen
ťululum čučí na televizi.
[The smart ones read books, the dumb ones watch TV.]
Árvíztűrő tükörfúrógép.
[Flood-proof mirror-drilling machine.]
Książęcych spóźnień czułość.
[The tenderness of princes being late.]
àáâãäå

Introduction Examples of Accents/Diacritics

àáâãäå
ħɨƀʉƚƶđŧ
Introduction Examples of Accents/Diacritics
àáâãäå
ħɨƀʉƚƶđŧ
ç = c + ̧?
Introduction Examples of Accents/Diacritics
Origin Early manuscript and printed accents
 ḡ�ƀḋḩ
Origin Modern linguistic innovations
 ą Some diacritics are not diacritics

Similar does not mean identical

ť’
ó� Be aware of cultural preferences

Harmonise size, shape, alignment

ïi
Principles
Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
 AREA
GRAVITY
INERTIA
OPTICAL?
MATHEMATICAL
o̘ o̘
MATHEMATICAL OPTICAL

Asymmetry: Optical Alignment Kindersley optical centres

 MATHEMATICAL OPTICAL COUNTER OPTICAL

Asymmetry: Optical Alignment Three different centres

 ĄąĘęǪǫ
a˞e˞o˞ə˞ɜ˞
Asymmetry: Base Glyphs Ogonek and rhotic hook
èeé e̖ e̗ e̒ e̓ ̘ee̙ e̋ ȅ e̜ e̹ ẻ ̃
óòóòóòóòóòóòóò
óòóòóòóòóòóòóò
Asymmetry: Diacritics A variety of accent shapes and placement
Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
 kêfî kêfî kêfî
dïb dïb dïb dïb
dïb dïb dïb
Width Harmony: Not Enough Space Accents wider than base letter
 mandïble
mandïble
mandible
Width Harmony: Kerning Sometimes necessary but painful
Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
 lälëlilïlölül GALLIARD
useful difference, intentional?

lälëlilïlölül GILL SANS LIGHT

diaeresis lower and different

lälëlilïlölül GILL SANS REGULAR

heights reversed

lälëlilïlölül GILL SANS BOLD

middle ground

Vertical Spacing: Height Differences Diaeresis varieties

 àáâãäå ARIAL
bottom aligned

àáâãäå TIMES NEW ROMAN

àáâãäå PALATINO LINOTYPE

centre aligned

àáâãäå CHARTER
mixed strategy

Vertical Spacing: Two Strategies Bottom vs. centred alignment

Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
 ÉÈÊèéê
ÉÈÊèéê
ÉÈÊèéê ADOBE GARAMOND
MINION
PALATINO LINOTYPE

Capitals: Difference from Lower Case Traditional styles

 ÉÈÊèéê
ÉÈÊèéê
ÉÈÊèéê ADOBE GARAMOND SABON (metal)
MINION Adobe (digital)
PALATINO LINOTYPE Monotype (digital)

Capitals: Difference from Lower Case Versions of Sabon

 SCHADOW-ANTIQUA ANTIQUE OLIVE

ÅÅÅÅ
TIMES NEW ROMAN | GEORGIA | ARIAL | VERDANA

Capitals: Other Techniques Some radical, some common

 PALATINO LINOTYPE TRUMP MEDIAEVAL

ÄÖÜË ÄÖÜË
ÄÖÜË ÄÖÜË OPTIMA FUTURA

FUTURA (10pt, 1928)

included both versions

Capitals: Umlauts International versions of German fonts

Über Élève
Jeder hat Anspruch auf die in dieser Erklärung verkündeten
Rechte und Freiheiten ohne irgendeinen Unterschied, etwa
nach Rasse, Hautfarbe, Geschlecht, Sprache, Religion,
politischer oder sonstiger Überzeugung, nationaler oder
sozialer Herkunft, Vermögen, Geburt oder sonstigem Stand.

Capitals: Shorter Design Capitals can be much shorter than ascenders

Asymmetry
Width Harmony
Vertical Spacing
Capitals
Cultural Preferences
Summary of Design Challenges
 ONE
JUST THIRD
THROUGH TWO
RULE THIRDS
RULE

Asymmetry: Acute & Grave Two methods of alignment

 óo�o�
STEEP ANGLE
TYPICAL ALIGNMENT

Asymmetry: Acute & Grave

SHALLOW ANGLE
TOO FAR RIGHT
SHALLOW ANGLE
MUCH BETTER

Alignment depends on slope

 Guyot
1546

Garamond
1550

Garamond
1555

Van den Keere

1576

Grandjean
1702

Asymmetry: Acute & Grave

Fleischman
1739

Fournier
1742

Sanlecque
1757

Luce
1771

F.A. Didot
1782

Amoretti
1811

De Berny
1852

Gouet
Acute examples from before 1900

1856
 MONOPHOTO PHOTINA THREE VERSIONS OF CALEDONIA

ééèè
GENTIUM WITH ALTERNATES

Asymmetry: Acute & Grave Acutes through technology transition

 ACUTE | KRESKA — Twardoch

BODONI | EMPIRIANA — Hlavsa

Cultural Preferences: Similar But Different Polish and Czech accents

 ćńóśź PALATINO LINOTYPE

Cultural Preferences: Solutions Try to balance needs…

 oacute

nós vós
óó
wóz kóz oacute.salt

...provide alternates and localized forms...

 FIGURAL — Menhart

Cultural Preferences: Solutions …or address a single cultural need

 Łł Łłt Łł t
Optically centred
Different angles (vertically)

Width may increase Contrast with t Calligraphic variant

Dd Ll Tt
Stroked letters Helvetica Linotype, Fenway, Zapfino
 Dď Lľ Tť
Letters with ‘apostrophe’
 ď’'ď’' ď’' ď’'
Usually different size With different positioning

Ideally a different shape, between curved and straight

Dď Lľ Tť
Letters with ‘apostrophe’ Helvetica (L), Fedra, Walbaum (STF), Maiola
 Ľľ Ľľ Ľľ
Vertical position can vary

Ďď Ľľ Ťť
Capital equivalents Walbaum, Maiola, Helvetica, Gentium
 Ąą Smooth connections

Ęę Not centered, but not too far right

Įį Not too small

Ųų Matching general weight and stress

Ogoneks Valletta
 Ąą Ą ų ęų ę
Ęę
Įį
Ųų
Ogoneks Valletta, others
 ĢĶĻŅŖȘȚ
ÇŞŢ
ģķļņŗșț ,
çşţ Smaller than comma,
but not too weak
Cedilla & ‘Comma under’
 ČĎĚ ŇŘ ŠŤŽ Traditional european symmetric design

čě ňř šž Alternative design

Háček (Caron) Fenway, Helvetica, Gentium, Brioso, Walbaum, Maiola

 äöëüï iėż
Consistency in size, shape, alignment

äiż äiż
Unnecessary
Differentiation
Stylistic
Variation
Subtile
Changes

Diaeresis/Dots Gentium, Futura, Brioso, Fenway

Character and Glyph Set
Designing the Shapes
Kerning
Resources
Part I — Basic principles of design
 Ter Tèr Těr
-150 -80 -70

Kerning
 t’ tloušťka
tloušťka tloušťka
t’ tloušťka
Kerning
 positive

orły orły
kerning

orly
orły orły
adjust
RSB

Kerning
Character and Glyph Set
Designing the Shapes
Kerning
Resources
Part I — Basic principles of design
 Alphabets of Europe — Everson
[ evertype.com ]
Letter Database —Estonian Language Institute
[ eki.ee/letter ]
MyFonts.com International section
[ myfonts.com/International ]
Ethnologue — SIL International
[ ethnologue.org ]
Codepages and Unicode ranges
[ unicode.org ]
also shipping with FontLab Studio

Resources
 Language Culture Type — ATypI/Graphis
[ atypi.org ]
Diakritická znaménka — Filip Blažek, TYPO 10
[ magtypo.cz ]
Ph.D. thesis — Petra Černe Oven
University of Reading
ParaType catalog ed. 2004
[ paratype.com ]

Resources: Printed matter