HOW TO

Genderstern
in Typografie und
Schriftgestaltung

Inspiriert durch die Präsentation von Bye Bye Binary beim Type Thursday Berlin, den Text “Nonbinäre Sprache + Typografie” von Bianca Ledies und Hannah Wittes Projekt “Typohacks” haben wir die folgenden praktischen Mini-Tutorials erstellt, die demonstrieren sollen, wie in Typografie und Schriftgestaltung ein Asterisk (*) als Genderstern verwendet und auf die x-Höhe gesetzt werden kann, um ihn visuell zu integrieren und damit den Lesefluss zu verbessern.

Wir freuen uns über Fragen, Anmerkungen, Ergänzungs- oder Verbesserungsvorschläge!

☞ InDesign

☞ HTML+CSS

☞ Glyphs

InDesign: Durch einen GREP-Stil im Absatzformat wird ein Zeichenformat mit Grundlinienversatz angewendet

Für eine systematische Lösung besteht in InDesign die Möglichkeit, die vertikale Positionierung bestimmter Zeichen durch Grundlinienversatz zu verändern.

1

Dafür legen wir zuerst ein Absatzformat für unseren Text an.

2

Dann legen wir das Zeichenformat “Genderstern” an, welches den Grundlinienversatz für den Asterisk festlegt.

3

Zurück im Absatzformat erstellen wir einen neuen GREP-Stil.
Bei “Format anwenden” wählen wir unser Zeichenformat “Genderstern” aus.
Bei “Auf Text” geben wir folgende Formel ein: (?<=\w)\*(?=\w)
Damit wird unser Zeichenformat automatisch auf alle Asteriske angewendet, die zwischen zwei Wortzeichen (a-z, A-Z, 0-9 und Unterstrich) stehen. Alternativ könnte statt \w auch \l verwendet werden, der Platzhalter für Kleinbuchstaben.

4

Schwups, jetzt sind alle Asteriske neu positioniert. Die farbliche Hervorhebung dient hier nur dem Demonstrationszweck und wurde, wie der Grundlinienversatz, im Zeichenformat festgelegt. Bei Formatierungen, die automatisiert über einen GREP-Stil angewendet werden, sollte auf jeden Fall immer anschließend überprüft werden, ob die angewendete GREP-Formel wirklich nur auf die Zeichen angewendet wurde, deren Veränderung beabsichtigt war.

HTML+CSS: <span> und translateY

1

Verwende das Element span mit einer spezifischen Klasse, um die Position des Asterisk über CSS ansprechen zu können, z.B. so:

<p>Freund<span class="genderstern" aria-hidden="true">*</span>innen</p>

Die Verwendung von aria-hidden="true" verhindert, dass Screenreader den Asterisk vorlesen. Screenreader lesen hier stattdessen die weibliche Form vor.

2

Durch diese beiden Zeilen kannst du im CSS die vertikale Positionierung des Asterisk beeinflussen:

span.genderstern {

  display: inline-block;

  transform: translateY(.22em);

}

Es empfiehlt sich die Nutzung der Größeneinheit em, da sich die Transformation so relativ zur Textgröße verhält.

3

Schau dir dieses Beispiel an:

https://codepen.io/JensSchnitzler/pen/wvgwpVy?editors=1100 

Glyphs: Mit OpenType-Feature Zeichen kontextuell ersetzen

Aufgrund unserer eigenen Screenreader-Tests (unter MacOS) halten wir das Schriftzeichen “Mittelpunkt” (engl. “Interpunct” oder “Middle Dot”) für ein gutes Substitutionszeichen, denn es wird von Screenreadern als kurze Pause gelesen. Der Asterisk hingegen wird teilweise als “Stern” vorgelesen. Semantisch ist die Verwendung des Mittelpunkts auch nicht ganz abwegig, da er im Französischen vergleichbar zum Gendersternchen verwendet wird. In Glyphs wird der Mittelpunkt als periodcentered geführt.

Die folgenden Schritte basieren auf diesem Glyphs Tutorial: https://glyphsapp.com/learn/features-part-2-contextual-substitutions 

1

Füge der Schrift die Glyphe periodcentered.alt hinzu. Kopiere und positioniere den Pfad der Glyphe asterisk in die neue Glyphe.

2

Schreibe das calt-Feature zur kontextuellen Ersetzung: Gehe hierfür zu den Features in der Font-Info, erstelle ein neues Feature mit dem Namen “calt” und ergänze folgende Zeilen:

sub asterisk' i n by periodcentered.alt;

sub e asterisk' r by periodcentered.alt;

Die erste Zeile sorgt dafür, dass jedes Asterisk, welches sich direkt vor der Buchstabenfolge “in” befindet, durch unser Gendersternchen ersetzt wird (wie in Schüler*in).

Die zweite Zeile sorgt dafür, dass jedes Asterisk, welches sich zwischen einem “e” und einem “r” befindet, durch unser Gendersternchen ersetzt wird (wie in jede*r).

Weitere Ersetzungsregeln können nach diesem Schema hinzugefügt werden.

3

Bei aktiviertem calt-Feature wird jetzt

1. ein Asterisk, das von der Zeichenkombination “in” gefolgt wird,
2. ein Asterisk, das zwischen “e” und “r” steht,

automatisch durch die Glyphe periodcentered.alt ersetzt.

4

Exportiere die Schrift und aktiviere das calt-Feature im Code oder im Layoutprogramm:
InDesign: https://www.adobe.com/products/type/opentype.html#apps
Code: https://sparanoid.com/lab/opentype-features/#calt