Die intrinsische Typografie ist die Zukunft des Styling -Textes im Web

Die Art und Weise, wie wir Text stylen, hat sich im Laufe der Jahre nicht viel verändert. Es gab zahlreiche Fortschritte, die dazu beitragen, die Dinge flexibler zu machen, wie Layouts, aber in Bezug auf das Styling bleiben die endlichsten Aspekte unserer Designs wie Text relativ unverändert. Dies gilt insbesondere für das Textstyling. Wir schreiben Code, um Text für jeden Teil unserer Layouts explizit zu stylen. Um ihn dann reaktionsschnell zu machen, schreiben wir mehr Code, damit er an jedem Haltepunkt funktioniert. Dies bedeutet, dass das Ergebnis als verschiedene Bereiche des Textes komprimiert und erweitert wird - tastbar, experimentelle Spannungen, kurz bevor der Inhalt bricht. An diesen Orten leiden Inhalte darum, dass sie nicht gut dimensioniert oder beabstandet sind, während sie durch übermäßig komplizierte und spröde Code unterstützt werden.

Die intrinsische Typografie verschiebt all dies und löscht sie, indem sie am Code selbst beginnt, um das Styling zu beeinflussen. Anstatt explizite Textstile zu schreiben, definieren Sie, wie sich diese Stile im Verhältnis zum Bereich des Textes ändern. Auf diese Weise können Sie flexiblere Textkomponenten in mehr Layoutvariationen verwenden. Es vereinfacht Ihren Code und erhöht die Möglichkeiten für neue Layoutmöglichkeiten. Die intrinsische Typografie funktioniert so, dass sich Text selbst in den Bereich anordnet, in dem sie gerendert wird. Anstatt Text für jede Komponente an jedem Haltepunkt zu Größe und abzustimmen, erhält der Text Anweisungen, um auf die Bereiche zu reagieren, in denen er platziert ist. Infolgedessen ermöglicht die intrinsische Typografie Designs weitaus flexibler und passt sich an den Bereich an, in dem er platziert wird, mit weit weniger Code.

Typografische Superkräfte jenseits der Clamp ()

Das Ergebnis der Verwendung der intrinsischen Typografie geht weit über das hinaus, was mit Tools wie Clamp () möglich ist. Das Intrinsic typographische Styling verbindet die Komponenten -Tragabilität von Elementabfragen mit der Interpolationskontrolle von CSS -Animationen und ermöglicht nahtlose Änderungen eines beliebigen Werts über die Containerbreiten hinweg. Diese Technik ermöglicht Dinge, die mit anderen CSS-Techniken nicht möglich sind, z. Sie vermeiden auch die Fallstricke von Barrierefreiheit von Clamp () und sperren, wobei das Ändern der Standard -Schriftgröße des Browsers die Typografie aus der Ausrichtung auf Ihre Haltepunkte verschiebt, wenn relative Einheiten verwendet werden.

Wie unterscheidet sich das von reaktionsschnellen Typografie?

Responsive Typografie bezieht sich auf das Ansichtsfenster auf Transformationstext. Dies geschieht durch Medienabfragen, Clamp () oder CSS -Schlösser. Während diese Techniken eine granulare Steuerung der Typografie über die Bildschirmgrößen über die Siebgröße ermöglichen, fehlt ihnen die Fähigkeit, die Typografie in verschiedenen Komponenten zu steuern. Dies bedeutet, dass für eine Seite mit einer Reihe unterschiedlich großer Inhaltsbereiche ein neuer Schlagzeilenstil für jeden dieser Bereiche mit einem reaktionsschnellen Typografieansatz erstellt werden müsste.

Die intrinsische Typografie braucht nicht alles. Bei der intrinsischen Typografie kann ein einzelner Schlagzeilenstil in allen Bereichen der Inhalte verwendet werden. Diskrete Schlagzeilen können in eine intrinsische Überschrift konsolidiert werden. Dies ist eine Unterscheidung, die denen von Elementabfragen gegenüber Medienabfragen ähnelt: Mit Element -Abfragen ist es möglich, alle Skalierungsinformationen an eine Komponente zu binden, in der Medienabfragen die Stile immer auf das Ansichtsfenster verweisen.

Die Anatomie eines intrinsischen Stils

Wenn wir die intrinsischen Schlagzeilenstile oben nehmen und alle Variationen in ihnen herausstechen würden, würde es wie folgt aussehen:

Innerhalb größerer Bereiche der Seite ist der Text, der größer, mutiger und breiter ist. In kleineren Bereichen der Seite ist der Text kleiner, leichter und schmaler. Der Bereich, in dem eine Überschrift wiedergegeben wird, wird gemessen, und dann wird das entsprechende Schicht aus diesem intrinsischen Schlagzeilenstil für diese spezifische Überschrift verwendet.

Möglicherweise bemerken Sie ein paar Dinge über die Form dieses extrudierten Schlagzeilenstils. Der Text ist von kleiner bis größer, aber die Form selbst hat Kurven. Diese Kontrolle darüber, wie Text von einem Punkt zu einem anderen skaliert, ist besonders nützlich, da Bildschirme kleiner werden, um eine optimale Lesbarkeit zu gewährleisten. Im Folgenden sehen Sie den gleichen Satz von Stilen, die auf zwei Textspalten angewendet werden, eine mit einer gekrümmten Form und eine mit einer linearen Form. In dem gekrümmten intrinsischen Beispiel ist der Text an mehr Stellen erheblich lesbarer, im Vergleich zum Beispiel mit linearer Interpolation, bei dem der Text zu schnell zu klein wird.

Durch die Kombination der Fähigkeit, das Textstyling über Größen und Bereiche eines Layouts zu interpolieren sowie die Art und Weise zu gestalten, wie diese Einstellungen interpoliert werden, bietet die intrinsische Typografie Designern eine beispiellose Menge an Kontrolle darüber, wie Text auf einem beliebigen Bildschirm oder einer Komponentengröße gerendert wird.

Intrinsisch Typenset

Typetura hat ein Tool entwickelt, um CSS intrinsische Typensatzfunktionen hinzuzufügen (ich bin der Schöpfer). Mit diesem Tool können die erforderlichen typografischen Stile geschrieben werden, wodurch Flexibilität injiziert werden kann, wo zuvor keine vorhanden waren. Intrinsische Stile werden in CSS -Keyframes gespeichert und ändern sich basierend auf der Breite eines übergeordneten Elements. Dies ermöglicht die Interpolation von animatierbaren Eigenschaften über Elementbreiten hinweg. Um auf unser Beispiel für unser Element -Abfragen zurückzuführen, denken Sie an interpolierte Elementabfragen.

Um Ihre Keyframes einzurichten, entspricht 0% einer Containerbreite von 0PX, und Keyframe 100% ist die maximale Containerbreite, die Ihre Stile abdecken. Dieser Wert ist standardmäßig 1600px. Container können definiert werden, indem die Klasse Typetura zu einem Element hinzugefügt wird, wobei das Stammelement als Standardbehälter ist. Kinderelemente werden basierend auf der Breite des übergeordneten Kontextes gestaltet, es sei denn, ein neuer Kontext ist definiert.

 @Keyframes Überschrift {
  0% {
    Schriftgröße: 1Rem;
  }
  100% {
    Schriftgröße: 4REM;
  }
}

Um diese Stile an Ihr Element anzuhängen, verwenden Sie die benutzerdefinierte Eigenschaft-TT-Key. Jetzt können Sie Ihren ersten intrinsischen Stil sehen.

 @Keyframes Überschrift {
  0% {
    Schriftgröße: 1Rem;
    Zeilenhöhe: 1.1;
  }
  100% {
    Schriftgröße: 4REM;
    Linienhöhe: 1;
  }
}

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

Verwenden Sie die kundenspezifische Eigenschaft-TT-Ease, um die Skalierung dieser Stile zu formen. Diese Eigenschaft akzeptiert CSS -Lockerungsfunktionen und Keywords. Auf diese Weise können Sie Ihre Basis -Schriftgröße und die Verjüngung von Überschriften und Abstand schnell zur Sprache bringen. Darüber hinaus können wir den Bereich, den diese Stile abdecken, mit--TT-MAX einschränken, um die Einschränkungen Ihrer Layouts und den Text besser anzupassen.

 @Keyframes Überschrift {
  0% {
    Schriftgröße: 1Rem;
    Zeilenhöhe: 1.1;
  }
  100% {
    Schriftgröße: 4REM;
    Linienhöhe: 1;
  }
}

.headline {
  -tt-key: Überschrift;
  -tt-max: 600;
  -tt-Ease: Easy-In-Out;
}

Das folgende Beispiel zeigt, wie flexibel Ihre Seite sein kann, wenn der gesamte Text von intrinsischen typografischen Stilen angetrieben wird. Aus der Wurzel des Dokuments und nach oben. Der Text kann nahtlos von einem Monitor übergehen, der einen Konferenzraum bis hin zu der Größe einer Uhr dient - alles ohne Medienfragen. Textstile können auch in verschiedenen Modulen geteilt werden. Beispielsweise werden die Überschrift oben auf der Seite und die Schlagzeilen im nächsten Klickbereich vom gleichen Stil angetrieben. Während Effizienzsteigerungen sofort in jeder Größe der Website erscheinen, werden sie schnell zusammengesetzt: Je größer Sie haben, desto mehr bauen diese Effizienz.

Schauen Sie sich diesen Stift an. Darin habe ich einen Inspektor im intrinsischen Stil hinzugefügt, damit Sie auf jede Überschrift klicken und sehen können, wie hoch die gerenderte Größe ist. Innerhalb des Inspektors können Sie auch die Form des intrinsischen Stils und die Obergrenze manipulieren. Auf diese Weise können Sie die typografischen Stylingmöglichkeiten für aktivierende von Typetura erkennen.

Intrinsische Typografie ist die Zukunft des Stylings im Web

Das Backen dieser Designregeln in Ihren Inhalt ist die Praxis des intrinsischen Designs, und das Backen dieser Regeln in Ihren Text ist die Praxis der intrinsischen Typografie. Das von Jen Simmons geprägte Intrinsic -Webdesign ist ein Konzept, bei dem gemeinsame Designmutationen in den Stoff unserer Komponenten eingebunden werden. Anstatt den Stil jedes einzelnen Inhalts explizit festzustellen, erhalten intrinsische Layouts Designbeschränkungen und unser Inhalt reagiert auf seine Umgebung, anstatt ausdrücklich Stile zu definieren. Dieser Ansatz vereinfacht sowohl Ihre Codebasis als auch die Flexibilität Ihrer Designs, da Komponenten Anweisungen haben, mit denen sie auf mehr als nur das Ansichtsfenster reagieren können.

Typetura bringt diese Philosophie in das Textstyling ein. Da Textkomponenten unser grundlegendes Designmaterial sind, ein Material, das in fast jeder Komponente wiederverwendet wird, hat die intrinsische Typografie erhebliche Vorteile gegenüber anderen Methoden. Die Vorteile der Entwurfsresilienz, Skalierbarkeit und Vereinfachung von Code gibt es tiefer in Ihrem Projekt und verlängern seine Lebensdauer. Skalieren Sie die Größe einer Uhr oder bis zur Größe eines Fernsehgeräts und wo ein einmal eingeschränkter Text, wie weit Ihr Layout gelangen könnte, jetzt Ihre Ambitionen unterstützt.

Das obige ist der detaillierte Inhalt vonDie intrinsische Typografie ist die Zukunft des Styling -Textes im Web. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!