Letter-Spacing Verfolgen, Einige Richtlinien

Da geschriebene Worte die Grundlage jeder Benutzeroberfläche sind, ist es sinnvoll, der Typografie Ihrer Website erstklassige Aufmerksamkeit zu schenken. Bei der Schriftsatzgestaltung kommt es wirklich auf die Details an. Wie groß? Wie klein? Wie viel Zeilenhöhe? Wie viel Buchstabenabstand? All diese Entscheidungen beeinflussen die Lesbarkeit Ihres Textes und können von Schriftart zu Schriftart stark variieren. Es liegt auf der Hand, dass Sie eine Botschaft umso effektiver vermitteln, je mehr Aufmerksamkeit Sie der Lesbarkeit Ihres Textes widmen.

In diesem Beitrag werde ich mich eingehend mit einem scheinbar einfachen Thema des Schriftsatzes befassen – dem effektiven Einsatz von Buchstabenabstand – und wie er sich auf die Webtypografie auswirkt.

Einige Geschichte

Buchstabenabstand, oder Zeichenabstand, ist der Raum zwischen allen Buchstaben in einer Textzeile. Die Manipulation dieses Raumes soll die visuelle Dichte einer Zeile oder eines Textblocks erhöhen oder verringern.

Beim Arbeiten im Druckwerk beziehen sich Typografen auch auf diesen als Tracking. Es darf nicht mit Kerning verwechselt werden, was sich auf die Manipulation des Raumes zwischen zwei einzelnen Buchstaben bezieht. Kerning wird im Web normalerweise nicht angewendet.

Siehe den Stift.

Historisch gesehen war die Manipulation des Buchstabenabstands eine Technik, die häufig beim Layout von Zeitungen verwendet wurde. Der Druck schneller Fristen bedeutete, dass Reporter nicht den Luxus hatten, Sätze umschreiben zu können, um besser in den ihnen zugewiesenen physischen Raum auf der Seite zu passen. Um dies zu umgehen, fügten Designer Abstände zwischen die Buchstaben ein – zuerst von Hand und später digital –, damit eine Zeile besser in den zugewiesenen Raum passte.

Im Web, wo der verfügbare Platz potenziell unendlich ist, wird der Buchstabenabstand normalerweise für seinen anderen prominenten historischen Anwendungsfall eingesetzt: um einen ausgeprägten ästhetischen Effekt für Inhalte wie Titel und Überschriften, Pull Quotes und Banner zu erzielen.

Während feine typografische Kontrolle im Web erst eine neue Entwicklung ist, gibt es die Möglichkeit, Letter-Spacing seit CSS1 durchzuführen. Natürlich heißt diese Eigenschaft letter-spacing.

letter-spacing akzeptiert verschiedene Längen als Wert. Im Gegensatz zu seinem physischen Gegenstück kann es auf eine negative Messung gesetzt werden, wodurch die Buchstaben näher zusammenrücken, anstatt weiter auseinander. Beim Setzen von Drucktyp würde kein kompetenter Setzer Stücke aus seinem Bleisatz herausschneiden, um diesen Effekt zu erzielen. Wenn Ihre Buchstaben jedoch virtuell sind, können Sie mit ihnen machen, was Sie wollen!

Schafe stehlen

Bei der Recherche zur Geschichte des Buchstabenabstands werden Sie wahrscheinlich auf ein berühmtes Zitat des Typografen Frederic Goudy stoßen. Die – äh – saubere Version lautet: „Jeder, der Kleinbuchstaben mit Buchstabenabstand versieht, würde Schafe stehlen.“ Im Wesentlichen sagt Goudy, dass die Manipulation von Typografie ohne Kenntnis der Regeln schlecht ist.

Manche haben dieses Zitat wörtlich genommen und geschworen, niemals einen Buchstabenabstand auf Inhalte anzuwenden, die Kleinbuchstaben enthalten. Obwohl ich niemals den Anspruch erheben würde, so geschickt oder kenntnisreich in Typografie wie Goudy zu sein, würde ich vor den Fallstricken des Dogmatismus warnen.

Es gibt Situationen, in denen es vorteilhaft wäre, Buchstabenabstand auf große Textabschnitte anzuwenden, solange dies der Optimierung der Lesbarkeit dient. Eine kluge Anwendung von Buchstabenabstand auf juristische Texte oder Agat bietet beispielsweise eine dringend benötigte Hilfe in einer Situation, in der der Leser kleine, dichte, fachjargonhaltige Inhalte durchgeht.

Ähnlich wie bei guter Typografie ist das Schreiben von großartigem CSS eine Frage der Detailgenauigkeit – selbst eine einzige Eigenschaft kann eine Menge versteckte Komplexität enthalten. Das Verständnis der Geschichte, Fähigkeiten und Grenzen der Technologie ermöglicht die Schaffung robuster, schöner Lösungen, die jeder nutzen kann, unabhängig von Gerät oder Fähigkeit.

Wenn Sie den Buchstabenabstand von Text auf Ihrer Website manipulieren möchten, finden Sie hier einige Richtlinien, wie Sie dies gut tun und Fehler vermeiden können.

Verwenden Sie Letter-Spacing, keine Leerzeichen-Zeichen

Im Druckwesen beinhaltete die Schaffung von Abständen zwischen jedem Buchstaben einer Zeile aus Metall- oder beweglichem Satz historisch das Einfügen kleiner Metallstücke zwischen jedem Buchstaben. Im Web sollten Sie jedoch vermeiden, zusätzliche Glyphen – wie Leerzeichen-Zeichen – zwischen jedem getippten Buchstaben einzufügen. Wenn Sie den visuellen Effekt von Buchstabenabständen erzielen müssen, verwenden Sie die Eigenschaft letter-spacing. Diese mag offensichtlich erscheinen, aber Sie würden sich wundern!

Wartbarkeit

Wenn Leerzeichen-Zeichen *verwendet* werden, sind zukünftige Stiländerungen schwieriger vorzunehmen und zu warten. Jede Schriftart hat unterschiedliche Breiten. Es ist schwieriger vorherzusagen oder zu kontrollieren, wie potenzielle Redesigns funktionieren, insbesondere wenn Typografie-Entscheidungen für größere Websites mit viel unterschiedlichem Inhalt getroffen werden.

Siehe den Stift.

Wenn Sie feststellen, dass dies ein aufkommendes Verhalten bei mehreren Website-Autoren ist, sollten Sie es kodifizieren, indem Sie die Website-Styles aktualisieren, um diese gewünschte Ästhetik widerzuspiegeln. Dies kann auch erforderlich sein, um mit Designern zu sprechen und Styleguides und andere relevante Branding-Dokumente zu aktualisieren.

Barrierefreiheit (Accessibility)

Wenn Buchstaben durch Leerzeichen-Zeichen getrennt sind, lesen einige Screenreader jeden Buchstaben einzeln, anstatt das ganze Wort. In diesem Szenario wird die Benutzerfreundlichkeit zugunsten der Ergonometrie des Autors geopfert – das Browsen wird mühsam und Menschen werden unnötigerweise von der Nutzung Ihrer Website ausgeschlossen.

Stellen Sie sich für einen Moment vor, dass Ihre Sehkraft nicht mehr so gut ist wie jetzt. Ihr Erlebnis im Web wäre ungefähr so

Dieses Problem löst keine automatisierten Barrierefreiheitsprüfungen aus, daher ist eine manuelle Überprüfung wichtig. Wie zwei Leerzeichen nach einem Punkt ist diese Praxis eine schlechte Angewohnheit, daher können weitere Verstöße normalerweise pro Autor gefunden werden.

Nicht-einheitenlose Werte

Die Eigenschaft letter-spacing verwendet einen nicht-einheitenlosen Wert, um zu bestimmen, wie weit die Buchstaben auseinander stehen. Während CSS eine Reihe von Einheiten anbietet, gibt es einige Werte, die vermieden werden sollten

Pixel und andere absolute Einheiten

Ähnlich wie beim manuellen Einfügen von Leerzeichen zur Erzielung eines Buchstabenabstands-Effekts, machen absolute Einheiten wie Pixel es schwierig vorherzusagen, was passiert, wenn Sie Typografie-Stile oder -Schriftarten zwangsläufig aktualisieren oder ändern. Im Gegensatz zu relativen Einheiten skalieren diese statischen Einheiten nur proportional zu sich selbst beim Zoomen. Einige ältere Browser skalieren sie gar nicht.

Auch in Bezug auf die Wartbarkeit sind statische Einheiten problematisch. Was für eine Schriftart in Pixel gut definiert ist, sieht für eine andere vielleicht nicht gut aus, da verschiedene Schriftarten unterschiedliche Breiten für ihre Glyphen haben. Wenn Sie jemals die Schriftart Ihrer Marke ändern, wird die Aktualisierung von präzise gemessenen Pixelwerten auf Ihrer gesamten Website zu einer großen Aufgabe.

Relative Einheiten

Die Größe einer relativen Einheit wird bestimmt, indem sie gegen die Größe von etwas anderem gemessen wird. Viewport-Einheiten skalieren Dinge beispielsweise relativ zur Höhe und Breite des Browsers – etwas, das mit width: 5vw; gestylt wurde, hat eine Breite von 5 % der Breite des Browsers (zugegebenermaßen eine Vereinfachung, dies ist kein Beitrag über die Nuancen der Browser-Benutzeroberfläche).

Für Buchstabenabstand im Englischen und anderen romanischen Sprachen ist die em-Einheit das, was Sie verwenden möchten.

Historisch gesehen wurden ems nach der Breite eines Großbuchstaben M gemessen – typischerweise dem breitesten Zeichen im Alphabet – oder später nach der Höhe aller Metalltypen in der Schriftgröße. In der Webtypografie können ems potenziell auf einer Reihe von Dingen basieren

1. Die Standard-Schriftgröße des Browsers (typischerweise 16px, aber nicht immer).
2. Eine vom Benutzer festgelegte Standard-Schriftgröße.
3. Die Schriftgröße, die am Stamm der Seite deklariert ist (typischerweise auf das <body>-Tag angewendet).
4. Die Schriftgröße, die auf einem enthaltenden Elternelement deklariert ist.
5. Die von einem Stil deklarierte Schriftgröße.
6. Die Schriftgröße, die durch einen speziellen Betriebsmodus wie Browser-Zoom oder Erweiterungen, Betriebssystempräferenzen usw. festgelegt wurde.

Neben dem nerdigen Stolz, den Sie empfinden werden, wenn Sie den großen Typografen vergangener Generationen Tribut zollen, ist der em-basierte Buchstabenabstand immer relativ zur deklarierten Schriftgröße. Dies gibt die Gewissheit, dass die Dinge immer richtig und proportional skaliert werden.

rems, der jüngere Bruder von ems, funktionieren auf ähnliche Weise. Der Hauptunterschied ist, dass sie immer proportional zur Stamm-Schriftgröße sind (aber immer noch von Dingen wie speziellen Browser-Betriebsmodi beeinflusst werden).

Während die einfache Verwendung von rems für Buchstabenabstand attraktiv erscheinen mag, hoffe ich, dass Sie Progressive Enhancement in Betracht ziehen werden. Die gleichen älteren Browser, bei denen Sie sich Sorgen um die Pixel-Skalierung machen würden, werden wahrscheinlich keine rem-Unterstützung haben. Sparen Sie sich und Ihrer Zukunft die Mühe der unvermeidlichen Fehlerbehebung und verwenden Sie stattdessen ems.

Barrierefreiheit (Accessibility)

Bewaffnet mit dem Wissen, dass Sie den Buchstabenabstand elegant und widerstandsfähig anpassen können, gibt es noch eine letzte Sache zu bedenken: Während Glyphen, die zu dicht beieinander liegen, offensichtlich schwer zu lesen sind, hat auch Text, der zu weit auseinander gesetzt wurde, eine negative Auswirkung auf die Lesbarkeit.

Wenn der Abstand zwischen Glyphen zu groß ist, sehen Wörter wie einzelne Buchstaben aus. Dies kann eine breite Palette Ihrer Zielgruppe betreffen, darunter Menschen mit Legasthenie, Menschen, die neu in der Sprache sind, Menschen mit Sehschwäche usw.

Siehe den Stift.

Wie bei dem bereits erwähnten Problem der manuell manipulierten Abstände wird dieses Problem möglicherweise nicht von einer automatisierten Barrierefreiheitsprüfung erfasst. Leider gibt es keine magische Formel, um zu bestimmen, wie weit zu viel für die Verteilung von Leerzeichen ist. Da verschiedene Schriftarten unterschiedliche Zeichenbreiten haben, ist es wichtig, sich einen Moment Zeit zu nehmen, um zu überprüfen und festzustellen, ob Ihre Textzeilen sowohl lesbar als auch verständlich sind, wenn Sie den Buchstabenabstand manipulieren.

Verwenden Sie text-transform

Es ist üblich, dass Typografie in Großbuchstaben auch Buchstabenabstand verwendet. Dies soll das visuelle „Gewicht“ der Seite als Ganzes verringern, damit das Auge beim Lesen nicht unnötig abgelenkt wird.

Die Eigenschaft text-transform steuert, wie Text kapitalisiert wird. Hier gibt es eine Feinheit: Die Transformation erfolgt auf der gerenderten Seite und nicht im Quell-HTML. Ein Text wie „Der schnelle braune Fuchs sprang über den faulen Hund.“, der mit text-transform: uppercase; gestylt ist, wird als „Der schnelle braune Fuchs sprang über den faulen Hund.“ gerendert.

Die Wahl des richtigen Buchstabenabstands für Text über text-transform ist eher eine Kunst als Wissenschaft, und es gibt einige versteckte Komplexitäten und schlechte Verhaltensweisen, auf die man achten sollte

Barrierefreiheit (Accessibility)

Wenn Sie ein Muster erkennen, dann ist es, dass Sie CSS das tun lassen wollen, wofür es entwickelt wurde: das Aussehen der Seite zu steuern, ohne die zugrunde liegenden Semantik des HTML-Markup zu beeinträchtigen.

Wenn Sie eine Reihe von handgeschriebenen Großbuchstaben verwenden, um den Effekt zu erzielen, wird dies genauso behandelt wie die Verwendung von getippten Leerzeichen – einige ältere Screenreader lesen jeden Buchstaben einzeln vor. Dies mag für die meisten Akronyme in Ordnung sein, aber Inhalte, die nur aus ästhetischen Gründen großgeschrieben werden, sollten diese Transformation über Styles erhalten.

Und wieder gilt: Wenn diese manuelle Anstrengung ein Muster bei Ihren Website-Autoren ist, untersuchen Sie die Kodifizierung des Verhaltens und tauschen Sie es gegen text-transform-Anweisungen aus. Sie tun nicht nur Ihren Benutzern einen Gefallen, sondern sind auch ein guter Kollege, indem Sie ihnen etwas Mühe und Arbeit ersparen.

Die Lesbarkeit ist ein weiterer Faktor, der berücksichtigt werden muss. Wir lesen geschriebene Sprache, indem wir Muster von Buchstaben in Wörtern vorwegnehmen und dann zurückgehen, um sie zu überprüfen. Große Textflächen in Großbuchstaben machen es schwierig, diese Muster vorherzusagen, was sowohl die Lesegeschwindigkeit als auch die Interpretation reduziert.

Benutzererlebnis

Mikrointeraktionen werden oft übersehen und unterbewertet, wenn man sich beeilt, ein Projekt abzuschließen, aber sie tragen wesentlich zu positiven und einprägsamen Erlebnissen bei. Eine solche Mikrointeraktion ist die richtige Verwendung von text-transform.

Beim Kopieren von Text berücksichtigen bestimmte Browser den Inhalt in der Quelle und ignorieren alle angewendeten Texttransformationen. Wenn wir unser „Der schnelle braune Fuchs“-Beispiel oben in Firefox oder Edge kopieren und einfügen würden, würden wir sehen, dass der Text nicht in Großbuchstaben gesetzt ist.

Manche mögen argumentieren, dass die gestylte Darstellung Vorrang hat, aber ich betrachte Browser, die diese Bewahrung der Autorenbabsicht nicht unterstützen, als fehlerhaft. Wenn Sie nicht die Zeit, Ressourcen, Autonomie oder das technische Know-how haben, um diesen Text in seine ursprüngliche Groß-/Kleinschreibung zurückzuverwandeln, wird die Neuformatierung nicht trivial. In Situationen, in denen dieser Inhalt manuell in andere Systeme migriert werden muss, wird unnötigerweise das Potenzial für Fehler eingeführt.

Fühlen Sie sich schick?

Immer noch dabei? Hier ist Ihre Belohnung! Mit dem Selbstvertrauen, dass wir nun unsere Typografie richtig mit Buchstabenabstand versehen, werden wir uns einigen der unterhaltsamen Dinge zuwenden

Spezielle Einheiten

Nein, wir reden nicht über Seal Team 6. Wenn Sie sich etwas Zeit auf der MDN-Seite genommen haben, die die verschiedenen verfügbaren Einheiten bespricht, sind Ihnen vielleicht einige interessante Messungen im Unterabschnitt Schriftart-relative Längen aufgefallen

• ex, das die x-Höhe der Schriftart darstellt.
• cap, das die Höhe der Großbuchstaben der Schriftart darstellt.
• ch, das die Breite der Null (0) Glyphe der Schriftart darstellt.

Wenn Sie Ihre Typografie *wirklich* beherrschen wollen, können Sie Folgendes verwenden:

• ex für mit Buchstabenabstand versehenen Text, der für Kapitälchen gesetzt ist (mehr dazu gleich).
• cap für mit Buchstabenabstand versehenen Text, der in Großbuchstaben transformiert wurde.
• ch für mit Buchstabenabstand versehene Monospace-Schriftarten.

Obwohl die Unterstützung für diese Einheiten variiert, ermöglicht uns CSS’ @supports, diese Deklarationen selbstbewusst zu schreiben und gleichzeitig Fallbacks für nicht konforme Browser bereitzustellen.

.heading-primary {
  color: #4a4a4a;
  font-family: "ff-tisa-web-pro", "Tisa Pro", "FF Tisa Pro", "Georgia", serif;
  font-size: 2em;
  letter-spacing: 0.25em; /* Fallback if the `cap` unit isn't supported  */
  line-height: 1.2;
  text-transform: uppercase;
}
@supports (letter-spacing: 0.25cap) {
  .heading-primary {
    letter-spacing: 0.25cap; /* Quarter the font's capital letter height */
  }
}

OpenType-Funktionen

Die Geschichte der Typografie ist voller spezieller Behandlungen für bestimmte Anwendungsfälle, bei denen die Standarddarstellung möglicherweise nicht ausreichte, um die Bedeutung effektiv zu vermitteln. Einige Behandlungen dienten der Verstärkung des visuellen Tons, andere waren pragmatischer – sie erleichterten die Interpretation des Textes.

Siehe den Stift.

OpenType greift diese Geschichte auf und ermöglicht es dem versierten Typografen, diese speziellen Behandlungen zu nutzen, vorausgesetzt, die Schriftart unterstützt sie. Für digitale Typografie werden die meisten Unternehmen, die professionelle Schriftarten verkaufen, Ihnen sagen, was verfügbar ist.

Adobe Typekit versteckt die verfügbaren Funktionen im Info-Symbol neben dem Kontrollkästchen „OpenType-Funktionen“ in ihrem Kit-Editor. Thisarmy’s Google OpenType Feature Preview ermöglicht es Ihnen, die Google Fonts-Bibliothek zu durchsuchen und verfügbare Funktionen ein- und auszuschalten.

Viele andere kostenlose Schriftarten-Hosts tun dies leider nicht. Um festzustellen, ob die von Ihnen ausgewählte Schriftart die benötigten Glyphen zur Unterstützung dieser Funktionen enthält, können Sie sie im Browser testen. Wenn Sie eine Kopie auf Ihrem Computer installiert haben, können Sie auch die Zeichenübersicht der Schriftart anzeigen (Zeichentabelle für Windows, Font Book für Mac).

Die meisten OpenType-Funktionen werden automatisch umgeschaltet, wenn sie aktiviert sind und die spezifischen Zeichenkombinationen eingegeben werden. Dank einiger cleverer Ingenieure hat diese Ersetzung keine Auswirkungen auf Dinge wie Suchen, Übersetzen oder Einfügen/Ändern zu einer Schriftart, die keine Unterstützung bietet.

Wenn Ihre Schriftart die Unterstützung für OpenType-Funktionen bietet, sollten Sie bei der Verwendung von Buchstabenabständen Folgendes beachten:

Ligaturen

Gemeinsame und diskrete Ligaturen sind spezielle Glyphen, die zwei nebeneinander liegende Zeichen kombinieren. Historisch gesehen wurden sie verwendet, um häufige Kerning-Probleme zu beheben und auch, um Bleisatz für die Verwendung anderswo zu sparen.

In Bezug auf den Buchstabenabstand möchten Sie sicherstellen, dass Ligaturen deaktiviert sind, um zu verhindern, dass etwas wie dies geschieht

#ProTipp: Wenn Sie letter-spacing != 0 verwenden, deaktivieren Sie Ligaturen über font-feature-settings. Sonst passiert das. pic.twitter.com/lU52wIfYx5

- Lea Verou (@LeaVerou) 6. Juli 2014

Sie könnten auch erwägen, einen gestylten span-Tag zu verwenden, um eine Ligatur zu approximieren und zwei Zeichen näher zusammen zu rücken. Das ist eine clevere Idee, kann aber beim Lesen durch einen Screenreader problematisch sein

Schwünge und Alternativen: Titel, kontextuell, stilistisch, historisch

Diese Sonderfunktionen passen typischerweise die Darstellung der Schriftart an, um den Ton anzupassen oder um spezielle Verzierungen und häufig wiederkehrende Zeichen deutlicher hervorzuheben. Diese Funktionen sind eher selten, aber die meisten professionellen Schriftarten enthalten mindestens eine Behandlung.

Ähnlich wie bei Ligaturen kann die Darstellung von Buchstaben-gestalteten Texten diese Funktionen beeinflussen. Es ist ratsam, zu testen, wie es bei einer Vielzahl von Inhalten aussieht, bevor Stile live geschaltet werden – Lorem Ipsum erfasst es möglicherweise nicht.

Kapitälchen

Viele Textverarbeitungsprogramme erlauben Ihnen, Faux- Kapitälchen auf die gleiche Weise zu erstellen, wie sie Ihnen erlauben, Faux-Fett- und Kursivstile zu erstellen. Das Problem mit diesen Faux-Stilen ist, dass sie minderwertige Fälschungen sind. Echte fette, kursive und Kapitälchenstile sind speziell dafür ausgelegt, die gleichen Proportionen und Metriken wie der Rest der Schriftart zu verwenden. Faux-Stile sind eine Einheitslösung und sehen etwa so elegant aus wie eine Kuh, die eine Treppe hinunterfällt.

Obwohl CSS eine Deklaration font-variant: small-caps; hat, sollte diese wirklich nur verwendet werden, wenn die Schriftart tatsächliche OpenType-Kapitälchen-Glyphen enthält. Ähnlich wie bei den Faux-Kapitälchen von Textverarbeitungsprogrammen sind CSS-erstellte Faux-Kapitälchen eine verzerrte Fotokopie des Originals.

Wenn Ihre Schriftart Kapitälchen unterstützt, ist die Wahrscheinlichkeit groß, dass der Typograf, der sie entworfen hat, den idealen Buchstabenabstand in seine Glyphen integriert hat. Aus diesem Grund müssen Sie möglicherweise keinen manuellen Buchstabenabstand einfügen und können sich auf sein gutes Urteilsvermögen verlassen.

Groß-/Kleinschreibung empfindliche Formen

Diese Funktion rendert Glyphen, die so gestaltet sind, dass sie gut aussehen, wenn sie neben Inhalten in Großbuchstaben gesetzt werden. Dank Dingen wie Hashtags (#) und At-Zeichen (@) erleben wir eine Renaissance von Nicht-alphanumerischen Zeichen, die neben regulärem Inhalt platziert werden. Wenn Ihre Schriftart sie unterstützt und Sie irgendwo mit Buchstabenabstand versehene Großbuchstaben-Stile verwenden, sage ich: Nehmen Sie sie mit auf!

CSS Custom Properties, Preprozessoren und Utility-Klassen

Eines der Ziele einer ausgereiften Website ist eine Codebasis, die leicht zu verstehen und zu warten ist. CSS Custom Properties und CSS-Präprozessoren wie Sass oder PostCSS bieten Funktionen wie Variablen, die es Entwicklern ermöglichen, Dinge wie Messungen zu kodieren, die im gesamten Quellcode wiederholt werden.

Für den Buchstabenabstand können Variablen eine hervorragende Möglichkeit sein, um sicherzustellen, dass Entwickler nicht raten müssen, wie der Wert ist. Ein System mit vordefinierten und leicht verständlichen Messungen wie $tracking-tight / $tracking-slight / $tracking-loose erspart den Leuten, die an der Website arbeiten, Zeit bei der Überlegung, was dem Design am besten entspricht. Designer wären gut beraten, die gleiche Namenskonvention zu verwenden, die die Entwickler für diese vereinbarten Messungen verwenden.

Utility-Klassen – eine CSS-Methodik, die „eine einzelne Regel oder ein sehr einfaches, universelles Muster anwendet“ – können ebenfalls von dieser Formalisierung von Messungen profitieren. Indem Sie diese vordefinierten Gruppierungen von Deklarationen in Ihrem Designsystem nehmen und sie in Single-Purpose-Klassen umwandeln, können Sie der Beschreibung von Elementen auf Ihrer Website viel Flexibilität und Modularität hinzufügen.

<section class="c-card">
  <h3 class="u-heading-secondary u-tracking-slight u-all-caps">
    Our services
  </h3>
  …
</section>

Dies kann besonders nützlich sein, wenn Ihre Organisation eine große Website mit vielen verschiedenen Komponenten und unterschiedlichem Zugriff auf den Quellcode der Website hat. Autoren, die nur Zugang zu einer Post-Authoring-Umgebung haben – einschließlich einer HTML/Markdown-Ansicht –, werden eher dazu neigen, sich an etablierte Stile zu halten, wenn sie darauf aufmerksam gemacht werden und diese die benötigte Flexibilität bieten.

Fazit

Typografie ist Teil des Leseerlebnisses jedes Einzelnen, und doch etwas, über das die meisten nicht viel nachdenken. Indem wir ihre Geschichte, Stärken und Schwächen besser verstehen, können wir klare und effektive Leseerlebnisse für alle schaffen.