Gestalten Sie zuerst die Typografie für Ihre Inhalte (und ein Blick auf Type Nugget)

Wie oft haben Sie eine „fertige“ Website gesehen, auf der in den stillen Ecken noch immer Lorem-Ipsum-Text lauert? Während wir uns oft um Perfektion in unseren Designs und Codes bemühen, werde ich jedes Mal, wenn ich über ein unverständliches Stück Lorem Ipsum stolpere, daran erinnert, dass nicht alle Aspekte des Webentwicklungsprozesses die Aufmerksamkeit erhalten, die sie verdienen.

Die Entwicklung einer vollständigen und detaillierten Suite typografischer Elemente ist ein oft übersehener Aspekt des Prozesses. Obwohl Typografie nicht immer so präsent oder aufregend ist wie andere grafische Elemente, ist sie ein wesentlicher Bestandteil jeder Website und leistet die meiste Arbeit, um den Zweck jeder Seite zu erfüllen: die Übermittlung von Informationen.

Während ich nichts gegen die faule Verwendung von Lorem Ipsum tun kann, habe ich an einem Werkzeug gearbeitet, das bei der Entwicklung schöner und robuster Online-Typografie hilft.

Warum mir Typografie so wichtig ist

Ein wenig über mich wird helfen, die Szene zu setzen. Ich bin ein Full-Stack-Entwickler, der in einer Digitalagentur mit Designern zusammenarbeitet. Ich habe Grafikdesign studiert, bevor ich zur Entwicklung wechselte, daher verstehe ich Layout und Typografie. Obwohl ich mit Design angefangen habe, möchte ich betonen, dass ich mich nicht als Designer betrachte. Aus diesem Grund wird dieser Beitrag nicht erklären, wie man ein Typsystem designet. Ich werde darüber sprechen, wie man eines in der Entwicklung implementiert.

Im Laufe meiner Karriere als Entwickler habe ich oft bemerkt, dass Websites die feineren Details der Typografie vermissen lassen. Obwohl keine offensichtlichen Probleme, nagen diese kleinen Fehler an der gesamten Benutzererfahrung.

Ich bin mir nicht ganz sicher, warum typografische Fehler so oft passieren. Vielleicht liegt es an Zeitbeschränkungen, Übersehen während der Entwicklung oder etwas völlig anderem.

Ich habe mich auf die Mission begeben, dieses Problem zu lösen, was mich dazu gebracht hat, diesen Artikel zu schreiben, und auch zur Entwicklung meines aktuellen Nebenprojekts: Type Nugget. Es ist ein Werkzeug, das hoffentlich Benutzern ermöglicht, einfach robuste Typsysteme zu erstellen.

Warum Ihnen Typografie auch wichtig sein sollte

Die Vorteile eines robusten Typsystems sind vielfältig. Es gewährleistet Konsistenz in Ihrem Projekt und ermöglicht es Ihnen, weniger Code zu schreiben. Am wichtigsten ist jedoch, dass ein robustes Typsystem sicherstellt, dass der Inhalt das kommuniziert, was er soll.

Ein Arbeitskollege schickte mir kürzlich einen Artikel auf Pitchfork. Sobald ich auf der Seite war, verliebte ich mich in ihr Typsystem und ihre Struktur. Das Lesen des Textes war flüssig; ein absolutes Vergnügen. Ihr typografisches System ist einfach und schön. Ich werde mich auf diese Website beziehen, während ich weiter über Typsysteme spreche!

(Schauen Sie sich diesen Initialbuchstaben an 💕)

Eine der wichtigsten Anforderungen an ein Typsystem im heutigen Webklima ist, dass es auf allen möglichen vorhandenen Viewports perfekt funktioniert. Wir wissen nie, was als Nächstes in der Welt der Geräte kommt! Das ist machbar, aber lassen Sie uns zuerst in die Welt der responsiven Einheiten eintauchen.

Responsive Einheiten mit Herzaugen betrachten 😍

Meiner Meinung nach können Sie die Webtypografie nicht beherrschen, bis Sie responsive Einheiten verstehen. Sich mit responsiven Einheiten auseinanderzusetzen, erfordert ein wenig Mathematik, aber es verändert Ihre Welt wirklich, sobald Sie es verstanden haben. Bald werden Sie beim Anblick von px zurückschrecken!

Es gibt bereits Artikel zu diesem speziellen Thema, daher werde ich nicht zu sehr ins Detail gehen, aber hier ist eine kurze Erklärung der Einheiten, die ich für Text verwende

• em: Relativ zur aktuellen (vererbten) font-size. Wenn ich einem Element innerhalb dieses Artikels font-size:2em zuweise, wäre es doppelt so groß wie die font-size des restlichen Artikels.
• rem: Relativ zur font-size des Wurzelelements (was eine schicke Art ist, das html-Element zu sagen). Wenn ich ein weiteres Element innerhalb des im vorherigen Beispiel verwendeten Elements hinzufügen und es dann auf font-size:1rem setzen würde, hätte es jetzt die ursprüngliche Größe, unabhängig davon, ob sein Elternteil in ems eingestellt ist (ich habe hier einen Pen eingerichtet, der zeigt, wie ems und rems zusammenarbeiten).
• vw & vh: Relativ zu 1% der Viewport-Breite bzw. -Höhe. Also bedeutet 5vw, dass die font-size 5% der Browserbreite beträgt, und 5vh 5% der Browserhöhe.

Ich neige dazu, eine px font-size auf dem Wurzelelement des Dokuments festzulegen und den Rest der typografischen Elemente mit ems für font-size und rems für Abstände zu definieren, um ein konsistentes Typgitter beizubehalten. Ich setze Überschriften oft in vw (oder sogar gelegentlich in vh) und verwende eine Media Query, um sie nach Erreichen einer bestimmten Viewport-max-width in eine em-Größe zu überführen. Dies vermeidet überdimensionierte Überschriften auf selbst den kleinsten mobilen Geräten. Es gibt einen großartigen Sass-Mixin von Eduardo Bouças hier, um viewport-relative Texte mit minimalen und maximalen Größen zu erstellen.

Responsive Einheiten in Aktion

Werfen wir einen Blick darauf, wie Pitchfork responsive Einheiten verwendet hat.

Die font-size auf ihren html- und body-Elementen ist auf 10px eingestellt. Dann haben sie einen .contents-Div, der den gesamten Artikelinhalt umschließt. Dieser ist auf 1.8rem eingestellt und wechselt zu 1.6rem, sobald der Viewport weniger als 992px breit ist (ich hätte das lieber Mobile-First statt Desktop-First gemacht, aber das ist wahrscheinlich eine Frage der Präferenz). Das bedeutet, dass die Haupt-font-size 18px auf dem Desktop und 16px auf kleineren Geräten beträgt (10px * 1.8 = 18px, 10px * 1.6 = 16px), beides sehr angenehme Schriftgrößen für die jeweiligen Viewports.

Die Überschriftenstile variieren je nach Art des Artikels angemessen, scheinen sich aber ähnlich zu skalieren. Die h1 auf einer Features-Seite beginnt bei 4.8rem, skaliert auf 4rem, wenn der Viewport weniger als 992px breit ist, dann 3rem, wenn der Viewport weniger als 767px breit ist (jeweils 48px, 40px & 30px). Der .contents-Div verhindert auch immer, dass der Text die optimale Maßzahl (Zeilenlänge) von Texten überschreitet, die im Allgemeinen als Faustregel der Typografie zwischen 40 und 80 Zeichen lang ist, je nach Kontext.

Pitchfork hat es gut gemacht, aber das ist wirklich das absolute Minimum, das für ein großartiges Typsystem erforderlich ist, um zu gedeihen.

Aufbauend auf diesem Minimum ist es wichtig zu erkennen, dass Typografie mehr ist als nur Text. Es gibt eine ganze Reihe von Elementen (h1-h6, p, span, em, strong, a, ul, ol, li, blockquote, caption und viele mehr), die zum typografischen Fluss und Erscheinungsbild von Inhalten beitragen. Es ist wichtig, dass sie nicht vergessen werden, insbesondere bei inhaltslastigen Websites wie Blogs oder Nachrichten-Websites. Die Verwendung eines CSS-Resets wie Normalize.css oder eines Frameworks wie Bootstrap bedeutet normalerweise, dass Sie dies bereits abgedeckt haben. Es ist jedoch immer eine nette Geste, ein wenig von der Standardeinstellung abzuweichen. Ich finde es oft hilfreich, allen diesen Elementen innerhalb eines Inhaltskontextes einen globalen Abstand zuzuweisen, der der Haupt-line-height entspricht. Dies erhält ein schönes, konsistentes Raster. Wenn beispielsweise mein Haupttext innerhalb von .content 1em mit einer line-height von 1.6em beträgt, dann sind die oberen und unteren Abstände aller meiner Überschriften, Absätze und anderer Elemente innerhalb von .content ebenfalls auf 1.6em eingestellt. Dies ist keine strenge Regel, nur ein guter Ausgangspunkt.

Nebenbei bemerkt, obwohl die oben genannten Elemente hervorragend zur Bestimmung des visuellen Aspekts einer Website geeignet sind, sind sie auch unglaublich wichtig, um sicherzustellen, dass eine Website zugänglich ist. Die Verwendung semantischer HTML-Elemente stellt sicher, dass Ihre Website für Maschinen sinnvoll ist, wie z. B. Bildschirmsprachausgaben für Sehbehinderte oder Web-Crawler wie Google.

Ich habe Pitchfork durchstöbert, um Beispiele für einige dieser Elemente zu finden. Als ich kein Beispiel für eine Liste fand, habe ich sie aus Neugier über die Entwicklertools auf die Seite eingefügt. Sicherlich waren sie schön gestylt, auch wenn ich keine Beispiele dafür finden konnte, wo/ob sie auf der Website verwendet wurden. 👏🏾

Obwohl sie technisch nicht direkt unter die Typografie fallen, glaube ich, dass Zustände und Übergänge eine große Rolle für das Gesamtgefühl einer Website spielen. Leider werden sie ebenfalls oft vergessen. Ich gehe davon aus, dass das Erste, was vielen Entwicklern einfällt, wenn ich „Zustände und Übergänge“ sage, Linkstile sind. Das ist aber nicht alles und nicht nur Hover-Stile. Hover-Stile *sind* wichtig für Links, aber auch der Fokus ist wichtig.

Haben Sie jemals versucht, mit Tab und Shift+Tab durch eine Website zu navigieren? Das habe ich definitiv getan, und auf manchen Websites ist das fast unmöglich. Der Browser hat eine Standardmethode zur Anzeige, aber ich habe oft gesehen, dass diese entfernt wird, weil sie nicht ästhetisch ansprechend ist. Bitte, wenn Sie sie entfernen, ersetzen Sie sie durch etwas Hübscheres!

Formularfelder können durch :focus-Stile auch stark aufgewertet werden und Ihrem Internetauftritt wirklich das gewisse Etwas verleihen. Eine weitere Sache, die mir bei diesem Thema aufgefallen ist, ist entweder ein Mangel an Übergängen oder Übergänge mit seltsamer Zeitgebung, was beides den Wechsel zwischen verschiedenen Zuständen sehr ruckartig oder unnatürlich wirken lässt. Meiner Erfahrung nach sind Übergänge zwischen 1,5 und 2,5 Sekunden ausreichend. Alles darüber hinaus macht mich unbehaglich (auch hier ist dies eine allgemeine Regel, die bei Bedarf gebrochen werden kann).

Während wir über Übergänge sprechen, versuchen Sie, das Überblenden aller Eigenschaften eines Elements zu vermeiden. Dies wird Ihnen wahrscheinlich entweder in Bezug auf die Leistung auf die Füße fallen oder später beim Versuch, ein Kindelement zu stylen.

Zusätzliche Lektüre zur Architektur

Hier sind ein paar Dinge, die ich gelernt habe und die mein Entwicklerleben erheblich verbessert haben

• Vermeiden Sie Spezifitätsprobleme, indem Sie unnötiges Styling direkt an Elementen vermeiden, z. B. das Styling von .nav a, wenn Sie .nav__item stylen könnten. Dies fand ich am wichtigsten beim Styling von Überschriften. Früher habe ich die h1-h6-Tags direkt gestylt, bis ich merkte, dass h1-h6 semantische Elemente sind, die verschiedene Stufen eines Dokuments markieren. Nicht alle h1-Tags müssen gleich aussehen! Ich style Überschriften jetzt mit Klassen wie .heading--xl, .heading--sm.
• Verwenden Sie globale Textmodifikator-Klassen, anstatt zufälliges CSS hinzuzufügen, um kleine Teile eines Projekts zu ändern. Z. B. verwende ich Klassen wie .text--xl, .text--sm.
• Vermeiden Sie unnötiges Verschachteln von Selektoren, z. B. .nav > .nav__item, wenn Sie einfach .nav__item stylen könnten. Dies vermeidet Spezifitätsprobleme und kann auch die Leistung verbessern, da der Browser nicht so viele Nachschlagevorgänge an Elementen durchführen muss. Schauen Sie sich diesen Artikel über Modular CSS an, um mehr darüber zu erfahren, warum dies gut zu vermeiden ist.
• Übernehmen Sie eine CSS-„Architektur“. Es muss keine bestehende sein. Erfinden Sie eine, wenn Sie möchten. Haben Sie einfach eine. Ich benutze etwas, das BEM sehr ähnlich ist, gekoppelt mit der Methodik aus dem oben genannten Modular-CSS-Artikel. Hier ist eine großartige Liste einiger verschiedener Architekturen (und verschiedener anderer großartiger Dinge). Ein großartiger CSS-Tricks-Artikel wurde kürzlich hierzu veröffentlicht. Lesen Sie ihn, wenn Sie interessiert sind!

Schauen Sie sich Type Nugget an

Die Agentur, für die ich arbeite, hat ein Innovationsprogramm, das uns Zeit gibt, an unseren eigenen Produkten und Ideen zu arbeiten. Ich habe ein kleines Team zusammengestellt, das meine Leidenschaft für diese Themen teilt. In den letzten Monaten haben wir Type Nugget entwickelt.

Type Nugget ist ein Werkzeug, das es Entwicklern erleichtert, ein solides Typsystem basierend auf den von mir besprochenen Prinzipien aufzubauen. Es hat noch einen langen Weg vor sich, bis es dort ist, wo ich es haben möchte, aber wir haben es im Blick, das ultimative Tool für die Einrichtung von Web-Typsystemen zu werden und eine großartige Community für Web-Typ-Enthusiasten aufzubauen.

Wir sind sehr aufgeregt, es Wirklichkeit werden zu lassen, also schauen Sie es sich an und lassen Sie uns wissen, welche Funktionen Sie gerne sehen würden!

Zusammenfassend

Das Internet dreht sich um Inhalte. Als Webentwickler ist es unsere Aufgabe, sicherzustellen, dass Benutzer diese Inhalte verstehen können. Für mich ist das ein ausreichender Grund für jeden Webentwickler, Typsysteme in- und auswendig zu kennen. Die Argumentation wird noch stärker, wenn responsive Einheiten hinzukommen. Nehmen Sie sich also ein oder zwei Stunden Zeit, um diese integralen Bestandteile der Webentwicklung aufzufrischen. Oder nehmen Sie den einfachen Weg und nutzen Sie Type Nugget 😉