Intrinsische Typografie ist die Zukunft des Stylings von Text im Web

Die Art und Weise, wie wir Text gestalten, hat sich über die Jahre nicht wesentlich verändert. Es gab zahlreiche Fortschritte, um Dinge flexibler zu gestalten, wie z. B. Layouts, aber in Bezug auf das Styling bleiben die meisten endlichen Aspekte unserer Designs, wie z. B. Text, relativ unverändert. Dies gilt insbesondere für die Textgestaltung. Wir schreiben Code, um Text explizit für jeden Teil unserer Layouts zu stylen, und dann, um ihn responsiv zu machen, schreiben wir weiteren Code, um ihn für jeden Breakpoint funktionierend zu machen. Das bedeutet, dass, während sich verschiedene Textbereiche komprimieren und ausdehnen, das Ergebnis Spannung ist – spürbare, erfahrbare Spannung – kurz bevor der Inhalt bricht. An diesen Stellen leidet der Inhalt darunter, dass er nicht gut bemessen oder abgesetzt ist, während er von übermäßig kompliziertem und zerbrechlichem Code unterstützt wird.

Intrinsische Typografie verschiebt all dies und räumt es auf, indem sie am Code selbst ansetzt, um das Styling zu beeinflussen. Anstatt explizite Textstile zu schreiben, definieren Sie, wie sich diese Stile proportional zum Bereich des Textes ändern. Dies ermöglicht Ihnen, flexiblere Textkomponenten in mehr Layoutvarianten zu verwenden. Es vereinfacht Ihren Code und erhöht die Möglichkeiten für neue Layoutmöglichkeiten. Intrinsische Typografie funktioniert so, dass sich der Text selbst an den Bereich anpasst, in dem er gerendert wird. Anstatt Text für jede Komponente bei jedem Breakpoint zu bemessen und abzustzen, erhält der Text Anweisungen, auf die Bereiche zu reagieren, in denen er platziert wird. Infolgedessen ermöglicht intrinsische Typografie Designs, weitaus flexibler zu sein, sich an den Bereich anzupassen, in dem sie platziert werden, mit weitaus weniger Code.

Typografische Superkräfte jenseits von clamp()

Das Ergebnis der Verwendung intrinsischer Typografie geht weit über das hinaus, was mit Werkzeugen wie clamp() möglich ist. Intrinsische typografische Stile verbinden die Komponententportabilität von Elementabfragen mit der Interpolationskontrolle von CSS-Animationen und ermöglichen nahtlose Änderungen beliebiger Werte über Containerbreiten hinweg. Diese Technik ermöglicht Dinge, die mit anderen CSS-Techniken nicht möglich sind, wie z. B. die flüssige Anpassung von variablen Schriftarteinstellungen, Farbe und einheitenlosen line-height, wenn sich die Fläche eines Elements ändert. Sie vermeiden auch die Barrierefreiheitsfallen von clamp() und Locks, bei denen das Ändern der Standard-Schriftgröße des Browsers Ihre Typografie aus der Ausrichtung mit Ihren Breakpoints bringt, wenn Sie relative Einheiten verwenden.

Wie unterscheidet sich das von responsiver Typografie?

Responsive Typografie bezieht sich auf die Ansicht, um Text zu transformieren. Dies geschieht über Media Queries, clamp() oder CSS Locks. Während diese Techniken eine granulare Kontrolle der Typografie über verschiedene Bildschirmgrößen hinweg ermöglichen, fehlt ihnen die Fähigkeit, die Typografie in verschiedenen Komponenten zu steuern. Das bedeutet, dass für eine Seite mit einer Vielzahl von unterschiedlich großen Inhaltsbereichen ein neuer Überschriftenstil für jeden dieser Bereiche mit einem responsiven Typografieansatz erstellt werden müsste.

Intrinsische Typografie benötigt all das nicht. Mit intrinsischer Typografie kann ein einziger Überschriftenstil in allen verschiedenen Inhaltsbereichen verwendet werden. Diskrete Überschriftenstile können zu einer einzigen intrinsischen Überschrift zusammengefasst werden. Dies ist eine Unterscheidung, die der von Elementabfragen gegenüber Media Queries ähnelt: Mit Elementabfragen ist es möglich, alle Skalierungsinformationen an eine Komponente zu binden, während bei Media Queries die Stile immer auf die Ansicht verweisen.

Die Anatomie eines intrinsischen Stils

Wenn wir die oben gezeigten intrinsischen Überschriftenstile nehmen und alle darin enthaltenen Variationen herausziehen würden, sähe das wie folgt aus

In größeren Bereichen der Seite wird der Text größer, fetter und breiter gesetzt. In kleineren Bereichen der Seite ist der Text kleiner, leichter und schmaler. Die Fläche, auf der eine Überschrift gerendert wird, wird gemessen, und dann wird der entsprechende Ausschnitt aus diesem intrinsischen Überschriftenstil entnommen, um für diese spezielle Überschrift verwendet zu werden.

Möglicherweise fällt Ihnen einiges an der Form dieses extrudierten Überschriftenstils auf. Der Text wird von klein zu groß, aber die Form selbst hat Kurven. Diese Kontrolle darüber, wie Text von einem Punkt zum anderen skaliert, ist besonders nützlich, wenn Bildschirme kleiner werden, um eine optimale Lesbarkeit zu gewährleisten. Unten sehen Sie dieselben Stile, die auf zwei Textspalten angewendet werden, eine mit einer gekrümmten Form und eine mit einer linearen Form. Im gekrümmten intrinsischen Beispiel ist der Text an mehr Stellen weitaus besser lesbar, im Vergleich zum Beispiel mit linearer Interpolation, bei dem der Text zu schnell zu klein wird.

Durch die Kombination der Fähigkeit, Textstile über Größen und Bereiche eines Layouts hinweg zu interpolieren, sowie durch die Gestaltung, wie diese Einstellungen interpoliert werden, bietet die intrinsische Typografie Designern eine beispiellose Kontrolle darüber, wie Text bei jeder Bildschirm- oder Komponenten stør anzeigt wird.

Intrinsisch typografieren

Typetura hat ein Werkzeug entwickelt, um CSS um intrinsische typografische Funktionalität zu erweitern (ich bin der Schöpfer). Dieses Werkzeug ermöglicht das Schreiben der notwendigen typografischen Stile und injiziert Flexibilität, wo vorher keine war. Intrinsische Stile werden in CSS Keyframes gespeichert und ändern sich basierend auf der Breite eines übergeordneten Elements. Dies ermöglicht die Interpolation jeder animierbaren Eigenschaft über Elementbreiten hinweg. Um auf unser Beispiel mit Elementabfragen zurückzukommen, denken Sie an interpolierte Elementabfragen.

Um Ihre Keyframes einzurichten, entspricht 0% einer Containerbreite von 0px, und der Keyframe 100% ist die maximale Containerbreite, die Ihre Stile abdecken. Dieser Wert beträgt standardmäßig 1600px. Container können durch Hinzufügen der Klasse typetura zu einem Element definiert werden, wobei das Wurzelelement der Standardcontainer ist. Kindelemente werden basierend auf der Breite des übergeordneten Kontexts gestylt, es sei denn, ein neuer Kontext wird definiert.

@keyframes headline {
  0% {
    font-size: 1rem;
  }
  100% {
    font-size: 4rem;
  }
}

Um diese Stile an Ihr Element zu binden, verwenden Sie die benutzerdefinierte Eigenschaft --tt-key. Jetzt können Sie Ihren ersten intrinsischen Stil sehen.

@keyframes headline {
  0% {
    font-size: 1rem;
    line-height: 1.1;
  }
  100% {
    font-size: 4rem;
    line-height: 1;
  }
}

.headline {
  --tt-key: headline;
}

Um zu steuern, wie diese Stile skaliert werden, verwenden Sie die benutzerdefinierte Eigenschaft --tt-ease. Diese Eigenschaft akzeptiert CSS-Easing-Funktionen und Schlüsselwörter. Dies ermöglicht es Ihnen, Ihre Grundschriftgröße schnell zu erhöhen oder die Skalierung und Abstände von Überschriften zu verringern. Zusätzlich können wir den Bereich, den diese Stile abdecken, mit --tt-max einschränken, um besser in die Beschränkungen Ihrer Layouts und die Verwendung des Textes zu passen.

@keyframes headline {
  0% {
    font-size: 1rem;
    line-height: 1.1;
  }
  100% {
    font-size: 4rem;
    line-height: 1;
  }
}

.headline {
  --tt-key: headline;
  --tt-max: 600;
  --tt-ease: ease-in-out;
}

Das folgende Beispiel zeigt, wie flexibel Ihre Seite sein kann, wenn der gesamte Text darauf von intrinsischen typografischen Stilen gesteuert wird; vom Root des Dokuments aufwärts. Der Text kann nahtlos von einem Monitor, der einen Konferenzraum bedient, bis hin zur Größe einer Uhr übergehen – alles ohne Media Queries. Textstile können auch in verschiedenen Modulen geteilt werden; zum Beispiel werden die Überschrift am oberen Rand der Seite und die Überschriften im nächsten Klickbereich von demselben Stil gesteuert. Während Effizienzen bei jeder Webseitengröße sofort auftreten, summieren sie sich schnell: Je größer die Website, desto mehr bauen sich diese Effizienzen auf.

Schauen Sie sich diesen Pen an. Darin habe ich einen Inspektor für intrinsische Stile hinzugefügt, damit Sie auf jede Überschrift klicken und die gerenderte Größe sehen können. Innerhalb des Inspektors können Sie auch die Form des intrinsischen Stils und die obere Grenze manipulieren. Dies ermöglicht Ihnen, die typografischen Stylingmöglichkeiten zu sehen, die Typetura bietet.

Intrinsische Typografie ist die Zukunft des Stylings im Web

Das Einbetten dieser Designregeln in Ihre Inhalte ist die Praxis des intrinsischen Designs, und das Einbetten dieser Regeln in Ihren Text ist die Praxis der intrinsischen Typografie. Intrinsisches Webdesign, geprägt von Jen Simmons, ist ein Konzept, bei dem gängige Designmutationen in das Gefüge unserer Komponenten integriert werden. Anstatt den Stil jedes einzelnen Inhaltsstücks explizit anzugeben, erhalten intrinsische Layouts Designbeschränkungen und unsere Inhalte reagieren auf ihre Umgebung, anstatt Stile explizit zu definieren. Dieser Ansatz vereinfacht sowohl Ihre Codebasis als auch erhöht die Flexibilität Ihrer Designs, da Komponenten Anweisungen haben, die ihnen helfen, auf mehr als nur die Ansicht zu reagieren.

Typetura bringt diese Philosophie in das Textstyling ein. Da Textkomponenten unser grundlegendstes Designmaterial sind, ein Material, das in fast jeder Komponente wiederverwendet wird, hat intrinsische Typografie erhebliche Vorteile gegenüber anderen Methoden. Vorteile in Bezug auf Designresilienz, Skalierbarkeit und Codevereinfachung liegen tiefer in Ihrem Projekt und verlängern seine Lebensdauer. Skalieren Sie auf die Größe einer Uhr oder bis zur Größe eines Fernsehers, und dort, wo Text die Reichweite Ihres Layouts einst einschränkte, unterstützt er nun Ihre Ambitionen.