Comment espacer et marquer les signes de ponctuation et autres symboles

Cet article s'adresse à tous ceux qui travaillent avec la typographie, sur n'importe quel support, et il s'adresse en particulier aux concepteurs qui souhaitent offrir aux utilisateurs la meilleure expérience de lecture possible. [19659006] Jeffrey Zeldman a dit un jour:

«90% du design est typographique. Et les 90% restants sont des espaces. »

Vous connaissez peut-être bien les polices de caractères; vous pouvez modifier régulièrement le début, le suivi et le crénage de vos polices; vous pouvez optimiser la taille des fichiers de vos polices Web – mais est-ce tout ce qui peut être fait? Depuis des centaines d'années, les typographes et les concepteurs de polices utilisent l'espace blanc en typographie. Dans cet article, je vais discuter de l'espacement et du crénage de la ponctuation et des autres marques, en examinant ce que les gens disent des effets de ces ajustements. Je vais vous montrer différentes façons de faire ce travail, les pièges de ce travail, et comment nous pourrions le faire de manière plus précise, rapide et cohérente.

Cet article vous montrera comment analyser la typographie plus en détail, et comment mieux juger l'espacement et les détails micro-typographiques, en particulier dans les polices conçues pour une lecture étendue. Vous en apprendrez beaucoup sur la façon dont les polices de caractères sont construites et programmées.

Les typographes ont une longue histoire de refus d'accepter ce qui leur a été donné initialement, afin d'obtenir des performances optimales pour les lecteurs. Il y a également des avantages en termes d'accessibilité à espacer correctement les signes de ponctuation et autres symboles pour différents types de personnes (comme les lecteurs vieillissants et les enfants d'environ six ans). Cet article fera progresser vos compétences typographiques, vous aidera à produire une meilleure expérience de lecture, à améliorer vos compétences de composition et vous permettra de fournir une lecture sans effort d'un grand volume de texte sur des pages Web ou dans la documentation du framework / API.

Nous nous référons à?

Ci-dessous est un exemple simple de ce à quoi l'espacement ressemble appliqué et non appliqué:

Vous pourriez ne pas voir beaucoup de différence, mais il y en a. Bienvenue dans la micro-typographie. Cet article est en quelque sorte un guide sur les problèmes et problèmes. Nous devrons explorer les problèmes à la fois sur papier (comment cela a été fait dans le passé) et sur le Web (comment cela peut être fait dans le présent). Le passé informe le présent.

Il y a aussi d'autres avantages à la ponctuation d'espacement et à d'autres marques (bien qu'actuellement non testées, avec peu de preuves disponibles). Avez-vous envisagé des personnes ayant une déficience visuelle; l'espace supplémentaire accordé aux signes de ponctuation et autres symboles pourrait être bénéfique et ajouter de la clarté, car les marques ne seraient pas si serrées contre le caractère suivant. Qu'en est-il des enfants d'environ 6 ans qui apprennent à lire. L'espace blanc supplémentaire, et donc le temps et l'emphase supplémentaires, conduisent-ils à une plus grande prise de conscience de ces marques?

Pourquoi les signes de ponctuation spatiale et autres symboles?

Vous vous souvenez peut-être de la typographie ou vous l'avez fait vous-même. Là, une vaste gamme de caractères spatiaux est utilisée, comme le souligne Marcin Wichary . Le sujet de la ponctuation d'espacement et d'autres marques en typographie et composition a retenu mon attention pendant un certain temps. Dans les livres et manuels de conception typographique haut de gamme rédigés par des experts (par exemple, Detail in Typography de Jost Hochuli), il est largement admis que les signes de ponctuation d'espacement et les symboles divers doivent être effectués et c'est une bonne chose à faire. C'est quelque peu discutable, cependant. Certaines personnes disent que c'est une perte de temps et que 99% des utilisateurs ne remarqueront aucune différence. D'un autre côté, de nombreux typographes experts et concepteurs de polices de caractères disent que c'est une bonne chose à faire, et je pense que le temps supplémentaire et l'accent mis sur les marques conduisent à une meilleure communication typographique.

Bruce Mau dit ceci dans son livre, Life Style :

«La conception typographique est la libération contrôlée d'événements d'information dans le temps. Il fonctionne sur deux registres temporels. Le plus petit est le présent changeant du lecteur. Le plus grand est le balayage du temps historique. La typographie nous permet de découvrir le passé et le présent simultanément.

Chaque décision typographique – police, taille, position, orientation, poids, couleur, style – affecte la vitesse d'accès du lecteur, la vitesse à laquelle le message est engagé par le système nerveux . »

Bruce Mau dit que les personnes qui conçoivent l'expérience de lecture sont des façonneuses de l'espace et du temps. De plus, Peter Glaab dit :

Si l'importance d'une phrase correctement ponctuée vous avait paru négligeable, cela vous éveillera l'oreille. Trois arguments parlent clairement pour cela:

1. Le texte se lit mieux.
2. Le texte a l'air mieux.
3. L'orthographe correcte (le système d'orthographe conventionnel d'une langue) augmente la valeur d'un texte.

Une autre analogie est le timing et l'espace dans la musique. Comment pourrait-on dire que les espaces vides et calmes de la musique, ou le contraste entre les sons forts (positifs) et calmes (négatifs), n'ont pas d'importance? Nous ne pouvons pas. Ces aspects en font partie intégrante. L'espace blanc est essentiel à tant de design. Pensez à quoi ressembleraient les informations sans elles? Erik Spiekermann a dit un jour:

Vous ne concevez pas réellement le noir, vous concevez le blanc: l'espace à l'intérieur et l'espace autour de lui.

Le contrôle de l'espace blanc dans la typographie, et une grande partie de la communication graphique, c'est le design. C'est aussi important que les valeurs noires (positives). L'espacement des signes de ponctuation et des autres symboles fonctionne davantage de manière inconsciente, plutôt que d'être directement perceptible, mais il a un effet.

Quels espaces blancs en typographie pouvons-nous utiliser?

Comment savoir quelle largeur d'espace ajouter? L'expertise personnelle y joue un grand rôle. Je ne pouvais pas imaginer la nécessité d'utiliser un espace plus grand qu'un ¼ em (un quart d'espace). Dans son livre, « Les éléments du style typographique », Robert Bringhurst dit:

«Kern constamment et modestement ou pas du tout.»

Roland Stieger note:

«Nous ne faisons pas utilisez toujours les mêmes espaces, car chaque police a un crénage différent. GREP (acronyme de: recherche globale d'une expression régulière et impression) que nous utilisons uniquement pour de plus grandes quantités de textes. Dans les textes courts, nous le faisons souvent à la main (manuellement). Avec certaines polices, je trouve qu'un espace capillaire est bien, parfois je trouve mieux un espace fin. Cela dépend vraiment de la police. "

À quelles marques de ponctuation et autres symboles devons-nous ajouter un espacement?

Les typographes ajoutent généralement de l'espace sur le côté gauche des marques suivantes:

:; "’! ? /)]} * ¿»‹ @ ® ™ ℓ ° ¡'"† + = ÷ - - -

Et ils ajoutent généralement de l'espace à droite de ceux-ci:

 “'/ ([{>≥

Après un examen plus approfondi de la figure 2, nous constatons que de nombreux autres caractères et symboles peuvent nécessiter un espacement supplémentaire, sur la côté gauche ou droit.

Figure 5 : Un exemple en temps réel de micro-typographie. Cette version interactive de la figure 4 vous permet de changer les espaces et de voir en temps réel ce qui a été ajusté. ( Voir dans une nouvelle fenêtre )

Ainsi, dans les figures 3 à 6, nous avons vu à quoi ressemble l'espacement de la ponctuation et des autres symboles. Il est clair pour moi que cet espacement supplémentaire permet une communication typographique meilleure et plus fluide. Nous constatons également que le concepteur de polices de caractères n'a pas fait suffisamment pour appliquer des espaces blancs et du crénage, car de nombreux signes de ponctuation et autres symboles sont presque alignés avec le caractère gauche ou droit.

Exemples de ponctuation par défaut et d'espacement des symboles dans différentes polices de caractères

Toutes les polices de caractères sont-elles les mêmes et ont-elles le même espacement des signes de ponctuation et des autres symboles de gauche à droite? La réponse est non. Vous trouverez ci-dessous quelques exemples de polices de caractères avec leurs paramètres par défaut (aucun suivi ou crénage appliqué dans les figures). Remarquez l'espace blanc autour des marques et des caractères non alphabétiques.

Dans la figure 7, nous pouvons voir que le suivi par défaut (l'espacement des lettres sur les lignes) pour Fira Sans Regular est un peu serré. Dans la figure 8, nous pouvons voir que Spectral Regular, une police serif pour une lecture étendue, a beaucoup de suivi sur les lignes par défaut. Si nous regardons une police de caractères comme FF Unit elle a également beaucoup de suivi à travers les lignes par défaut. Beaucoup moins d'espacement des signes de ponctuation et autres symboles est nécessaire, car le suivi est déjà généreux. Si nous allons à l'extrême, comme dans la figure 9, qui utilise Fira Mono Regular, vous pouvez voir que, parce que tous les personnages occupent la même largeur, ils s'alignent tous verticalement, créant beaucoup d'espace blanc sur les côtés gauche et droit; ainsi, l'espacement des signes de ponctuation et des autres symboles n'est pas pertinent.

Donc, nous pouvons maintenant commencer à voir que l'espacement correct de la ponctuation et des autres signes est une bonne chose à faire, qu'il y a un avantage, et nous pouvons voir à peu près quelles marques et quels symboles ajouter de l'espace. Mais quels sont les problèmes rencontrés par les concepteurs pratiques du monde réel dont les clients n'ont pas un budget illimité?

L'état actuel des problèmes

Actuellement, résoudre le problème est une épreuve et prend beaucoup de temps. Les problèmes peuvent être résumés comme suit:

• L'espacement des signes de ponctuation et autres symboles prend trop de temps, quelle que soit la méthode.
• La fonction de recherche et remplacement ou GREP peut produire un nombre considérable d'erreurs et est une solution qui n'attend que
• La modification des valeurs de crénage intégrées de la police n'est pas facile à faire ou une meilleure pratique.
• L'espace blanc et le crénage sur les pages Web nécessitent (à partir de 2020) beaucoup de travail à faire et manque de support technique .
• Les espaces blancs et le crénage dans les livres électroniques doivent être supprimés et supprimés avant que les livres soient exportés, sinon ils génèrent des problèmes et des boîtes vides (tofu) □.
• La modification des valeurs latérales intégrées d'une police de caractères est pas facile à faire ou une meilleure pratique.

Les problèmes plus en détail

L'espacement des signes de ponctuation et autres symboles prend trop de temps

Pour un livre A5 de 30 pages, vous pouvez pratiquement faire ce que vous voulez. L'espacement et le crénage peuvent être effectués manuellement, avec peu de temps ajouté au coût total de composition. Et un livre académique de 100 pages? L'ajout manuel d'espaces dans Adobe InDesign ou Quark prendrait trop de temps. Et un site Web? Si cela est fait dans Adobe Dreamweaver, vous pouvez ouvrir toutes les pages individuelles, puis ajouter des caractères d'espacement, tels que les espaces capillaires et les espaces fins (voir figure 2). Certaines personnes et organisations sont prêtes à payer un supplément pour cette qualité typographique, mais elles sont rares. Nicky Barneby, dans TypoGraphic 59 décrit les règles de composition de Penguin, établies par Jan Tschichold en 1946. Ce dont nous avons besoin en tant que typographes, c'est d'un moyen d'ajouter de l'espacement à une liste convenue de caractères et de symboles, et cela ne prenez pas plus de 15 minutes pour mettre en œuvre un livre ou un site Web volumineux. Ce serait la solution idéale, et c'est mon objectif.

Find-And-Replace And GREP is Just Waiting To Go Wrong

Il est possible d'ajouter un espace blanc et d'ajuster les valeurs de crénage à l'aide de la fonction find-and- option de remplacement dans les logiciels (Adobe InDesign, Quark, Microsoft Word, Adobe Dreamweaver).

Vous pouvez rechercher et remplacer manuellement, rechercher et remplacer, etc. Cela vous permettrait de voir quels changements se produisent. Mais cela pour un livre ou un site Web entier et pour toutes les combinaisons de caractères et de symboles prendrait des jours et augmenterait considérablement le temps et le coût globaux de la composition.

Alternativement, vous pouvez utiliser GREP (rechercher globalement une expression régulière et imprimer) , comme Ralf Herrmann le démontre pour Adobe InDesign. Cependant, cela pose des problèmes. Je ne suis pas prêt à faire une recherche et un remplacement de masse sans voir ce que la recherche et le remplacement font réellement au texte. Je soupçonne qu'il y a des gens qui sont à l'aise de cliquer sur le bouton «Tout changer», mais je ne suis pas l'un d'eux. Le risque augmente uniquement lorsque vous travaillez sur la typographie pour un client, lorsque les erreurs et le laisser au logiciel peuvent être désastreux.

De plus, GREP est trop technique pour les personnes qui ne savent pas coder ou qui ne savent pas quelles expressions de code sont nécessaires. Et nous serions fortement tributaires du logiciel sachant ce que nous voulons (jamais une bonne idée). Beaucoup de choses peuvent mal tourner avec des changements que vous ne voyez pas être faits. Bram de Does (qui, selon certains, a conçu les deux plus belles polices de caractères du monde) le dit ainsi:

"J'aime faire autant de choses manuelles que possible."

Un autre problème est que, si nous utilisons un seul espace capillaire dans un livre ou un site Web, que se passe-t-il si nous voulons l'augmenter en espaces minces? Eh bien, nous pourrions faire une recherche et un remplacement pour tous les espaces capillaires et les changer tous en espaces minces en un seul clic. Cela pourrait fonctionner, mais cela pourrait ne pas fonctionner. Que se passe-t-il si quelque part nous avons utilisé deux espaces capillaires côte à côte? Lorsque nous effectuons une recherche et un remplacement, ces deux espaces capillaires deviennent deux espaces minces. Deux espaces minces sont beaucoup plus larges que deux espaces capillaires. Les choses deviennent rapidement désordonnées et complexes.

Modification des valeurs de crénage intégrées d'un caractère?

Le crénage fait essentiellement référence au changement d'espace entre deux lettres ou symboles. L'espacement des lettres (également appelé suivi) fait référence à l'ajout ou à la réduction d'espace entre les lettres et les symboles, sur une ou plusieurs lignes de texte. Chaque police de caractères a construit en son sein (et spécifié par le concepteur de police de caractères) un tableau de combinaisons de lettres et de valeurs de crénage. Robert Bringhurst, dans son livre The Elements of Typographic Style suggère une autre solution:

«Une façon d'affiner la typographie d'un texte est de s'y frayer un chemin ligne par ligne, en y mettant de l'espace , en le supprimant et en repositionnant les caractères erronés un par un. Mais si ces améliorations sont apportées à la police elle-même, vous n'aurez plus jamais besoin de les refaire. Ils sont faits pour de bon. »

Ce qu'il suggère, c'est que nous modifions les valeurs de crénage ou les bandes latérales (plus sur celles-ci en une minute) dans la police elle-même, ouvrant la police dans le logiciel de conception de polices et apportant les modifications pour de bon . Je ne recommanderais pas cela, pour deux raisons:

1. Les options d'importation seules dans un logiciel de police de caractères dépassent le cadre d'un exercice académique et entraîneront des problèmes si elles ne sont pas effectuées correctement par un expert. Les polices de caractères produites avant 2004 environ étaient plus simples à importer et beaucoup moins complexes que les polices de caractères disponibles aujourd'hui. Beaucoup moins de choses pourraient mal tourner, techniquement et technologiquement, avec des polices de caractères construites vers 2004. Lorsque nous ajoutons des paramètres de police variable et des problèmes d'importation et de modification de polices de caractères, des erreurs sont garanties.
2. De nombreuses licences de polices de caractères classeraient les ajustements des polices intégrées. dans les valeurs de crénage et les encadrés dans le fichier de police lui-même en tant que modifications, ce qui ne serait pas autorisé dans le contrat de licence utilisateur final (CLUF). Le faire avec des polices de caractères open source pourrait être légèrement plus acceptable, comme Richard Hendel le suggère bien que cela ne soit toujours pas garanti.

De plus, dans Adobe InDesign, par exemple, si nous prenons une combinaison de caractères de A ”le A et le guillemet de fermeture ont une valeur de crénage de -32 . Supposons donc que nous allions ajouter de l'espace à notre liste de marques sélectionnée à l'aide d'une unité +30 . Pour A »qui a une valeur de crénage de -32 nous pourrions faire cela -2 . Ceci est facile à calculer numériquement et à espacer par incréments ou décrément de 30 unités. Cependant, que se passe-t-il si la valeur était à l'origine -26 . Nous pouvons travailler sur les mathématiques, mais à quelle vitesse? Et cela pourrait augmenter la complexité.

Fonction de modification de table de crénage de Quark

Depuis de nombreuses années, étonnamment, Quark a une option de modification de table de crénage, quelque chose qu'Adobe InDesign n'offre pas. Il vous permet de sélectionner une police de caractères et un poids unique, puis d'entrer une paire de crénage à modifier et à personnaliser par-dessus, en remplaçant la table de crénage intégrée. Dans la case «Paire de crénage», vous saisissez deux caractères pour le crénage. Dans la case «With-Stream», vous pouvez augmenter ou diminuer la quantité horizontale par incréments de 10 unités. Et dans la boîte «Cross-Stream», vous pouvez augmenter ou diminuer la quantité verticale (similaire à un décalage de ligne de base) par incréments de 10 unités. La paire de crénage modifiée et la valeur sont ensuite appliquées dans tout le document Quark. La modification du tableau de crénage de Quark est une fonctionnalité très intéressante et peut vous faire gagner beaucoup de temps. Vos personnalisations peuvent également être enregistrées et exportées. Génial! Nous parlons maintenant. Cette option nous rapproche de notre scénario idéal.

L'espace blanc et le crénage sur les pages Web nécessitent actuellement beaucoup de travail et manquent de support technique

Nous pourrions ajouter un espacement aux signes de ponctuation et autres symboles de deux manières:

1. Nous pourrions utiliser une plage de caractères d'espace blanc, en spécifiant l'entité HTML ou XML dans le balisage, comme le montre la figure 2 et comme Yves Peters décrit excellemment.
2. Nous pourrions créer deux classes CSS, une pour en ajoutant une unité d'espace sur le côté gauche et une sur le côté droit. Ensuite, nous utiliserions une balise span pour l'appliquer à une lettre ou un symbole.

Les deux options ci-dessus sont possibles, mais lorsque vous devez le faire pour des centaines de pages Web, cela devient intimidant et ingérable

Si nous voulons créner officiellement sur le web, nous sommes quelque peu limités dans les options. Il existe essentiellement deux options CSS prédéfinies: font-kerning: normal qui dit d'utiliser le crénage intégré de la police, et font-kerning: aucun qui dit non pour utiliser le crénage intégré de la police. La documentation de Mozilla Developer Network contient un exemple .

Revenons cependant à notre exemple de la combinaison de lettres A ”dont le crénage est compris entre -32 . Si nous devions utiliser un espace pour les cheveux partout, au moins il y aurait peu de calculs à faire, car tous les caractères blancs (essentiellement un glyphe) ont une valeur fixe. Ainsi, l'un des avantages des espaces blancs est qu'ils ont une valeur de largeur cohérente.

L'espace blanc et le crénage dans les livres électroniques produisent des boîtes vides

Ajout d'espace blanc au texte et aux entités telles que les espaces insécables et insécables les tirets peuvent créer des problèmes lorsque le document est exporté au format ebook. Il peut créer des caractères vides (tofu) □. Ces espaces sont probablement mieux supprimés (supprimés) avant d'exporter vers un ebook ou HTML. De plus, le crénage dans les livres électroniques ne peut être spécifié qu'à partir des valeurs intégrées de la police et ne peut pas être modifié ou remplacé. Encore une fois, tout cela diminue nos options.

Modification des valeurs de direction latérale intégrées d'une police?

Les marques latérales font référence à l'espace fixe horizontal de chaque côté d'un caractère ou symbole individuel. Alors que le crénage modifie l'espace entre deux lettres et de nombreuses combinaisons différentes de lettres et de symboles, les portées latérales sont comme des blocs de béton fixes sur la gauche et chevauchent les côtés et la largeur. Et lorsque la valeur est définie, elle affecte toutes les instances de la lettre ou du symbole où elle est utilisée, ainsi que les valeurs de crénage appliquées par-dessus. Les espaces de chaque côté sont désignés par le côté gauche (LSB) et le côté droit (RSB). Ces espaces garantissent que les personnages sont assis côte à côte avec une apparence uniforme. Essentiellement, c'est l'espace à gauche et à droite d'un caractère, avant d'appliquer le crénage.

Si vous regardez la figure 9 dans cet article, j'ai utilisé Fira Mono Regular pour le texte. Si vous numérisez le bloc de texte, vous remarquerez que toutes les lettres s’alignent verticalement. La raison en est que, pour l'essentiel, toutes les polices à espacement fixe ont les mêmes côtés gauche et droit, ou roulement de largeur. (C'est pourquoi on l'appelle une police monospace – "mono", comme au singulier). Cependant, les polices de caractères non monospaces ont des portées latérales gauche et droite différentes; ils s'étendent sur toute la largeur d'un caractère ou d'un symbole. Un bon encadrement peut faciliter la tâche de crénage d'une police. Dans la citation de Robert Bringhurst mentionnée ci-dessus, il dit essentiellement: si vous le réparez une fois, il ne sera plus jamais nécessaire de le réparer. Peut-être, au lieu d'ajuster le crénage, ce que nous devons parfois faire est de modifier le côté. Ci-dessous, une capture d'écran d'un panneau du logiciel Modification manuelle des métriques du logiciel FontLab VI .

Cette capture d'écran nous dit quelques choses:

1. Le e (mis en surbrillance dans le logiciel) a une largeur de 591 unités, ce qui est illustré par la fine ligne verticale noire à gauche et à droite des e .
2. Le longeron gauche du e a 68 unités
3. Le côté droit de la e a 53 unités.

Donc, si nous devions penser aux problèmes d'espacement et de crénage mentionnés plus haut, considérons les deux points. Nous voulons toujours un peu plus d'espace sur la gauche des deux points, afin qu'il soit un peu éloigné de tout caractère à sa gauche. En théorie, nous pourrions éditer le côté gauche et dire que nous voulons un peu plus d'espace sur la gauche:

 68 unités + 20 unités = 88 unités

Remarque : Cela pourrait correspondre à l'espace fourni par un espace capillaire, par exemple.

Ensuite, chaque fois que le personnage est utilisé, en combinaison avec d'autres personnages, il aura toujours un peu plus d'espace sur la gauche. Est-ce que c'est ça? Avons-nous terminé?. Pas tout à fait.

Considérez ce texte: 1: 1 . Que se passe-t-il, maintenant que nous avons augmenté le côté gauche par défaut, cela pourrait ressembler à 1: 1 . Ce que nous pourrions devoir faire est d'ajouter une valeur de paire de crénage pour une combinaison 1: (bien que je ne sois pas un expert, et mes connaissances manquent légèrement dans ce domaine).

Cet article est devenu assez technique, et je vous ai probablement confondu et ennuyé maintenant. Mais attendez: il y a des options potentiellement plus faciles et plus claires.

Possiblement de meilleures solutions

Modification de l'espace blanc pour l'impression et le Web

Pour clarifier : L'ajout d'un espace blanc revient essentiellement à ajouter un caractère (entité) d'espace blanc. .

À quoi ressemblerait une modification d'espace blanc? Quark a une option d'édition de table de crénage; pourquoi InDesign n'en a pas. À quoi cela ressemblerait-il en CSS ou via la syntaxe des fonctionnalités OpenType en CSS?

1. Le typographe devrait être en mesure de définir une liste prédéfinie convenue de signes de ponctuation et de symboles pour ajouter de l'espace.
2. Ayant défini la liste prédéfinie de signes de ponctuation et de symboles pour ajouter de l'espace pour, l'utilisateur devrait alors être en mesure de spécifier à quels signes de ponctuation et symboles il souhaite ajouter de l'espace sur le côté droit ou gauche.
3. L'utilisateur devrait alors être en mesure de spécifier des combinaisons de lettres et de symboles problématiques; par exemple, pour exclure l'ajout d'espace au texte tel qu'une URL: https: // www . Nous pourrions raisonnablement ajouter de l'espace à gauche et à droite d'un signe barre oblique ( / ), mais avec une combinaison comme https: // nous obtiendrions un double espace personnalisé pour le right of the first / and to the left of the second /making it look like this: https:/ /.
4. When the user has done this, they would then need to be able to add a space that is user-definable, or a space value from, say, four options. For print: 255075100 (measured 1/1000 em in InDesign, relative to the typeface’s size). And for web: 1px2px3px4px.
5. The user would need to be able to apply this spacing to the style sheet in InDesign or Quark, and also in CSS. I am sure experts can think of better coding than what is below, but here is my amateurish attempt:

   .class {
       font-feature-settings-space-characters-symbols-left-side: value,value,value,value; /* Characters and symbols could be copied into the horizontal list, or Unicode HTML entity values used as well */
       font-feature-settings-space-characters-symbols-right-side: value,value,value,value; /* Characters and symbols could be copied into the horizontal list, or Unicode HTML entity values used as well */
   font-feature-settings-space-characters-symbols-amount: value; /* Any range of measuring units could be used: px, em, rem */
   font-feature-settings-space-characters-symbols-problem-exclude-combinations: value,value,value,value; /* Letter and symbol combinations to not apply the above spacing to */
   }
   

   Or leave it to typeface designer to allow four options built into their typeface, via OpenType Feature File Specification rules:

   font-feature-settings-space-characters-symbols-amount-space: value; /* The user is allowed to define 1 of a range of 4 values: quarter 1/4, half 1/2, two-thirds 2/3, full 4/4 */
   

   Note: I tried to pick up on the syntax for OpenType features in CSS.

6. In Adobe InDesign and a website’s CSS, a user needs some method to edit white space, overriding the built-in values in print and web fonts, applying it to a paragraph or character style sheet or as a selector in a CSS class.

Kerning Table Editing For Print And Web

To clarify: Kerning is the customization of space in between two letters or symbols. Kerning values are stored in a font file in a kerning table. Kerning values override the three sidebearing values (left sidebearing, width bearing, and right sidebearing). Kerning can also be customised on top of the built-in kerning table through software like Adobe InDesign and Quark. Letterspacing (also known as tracking) is a consistent positive (+) or negative (-) space value applied across a whole line of text.

What would a kerning table edit in Adobe InDesign look like? Quark has one. What would it look like in CSS or in the syntax for OpenType features in CSS? What do we ideally need? Well, in InDesign, it could look something like figure 11, pushed a bit further. Kerning typically relates to the space between two characters. For the spacing of punctuation and other marks, we are interested in spacing, but how would we kern all instances of a character and a colon (:), like the following: a:b:c:? We would be doing it for a long time, because there are potentially thousands of combinations that use a colon. However, if we could specify one character in the kerning pair dialog box (as shown in figure 11), then maybe we could specify a character and just say we want +25 units on the left side. For a kerning table edit on the web, we could do something like what’s shown below (but, again, we really need some way to read a font’s built-in kerning values, because we have no idea what they are to begin with):

fontname kerningtable { /* Accesses the kerning table within the web font file. * /
    font-feature-settings-kerning-table-edit: character character, -value or +value;
/* The user selects two characters to kern, and then specifies a negative or positive value in a measurement unit (px, em, etc.). * /
    font-feature-settings-kerning-table-edit-direction: horizontal or vertical;
/* The user can specify whether they want the kerning to be horizontal or vertical. * /
}

Sidebearing Edit For Print And Web

To clarify: Sidebearings differ from kerning because they act like bottom-level (non-overridable) concrete blocks, forming the width of all the individual letters and symbols. A sidebearing value affects all instances of the letter or symbol where it is used, and the kerning values are applied on top of it. So, a lowercase i has a narrower width sidebearing than a lowercase mwhich is twice as wide as an i (for non-monospace typefaces in general).

What would a sidebearing edit in Adobe InDesign look like? What would it look like in CSS or via the syntax for OpenType features in CSS? What do we ideally need? Well, it would look much like the example given under the heading above for “White space edit for print and web”. We would need some way to read the built-in sidebearing. So, in figure 12, the left sidebearing is 68the right sidebearing is 53and the width is 591. In CSS, we would somehow need to obtain the three built-in values for any character or symbol, either from an official public source or from the font maker. Then, maybe we could override those values using CSS:

fontname character { /* Accesses the sidebearing values within the web font file. * /
    font-feature-settings-sidebearing-for-what-character: character; /* The user can paste in the character or specify a decimal or HEX entity. * /
    font-feature-settings-left-sidebearing: value; /* Value in px? * /
    font-feature-settings-right-sidebearing: value; /* Value in px? * /
    font-feature-settings-width-sidebearing: value; /* Value in px? * /
    font-feature-settings-sidebearing-problem-exclude-combinations: value; /* Letter and symbol combinations to not apply the above spacing to */
}

Observations

If you have read this far and have not given up or gotten bored, then you are clearly a committed typographer.

Let’s conclude:

• Adding space characters (which are essentially character entities) of any kind, like hair spaces or thin spaces, in any software (Adobe InDesign, Quark, HTML) just leads to problems and results in a load of work.
• We need to be able to modify spacing via the actual kerning value, rather than via a white space character or entity.
• Typographers need to be able to override the built-in kerning table values in typefaces, then be able to apply custom kerning values via access to a kerning table editing feature.
• Users need to be able to apply spacing to punctuation marks and other select symbols, and apply custom kerning globally to a typeface (either a desktop or web font), via a paragraph or character style sheet in Adobe InDesign and CSS.
  We need to be able to do all of this in a print document or website in less than 15 minutes, and it needs to be easy enough for people with basic software knowledge to do.

What Might The Solution Look Like?

Should the OpenType Feature File Specification rules allow for the spacing of punctuation marks and other symbols, so that typeface designers can allow it via some kind of OpenType pre-built option within their typefaces before releasing them for sale? Should Adobe have some kind of built-in kerning table editing, like Quark has had for many years? Should CSS allow access to a typeface’s built-in kerning table, for custom values to override the designer’s values? Should typeface designers space punctuation marks and other symbols better and more generously? Have they been lacking attention in this area?

Afterword

I hope you have found this article insightful and useful. I have not presented a perfect solution, but rather have covered potentially viable solutions, which I am happy to be developed and explored further. I am no expert in internal typeface kerning, technology, or new CSS properties. But I am sure we can do something about these hard-to-manage spacing problems that humans have been dealing with for so many hundreds of years across changing technological media. If you have any ideas, contact me by visiting the website linked in my “About the Author” page shown at the top of this article.

Thanks to Rachel Andrew (for advice and editing), Erik Spiekermann (for email support and further contacts), and Jost Hochuli and Roland Stieger (for support and feedback).

“I would love all those features, but I only know 1 or 2 other graphic designers who would use them. They don’t even use any of the OpenType features or Stylistic sets. I used the kerning table edit in Quark all the time, when setting different languages. Partly because I didn’t like some of the built-in kernings, partly because there were some missing, especially those after and before spaces. But most designers don’t even change the default word spaces in InDesign, let alone bother about more details. Sad, but ask other typeface designers and the few good typesetters out there: standards are low.”

— Erik Spiekermann (March 2020)

Further Reading

• “Syntax for OpenType Features in CSS”, Adobe (2020)
• “Rules of Composition,” Nicky Barneby (2002)
• The Elements of Typographic StyleRobert Bringhurst (2004)
• “Manual: Brackets”, Anya Danilova, type.today (2020)
• “Manual: The Dash”, Anya Danilova, type.today (2019)
• “eXtreme Type Terminology, Part 4: Numerals and Punctuation”, Paul Dean (2008)
• Beyond Selecting and Arranging TypeCharles Ellertson (2013)
• “Punc Rocks: The Typographer’s Guide to Punctuation”, James Felici (2009)
• “Punctuation (1): The Linguistic Side”, Lisa Fischbach (2017)
• “On Quotation Marks and Other Puzzling Punctuation”, Peter Glaab (2017)
• “Methods for Controlling Spacing in Web Typography”, Geoff Graham (2016)
• “Global Kerning Changes in InDesign through GREP Styles”, Ralf Herrmann (2016)
• Detail in TypographyJost Hochuli (2008)
• Life StyleBruce Mau (2005)
• InDesign ScriptsPeter Kahrel (2019)
• Lesetypografie and Book TypographyRobin Kinross (2007)
• “Character Design Standards: Punctuation for Latin 1”, Microsoft (2017)
• Book Designers From the NetherlandsBrigitte Schuster (2014)
• “Erik Spiekermann”, Design Within Reach (2020)
• “TypeTalk: Document-Wide Kerning”, Ilene Strizver (2009)
• “How to properly typeset all forms of punctuation used in English-language documents?”, Village (2012)
• “Find and Replace, GREP”, David Sudweeks (2013)
• “Adventures in Space: Spaces”, Yves Peters (2016)
• “Adventures in Space: Kerning”, Yves Peters (2016)
• “Space Yourself”, Marcin Wichary (2015)
• “Adding Half Spaces to Punctuation”, Allen Wyatt (2020)
• “The Year in Design”, Jeffrey Zeldman (2015)
• “font-kerning”, Mozilla Developer Network (2019)

(ra, yk, il, al)