Wenn Sie 2006 Websites entwickelt haben, haben Sie vielleicht mit einem Designer wie mir zusammengearbeitet, der sich sehr darum kümmerte, dass die Schriftarten im Browser nicht *genau* gleich aussahen wie auf den Mockups.
Dann haben Sie mir vielleicht die Schmerzen der browserübergreifenden Kompatibilität erklärt und wie verschiedene Browser Schriftarten unterschiedlich darstellen. Als Antwort hätte ich Ihnen wahrscheinlich eine Bilddatei geschickt, die den Inhalt enthält, um sicherzustellen, dass alles in allen Browsern gleich aussah. Ja, ich war einer dieser Designer.
Web-Schriftarten haben sich seitdem sehr gut entwickelt, und wir haben jetzt Werkzeuge, um die Darstellung von Schriftarten in Browsern zu optimieren. Einige gibt es schon seit geraumer Zeit. Ich erinnere mich, wie mein Verstand vor Aufregung fast platzte, als ich FitText.js und Lettering.js entdeckte.
Es gibt auch heute noch viele Situationen, in denen die Anpassung von Schriftarten erforderlich ist, um die beste Lesbarkeit zu gewährleisten, trotz all dieser schicken Werkzeuge. Wir werden einige davon in diesem Beitrag behandeln, zusammen mit Methoden, wie man damit umgeht.
Eine exakte Überschrift richtig aussehen lassen
Das passiert mir oft, besonders wenn ein Design eine stark angepasste Web-Schriftart enthält, die im Allgemeinen gut aussieht, aber in einem bestimmten Kontext seltsam wirken könnte.
Nehmen wir die folgende Überschrift mit Abril Fatface von Google Fonts
Es ist eine schöne Schriftart! Allerdings gibt es ein paar Punkte, die mir bei dieser speziellen Überschrift nicht gefallen, insbesondere der Abstand zwischen ein paar Buchstaben, was die Dinge etwas überladen macht.
Hier kommt die Spationierung (Kerning) zur Rettung! Spationierung wird wörtlich als der Abstand zwischen Buchstaben definiert. Alle Schriftdateien enthalten, ob wir es wissen oder nicht, einen gewissen Grad an Spationierung, und wir haben die CSS-Eigenschaft font-kerning, um sie zu entfernen.
.no-kern-please {
font-kerning: none;
}<h1 class="no-kern-please">Rubber Baby Buggy Bumpers</h1>Es ist ein subtiler Unterschied, aber einer, der nützlich sein kann, wenn Ihr Designer (oder Ihr eigenes Auge) dies tun möchte.
Beachten Sie, dass die Deaktivierung der Spationierung nicht immer in Ihrem Interesse ist. Wie James Kolce in einem Kommentar unten bemerkte, verwenden gut gestaltete Schriften Spationierung als Werkzeug und haben einen Grund dafür. Das Entfernen der Spationierung mit CSS könnte, während es einige spezifische Designanforderungen in einer Einzelsituation anspricht, unbeabsichtigte Folgen für den Abstand zwischen den Buchstaben in der Schrift insgesamt haben, was den Abstand zwischen anderen Buchstaben nicht so gut machen könnte.
Siehe den Stift Kerning Toggle von CSS-Tricks (@css-tricks) auf CodePen.
Diese Browser-Supportdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 29* | 34 | Nein | 79 | 7* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4* | 8* |
Schlechte Zeichenabstände überall beheben
Wenn Sie jemals mit einer Web-Schriftart gearbeitet haben, bei der der Abstand zwischen jedem einzelnen Buchstaben entweder zu groß oder zu klein ist, wissen Sie genau, wie schmerzhaft diese Situation ist. Hier ist ein Beispiel mit einer weiteren schönen Google-Web-Schriftart namens Dorsa
Das mag für Überschriften eine brauchbare Display-Schrift sein, aber können Sie sich vorstellen, das als Absatz zu lesen? Nicht gut.
Die CSS-Eigenschaft letter-spacing kann helfen, den Absatzinhalt weitreichend zu ändern, wenn wir ein paar Pixel zwischen jeden Buchstaben einfügen.
.spaced-out {
letter-spacing: 2px;
}Ich würde nicht so weit gehen zu sagen, dass dies immer noch die beste Schriftart für den Absatztext ist, aber sie ist mit dem zusätzlichen Abstand viel leichter zu lesen.
Siehe den Stift zKkPqK von CSS-Tricks (@css-tricks) auf CodePen.
Diese Browser-Supportdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 30 | 2 | 9 | 12 | 6.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 4.4 | 4.0-4.1 |
Zu wenig oder zu viel Abstand zwischen Wörtern
Dies ist eine Abzweigung der letzten Situation, außer dass die Abstandsprobleme zwischen jedem Wort und nicht zwischen einzelnen Zeichen liegen.
Hier ist die CSS-Eigenschaft word-spacing großartig und wird von allen Browsern universell akzeptiert. Hier ist ein Beispiel für einen Text, der die Prompt-Web-Schriftart verwendet, die etwas breiter ist als viele andere Schriftarten und schöner aussehen würde, wenn sie für diesen Anwendungsfall etwas zurückgestellt würde.
Siehe den Stift GjJaaE von Geoff Graham (@geoffgraham) auf CodePen.
Unangenehme Zeilenabstände
Nicht alle Zeilenhöhen sind gleich. Betrachten Sie die Art und Weise, wie einige Schriftarten größer aussehen als andere, obwohl sie denselben zugewiesenen Wert für font-size haben.
Siehe den Stift Unterschied in der Zeilenhöhe nach Schriftart von CSS-Tricks (@css-tricks) auf CodePen.
Die Einstellung von font-size legt die Begrenzungsbox fest, innerhalb derer eine Schriftart Platz einnehmen darf. Wenn wir unsere font-size auf 20px setzen, wird eine Box erstellt, die 20px vertikalen Platz für jedes Zeichen beansprucht.
Manche Schriftarten beanspruchen mehr Platz als andere, was den Anschein erweckt, dass eine Schriftart größer ist als die andere, aber auch, dass mehr oder weniger vertikaler Platz zwischen den Zeilen vorhanden ist.
Wir können die line-height-Eigenschaft verwenden, um diesen vertikalen Abstand anzupassen. Eine gute Faustregel ist etwa font-size * 1,5 = line-height (oder verwenden Sie eine einheitenlose line-height: 1,5;) für die Lesbarkeit, aber das hängt von der verwendeten Schriftart und davon ab, wie sie vertikalen Platz einnimmt. Schauen Sie sich Molten Leading an.
Schärfe und Lesbarkeit
Nicht alle Schriftarten sind auf verschiedenen Betriebssystemen gleich gut. Das liegt daran, dass jedes Betriebssystem, sei es Windows, Mac OS oder etwas anderes, unterschiedliche Prozesse hat, wie viele Pixel für die Anzeige von Schriftarten verwendet werden.
Viele von uns Webdesignern verabscheuen den Gedanken, von der Art und Weise abhängig zu sein, wie ein System unsere typografischen Entscheidungen interpretiert.
Es gibt CSS-Eigenschaften, die uns zur Verfügung stehen, um die scheinbare Auflösung der angezeigten Schriftarten auf verschiedenen Systemen zu erhöhen. Dieser Prozess ist formeller als Subpixel-Rendering bekannt, da er den Browser anweist, zu versuchen, fehlende Pixel zu füllen, wo sie existieren könnten.
Es gibt keine Knappheit an #heißer Drama darüber, ob es angemessen ist, mit dem Subpixel-Rendering von Schriftarten zu spielen. Obwohl einige Jahre alt, fasste Dmitry Fadeyev seine Argumentation gegen die Praxis schön zusammen.
Der Kantenglättungsmodus ist keine „Korrektur“ für das Subpixel-Rendering – in den meisten Fällen ist er ein Handicap. Subpixel-Rendering ist technisch überlegen, klarer und lesbarer als Kantenglättung, da es durch die Nutzung jedes einzelnen Subpixels seine effektive Auflösung zur Schriftglättung um das Dreifache erhöht. Kantenglättung ist nützlich für bestimmte Umstände, wie z. B. für helle auf dunkle Texte, aber sie ist keineswegs ein Ersatz für Subpixel-Rendering und schon gar keine „Korrektur“.
Aber nehmen wir an, wir wollten es trotzdem tun. CSS gibt uns ein gewisses Maß an Kontrolle über die Schärfe und Lesbarkeit, indem wir font-smooth verwenden, um das aufzufüllen, was Betriebssysteme möglicherweise übrig lassen.
Die font-smooth-Werte umfassen
auto: Ermöglicht dem Browser, die beste Option zum Füllen von Pixeln bei Schriftarten zu entscheiden.never: Deaktiviert die automatische Glättung von Schriftarten durch das System. Dies zeigt die Schriftart in ihrem natürlichen Zustand, mit gezackten Kanten und allem.always: Weist den Browser an, Schriftarten immer Pixel hinzuzufügen, wo er die Möglichkeit dazu sieht.
Hinweis: Die Eigenschaft font-smooth gilt zum Zeitpunkt des Schreibens als inoffizielle Eigenschaft und wird nicht für den Einsatz in Produktionsumgebungen empfohlen. Es gibt Vendor-Präfixe, um den Effekt in WebKit und Mozilla zu erzielen, aber es gibt keine Standardimplementierung.
Angesichts dieser Anmerkung sind die folgenden Vendor-Präfixe derzeit mit ihren eigenen Werten verfügbar
-webkit-font-smoothing
none: Deaktiviert die Schriftglättung in WebKit-Browsern.antialiased: Glättet die Schrift auf der gleichen Ebene wie die vom System bereitgestellten Pixel.subpixel-antialiased: Glättet die Schrift auf einer mikroskopischeren Ebene, um den schärfsten Text zu erzielen, insbesondere auf hochauflösenden Bildschirmen.
-moz-osx-font-smoothing
auto: Ermöglicht dem Browser, die Glättung der Schriftart zu optimieren.inherit: Nimmt den Eigenschaftswert des übergeordneten Elements an.unset: Das Gleiche wie die Angabe vonnoneim WebKit-Präfix.grayscale: Ähnlich dem Wertantialiasedim WebKit-Präfix.
Diese Browser-Supportdaten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130* | 132* | Nein | 127* | TP* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Nein | Nein | Nein | Nein |
Oh, Moment mal, du benutzt SVG?!
SVG hat seine eigene Unterstützung für die Techniken, die wir in diesem Beitrag behandelt haben. Wir haben Spationierung (wahrscheinlich nicht viel zu tun) und die üblichen Verdächtigen Zeichenabstand und Wortabstand. Interessanterweise haben wir auch ein Attribut textLength, das verwendet werden kann, um explizit festzulegen, wie breit der Text gerendert werden soll, und es wird den Text dehnen/stauchen, um ihn anzupassen. Das Attribut lengthAdjust steuert, ob dies nur auf die Zeichen oder auch auf die Glyphen (wie Satzzeichen) geschieht.
Siehe den Stift SVG Text Spacing von CSS-Tricks (@css-tricks) auf CodePen.
Fazit
Typografie im Web ist schwer! Ja, wir haben viel Kontrolle darüber, wie Schriftarten auf dem Bildschirm angezeigt, gerendert und positioniert werden. Aber mit großer Macht kommt große Verantwortung. Zumindest haben Sie jetzt ein paar Werkzeuge zur Verfügung, um Webdesignern zu antworten, die auf die Präzision des typografischen Designs im Browser festgelegt sind.
Entschuldigung, aber ich finde das gut gemeint, aber fast unverständlich. „etwas zurückgedreht“? Hier befassen Sie sich mit dem Konzept der engen Spationierung (in fast unsichtbaren Mengen) und werfen eine völlig unspezifische Aussage ein. Wie könnte ich das interpretieren, um das Ergebnis zu erzielen, das Sie im Sinn hatten?
Ich stimme auch Ihrem Spationsierungsbeispiel nicht zu. Das Original ist meiner Meinung nach wesentlich besser lesbar als das, bei dem Sie die Spationierung bei zwei Wortpaaren erweitert haben.
Ihre „Schärfe und Lesbarkeit“ hat keine Beispiele. Sie zeigen nur Ausgabe-Stile von OS, die in unnatürlich vergrößertem Bildformat angezeigt werden. Das ist von keinem Wert, um zu lernen, wie man dieses Konzept nutzt.
Die SVG-Beispiele sind völlig unklar.
Die Verwendung von Dorsa als Beispiel für Text mit zu geringem Zeichenabstand ist albern. Dorsa ist KEINE Textschrift; es ist eine Display-Schrift. Dorsa auf diese Weise zu verwenden ist ein Fehler erster Ordnung, nicht eine der zweitrangigen Überlegungen, mit denen Sie sich befassen. Dann haben Sie die Punktgröße geändert, als Sie den Zeichenabstand erhöht haben, sodass man nicht mehr Äpfel mit Äpfeln vergleicht.
Während ich zustimme, dass Typografie im Web Beobachtung und Überlegung erfordert, um ihre Lesbarkeit zu verbessern, glaube ich nicht, dass Sie etwas zur Argumentation beigetragen haben und möglicherweise mehr Verwirrung als Klarheit gestiftet haben.
Wie wir im Süden sagen: „Ich sage nur mal so“
Hallo Randy – ich schätze Ihr Feedback! Wirklich.
Während einige Ihrer Punkte eher subjektiver Natur sind, haben Sie einige interessante Beobachtungen, die sicherlich einer Erwiderung bedürfen.
Ich nehme an, es könnte statische Screenshots des Unterschieds geben, und ich werde das auf jeden Fall prüfen. Gleichzeitig ist die Unterstützung für diese Methoden derzeit null und es scheint nicht richtig, spezifische Beispiele für etwas zu geben, das nicht in einer Produktionsumgebung verwendet werden kann.
Ist die Seiten-zu-Seite-Ansicht nicht klar genug? Die Code-Beispiele neben der Ausgabe zu haben, scheint der klarste und prägnanteste Weg zu sein, die Konzepte zu veranschaulichen.
Das habe ich im Beitrag bereits gesagt. Ich wollte etwas, das den Unterschied dramatisch zeigte.
Ich bin mir nicht sicher, ob der Beitrag als Argument gedacht war, sondern eher als Betrachtung dessen, was in spezifischen typografischen Situationen zu tun ist. Da ich sowohl auf der Design- als auch auf der Entwicklerseite gearbeitet habe, sind dies reale Szenarien, in denen ich mich wiedergefunden habe, und so gehe ich damit um. Es ist absolut gültig und cool, wenn Sie andere Ansätze haben, aber lassen Sie uns zumindest den Umfang des Artikels im Auge behalten. Und wenn Sie andere Szenarien oder Ansätze haben, dann tragen Sie sie unbedingt bei, da dieser Beitrag keine erschöpfende Liste aller Situationen sein soll – nur solche, denen ich begegnet bin. Wir können alle kollektiv aus den Erfahrungen voneinander lernen, anstatt nur aus meinen. :)
Wie wir hier im Süden sagen: „Genau so.“
Gott schütze dich
Hallo!
Im Abschnitt „Eine exakte Überschrift richtig aussehen lassen“ ist die Spationierung im ersten Beispiel tatsächlich richtig. Wenn man sie deaktiviert, ergeben sich unerwünschte Ergebnisse, wenn man genauer hinsieht. All diese kleinen Teile des Buchstabenkörpers, auf die Sie wahrscheinlich schauen, sind zu leicht und erfordern nicht so viel Platz (wie im zweiten Beispiel gezeigt), man muss den ganzen Buchstaben betrachten, nicht nur die Ränder darum herum. Deshalb überlappen sich „b“ und „y“ im ersten Beispiel ein wenig, um den von „y“ hinterlassenen Raum zu korrigieren, aber wenn man die Spationierung deaktiviert, wird der Gesamtplatz zu groß.
Die Spationierungsfunktion ist nicht automatisch (soweit ich weiß), sie aktiviert nur die vom Type Designer bereitgestellten Abstandseinstellungen, und diese sind normalerweise richtig, zumindest bei gut gestalteten Schriften.
Auch ist Spationierung nicht der Abstand zwischen Buchstaben, das nennt man Tracking (letter-spacing in CSS), Spationierung ist nur der Abstand zwischen zwei Buchstaben.
Ich wollte das nur anmerken, weil dies eine sehr beliebte Website ist, daher würden wahrscheinlich viele Leute nach diesem Artikel die Spationierung auf einer echten Website deaktivieren, aber das ist in 99 % der Fälle keine gute Idee.
Danke, ich habe mir das Gleiche gedacht. Ich war schockiert, eine Empfehlung zur Deaktivierung der Spationierung auf einer Seite wie CSS-Tricks zu sehen.
Sie haben völlig Recht und das ist ein sehr hilfreicher Kommentar, James!
Nur zur Klarstellung: Der Beitrag empfiehlt nicht, die Spationierung als gute Idee zu nutzen, sondern bezieht sich darauf als ein Werkzeug, das CSS in Situationen bereitstellt, in denen wir Abstände anpassen müssen.
Ich werde auf jeden Fall eine Notiz in den Beitrag aufnehmen, um darauf hinzuweisen, dass man die Gesamtauswirkungen und unbeabsichtigten Folgen der Spationierung beachten sollte, denn das ist, wie Sie richtig bemerken, super legitim und erwähnenswert.
Prost!
Gut, behalten Sie im Hinterkopf, dass wir darüber sprechen, wie schlecht es ist, die Spationierung zu deaktivieren, nicht darüber, Spationierung zu verwenden! Spationierung ist gut, gute Spationierung ist besser, aber keine Spationierung ist schlecht… es sei denn, Sie arbeiten mit Monospace-Schriften.
Prost!
Absolut und verstanden!
Auch ich muss es offen sagen: Ihr Rat, die Spationierung auszuschalten, ist unbegründet – generell und in diesem speziellen Fall: Wie kommen Sie überhaupt darauf, dass diese beiden Buchstabenkombinationen behoben werden müssen, weil sie angeblich „eng“ sind? Sehen Sie, wie eng „be“ und „ab“ sind! Und u und b sind sogar verschmolzen. Aber „Ru“ und „by“ müssen behoben werden? Warum? Welchen Spationsierungsprinzip haben Sie, um das zu erklären? Ich bin sicher, kein Typograf oder Grafikdesigner, der Erfahrung mit manuellen Buchstabenabständen hat, würde Ihnen zustimmen.
Und generell: Die Standardabstände (ohne Spationierung) sind das Beste, was ein Typograf tun kann, indem er jeden Buchstaben einfach innerhalb der Begrenzungsbox des Buchstabens platziert. Das hat seine Grenzen, da es nicht kontextabhängig ist und bestimmte Buchstabenpaare Anpassungen erfordern könnten. Dort kommt die Spationierung ins Spiel. Sie ist eine kontextbezogene Verbesserung(!) der Standard-Buchstabenabstände, insbesondere wenn sie richtig gemacht ist, wie Sie es bei einer Schriftart von einer guten Schriftgießerei wie Type Together (die Abril erstellt hat) erwarten können.
Was Sie gezeigt haben, sollte umgekehrt sein: Sie sollten die Grenzen von ungespationiertem Text zeigen und wie er in fast allen Fällen durch Spationierung verbessert wird. Und das ist nicht nur meine „Meinung“ – nehmen Sie jedes der 100 Anfänger-Typografie-Bücher zur Hand – sie werden alle dasselbe sagen, weil das das gesammelte Wissen von 500 Jahren Typografie ist.
Genau. Ich glaube, mein Typografie-Lehrer würde sich im Grab umdrehen, nur beim Anblick der gegebenen Beispiele.
Hallo Ralf,
ich höre dich hier vollkommen, aber um deine Frage direkt zu beantworten
Dieser Beitrag befasst sich mit spezifischen Szenarien, auf die ich als Front-End-Entwickler gestoßen bin, bei denen ein Designer sehr spezifische Änderungen an der implementierten Typografie gewünscht hat. Es ist kein Beitrag darüber, ob das Prinzip der Spationierung gerechtfertigt oder sogar korrekt ist, sondern über Methoden, die CSS für sehr detaillierte, wählerische (und ja, absolut seltsame) Änderungsanfragen bereitstellt.
Mit anderen Worten: Ich stimme Ihnen zu 100% zu. Der Kontext, wie wir auf solche Anfragen der Menschen, mit denen wir arbeiten, reagieren, mag jedoch unterschiedlich sein.
Wow. Der Autor unternimmt beträchtliche Anstrengungen, um uns Typografie-Nerds Kontrolle und Präzision über Elemente zu geben, über die wir Kontrolle haben möchten, und alles, was alle sagen können, ist, dass seine Arbeit schlecht ist. Wirklich?
Ich schätze, was ich aus diesem Artikel gelernt habe. Werkzeuge, die ich wahrscheinlich verwenden werde. Für mich ist das gut genug.
Auf meiner Website https://tobireif.com/ habe ich benutzerdefinierte Spationierung zu den Überschriften hinzugefügt, um den Abstand zwischen den Zeichen genau so zu erhalten, wie ich ihn wollte, ohne die Schriftart selbst ändern zu müssen.
Danke dafür! Irgendwie war mir die Kerning- und word-spacing-Eigenschaft nicht bekannt.
Toller Artikel! Habe die Lektüre geliebt.
Es gibt eine Frage, auf die ich keine Antwort finden kann: Kann man den Abstand zwischen einzelnen Buchstaben steuern (zum Beispiel wie t his)?
Ich wollte auch darauf hinweisen, dass ich gerade erst anfange, CSS zu lernen, also verzeihen Sie, wenn es eine dumme Frage ist. Ich habe es gegoogelt, aber nie eine Antwort gefunden.
Danke trotzdem!
Danke für den Artikel, ich habe genau das gesucht.
Entspannt euch, Leute. Der Typ gibt einfach nur Informationen.
Da ich schon lange Designer bin und einen Großteil meiner Zeit damit verbringe, Websites zu programmieren, sind all diese CSS-Eigenschaften Dinge, die ich seit Jahren verwende. Das heißt, für mich persönlich gibt es nichts wirklich Neues. Das macht jedoch das, was der Autor sagt, nicht ungültig.
Sie mögen seinen typografischen Entscheidungen nicht zustimmen (ich würde die Spationierung nicht ausschalten… ich verbringe zu viel Zeit damit, sie in Schriften einzubauen, die ich erstelle), aber das schien wirklich nicht der Punkt des Artikels zu sein. Es ist einfach eine Einführung in einige der Möglichkeiten, wie Sie Abstände im Web kontrollieren können, wenn Sie möchten, wie der Titel besagt. Das ist für viele Leute nützlich; offensichtlich sind es gute und neue Informationen für viele, die darauf reagieren.