Schrift im Web

Je nach Zielgruppe und Eignung wird die Schriftart und -größe gewählt. Für eine bessere Lesbarkeit ist die Zeilenbreite beschränkt. Wenn sinnvoll, gibt es spezielle Textformatierungen, um beim Ausdruck optimale Druckergebnisse zu erhalten.

Im Gegensatz zum Print-Design ist der Web-Designer bei den Schriften beschränkt. Es können nur Schriften genutzt werden, die auf dem browsenden Rechner vorhanden sind, was nur etwa ein Dutzend Schriften betrifft (die sogenannten websicheren Fonts). Mit dem @font-Befehl können auch eigene Schriftarten verwendet werden – jedoch mit zwei Einschränkungen: Man muss die Nutzungsrechte haben, und ältere Browser unterstützen diese Funktion nicht.

Auch im Internet sind korrekte Satzzeichen möglich. Das oft zu findende " ist kein Anführungs-, sondern ein Zollzeichen. In Deutschland sind korrekte Anführungszeichen entweder „Gänsefüßchen“ oder »romanische« (auch in der «Schweizer» Variante) Anführungszeichen.

Ein Minus (-) ist kein Gedankenstrich (–).

Das Unterstreichen von Text stammt noch aus der Schreibmaschinen-Ära und ist im Internet als Link-Markierung vorbelastet. Statt etwas durch Unterstreichen zu markieren, sollte es lieber kursiv oder fett gesetzt werden.

Es ist übrigens für das Lesetempo unerheblich, ob man Serifen- oder serifenlose Schriften verwendet. Ist die Schrift in einer angemessenen Größe und mit sinnvollem Kontrast eingesetzt, spielt die konkrete Schriftart keine Rolle (jedenfalls nicht, solange man keine allzu ausgefallene verwendet). Das hat jedenfalls eine umfangreiche Testreihe herausgefunden.

Mehr zu korrekter Schreibung (ob nun on- oder offline).
 

Schrift-Auswahl

Jede Schriftart besitzt ihren Charakter und beeinflusst die Erwartungshaltung des Betrachters oder Lesers. Die optischen Assoziationen („technisch, verschnörkelt, geradlinig, harmonisch, kantig, rund, etc.“) werden als Erwartung auf den Inhalt bzw. Stil des Textes übertragen. Bei einem längeren Text in serifenloser Helvetica wird ein sachlicher Text erwartet, bei Georgia ein belletristischer oder essayistischer. Für Funktionselemente ist jedoch in den seltensten Fällen etwas anderes als eine serifenlose Schrift angebracht, Button-Beschriftungen in klassischer Serifenschrift wirken wie ein innerer Widerspruch.

Insbesondere Serifenschriften wirken nach „Lese-Webseiten“, während Seiten mit serifenlosen Schriften, die den Systemschriften ähnlich sind, als aktive Webseiten wahrgenommen werden. Auch hier gilt das Beispiel von Facebook und Youtube, die mit nüchternem Schrifteinsatz in wenigen Formaten auskommen.

Heutzutage wählt der Designer aus Hunderttausenden Schriften eine geeignete. Viele dieser Schriften verlassen das enge Korsett der ursprünglichen Schriftklassen und kombinieren feste Strichstärke mit Serifen oder variable Strichstärke mit groteskem Schnitt oder eine groteske Grundform mit Serifen-Andeutungen. Der Schwung, das Verhältnis der Strichstärke zu den Buchstabeninnenräumen, das Verhältnis von der x-Höhe zur X-Höhe und viele andere Paremeter wie Unterlängen, I-Punkte, Zeichenabstände, Zierelemente oder Winkel beeinflussen den Charakter einer Schrift.

Auf dem eigenen Computer sind meist nur wenige Hundert Schriften vorhanden, die aber bereits ein gutes Spektrum abdecken. Viele weitere sind im Internet erhältlich, es gibt mehrere Anbieter für professionell gestaltete Schriftsätze, die man in mehreren Strichstärken und Schriftschnitten (fett, kursiv, gestaucht) erhält. Google-Fonts bietet eine gute Auswahl geeigneter Schriften kostenlos an. Diese lassen sich auch via CSS in eigene Webseiten integrieren. Dank CSS3 ist es nunmehr möglich, auch Schriften auf Webseiten zu verwenden, die nicht auf dem Computer des Betrachters installiert sind. Alle modernen Browser unterstützen dies.

Schrift gestalten

Innerhalb von Texten ist die Textauszeichnung direkt in HTML möglich:

  • <font [Parameter]>…</font> – Textformat direkt im HTML-Code; heute nicht mehr gebräuchlich, empfohlen ist die Auszeichung als style-Attribut oder via CSS-Klassen
  • <em>…</em> – Hervorhebung innerhalb eines Textes, default: Kursivschrift; <em> steht für „emphasized“ und ist primär eine semantische Auszeichnung, deren optische Ausprägung der Designer via CSS definiert
  • <strong>…</strong> – Hervorhebung innerhalb eines Textes, default: Fettschrift; <strong> ist wie <em> eine semantische Auszeichnung
  • <b>…</b> – Fettschrift („bold“) für Wörter oder Phrasen; ist eine optische Zuweisung ohne klare semantische Bedeutung, daher eher zu vermeiden
  • <i>…</i> – Kursivschrift („italic“) für Wörter oder Phrasen; ist eine optische Zuweisung ohne klare semantische Bedeutung, daher eher zu vermeiden
  • <u>…</u> – Unterstreichung („underline“) für Wörter oder Phrasen; ist eine optische Zuweisung ohne klare semantische Bedeutung; da mittels Unterstreichung Links markiert werden, eignet sich diese Auszeichnung nicht für den Alltag

Effektiver ist es, die Schriften per CSS zu definieren und verschiedene Klassen zu verwenden, dabei können auch die em-, strong- und anderen HTML-Auszeichnungen umdefiniert werden. Sinnvoll ist es, alle Standardelemente via CSS zu definieren und diese auch im HTML-Code zu benutzen. Die Seitenüberschrift erhält die <h1>, die Unterüberschrift die <h2>, Zwischentitel sind beispielsweise mit <h3> ausgezeichnet, Textabsätze mit <p> und Listen als <li>-Elemente innerhalb von <ul>- oder <ol>-Bereichen, deren Eigenschaften ebenfalls via CSS festgelegt sind. So bleibt der HTML-Code korrekt und macht keine Probleme. Auch Google freut sich, Webseiten mit korrekten HTML-Tags zu indizieren, die Designzuweisungen sind bei der Google-Verarbeitung nachrangig.

Textunterstreichungen sind auf Webseiten und in Software zu vermeiden. Unterstrichene Wörter oder Textpassagen werden als klickbare Links wahrgenommen; wenn sie blau gefärbt sind, ist das Missverständnis durch nichts aufzuheben. Andersherum sollte jeder Link an einer ungewöhnlichen Stelle in Blau und unterstrichen gezeigt werden.

Eine harmonische Webseite verwendet zwei zueinander passende Schriftarten in jeweils vier Varianten (jeweils eine Kombination aus Schriftschnitt und -größe). Die übrigen Parameter sollten nur in wenigen Sonderfällen genutzt werden. Beispielsweise kann der Einleitungsabsatz eines Web-Beitrages durch leichtes Letter-Spacing optisch etwas abgesetzt werden.

Schrift mit CSS gestalten

Cascading Style Sheets ermöglichen vielfältige Schriftgestaltungen:

  • color: #hex, rgb(r,g,b), rgba(r,g,b,a) – Schriftfarbe in Hexadezimal- oder RGB-Schreibweise, mit RGBA ist die Angabe einer Transparenz möglich.
  • font-family: serif, sans-serif, cursive, fantasy, monospace – Schriftfamilie; bei der Deklaration der verwendeten Schriften sollten mehrere angegeben werden, die erste verfügbare verwendet der Browser zur Darstellung; sozusagen als letzten Ausweg (wenn keine der explizit benannten vorhanden ist) nutzt er die Schriftfamilie, die sinnvollerweise als letztes angegeben ist.
  • font-size: px, pt, em, ex, ch, rem, %; xx-small, x-small, small, medium, large, x-large, xx-large; smaller, larger – Schriftgröße in einer geeigneten Einheit; px bezeichnet Bildschirmpixel, pt meint den typografischen Punkt (ca. 30 Prozent größer als ein Pixel); Text-Elemente können Schriftgröße relativ zu Eltern-Elementen erhalten.
  • font-style: italic, oblique, normal – Schriftschnitt (kursiv, fett, normal)
  • font-variant: small-caps, normal – Schriftvariante (Kapitälchen oder normal)
  • font-weight: bold, bolder, lighter, normal, 100 – 900 – Strichstärke (breit, breiter, dünner oder als Zahlenwert: 100 = extrem dünn, 900 = extrem dick), nur wenige Schriften unterstützen alle verschiedene Stärken
  • letter-spacing: px, pt, em, ex, ch, rem; normal – Zeichenabstand
  • line-height: px, pt, em, ex, ch, rem, %, Zahlwert – Zeilenhöhe; bei relativer Angabe bezieht sie sich auf die Schriftgröße, sie sollte mindestens 15 Prozent mehr als die Schriftgröße betragen, beispielsweise 17 Pixel bei 14 Pixel Schriftgröße
  • text-decoration: underline, overline, line-through, blink, none – die Textgestaltung (unterstrichen, überstrichen, durchgestrichen, blinkend, normal)
  • text-shadow: X-Abstand (px), Y-Abstand (px), Weichzeichnung (px), Schattenfarbe (#hex, rgb, rgba) – Textschatten, jedes Zeichen erhält einen eigenen Schatten; durch Abstand, Weichzeichnung und Farbe lassen sich fast realistische Schattenwürfe oder strahlende Buchstaben realisieren.
  • text-transform: capitalize, uppercase, lowercase, none – Schriftumwandlung (Kapitälchen, Großbuchstaben, Kleinbuchstaben, normal)
  • text-align: left, right, center, justify – Textausrichtung (linksbündig, rechtsbündig, zentriert, Blocksatz)
  • word-spacing: px, pt, em, ex, ch, rem, % – Wortabstand

Entscheidend für die gute Lesbarkeit einer Webseite ist neben der Schriftart die Nutzung der Abstände. Entgegen der landläufigen Meinung spielt die Verwendung von Serifenschrift und serifenloser Schrift keine Rolle, die Zeilenlänge, der Zeilenabstand und die Schriftgröße dagegen schon (Untersuchung dazu). Für Lesetexte ist eine möglichst wenig charakterstarke Schrift geeignet, also keine, die zu sehr von den üblichen und gewohnten Schrifterscheinungen abweicht. Für Überschriften und Kurztexte ist auch eine besonders illustrierende oder verschnörkelte Schrift möglich.

Für Fließtext gibt es gute Konventionen:

  • Schriftgröße: mindestens 12 Pixel, besser 14 Pixel (entspricht etwa 12 Punkt); je älter das Zielpublikum, desto größer die Schrift (bis 18 Pixel sind durchaus okay, die Leser werden es danken)
  • Zeilenabstand: mindestens 15 Prozent mehr als die Schriftgröße, besser 25 bis 40 Prozent; je nach Schriftschnitt kann auch ein zweizeiliger Abstand geeignet sein; durch gute Zeilenabstände kann oft ein wenig bei der Schriftgröße gespart werden, ohne die Lesbarkeit zu beeinträchtigen
  • Absätze: entweder deutlich durch Einzüge kennzeichnen (text-indent) oder durch Abstände, die mindestens einer halben Zeilenhöhe entsprechen (margin-top oder margin-bottom)
  • Ausrichtung: Linksbündig ist immer geeignet, Blocksatz nur bei langen Zeilen (mit genügend Leerzeichen, damit wenig „Löcher“ gerissen werden)
  • Zeilenlänge: Mindestens 40 Zeichen, maximal 80 Zeichen (mindestens 200 Pixel, maximal 800 Pixel Breite; je nach Schriftgröße)
  • Silbentrennung: Mittels word-wrap: break-word; hyphens: auto; wird in CSS die automatische Silbentrennung aktiviert; diese funktioniert in den meisten (aber nicht allen) Browsern

Bei Überschriften ist neben der Lesbarkeit auch die gestalterische Wirkung zu berücksichtigen. Ob es eine gedrungene Schrift in mittlerer Größe oder eine zarte Schrift in Übergröße oder eine farbige Klötzchenschrift ist – dafür ist der Designer zuständig. Dieser erarbeitet eine typografische Wirkung, die zum Inhalt passt. Diese wird in einem Styleguide festgehalten und durch Beispiele illustriert. So verfügt der Entwickler über alle Angaben für die Umsetzung und der Auftraggeber über ein Ansichtsexemplar, das er zum Vergleich bei der Abnahme heranziehen kann.

Checkliste: Schrift

  • Für Fließtext eine gut lesbare Schrift (mit Serifen oder serifenlos) in angemessener Größe (mindestens 12 Pixel hoch)
  • Bei der Schriftangabe in CSS eine allgmeine Ausweichvariante definieren (serif, sans-serif, cursive, fantasy, monospace), wenn die angegebene Schrift nicht vorhanden ist
  • Web-Anzeige mit Ausweichschriften testen (diese laufen oft etwas anders, sodass manche Beschriftungen wegbrechen)
  • Computer-Systeme und Mobilsysteme enthalten unterschiedliche Sätze an vorhandenen Schriften, bei der Auswahl auch geeignete Mobil-Schriften berücksichtigen
  • Schriftsatz-Dateien sind urheberrechtlich geschützt, nur jene als Webfont bereitstellen, für die man auch die Erlaubnis/Lizenz dafür hat
  • Skalierbarkeit im Browser gewährleisten
  • Schrift-Elemente durch genügend Abstand von anderen Elementen (z.B. Randlinien) trennen und genügend Nähe zu beschrifteten Elementen (Checkboxes, Radio-Buttons) herstellen
  • Schrift ausrichten (üblich linksbündig, Blocksatz nur bei breitem Text bzw. guter Silbentrennung)
  • Bei Fließtext mindestens 40, maximal 80 Zeichen in einer Zeile
  • Genügend Helligkeitskontrast zum Hintergrund, mindestens 50 Prozent
  • In Software die Systemstandardschriften verwenden

Google bietet eine geeignete Font-Sammlung zur Einbettung und Verwendung in eigenen Webseiten an – einfach geeignete Schriften aussuchen. Die Integration gelingt durch die gelieferten Code-Schnipsel sehr einfach. Achtung: Nicht zu viele Font-Dateien verwenden, da diese bei jedem Seitenladen die Darstellung ausbremsen – insgesamt sollten weniger als 100 Kilobyte Schriftdateien genutzt werden.

Autor:  bei LinkedIn

 

Update: 12/2014