R.I.P. Arial – Nachruf auf eine Ungeliebte

helvArt

„Kunst kommt von Können“, weiß der Volksmund. Damit etwas zu einer Stilikone wird, bedarf es in der Regel weiterer Zutaten. Im Falle der Helvetica war dies gegeben: Ideenreichtum, eine allgemeine Aufbruchsstimmung in den Jahren des „Wirtschaftswunders“ und der damit verbundene Wunsch nach einer neuen Sachlichkeit. Drängt sich jedoch der schnöde Mammon allzu sehr in den Vordergrund, kann das Ergebnis oftmals nicht überzeugen und die Kritik nimmt überhand. Aber immer schön der Reihe nach … Was war geschehen?

Helvetica


Max MiedingerDie 1957 durch Max Miedinger in Zusammenarbeit mit Eduard Hoffmann gestaltete Helvetica ist eine Ikone der Schweizer Grafik. Sie  basiert auf der Akzidenz Grotesk von Berthold (1896) und der Normal Grotesk aus dem Hause Haas und gehört zu den Groteskschriften mit klassischem Charakter. Zunächst unter dem wenig werbewirksamen Namen „Neue Haas-Grotesk“ von der D. Stempel AG vertrieben, änderte man aus Marketinggründen zu Beginn der 60er Jahre den Namen erst in Helvetia, was nun eine Verwechselung mit der gleichnamigen Versicherungsgesellschaft nahelegte, bevor sie ihre heutige Bezeichnung Helvetica („Die Schweizerische“ oder „Die Schweizerin“ in Anlehnung an die lateinische Staatsbezeichnung „Confoederatio Helvetica“) erhielt.
1983 überarbeitete die D. Stempel AG die Helvetica für die Linotype AG, im Ergebnis entstand die Schriftfamilie Neue Helvetica mit acht Grundschnitten, welche jeweils bezüglich Breite (Condensed, Normal, Extended) und Kursiv variiert sind. In ihrer Postscript-Version umfaßt die Helvetica WORLD heute 1866 Glyphen in 51 verschiedenen Schnitten, ein Reichtum, der sie für Firmen-Corporate-Identity-Lösungen nach wie vor attraktiv macht.

„When using Helvetica you’re never wrong, but also never right.”

By GearedBull Jim Hood (Own work) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/3.0)], via Wikimedia Commons

Es gab eine Zeit, da war die Helvetica einfach Kult – wenn man so will, der angebissene Apfel unter den Schriftarten. In den 50er und 60er Jahren galt sie weltweit als Vorbild für eine sachliche und funktionale Kommunikation, die die zu transportierende Botschaft nicht überdeckt. Ihr ausgewogenes und neutrales Schriftbild verzichtet auf expressiven Ausdruck, eine Eigenschaft, die der Schrift ebenso angerechnet wie vorgeworfen wird. Im Unterschied zu den konstruierten Grotesk-Schriften wie Futura oder Avant Garde ist die Helvetica trotz ihrer äußeren Uniformität nicht konstruiert, sondern gezeichnet. So sind die Strichstärken nicht völlig einheitlich, sondern auf gute Lesbarkeit hin optimiert. Infolge der betonten Vertikalen ist sie im Mengensatz fast unverwechselbar. Sie ist in ihrem Auftreten so souverän, daß mit ihr selbst in visueller Gestaltung wenig talentierte Zeitgenossen gutes Design auf die Beine stellen können. Auf der anderen Seite macht gerade ihre Omnipräsenz sie angreifbar für den Zeitgeist: konservativ, bieder, phantasielos, eben typisch deutsch (Äh, wer hat’s erfunden?). Man kann sie lieben oder hassen. Sie zu ignorieren, ist (fast) unmöglich.

helv4

Indes dürfte gerade diese Polarisierung der Schrift zu einer einmaligen Bekanntheit verholfen haben. Die Helvetica ist die mit Abstand meistverwendete Schrift – gemäß einer Erhebung des Berliner Fontshop-Archivs führt sie die Rangliste der 100 besten Schriften aller Zeiten an und fragt man Profis nach deren bevorzugten „Arbeitspferden“, wird in kaum einer Auflistung die Helvetica fehlen. Sie scheint durch ihren Einsatz als Hausschrift vieler Firmen und Institutionen sowie die Straßenbeschilderung geradezu ins kollektive Gedächtnis gemeißelt zu sein. Auf DTP-Systemen ist sie spätestens seit der Markteinführung von Mac OS X durch Apple im Portfolio grafischer Arbeitsplatzrechner. Wie bei jedem guten Produkt gibt es auch im Falle der Helvetica zahlreiche Nachahmer, deren prominentester Vertreter die Arial ist. Womit wir zum eigentlichen Punkt kommen …

Arial


Chapeau! Einer unlösbaren Aufgabe sich dennoch zu stellen, sollte dem neutralen Betrachter schon eine gewisse Portion Respekt abnötigen. Denn in nicht weniger als eine aussichtslose „lose-lose-Situation“ begaben sich 1982 Robin Nicholas und Patricia Saunders, als sie von Monotype beauftragt wurden, eine für niederauflösende Bildschirme und IBM Laserdrucker optimierte Schrift ähnlich der Helvetica zu gestalten. Nur wie soll man etwas anscheinend Perfektes noch verbessern? Das Ergebnis hörte zunächst auf den etwas sperrigen Namen Sonoran San Serif, wird seit 1992 durch Microsoft mit allen Windows-Versionen ausgeliefert und erlangte als Arial traurige Berühmtheit. Für Erik Spiekermann und viele seiner Kollegen ist die Arial ein rotes Tuch, nicht weit entfernt vom Untergang des Abendlandes. Nun mögen viele Windows-Benutzer fragen, worin denn das Problem liege.

Schließlich resultiert Zufriedenheit immer aus Unkenntnis.

Stellen wir dazu die beiden Schriften (Helvetica in Karminrot, Arial als Konturschrift) einmal vergleichend gegenüber:

helvArial1

Schnell erkennt man bei der überwiegenden Zahl der Glyphen eine verblüffende Ähnlichkeit sowie identische Dimensionen bezüglich Versalhöhe, Spationierung usw., von Deckungsgleichheit kann aber keine Rede sein. Die Arial wirkt im Druckbild gegenüber der Helvetica kräftiger, ihr Grauwert ist zu dunkel. Eine unausgeglichene Laufweite, also die Proportionen und der Abstand zwischen den Zeichen, gibt der Arial ein unruhiges Bild. Zudem ist sie in ihrer Grundeinstellung etwas zu eng gesetzt, weshalb Profis zu einer Vergrößerung der Zeilenhöhe sowie geringfügigem Spationieren raten.

helv2

Besonders häßlich sind die angeschrägten Endstriche etwa bei a, c, r und s. Proportionen und Form des t spotten jeder Beschreibung. Die Versalhöhen von Ziffern und Buchstaben sind identisch (bei der Helvetica sind die Ziffern geringfügig kleiner geschnitten, weshalb sie im Mengentext weniger dominant gegenüber den Gemeinen auftreten). Deutlich unterscheidbar – auch für das nicht trainierte Auge – sind die Versalien von R und G. Daß der ß-Gestaltung offensichtlich keine Beachtung beigemessen wurde, ist schwer zu verkraften, aber einem Nichtdeutschen vielleicht noch nachzusehen. Möglicherweise waren die beiden Entwickler in ihrer Freizeit zu oft mit dem Aufbau von „Carrera-Rennbahn“ beschäftigt. Insgesamt ist die Arial weder als Textschrift noch als Headlineschrift im Druck zu empfehlen, ihr fehlt schlicht und ergreifend einiges an Klasse.

Doch wie steht es um die andere Seite der Medaille? Stand auf der To-do-Liste der Entwickler nicht auch die Forderung nach einer verbesserten Lesbarkeit auf Monitoren? Tatsächlich verwendete Monotype einen Großteil der Zeit auf das Problem der Weichzeichnung von Pixeln speziell bei kleinen Schriftgrößen. Daß hierfür Kompromisse zwischen guter Lesbarkeit einerseits und gestalterischer Ästhetik andererseits gemacht werden mußten, war den Verantwortlichen vermutlich bewußt. Die Kritik aus dem Lager der Experten an der Arial richtet sich folglich auch nicht auf deren Wirkung am Bildschirm, sondern auf ihr Druckbild.

Was bleibt und in den Augen des Verfassers schwerer wiegt, ist wiedermal die Vertriebspolitik von Microsoft. Offensichtlich hatten die Redmonder kein Interesse, Lizenzgebühren an die Rechteinhaber der Helvetica zu zahlen. Im Plagiieren nicht ganz unerfahren und rechtlich kaum angreifbar, da das Urheberrecht in Amerika zwar den Namen der Schrift, nicht aber deren Erscheinungsbild, schützte, schlug das „Reich des Bösen“ ein weiteres mal gnadenlos zu. Auch wenn mancher dies mit einem Verweis auf die damals noch nicht endlos sprudelnden Einnahmen des späteren Softwareriesen zu begründen versucht, darf es als Argument oder gar Entschuldigung nicht durchgehen. Umso mehr, da in der Folgezeit das Schauspiel von M$ einfach wiederholt wurde. So ist die von Steve Matteson für Windows Vista entworfene Segoe nichts anderes als eine billige Kopie der Frutiger. Aber damit nicht genug: Microsoft beantragte nun sogar einen Geschmacksmusterschutz für die Segoe, da selbiger für die Frutiger abgelaufen ist. Das EU-Harmonisierungsamt  lehnte dieses Vorhaben gerechterweise aber 2006 ab. Die Schrift sei der Frutiger von Linotype zum Verwechseln ähnlich – Adrain Frutiger bleibt somit der geistige Vater der nach ihm benannten Schrift.

Somit könnte es gut sein, daß die Tage der Arial (endlich) gezählt sind, kommt die Frutiger doch viel moderner daher. Nur steht auch diesmal zu befürchten, daß infolge der Übermacht an „Win-Dosen“ die Segoe ihren wahren Erfinder nicht angemessen würdigen wird.


Quellen

[1] Ralf Turtschi: Arial-Nachfolger: Segoe
[2] Johannes Isphording: Helvetica? Hellvetica!
[3] FontShop präsentiert: Die 100 besten Schriften aller Zeiten

Schrift einfach nach Belieben oder …?

typografie

„Im Anfang war das Wort.” Und dies sollte außerhalb des eigenen Gedächtnisses gespeichert und an die nächsten Generationen weitergegeben werden. Also erfand der Mensch die Schrift. Allerdings vergingen mehrere Tausend Jahre, bis mit der Erfindung der beweglichen Lettern im 15. Jahrhundert der Buchdruck die massenhafte Verbreitung von Schriftgut ermöglichte und die damit einhergehenden neuen Druckschriften die Typografie als Lehre und Kunst des Schriftsatzes erst recht etablierte. Primäres Ziel selbiger ist die optimale Lesbarkeit eines Textes. Weiterhin spielen ästhetische Gesichtspunkte eine wichtige Rolle. Sie unterliegt Trends und Stilrichtungen: Was heute en vogue ist, kann schon morgen kalter Kaffee sein. Gute Typografie orientiert sich aber immer an bestimmten Gestaltungsregeln, die seit Johannes Gutenbergs Zeiten beinahe unverändert Bestand haben. Zurecht merkte Erik Spiekermann, einer der bedeutendsten Schriftdesigner, an, daß Sprache „durch Schrift erst schön” wird. Dieser Artikel stellt die wesentlichen Begriffe und „Goldenen Regeln” der Typografie zusammen.

Schrift-Aufbau

In der Typografie ist eine Glyphe die grafische Darstellung eines Schriftzeichens, zum Beispiel eines Buchstabens, eines Silbenzeichens, einer Ligatur oder eines Buchstabenteils. Die Fachbegriffe, mit denen die Glyphen-Bestandteile und Schriftgrößen charakterisiert werden, stammen überwiegend aus den Zeiten des Bleisatzes.

typo1

Großbuchstaben bezeichnen wir als Versalien (oder Majuskeln von lat. major = „größer”), Kleinbuchstaben als Gemeine (oder Minuskeln von lat. minor = „kleiner”).
bleiletterDie Höhe eines Buchstaben wird durch seine Ober-, Mittel- und Unterlänge beschrieben. Der Schriftgrad oder die Kegelhöhe (a) ist immer etwas größer als die Summe dieser drei Längen und somit ungleich der Buchstabenhöhe (Versalhöhe).
Jede Glyphe besitzt eine Vor- und Nachbreite – ihre Breite wird als Dickte (b) bezeichnet. Der freie Raum um den Buchstaben heißt Fleisch und innerhalb des Buchstabens Punze.
Schriftarten, bei denen jedes Zeichen den gleichen Dicktenwert besitzt, werden nichtproportionale oder Monospace-Schriften genannt (wie beispielsweise Courier). Diese Schriftarten kommen zum Einsatz, wo jedes Zeichen den gleichen horizontalen Raum einnehmen soll.
Im Gegensatz hierzu weisen Proportionalschriften (z. B. Helvetica, Frutiger, Garamond usw.) unterschiedliche Dicktenwerte für jedes Zeichen auf.

typo2

Der Schriftgrad (Schriftgröße) beeinflußt maßgeblich die Lesbarkeit eines Textes. Er sollte nach neuer Norm in Millimeter angegeben werden. Die Angabe in DTP-Punkt (pt) ist aber weiterhin üblich und ein solcher auf genau 1/72 Zoll festgelegt.

1 pt = 0,3528 mm | 1 mm = 2,8346 pt.

Die Wahl des Schriftgrades der Grundschrift hängt vom Format, von der Schrift und vom Anwendungszweck ab. Da einige Schriftbilder sehr große Ober- und Unterlängen haben, sehen diese bei selber Punktgröße oft kleiner aus als andere Schriftbilder.
typo8a

Als Anhaltspunkt für die Brotschrift (die Schriftart, in welcher der Fließ- oder Mengentext gesetzt wird) kann indes gelten:

  • DIN A5: 8 – 11 pt
  • DIN A4: 9 – 13 pt
  • Webseite: 10 – 12 pt bzw. px

Für Überschriften werden entsprechend größere, für Bildunterschriften, Marginalien und Fußnoten kleinere Schriftgrade gewählt.
Professionelle Schriftfamilien (wie etwa die Adobe Arno) stehen in verschiedenen optischen Größen für Bildunterschriften, Fließtext, Untertitel und Überschriften zur Verfügung. Schriften für Fließtext bilden den Kern jeder Schriftfamilie und sind für Größen von 9 bis 14 Punkt vorgesehen. Die Ausgewogenheit von Stärke und Proportion stellt die angenehme Lesbarkeit längerer Textabschnitte in den gängigsten Punktgrößen sicher.

typo11

Dagegen gewährleistet das einfache Erscheinungsbild der Fonts für Bildunterschriften hervorragende Lesbarkeit bei Schriftgrößen von 6 bis 8 Punkt. Die Fonts für Überschriften weisen dezente Details, elegante Proportionen und einen ausgeprägten Kontrast zwischen den Konturen auf, was die makellose Darstellung hoher Größen gewährleistet. Die Mindestgröße für Überschriften liegt bei 24 Punkt.

Zeilenabstand und Laufweite

typo3Der Zeilenabstand bezeichnet den Abstand der Schriftgrundlinien. Er errechnet sich als Summe aus Schriftgrad und Durchschuß:



Zeilenabstand = Schriftgrad + Durchschuß

Der Zeilenabstand muß so gewählt werden, daß die Zeilen des Textes optisch nicht auseinander fallen. Ein zu geringer Zeilenabstand hingegen verschlechtert die Lesbarkeit ebenfalls. Als Faustregel gilt:



Zeilenabstand = 120 % x Schriftgrad

Für einen Schriftgrad von 11 pt
 ist demnach ein Zeilenabstand von 1,2 x 11 pt = 13,2 pt optimal.

typo18

Die Laufweite bezeichnet den Buchstabenabstand einer Schrift. Satzprogramme gleichen die Buchstabenabstände größtenteils aus. Wird zwischen den einzelnen Buchstaben der Abstand vergrößert oder verkleinert, verändert man die Laufweite. Dieser Vorgang wird Spationieren genannt. Das Vergrößern der Laufweite nennt man Sperren. Durch geringes Sperren kann die Lesbarkeit einer Schrift auf dem Monitor verbessert werden.

typo9

Das Verringern der Laufweite wird als Unterschneiden (Kerning) bezeichnet und ist vor allem bei großen Schriftgraden z. B. für Überschriften sowie generell bei den folgenden Buchstabenpaaren erforderlich:

Av, AV, Aw, AW, LT, LV, Ly, Ta, Te, To, Ty, T., VA, Va, Vo, V., Ya, Yo, Y.

typo4In Ligaturen verschmelzen zwei oder mehrere Buchstaben zu einer Glyphe. Dies geschieht in der Absicht, Lauteinheiten zu verdeutlichen bzw. auszuschmücken und störende Lücken zwischen Buchstaben sowie Kollisionen zwischen diesen im Schriftbild (die typografische Todsünde) zu vermeiden. Die hierzu notwendige Unterschneidung erfolgt bei Einsatz seriöser Text- bzw. Satzprogramme (InDesign, Xpress, LATEX) automatisch. In deutschsprachigen Texten sind die Ligaturen ff, fi, fl, ft sowie deren Kombinationen (ffi, ffl usw.) geläufig, allerdings ist ihre Verwendung stark vom jeweiligen Kontext abhängig. An Wortfugen (z. B. Auf|lage oder Schilf|insel) und bei Beugungsendungen wie -lich, -lisch, -los, -lein, -ten usw. haben Ligaturen nichts verloren.

Die Ligaturen fi und fl sind Bestandteil des Mac-Standardzeichensatzes (Mac OS Roman) und daher in den meisten professionellen Fonts enthalten.

fi-Ligatur fl-Ligatur ff-Ligatur ft-Ligatur
 ⇧+⌥+5  ⇧+⌥+l  ––  ––

Wird die Laufweite vergrößert, sind alle Ligaturen aufzulösen. Aufgrund der genannten Anwendungsregeln empfiehlt es sich bei deutschen Texten, die Automatik der Satzprogramme auszuschalten und die Ligaturen via Suchen/Ersetzen bewußt einzufügen.

Kommen wir noch auf zwei spezielle Ligaturen zu sprechen:

  1. Das Et-Zeichen (&, auch bekannt als „kaufmännisches Und“ oder „Ampersand“)
    Das Zeichen „&“ hat sich aus der Ligatur von et entwickelt, dem lateinischen Wort für „und“. Da es bei der Gestaltung des Et-Zeichens keine Grenzen gibt, fühlen sich viele Schriftdesigner an dieser Stelle besonders herausgefordert. Heute ist es nur noch in Firmennamen anzutreffen, wo es zwischen zwei Wortzwischenräumen steht. Bei Trennungen kommt es auf die neue Zeile.
  2. Das scharfe s (ß, auch Eszett)
    Es ist aus der Ligatur zwischen dem langen ſ (einer Variante des Buchstabens „s“) und dem runden S bei einem Doppel-S am Wortende hervorgegangen und der einzige Buchstabe, der ausschließlich in der deutschen Sprache vorkommt. Allein schon aus diesem Grund sind die Empfehlungen der sogenannten neuen deutschen Rechtschreibung zu verneinen (daher wird der Autor auch weiterhin Kuß, Schluß, daß, muß usw. usf. schreiben). 2008 wurde auf Initiative des Deutschen Instituts für Normung (DIN) der Unicode-Zeichensatz offiziell um den Großbuchstaben des ß erweitert. Momentaner Favorit für die konkrete typografische Umsetzung ist die «Dresdner Form».
typo13typo14

Je schmaler und höher eine Schrift ist, je ausgeprägter die Serifen sind, desto schlechter läßt sie sich auf der Leinwand oder am Bildschirm lesen.

typo12

Die Zeilenlänge wird durch die Anzahl an Zeichen einschließlich Wortzwischenräume bestimmt.
 Zu kurze Zeilen unter 30 Zeichen erfordern viele Trennungen und ergeben kein schönes Satzbild.
 Bei sehr langen Zeilen über 80 Zeichen besteht die Gefahr, daß das Auge beim Lesen in der Zeile verrutscht. Die ideale Zeilenlänge hängt von Schriftart, Schriftgröße, Zeilenabstand und Länge eines Texts ab. Um optimale Lesbarkeit zu erzielen, sollte eine Zeile im allgemeinen 55 bis 60 Zeichen bzw. 9 bis 10 Wörter umfassen. Gegebenenfalls ist ein mehrspaltiger Satz erforderlich.

Satzarten

Die Satzart bestimmt die Ausrichtung des Textes in Bezug auf den Rand des Satzspiegels bzw. einer Spalte. Grundsätzlich wird zwischen Block- und Flattersatz unterschieden.

typo10Beim Blocksatz werden die Wortabstände derart verändert, daß die Satzkante des Textes links und rechts bündig zum Rand steht.

Beim Flattersatz steht entweder die linke (linksbündiger Flattersatz) oder die rechte (rechtsbündiger Flattersatz) Satzkante bündig zum Rand. 
Der Text am gegenüberliegenden Rand endet innerhalb einer Flatterzone. Linksbündiger Flattersatz besitzt den Vorteil gleicher Wortabstände, so daß sich ein einheitliches und ästhetisches Schriftbild ergibt. Daher wird er von einigen Typografen als beste, weil „natürliche” Satzform empfohlen. Rechtsbündiger Flattersatz ist schlecht lesbar. Anwendungsbeispiele sind Beschriftungen links vom Bild oder Marginalien auf linken Seiten.
Beim Mittelachsensatz werden die Textzeilen symmetrisch zu einer (fiktiven) Mittelachse ausgerichtet.

Daß der zentrierte Flattersatz außer beim Publizieren von Lyrik nur sehr sparsam für bestimmte Hervorhebungen eingesetzt werden sollte, versteht sich von selbst. Aber auch der linksbündige Flattersatz ist nicht frei von typografischen Fallstricken. Typische Satzfehler im Bereich der Flatterzone sind etwa:

typo16

  • abfallende Treppen,
  • Bäuche,
  • schlechte Trennungen,
  • Löcher (insbesondere bei fehlender Silbentrennung),
  • schlechter Rhythmus (ein optisch guter Rhythmus wird durch den Wechsel von kurzen und langen Zeilen erzeugt) und
  • ein falsch dimensionierter Flatterbereich.

Ein im Blocksatz gesetzter Text wirkt durch seine optischen Begrenzungen als Einheit und formal eher streng. Die Satzart eignet sich für das Layouten von Zeitungen, Zeitschriften und Büchern und kann dank CSS3 endlich auch Einzug auf Webseiten halten.

Typische Fehler beim Blocksatz sind:typo15

  • zu viele Trennungen: Mehr als drei Trennungen in Folge sollten vermieden werden.
  • „Löcher“ im Satz: Die Wortabstände können durch Trennungen oder redaktionelle Änderungen im Text reduziert werden.
  • extreme Änderung der Laufweite im Lauftext: Eine weitere typografische Sünde – 
 auf jeden Fall vermeiden!

Absätze und Trennungen

Absätze dienen zur gedanklichen Gliederung des Textes. Zur Kennzeichnung von Absätzen eignet sich ein Einzug von einigen Millimetern. Auch ein negativer oder hängender Einzug ist möglich. Symbole wie schwarze Kästchen, Punkte oder ähnliche Grafiken können die Strukturierung weiter verstärken.

Leerzeilen beeinträchtigen das Schriftbild stark. Sie dürfen nur verwendet werden, wenn ein inhaltlicher komplett anderer Textabschnitt beginnt.

Zwei typische Satzfehler sind

  • „Hurenkind“: Zeilen, die einen Absatz beschließen und gleichzeitig als erste Zeile in einer neuen Textkolumne stehen.
    Faustregel: Mindestens drei Zeilen müssen auf einer Seite stehen. Das gilt vor allem auf linken Seiten.
  • „Schusterjunge“: Zeilen am Kolumnenfuß, mit denen ein neuer Absatz beginnt.
    Der (eingezogene) Beginn eines neuen Absatzes soll von den folgenden Zeilen aufgefangen werden. Endet die Kolumne (Seite) jedoch mit einem neuen Absatz, so wird die eingezogene Zeile nicht mehr aufgefangen. Bei Zwischenüberschriften am Fuß einer Kolumne sollten mindestens drei Zeilen stehen; ist um die Zwischenüberschrift viel Leerraum, dann muß es entsprechend mehr sein, ansonsten nimmt man sie auf die neue Seite.

Apropos, auch alleinstehende Wörter oder gar Silben am Ende eines Absatzes wirken nicht gerade schön.

Trennungen werden durch ein Satzprogramm automatisch eingefügt. Die Silbentrennzone sowie die Anzahl der Trennungen in Folge können eingestellt werden. Zur Verbesserung des Schriftbildes müssen häufig manuelle Trennungen eingefügt werden. Dabei muß es sich um „weiche“ Trennungen handeln (in der vom Verfasser nicht gerade präferierten Textverarbeitung Word durch die Tastenkombination Strg + -).

Wichtige Regeln zur Silbentrennung sind:

  • Maximal drei Trennungen in Folge (vergleiche Aussagen zum Blocksatz)
  • „Schöne” Trennungen richten sich nach Wortteilen und nicht nach Sprechsilben
    Wortteile: typo – grafisch
    Sprechsilben: ty – po – gra – fisch
  • Keine einzelnen kurzen Silben:
 vorsichtshal – ber
, freundlicherwei – se
    Nach neuer Rechtschreibung darf man manche Wörter so trennen, daß nur der Anfangsbuchstabe in der ersten Zeile stehenbleibt. Dies sieht unschön aus und machen es unmöglich, sinnergänzend über den Zeilenwechsel hinwegzulesen.
    Beispiel: A – bend, a – ber
    Ein weiterer Grund sich dem neuen Regelwerk konsequent zu verweigern.
  • Keine mißverständlichen Trennungen:
 Richtig störend werden Trennungen erst, wenn die Trennfuge unglücklich oder sogar sinnentstellend ist.
    Beispiel: Stiefel – tern
 oder Spargel – der

Ferner sollten Trennungen über eine Doppelseite hinweg vermieden werden.

„When using Helvetica you’re never wrong, but also never right.”

Auszeichnen heißt Hervorheben einzelner oder mehrerer Wörter. Hierfür gibt es mehrere Möglichkeiten, die jeweils unterschiedliche Wirkungen auf das Schriftbild haben:

  • Kursiv
  • Halbfett/fett
  • Sperren
  • Versalien
  • Kapitälchen
  • Größerer Schriftgrad
  • Andere Schriftart
  • Andere Farbe
typo5

Weit verbreitet ist die kursive Auszeichnung, da sich diese besonders gut ins Schriftbild einpasst. Die fette oder farbige Auszeichnung hebt den Text besonders stark hervor. Unterstreichungen sollten vermieden werden. Sie zerstören m. E. die Erhabenheit eines Buchstabens mit Unterlänge – also eine weitere No-go-Area

Die DIN 16518-1998 liegt im Entwurf vor und teilt Schriften in (nur noch) fünf Gruppen ein:



Gruppe 1: Gebrochene Schriften
z.B. Gotische, Schwabacher, Fraktur
typo6-1


Gruppe 2: Römische Serifen-Schriften
Antiqua-Schriften wie New Times Roman
typo6-2
Gruppe 3: Lineare Schriften
Grotesk-Schriften wie Futura, Gill Sans
typo6-3


Gruppe 4: Serifenbetonte Schriften
z.B. Egyptienne, Clarendon, Italienne
typo6-4

Gruppe 5: Geschriebene Schriften
z.B. Flachfederschriften, Pinselschriften
typo6-5

Eine Schriftfamilie – zum Beispiel die sehr große Familie Helvetica – besteht aus mehreren Schriftschnitten, z. B.:

  • extraleicht (Ultra Light)
  • leicht (Thin)
  • mager (Light)
  • normal (Roman, Regular)
  • kursiv (Italic, Oblique)
  • schmal (Condensed)
  • halbfett (Medium)
  • fett (Bold)
  • extrafett (Heavy)
  • ultrafett (Black)
typo7

Alle verwendeten Schriftschnitte müssen als Font-Datei vorliegen. Die elektronische Veränderung von Schrift z. B. durch Schrägstellen ist typografisch nicht zulässig, genauso wenig das Verändern (Verzerren) einzelner Buchstaben.

Jede Schrift besitzt einen bestimmten Schriftcharakter. Bei der Auswahl einer Schrift sollte immer ein Bezug des Schriftcharakters zur inhaltlichen Aussage des Textes hergestellt werden.

typo17

Die Auswahl einer Schrift erfolgt einerseits nach ästhetischen und gestalterischen Aspekten, andererseits muß die optimale Lesbarkeit des Textes stets gewährleistet bleiben. Für Fließ- oder Mengentexte folgt daraus, daß hier keine Schmuck- oder Schreibschriften gewählt werden können. Auch gebrochenen Schriften sind in heutiger Zeit für längere Texte nicht geeignet. Überschriften, Auszeichnungen oder dekorative Textelemente einer Seite unterliegen den obigen Einschränkungen nicht, da hierbei nur geringe Textmengen gelesen werden müssen.

Für das Mischen von Schriften lassen sich folgende Grundregeln aufstellen:

  1. Regel: 
Die Schnitte einer Schriftfamilie dürfen beliebig miteinander kombiniert werden.
    typo19a
  2. Regel: 
Beim Kombinieren zweier Schriftarten sollten sich diese möglichst stark im Schriftcharakter unterscheiden. Ähnliche Schriften dürfen nicht gemischt werden.
    typo19b
  3. Regel: 
Nicht zu viele Schriften verwenden. Ein Druckprodukt ebenso wie eine Webseite kommt mit zwei oder maximal drei Schriften aus.

Jegliche Form der Verfremdung von Schrift, wie dies beispielsweise mit Word(art) oder neuerdings sogar mit Photoshop möglich ist, ist aus typografischer Sicht abzulehnen! Charakter und Proportionen einer Schrift gehen bei derartigen Modifikationen verloren.

Typografische Regeln

Das Geviert ist eine typografische Maßeinheit. Es entspricht einer quadratischen Fläche mit der Kantenlänge des Schriftschnittes. Es definiert in der Senkrechten den Mindestzeilenabstand einer Schrift; in der Waagrechten ist es – in verschiedenen Unterteilungen bis zu einem 24stel – die Maßgrundlage für den Abstand zwischen Wörtern und Satzzeichen. Der übliche Wortzwischenraum WZR (das Leerzeichen) etwa beträgt ein Viertelgeviert, während mit dem Achtelgeviert gesperrt wird.

typo20

Für das korrekte Setzen von Zifferkombinationen gibt es typografische Regeln. Zu beachten ist, daß der Abstand zwischen den Zifferblöcken (flexibles Leerzeichen FL) kleiner ist als ein normaler Wortzwischenraum.

Zahlen und Einheiten


Bei Zahlen ist meist ein Verändern der Laufweite mittels Spationieren nötig. In Unicode-Zeichensätzen sind schmale Leerzeichen für elektronische Publikationen verfügbar.

Unicode dezimal Bedeutung HTML
dezimal hexadezimal benannt
U+202F 8239 NARROW NO-BREAK SPACE    
U+2009 8201 THIN SPACE         

Ein- und zweisilbige Zahlen, d. h. die Ziffern von Eins bis Zwölf, werden in Texten als Wort ausgeschrieben, längere Zahlen in Ziffern gesetzt.

 Um zehn Uhr werde ich 25 Kugeln Eis essen.

Bei der Kombination aus Ziffern und Buchstaben, wie etwa bei der Angabe von Einheiten, ist der Abstand eines normalen Wortzwischenraums (Leerzeichen) zu groß. Stattdessen muß ein verkleinerter Wortabstand verwendet werden. Sind die Einheiten abgekürzt, dürfen diese nicht von der Zahl getrennt werden, was durch ein geschütztes flexibles Leerzeichen gFL (in den folgenden Beispielen durch einen  gekennzeichnet) sichergestellt wird. Sind die Einheiten ausgeschrieben, sollte auch versucht werden, diese nicht zu trennen. Sind beide ausgeschrieben, ist eine Trennung unbedenklich.

Die Suche nach fehlerhaften Trennungen nahm in MS Word 14
h in Anspruch. falsch

Die Suche nach fehlerhaften Trennungen nahm in MS Word 14
Stunden in Anspruch. nicht gut

Die Suche nach fehlerhaften Trennungen nahm in Word acht
Stunden in Anspruch. richtig

Längere Zahlen werden rechts und links vom Dezimalkomma in Dreiergruppen aufgeteilt. Hierfür ist wieder ein gFL anzuwenden, aber niemals ein WZR. Ausnahmen bilden 4 stellige Zahlen (z. B. Jahreszahlen) in Texten, welche nicht unterteilt werden. In mathematischen Formeln schließen Vorzeichen und Zahl direkt aneinander an, während Operationszeichen jeweils von einem gFL umgeben sind. Für Telefonnummern, Bankleitzahlen und Kontonummern existieren weitere Regeln.

Zahl    4711 .................. keine Abtrennung

Tel.    030-12233 ........ in Zweiergruppen von rechts
Tel.    030-12233-4
 
BLZ:    12345678 ............ Dreiergruppen von links
Konto:  9876543 ............. Dreiergruppen von rechts

Datum:  1.1.2000 ............ gFL hinter Punkt

Übrigens, qualitativ hochwertige Schriften verwenden zur Zahlendarstellung sogenannte Mediaeval-Ziffern, welche mit unterschiedlichen Ober- und Unterlängen auf natürlichen Textlesefluß hin optimiert wurden. Im Unterschied zu Normalziffern in der Größe von Versalien fügen sich diese harmonischer in den Text ein.

typo21png

Querstriche


Typografisch werden verschiedene Arten von Querstrichen unterschieden. Ihre Namen beziehen sich auf das Geviert.

Zeichen Unicode HTML
dezimal hexadezimal benannt
Geviertstrich U+2014 — —  —
Halbgeviertstrich U+2013  –  –  –
Viertelgeviertstrich U+2010  ‐  ‐
geschützter Viertelgeviertstrich U+2011  ‑  ‑
Minus-Operator U+2212  −  −  −
  1. Trennstrich, Bindestrich, Divis, Viertelgeviertstrich –
    Divis werden bei Trennung, Doppelwörtern oder als Aufzählungszeichen verwendet. Sie werden mit Ausnahme des Ergänzungsstrichs nicht spationiert.
Häufig werden Ergänzungsstriche von der verwendeten 
Software nicht erkannt, was zu Trenn-Fehlern und -
Widrigkeiten führen kann. falsch

  1. Gedankenstrich, Bis-Strich, Streckenstrich, Halbgeviertstrich –
    Gedankenstriche werden zum Beispiel bei Satzeinschüben (hier steht zwischen Gedankenstrich und Buchstaben immer ein WZR), als Streckenstrich (die Verwendung eines FL ist hier meistens angeraten) oder bei Zeitangaben verwendet. 
(Word: Strg+Num -,  ⌥ + -)
Die Strecke HamburgBerlin, aber bei Orten mit Doppel-
namen wird der Divis verwendet z. B. in Castrop-Rauxel

Mengenangaben:   3–5 Tabletten
Zeitangaben:     2012–2016

  1. Spiegelstrich (Aufzählungsstrich), Geviertstrich —
    Geviertstriche werden allenfalls im Tabellensatz als Platzhalter für Ziffern oder als Aufzählungszeichen eingesetzt. (Word: Strg+Alt+Num -,  ⇧+⌥+ -)
    Bei Verwendung als Spiegelstrich ist darauf zu achten, daß der Abstand nach den Spiegelstrichen konstant bleibt (insbesondere beim Blocksatz wichtig).
gerundete Geldbeträge:   123,—

Punkte


Punkte werden als Schlußzeichen, Abkürzungspunkt, Auslassungszeichen, Aufzählungszeichen oder Mal-Zeichen verwendet.
Drei Punkte stehen für eine Auslassung oder Gesprächspause. Manchmal wird in solchen Situationen auch der Dreipunkt verwendet, der aber i. a. zu eng ist. In Zitaten werden die Punkte vorzugsweise durch runde Klammern, ggf. auch durch eckige eingeklammert. Dabei sind die Abstände jeweils so zu wählen, als ständen sie noch da. Am Satzende mit Auslassungs- oder Abkürzungspunkten wird der Schlusspunkt nicht gesetzt. Stehen Auslassungspunkte hinter einem Abkürzungspunkt, entfällt dieser nicht. Als Gruppierungszeichen wird der Punkt nur bei Geldbeträgen verwendet, andere Zahlen durch ein Achtelgeviert.

»Die Phantasielosen flüchten in die Realität (und scheitern 
dann, wie billig, daran) [...]«

Sonderzeichen


Das Gradzeichen wird unmittelbar an die Zahl angefügt, tritt eine Einheit hinzu, wird es Bestandteil der Einheit und durch geringfügiges Spationieren von der Zahl getrennt. Das Paragraphzeichen steht immer vor einer Zahl unter Verwendung eines gFL. Währungssymbole oder -Abkürzungen stehen in Texten mit gFL hinter dem Betrag, in Listen kehrt sich die Reihenfolge um. Zwischen Prozent-/Promille-zeichen steht ein gFL.

Gradzeichen:        27°C, Innenwinkel beträgt 30°.
Paragraphzeichen:   §§13 Abs. 2 BGB
Währungssymbole:    123,00€, 987,00$
Prozentzeichen:     33%

Anführungszeichen und Apostroph


Im deutschen Schriftsatz werden in allen Ländern (außer der Schweiz und Liechtenstein) als Anführungszeichen entweder die deutschen Anführungszeichen („…“, auch Gänsefüßchen genannt) oder die französischen Anführungszeichen (»…«, Guillemets) mit den Spitzen nach innen verwendet. Die halben Anführungszeichen sind einfache Versionen der doppelten deutschen und französischen und kommen beim verschachtelten Zitieren zum Einsatz. Selbstredend muß innerhalb eines Textes immer die gleiche Art von Anführungszeichen verwendet werden.

Auf keinen Fall ist das amerikanische Zeichen “ für Zoll (auf der Tastatur ⇧+2) zu verwenden.

Kein Apostroph ist das über der Raute-Taste (⇧+#) liegende Symbol ‚ für das (falsche) Fuß-Zeichen. Der korrekte Apostroph ist ein kleiner, leicht von rechts oben nach links unten geneigter Bogen, der einem hochgestellten Komma oder einer Ziffer 9 ähnelt. Wir geben ihn mittels der Tastenkombination ⇧+⌥+ # () bzw. Alt+0146 unter Windows ein.

Mein Tip am Rande: Ver­zich­ten Sie grund­sätzlich auf Apo­strophe. Sie sind fast immer ent­behr­lich.

Fazit und Ausblick

Die vorstehenden Betrachtungen haben wesentliche Aspekte der Mikrotypografie zum Inhalt. Im einzelnen gezeigt wurden, welche Feinheiten des Schriftsatzes (Schriftwahl, Ligaturen, Laufweite, korrekte Verwendung von Satzzeichen usw.) bei der Gestaltung von Publikationen (Druck oder Web) zu berücksichtigen sind.

Als nächstes sind solche Aspekte zu diskutieren, die sich mit der Gesamtgestaltung einer Print- oder Webseite befassen. Hierzu zählen das Seitenformat, der Satzspiegel, die Gliederung der Seite und des Textes, die Platzierung von Bildern und Tabellen im Text, das Mengenverhältnis der Schrift zu Bildern und Tabellen sowie weitere Fragestellungen, die Gegenstand der Makrotypografie sind. Diese Spielwiese ist nicht kleiner als die soeben vorgestellte.

Mehr dazu später in einem separaten Beitrag.

Woran erinnert uns diese Schriftart?

ledZeppelin-1

Wem es aufgrund des kurzen Textes und/oder der Illustration noch nicht eingefallen ist, hat sich noch etwas zu gedulden. Zunächst wollen wir klären, auf welche Weise man (fast) jede Schriftart in Webseiten einbinden kann. Ich greife hierzu wieder einmal auf mediaevent.de zurück und fasse wie folgt zusammen:

Das Zauberwort lautet diesmal Webfonts. Mit der @font-face-Regel in CSS3 lassen sich endlich auch solche Schriften einbinden, die mit hoher Wahrscheinlichkeit auf dem Computer des Webnutzers nicht installiert sind. Der Browser wird in solchen Fällen die fehlende Schrift einfach nachladen. Dies funktioniert analog zum Laden von Grafiken: Die Schrift wird über die @font-face-Regel mit der src-Eigenschaft dem Webserver bekannt gemacht.

         Dateiname der Schrift im Webordner  +
                                             |
@font-face { font-family: Zoso; src: url(HillHouse.woff); } 
    ^             ^         ^     ^
    |             |         |     |
    |             |         |     +- Link zur Schriftdatei
    |             |         |
    |             |         +- Frei wählbarer Schriftname
    |             |
    |             +- Schriftart
    |            
    +- @font-face-Regel zum Einbinden einer Schriftdatei

Nun kann die Schrift, von welcher der aufmerksame Leser jetzt den Namen kennt, den HTML-Elementen zugewiesen werden, wobei eine Liste von Alternativen als zusätzliche Absicherung nicht schadet.

h2 { font-family: Zoso, fantasy; }

Browser mit Webfonts-Unterstützung

WOFF (Web Open Font Format) ist ein vom W3C standardisiertes Format für Web-Schriften, welches als modifiziertes TTF von den Mainstream-Browsern unterstützt wird. Auch Smartphones vom iPhone bis Android und iPad sind heute in der Lage, WOFF-Webfonts anzuzeigen. Somit können die bislang alternativen Formate wie TTF, EOT (nur noch für veraltete IE-Versionen von Bedeutung), OTF oder SVG entfallen.

firefox_logo3.6+ chrome_logo6.0+ safari_logo5.0+ ie_logo9+ opera_logo10+

Obwohl wir uns fortan nur auf ein Format konzentrieren brauchen und dieses eine gute Kompression hat, sind Speichergrößen zwischen 200 und 300 KB für ein Paket mit verschiedenen Schnitten keine Seltenheit. Wir sollten daher vor dem Laden überprüfen, ob die zugewiesene Schrift nicht bereits dem Betriebssystem bekannt ist.

@font-face {
  font-family: Helvetica;
  local: Helvetica;  // Erst nachsehen, ob die Schrift
              // beim Besucher schon installiert ist
  src: url(fonts/Helv.woff); // Wenn nicht, wird die Schrift
                             // vom Webserver geladen
}

Quellen für Webfonts

Google Web Fonts hostet eine Liste von Webfonts. Die Web-Fonts werden über einen einfachen Link (Google Font API) in die eigene Seite eingebunden.

<link rel="stylesheet" type="text/css"
 href="http://fonts.googleapis.com/css?family=Tangerine">

Ähnlich gestrickt ist Adobes Web Edge Fonts Angebot. Hier ist z. B. für die Schrift Muli der folgende Link in den <head> des HTML-Dokumentes einzufügen. Anschließend kann sie mittels font-family: muli, serif; in CSS zugewiesen werden.

<script src="http://use.edgefonts.net/muli.js"></script>

Meine Seite ist in der Schrift PT Sans in den Schnitten Regular, Italic, Bold, Caption und Narrow gesetzt. Diese stammt vom Anbieter Font Squirrel, der vor allem kommerzielle Schriften als Freeware zugänglich macht. Ferner sind die Überschriften der Beiträge mit der HillHouse formatiert und das Banner zusätzlich mit der BlackJack gestaltet wurden.

Was uns zur nächsten Frage führt: Welche Schriften und wie viele davon sollten auf einer Webseite Einzug halten? Ausführlich habe ich diese Problematik in einem separaten Artikel zur Typographie besprochen. Deshalb seien hier nur die wesentlichen Aspekte genannt:

  1. Weniger ist mehr. Egal, um welche Art von Publikation es sich auch handeln möge, mehr als drei verschiedene Schriftarten sind Ausdruck eines schlechten Stils.
  2. Kommen verschiedene Schriften zum Einsatz, sind diese so auszuwählen, daß sie sich deutlich voneinander abheben (z. B. Kombinationen aus Serifen- und serifenlosen Schriften). Dagegen können die verschiedenen Schnitte einer Familie bedenkenlos vermischt werden.
  3. Verzichten Sie auf das Unterstreichen von Worten. Zwar kollidiert diese Forderung mit Usuability und Ergonomie von Webseiten (Hyperlinks werden nun einmal durch Unterstreichungen kenntlich gemacht), in meinen Augen rechtfertigt dies aber nicht die ästhetische Vernichtung der Gemeinen mit Unterlänge.
  4. Der Schriftgrad sollte auf Webseiten 11 px nicht unterschreiten, wobei diese Angabe stark fontabhängig ist. Für den Zeilenabstand ist jeweils das 1,2-fache des Schriftgrades optimal. Die Verwendung von schlanken Serifenschriften (wie z. B. die Onyx) ist grundsätzlich zu hinterfragen.

Bleibt noch die Eingangsfrage. Hier ein weiterer (kryptischer) Hinweis:

zoso

Na dämmert’s allmählich? Die Spätgeborenen werden mit den Hinweisen herzlich wenig anfangen können, Vertreter meiner Generation wissen aber spätestens jetzt, daß hier die Rede vom vierten Werk der wahren Götter des Rocks ist. Die Seite der LP-Innenhülle mit den Songtiteln ist in einer Schrift vergleichbar der HillHouse gesetzt. Wer’s nicht kennt, sollte umgehend den nächsten Plattenladen stürmen (behelfsweise geht auch der Download bei iTunes & Co.), aber eigentlich zählt nur das leider vergriffene Vinyl.

ledZeppelin-II ledZeppelin-IIII ledZeppelin-IIIIII ledZeppelin-IVIV (Zoso) ledZeppelin-VHouses of the Holy ledZeppelin-VIPhysical
Graffiti

Und sofern es das Haushaltsgeld hergibt, empfehle ich uneingeschränkt gleich noch den Zukauf der anderen fünf Meisterwerke aus der ersten Schaffensperiode der Zeppeline.


QUELLEN

[1] CSS Fonts Module Level 3
[2] On Web Typography

MathML: Formeln in HTML5 einbetten

HTML5MathMLWie kommt die Mathematik ins Web? Obwohl HTML maßgeblich von einem Physiker entwickelt wurde, können wir der Auszeichnungssprache und mathematischen Symbolen kein allzu inniges Verhältnis nachsagen. Zwar ist der Bedarf, wissenschaftliche Belege, Masterabschlüsse oder gar Dissertationen direkt in HTML zu verfassen, (momentan noch) überschaubar, dennoch kann der Einsatz von Grafiken – wie z. B. auf Wikipedia – als Ersatz für eine native Unterstützung (optimal in LATEX-Syntax) nicht überzeugen. Jeder, der nachträglich einmal Änderungen an Formeln vornehmen mußte, weiß, wovon ich rede.

Aber es gibt Grund zur Hoffnung: HTML5 erlaubt fast nach Belieben Formeln mit MathML-Tags via <math>…</math> innerhalb des body-Bereichs einer normalen Webseite einzubinden.

Presentation Tags und Content Tags

Grundsätzlich wird in MathML zwischen zwei Arten von Tags unterschieden:

  1. »Presentation Tags« ermöglichen das Setzen von Formeln in HTML-Seiten als mathematische Notation. Sie können mittels CSS und zugehörigen MathML-Attributen näher beschrieben werden. Mehr braucht es fortan nicht, um in Webseiten wissenschaftliche Formeln einzubauen.
  2. »Content Tags« codieren die Bedeutung mathematischer Formeln und Ausdrücke. Sie lassen sich programmatisch auswerten – sind für das pure Layouten aber zu geschwätzig. Das Ergebnis könnte dann etwa für das Quadrat der Variablen x so aussehen:
<apply>
 <power/>
   <ci type="real">x</ci>
   <ci type="integer">2</ci>
</apply>

<ci>
  <msup>
    <mi>x</mi>
    <mi>2</mi>
  </msup>
</ci>

Browser mit MathML-Unterstützung

Grau bleibt alle Theorie, wenn ein praktischer Einsatz an den Browsern scheitert. In ihren jeweils aktuellen Versionen können Firefox & Co. Formeln mit MathML in Webseiten darstellen. Safari bringt halbwegs akzeptabel MathML auf Mac, iPhone und iPad (Probleme gibt es z. B. mit der Darstellung von Klammern). Firefox und Opera zeigen Formeln mit MathML innerhalb einer HTML5-Webseite korrekt an, in IE9 und Chrome erscheinen diese als flacher Text. Allerdings existiert für den Internet Explorer ein Plugin für MathML.

firefox_logo3+ chrome_logo24+ safari_logo5.1+ ie_logo7+ (mit Plugin) opera_logo9.5+

Die in XML-Derivaten gängige Praxis des Ablegens der Inhalte in logischen Strukturen treffen wir auch in MathML an. Da die üblichen Verdächtigen unter den Editoren sich bezüglich der Integration dieses Dokumentenformates bislang bedeckt halten, bedeutet dies natürlich einen gehörigen Eingabeaufwand.

Die Anzeige des math-Tags kann global durch CSS geändert werden.

math { font-size: large; color: navy; display: block; }

Tabelle mit MathML-Tags

Für Variablen, Operatoren, Zahlen und Konstante werden verschiedene Tags verwendet, um ihre Typographie zu individualisieren. Variablen werden z. B. kursiv gesetzt, Operatoren brauchen etwas mehr padding rechts und links. Die Sonderzeichen der Mathematik werden mit HTML-Entities wie &int; (Integral) und &sum; (Summe) geschrieben.

Fast alle MathML-Tags lassen sich durch die Attribute class, id, style, dir, href, mathbackground und mathcolor erweitern. Die nachstehende Tabelle wie auch die entscheidende Anregung zu diesem Beitrag habe ich bei mediaevent.de gefunden. Sie zeigt die individuellen Attribute der einzelnen MathML-Tags.

MathML Tag Funktion Attribute
<mrow> gruppiert Ausdrücke mit einem oder mehr Operatoren und ihren Operanden. mrow erzeugt eine horizontale Zeile – ähnlich dem tr-Tag in HTML.
\(1+2=3\)

<math>
    <mrow> 
        <mn>1</mn><mo>+</mo><mn>2</mn>
        <mo>=</mo><mn>3</mn> 
    </mrow> 
</math>
<mi> eine Bezeichnung, z.B. Name einer Funktion, Variablen oder eine Konstante. mathsize (small, normal, big, length), mathvariant (normal, bold, italic, bold-italic, double-struck, bold-fraktur, script, … )
\(\text{e}=2,7182818\ldots\)

<math>
    <mi>e</mi><mo>=</mo><mn>2,7182818…</mn>
</math>
<mo> Operator im weitesten Sinne, dazu zählen auch Klammern, Kommas und Semikolons accent, fence, form, largeop, lspace, mathbackground, mathcolor, mathsize, mathvariant, maxsize, minsize, movablelimits, rspace, spearator, stretchy, symmetric
Eulersche Zahl e mit MathML
\(\text{e}=\displaystyle\lim_{n\to\infty}\left(1+\frac1{n}\right)^n\)

<munder>
   <mo>lim</mo>
   <mrow>
      <mn>n</mn>
      <mo>→</mo>
      <mn>∞</mn>
   </mrow>
</munder>
<mfenced> öffnende und schließende Klammern und Trenner wie Kommas oder Semicolons open, separators
\(\{0.815,0.32168,1.2345,47.11\}\)

<math>
   <mfenced open="{" close="}" separators=",">
      <mi>0.815</mi><mi>0.32168</mi>
      <mi>1.2345</mi><mi>47.11</mi>
   </mfenced>
</math>
<mn> Literal, meist eine Folge von Ziffern mit Separator (Punkt oder Komma) oder ein Text, der für eine Zahl steht mathsize, mathvariant
\(0\\4711\\\text{GgT}\)
<mroot> Wurzel mit Index close
Umrechnung von XYZ nach Lab
\(L^{*}=\displaystyle 116*\sqrt[3]{\frac{Y}{Y_n}}-16\)
<msqrt> Quadratwurzel ohne Index, nur ein Argument close
\(\sqrt{x}\)
<mfrac> Brüche bevelled (nebeneinander oder untereinander), denomalign, linethickness, numalign
\(\displaystyle\frac{a}{b}\)

<mfrac bevelled="true">
   <mi>a</mi>
   <mi>b</mi>
</mfrac>
<msubsup> Element mit Superskript und Subskript; Natation ist
<msubsup> base subscript superscript </msubsup>
subscriptshift, superscriptshift
\(\int_0^\infty\text{e}^{-x}\;\text{d}x=1\)

<msubsup>
	<mo>∫</mo>
	<mn>0</mn>
	<mi>∞</mi>
</msubsup>
<mtable> Tabelle oder Matrix. Innerhalb eines mtable-Tags dürfen nur mtr- und mtd-Tags liegen (ähnlich wie tr- und td-Tags im table-Tag). alignmentscope, columnalign, columnlines, columnspacing, columnwidth, displaystyle, equalcolumns, equalrows, frame, framesspacing, groupalign, minlabelspacing, rowalign, rowlines, rowspacing, side, width
\(\left[\begin{array}{c}X\\Y\\Z\end{array}\right]=\left[\begin{array}{lll}0.412453&0.357580&0.180423\\0.212671&0.715160&0.072169\\0.019334&0.119193&0.950227\end{array}\right]*\left[\begin{array}{c}R\\G\\B\end{array}\right]\)

Gut, nun mal Butter bei die Fische. Da der visuelle Editor von WordPress mit der Codierung der MathML-Syntax mir etwas Kopfzerbrechen bereitet, habe ich kurzentschlossen das MathJax-LATEX-Plugin installiert, weshalb die hier gelisteten Beispiele im Quelltext auch nicht die vorgestellten MathML-Tags zeigen, dafür aber über das Kontextmenü zu den mathematischen Symbolen die erweiterten Funktionen von MathJax erreichbar werden.
MathJax-KontextWenn, wie im folgenden Beispiel, die Formeln komplexer sind, ist das Einbetten in LATEX-Syntax unter Verwendung von MathJax deutlich handlicher und robuster als MathML. Wird dieser dennoch benötigt, kann er (wie oben dargestellt) komfortabel über das zugeordnete Auswahlmenü ausgegeben werden. Rufen wir nun noch mit den beiden Tags <figure>…</figure> und dem optional einzubindenden <figcaption>…</figcaption> für Bildunterschriften zwei weitere Neuerungen aus HTML5 auf, verströmt unser Dokument sogar einen leichten „Taste of LATEX“.

$$\begin{eqnarray*}
b_{k} &=& \frac{1}{\pi}\int_{-\pi}^{\pi}f(t)\sin(kt)\;\text{d}t=\frac{2}{\pi}\int_{0}^{\pi}f(t)\sin(kt)\text{d}t\\
&=& \frac{2}{\pi}\Bigg[-\frac{\cos(kt)}{k}\Bigg]_{0}^{\pi}=\frac{2}{\pi}\Bigg(\frac{1}{k}-\frac{\cos k\pi}{k}\Bigg)=\begin{cases}0 & \mbox{für }k\mbox{ gerade}\\4/(k\pi) & \mbox{für }k\mbox{ ungerade}\end{cases}\ .
\end{eqnarray*}$$

(5.2) \(b_k\)-Koeffizienten der Fourier-Reihe einer Rechteckschwingung

Ausführliche Informationen zur vorgestellten Thematik gibt’s natürlich auf den entsprechenden Seiten des W3C.


Quellen

[1] Mathematical Markup Language (MathML) Version 3.0
[2] MathJax features and benefits