Leerzeichen

Die Zeichensetzung wird im Umfeld der Schweizer Typografie oft sorgsam und gekonnt eingesetzt. Während sich die Fachleute für Druckgrafik oftmals vertieft mit der Erscheinung und Technik in der Mikrotypografie auseinandergesetzt haben, herrscht im Web nicht immer dieselbe Sorgfalt. Insbesondere Leerzeichen sind nicht immer ganz einfach zu setzen …

Welches bloss?

Abhängig von Kontext und Text müssen ganz verschiedene Leerzeichen verwendet werden. Obwohl die Laien nicht auf Anhieb den Unterschied erkennen mögen, sollte beim «gepflegten Satz» doch darauf geachtet werden, dass sich eine professionelle Gestaltung auch bis in die Mikrotypografie und die Zeichensetzung fortführt.

Wie eingeben?

Üblicherweise werden Websites heute über CMS (Content Management System) mit Inhalt befüllt. Da sich fast alle modernen Systeme an den Unicode-Zeichensatz (UTF-8) halten, können auch typografisch korrekte Zeichen eingegeben werden. Da diverse Zeichen nicht einfach über die Tastatur zugänglich sind, empfiehlt es sich, ein Snippets-Manager oder ein sonstiges Helferprogramm zum Abrufen von Textbausteinen zu benutzen. Alternativ kann natürlich auch die Zwischenablage bemüht werden. Wenn das CMS eine Eingabe als HTML erlaubt, so kann auch eine Entitätenreferenz (siehe Tabelle) oder der dezimale bzw. hexadezimale Code eingegeben werden. Dies hat erst noch den Vorteil, dass man auch später besser sieht, welches Zeichen eingegeben wurde, da es oftmals schwierig ist, in kleinen Schriftgrössen zu erkennen, welche Breite das Zeichen nun hat.

Breitenloses Leerzeichen

Das breitenlose Leerzeichen gehört offiziell nicht einmal zu den Leerzeichen. Es kann innerhalb von Wörtern gesetzt werden, um dem Browser anzuzeigen, dass es sich um eine Trennstelle handelt (ähnlich der bedingten Trennung), diese jedoch nicht mit einem Trennstrich angezeigt werden soll.

Wörter trennen – ohne Trennstrich

DieNeue
Typografie.ch

DieNeue​​Typografie.ch

Leerzeichen ohne Umbruch

Immer wenn man sprachliche Einheiten nicht trennen möchte, kann man diese mit einem umbruchgeschützten Leerzeichen verbinden.

Wörter mit dazugehöriger Ziffer

Seite 3

Seite​ 3

10 Liter

10​ Liter

DIN 9000

DIN​ 9000

Firmennamen

Grau AG

Grau​ AG

Blau GmbH

Blau​ GmbH

Turing & Co.

Turing​ &​ Co.

Schmales Leerzeichen

Das schmale Leerzeichen wird typografisch an diversen Stellen eingesetzt. Meist empfiehlt es sich, die Variante zu nehmen, welche gleichzeitig auch keinen Umbruch zulässt; auch geschütztes schmales Leerzeichen genannt.

In Browser Safari gab es von der Version 10 – 13 einen Bug, so dass das geschützte schmale Leerzeichen ohne Breite dargestellt wurde.

Datum

18.August 2018

18.​ August 2018

18.8.2018

18.​ 8.​ 2018

Masseinheiten

100km

100​ km

30°C

30​ °C

Telefonnummern

+41787001010

+41​ 78​ 700​ 10​ 10

Berufstitel

Prof.Dr.Moser

Prof.​ Dr.​ Moser

Lic.Jur.Tina A.Kramer

Lic.​ Jur.​ Tina A.​ Kramer

Mathematische Notation

5050​ =​ 250

50​ ​ 50​​ =​​ 250

Abkürzung

z.B.

z.​ B.

Nr.1

Nr.​ 1

Zifferngruppierung

20000

20​ 000

Paragraf

§10

§​ 10

Aber nicht bei Winkelgrad!

Winkelgrad

30°

30°

Ziffernleerzeichen

Ziffernleerzeichen sind mit Vorsicht zu geniessen. Sie sollten nicht dazu dienen, ganze (Zahlen-)Blöcke von Text zu formatieren. Aber es kann nützlich sein, ein Leerzeichen zu haben, das genauso breit ist wie die proportionalen Versalziffern.

Alignierende Ziffern

100
50

100<br/>​&numsp;50

Leerzeichen relativ zum Geviert

Es gibt diverse Leerzeichen, die als Bruchteil vom Geviert definiert sind. Diese Leerzeichen können in besonderen Fällen mal zur Anwendung kommen, sind jedoch nicht im Alltagsgebrauch und daher eher unwichtig.

Browser und Fonts

Wie jedes andere Zeichen müssen auch Leerzeichen über den Font kontrolliert werden. Leider enthalten nicht immer alle Schriften die benötigten Leerzeichen. Zum Beispiel ist das schmale Leerzeichen ohne Umbruch oft nicht in Fonts vorhanden, jedoch das normale schmale Leerzeichen. Um das nicht umbrechende Zeichen dennoch auf der Website benutzen zu können, kann man einen Filler-Font erzeugen. Dieser nimmt die Breite des schmalen Leerzeichens und erzeugt einen neuen Font mit nur einem geschützten schmalen Leerzeichen, das dann nicht umbricht. So wurde weder das ursprüngliche Font-File modifiziert (kein Lizenzverstoss), noch muss man typografische Abstriche machen.

Filler-Font
mit nur einem Zeichen im CSS laden

@font-face {
  font-family: 'FontFiller';
  font-style: normal;
  font-weight: 400;
  src: url("./FontFiller.woff2") format("woff2");
  unicode-range: U+202F;
}

Filler-Font im CSS nutzen

html {
  font-family: "FontFiller", "MyRegularFont", sans-serif;
}

Die wichtigsten Leerzeichen

Es gibt diverse nicht druckende Zeichen im Unicode-Standard. Hier eine kleine – nicht abschliessende – Übersicht über die wichtigsten Leerzeichen mit typografischer Relevanz.

Beispiel Name HTML
MM Breitenloses Leerzeichen
ZERO WIDTH SPACE
Entitätenreferenz: &ZeroWidthSpace;
dezimal: &#8203;
hexadezimal: &#x200B;
M M Leerzeichen
SPACE
dezimal: &#32;
hexadezimal: &#x0020;
M M Leerzeichen ohne Umbruch
NO-BREAK SPACE
Entitätenreferenz: &nbsp;
dezimal: &#160;
hexadezimal: &#x00A0;
MM schmales Leerzeichen
THIN SPACE
Entitätenreferenz: &thinsp;
dezimal: &#8201;
hexadezimal: &#x2009;
MM schmales Leerzeichen ohne Umbruch
NARROW NO-BREAK SPACE
dezimal: &#8239;
hexadezimal: &#x202F;
MM Haarspatium
HAIR SPACE
Entitätenreferenz: &hairsp;
dezimal: &#8202;
hexadezimal: &#x200A;
MM Sechstelgeviert-Leerzeichen
SIX-PER-EM SPACE
dezimal: &#8198;
hexadezimal: &#x2006;
MM Viertelgeviert-Leerzeichen
FOUR-PER-EM SPACE
Entitätenreferenz: &emsp14;
dezimal: &#8197;
hexadezimal: &#x2005;
MM Drittelgeviert-Leerzeichen
THREE-PER-EM SPACE
Entitätenreferenz: &emsp13;
dezimal: &#8196;
hexadezimal: &#x2004;
MM Halbgeviert-Leerzeichen
EN SPACE
Entitätenreferenz: &ensp;
dezimal: &#8194;
hexadezimal: &#x2002;
MM Geviert-Leerzeichen
EM SPACE
Entitätenreferenz: &emsp;
dezimal: &#8195;
hexadezimal: &#x2003;
00 Ziffernleerzeichen
FIGURE SPACE
Entitätenreferenz: &numsp;
dezimal: &#8199;
hexadezimal: &#x2007;
.. Interpunktionsleerzeichen
PUNCTUATION SPACE
Entitätenreferenz: &puncsp;
dezimal: &#8200;
hexadezimal: &#x2008;

Das «Gegenteil» von Leerzeichen

Technisch gesehen kein Leerzeichen, aber in diesem Zusammenhang erwähnenswert, ist das breitenloses Verbindungszeichen. Ein Zeichen, das anzeigt, dass eine Trennung an dieser Stelle nicht zulässig ist.

Icon und Text

​&#8288;Link

Link

Link​&#8288;

Beispiel Name HTML
MM Breitenloses Verbindungszeichen
WORD JOINER
dezimal: &#8288;
hexadezimal: &#x2060;

Quellen & Infos

Veröffentlichungen