Variable Schriftarten für dynamische Typografie

Finden Sie es mühsam, den Überblick über mehrere Schriftartdateien für verschiedene Stärken und Stile zu behalten? Das Erstellen unterschiedlicher Dateien für normale, fette, kursive und andere Schriftartvarianten kann für Webdesigner eine Herausforderung sein. Dies verkompliziert den kreativen Prozess und verstopft ihren Arbeitsablauf. Wie wäre es, alle diese Varianten in einer Datei zusammenzufassen?

Hier kommen variable Schriftarten ins Spiel. Variable Schriftarten sind eine bahnbrechende Weiterentwicklung der OpenType-Schriftarttechnologie, die es ermöglicht, in einer Schriftartdatei mehrere Variationen zu enthalten, z. B. normal, fett und kursiv. Dies bedeutet, dass Designer nur mit einer Datei arbeiten müssen, um auf alle erforderlichen Stärken, Stile und Breiten zugreifen zu können. Diese Erfindung macht es einfach, Eigenschaften wie Gewicht, Breite und Neigung ständig und problemlos zu ändern, was den Designprozess rationalisiert und kreative Freiheit fördert.

Am Beispiel der Schriftart „Kyiv Sans“ untersucht dieser Artikel die Relevanz verschiedener Schriftarten in CSS und zeigt, wie wichtig Eigenschaften wie Gewicht und sogar nicht standardmäßige Schriftartvarianten wie MIDL sind. Mit diesen Tools lernen wir, wie man dynamische und ästhetisch beeindruckende Typografie in CSS erstellt.

Einführung in variable Schriftarten

Die technologische Architektur variabler Schriftarten ermöglicht Designern und Entwicklern die sofortige Steuerung dieser typografischen Merkmale mithilfe von CSS und ermöglicht so genaue Änderungen, um sie an die besonderen Anforderungen eines Projekts anzupassen. Dies verbessert die Webleistung, indem die Ladezeiten erheblich verkürzt und viele statische Schriftartdateien durch eine einzige Datei mit variablen Schriftarten ersetzt werden.

Mit ihrem Grad an Flexibilität und Genauigkeit, der bei herkömmlichen statischen Schriftartdateien bisher unbekannt war, stellen variable Schriftarten eine wichtige Entwicklung in der typografischen Technologie dar. Im Gegensatz zu herkömmlichen Schriftarten, die für jeden Stil und jede Stärke separate Dateien erfordern, erfassen variable Schriftarten mehrere Stile in einer skalierbaren Datei. Dies wird mit dem OpenType-Schriftstil erreicht, der eine konstante Variation entlang einer oder mehrerer Achsen ermöglicht – etwa Gewicht, Breite und optische Größe.

Vorteile variabler Schriftarten in CSS

Wir zeigen Ihnen, wie Sie mit diesen Tools dynamische und ästhetisch ansprechende CSS-Typografie erstellen. Schauen wir uns ein paar Beispiele an:

Effizienz: Durch die Kombination mehrerer Schriftarten in einer einzigen Datei minimieren variable Schriftarten HTTP-Anfragen, beschleunigen das Laden von Seiten und die Gesamteffizienz.

Flexibilität:Designer können die Typografie präzise ändern, um sie an unterschiedliche Designkontexte und Benutzerpräferenzen anzupassen, da sie Eigenschaften wie Wght und benutzerdefinierte Eigenschaften wie MIDL und CONT genau steuern können.

Sanfte Übergänge: Variable Schriftarten ermöglichen dynamische Änderungen an Schriftarten und vermeiden abrupte Wechsel zwischen einzelnen Schriftartdateien. Dadurch sind Übergänge zwischen den Schriftstilen fließend und fließend.

Responsive Typografie: Variable Schriftarten ermöglichen eine responsive Typografie, indem sie Anpassungen basierend auf der Größe des Ansichtsfensters oder anderen benutzerdefinierten Parametern ermöglichen und so eine optimale Lesbarkeit und Ästhetik auf allen Geräten gewährleisten.

Dynamische Typografie: Variable Schriftarten ermöglichen Echtzeitänderungen je nach Benutzerinteraktion oder Umgebungsbedingungen und unterstützen so die Dynamik, verbessern die Benutzereinbindung und erzeugen immersive Erlebnisse.

Barrierefreiheit: Eine größere Auswahl an typografischen Optionen ermöglicht die Anpassung und Änderung von Text, um Lesbarkeit und Lesbarkeit auf verschiedenen Geräten und Benutzerpräferenzen sicherzustellen.

Ästhetik: Im Web inspirieren variable Schriftarten kreative Designideen und fordern typografische Grenzen heraus, wodurch neue Möglichkeiten für typografischen Ausdruck und Experimente eröffnet werden.

Skalierbarkeit: Variable Schriftarten eignen sich perfekt für responsives Design und garantieren, dass der Text in jeder Größe und Auflösung klar und lesbar ist, da sie ohne Qualitätsverlust skalierbar sind.

Einführung in das Konzept der responsiven und dynamischen Typografie mit variablen Schriftarten

Modernes Webdesign ermöglicht es Designern, mithilfe reaktionsfähiger und dynamischer Typografie mit wechselnden Schriftarten flexiblere und faszinierendere typografische Erlebnisse zu schaffen. Lassen Sie uns die Ideen analysieren:

Variablen in Schriftarten: Variable Schriftarten sind eine einzelne Schriftartdatei mit mehreren Varianten einer Schriftart, einschließlich wght und den speziellen Eigenschaften MIDL und CONT. Variable Schriftarten bieten mehr Freiheit und Effizienz bei der Typografiegestaltung als herkömmliche Schriftarten, die für jeden Stil unterschiedliche Dateien erfordern und fließende Übergänge zwischen diesen Varianten ermöglichen.

Responsive Typografie: Das Entwerfen von Text, der problemlos in viele Bildschirmgrößen, Auflösungen und Anzeigeumgebungen passt, wird als responsive Typografie bezeichnet. Von großen Desktop-Computern bis hin zu Mobiltelefonen und allem dazwischen garantiert dies beste Lesbarkeit und Ästhetik auf vielen Geräten. Dynamische Schriftgröße, Zeilenabstand und andere typografische Änderungen tragen dazu bei, dass responsive Typografie das Benutzererlebnis und die Zugänglichkeit verbessert.

Dynamische Typografie: Dynamische Typografie verbessert die responsive Typografie durch die Einbindung von Interaktion und Animation in das typografische Design. JavaScript und CSS (Cascading Style Sheets) helfen Designern bei der Entwicklung von Schriftarten, die zu Inhaltsänderungen, Benutzerinteraktionen oder Scrollverhalten passen. Dynamische Typografie nutzt Komponenten wie wght, MIDL und CONT, um visuelle Attraktivität und Interaktivität zu erzeugen, die Aufmerksamkeit der Benutzer zu lenken und sie zu fesseln.

Designer schaffen reichhaltige, vielseitige und immersive Online-Typografieerlebnisse, indem sie dynamische und flexible Typografiemethoden mit unterschiedlichen Schriftarten kombinieren. Ob es darum geht, die Schriftart als Reaktion auf Benutzeraktivitäten dynamisch zu ändern, Textelemente zu animieren, um wichtige Informationen hervorzuheben, oder die Schriftstärke und -größe basierend auf den Bildschirmabmessungen anzupassen, dieser Ansatz bietet viele Möglichkeiten für Kreativität und Erfindungsreichtum im digitalen Design.

Die verschiedenen Schrifteigenschaften von Kyiv Sans ermöglichen es Designern, faszinierende und makellose typografische Übergänge zu erstellen. Dies verbessert die Interaktion und Benutzerfreundlichkeit von Webmaterialien, indem es deren ästhetischen Reiz und Nutzen erhöht.

Grundlegendes zu den Eigenschaften variabler Schriftarten

Verschiedene Schriftarten bieten eine Reihe neuer Eigenschaften, die in herkömmlichen statischen Schriftarten fehlen. Die Kenntnis dieser Eigenschaften ist notwendig, um das volle Potenzial veränderbarer Schriftarten nutzen zu können. Dies sind einige grundlegende:

Gewicht (Gewicht): Durch die Variation ihres Gewichts entlang einer kontinuierlichen Achse ermöglichen variable Schriftarten nahtlose Übergänge zwischen mehreren Dickenstufen. Designer können innerhalb einer einzelnen Schriftartdatei einen Bereich von Stärken angeben, von leicht bis ultrafett und alle Punkte dazwischen.

Mittelschichteffekt (MIDL): Mit dieser benutzerdefinierten Achse können Designer einen Mittelschichteffekt innerhalb der Schriftart ändern. Dies kann dem Text einen unverwechselbaren visuellen Stil sowie ein zusätzliches Maß an Gestaltungsfreiheit und Erfindungsreichtum verleihen.

Kontrast (CONT): Eine weitere benutzerdefinierte Achse ist CONT, mit der der Kontrast der Schriftart geändert werden kann. Durch die dynamische Änderung des Kontrasts je nach Designanforderungen kann dies dazu beitragen, die Lesbarkeit und visuelle Attraktivität des Textes zu maximieren.

Das Verstehen und Anwenden dieser Eigenschaften wird Designern dabei helfen, visuell beeindruckende Schriftarten zu erstellen. Mit seinen vielfältigen Schrifteigenschaften bietet Kyiv Sans spezielle Anpassungsmöglichkeiten, die die Benutzerfreundlichkeit und das Erscheinungsbild der Webtypografie verbessern.

Übersicht über zusätzliche Achsen und Variationen, die in variablen Schriftarten verfügbar sind

Variable Schriftarten bieten über die herkömmlichen Änderungen in Gewicht, Breite und optischer Größe hinaus ein breites Spektrum an Personalisierungsmöglichkeiten. Nachfolgend finden Sie eine Zusammenfassung der möglicherweise verfügbaren Achsen und Varianten:

Mehrere registrierte Achsen, die Designer variabler Schriftarten verwenden können, werden durch die OpenType-Spezifikation definiert:

• Breite (Breite): Diese Achse steuert die horizontale Ausdehnung oder Verdichtung der Schriftart und ermöglicht es Designern, die Breite von Zeichen zu ändern. Durch Anpassen dieser Achse können Designer Schriftarten erstellen, die schmaler oder breiter erscheinen, ohne die Gesamthöhe zu ändern, was eine flexible Auswahl an komprimierten bis erweiterten Stilen ermöglicht.

• Schrägstellung (slnt): Diese Achse ermöglicht es Designern, den Zeichen eine kursivartige Neigung zu verleihen, ohne die Struktur der Buchstabenformen zu verändern. Die schräge Achse ahmt typischerweise den Effekt traditioneller Kursivschrift nach, behält aber die aufrechten Buchstabenformen bei, was sie für die Erstellung stilistischer Variationen nützlich macht.

• Kursiv (ital): Die Kursivachse wechselt zwischen aufrechter und kursiver Version einer Schriftart. Im Gegensatz zur schrägen Achse, die nur die Zeichen neigt, beinhaltet die kursive Achse eine komplette Neugestaltung der Zeichen, um die kursive Natur der echten Kursivschrift widerzuspiegeln und einen authentischeren Kursivstil zu bieten.

• Optische Größe (opsz): Diese Achse passt das Design der Schriftart an, um die Lesbarkeit bei verschiedenen Größen zu optimieren. Beispielsweise können kleinere Formate für eine bessere Lesbarkeit dickere Striche und offenere Zähler aufweisen, während größere Formate raffinierter und filigraner sein können. Diese Achse ist besonders nützlich für responsive Typografie in verschiedenen Medien.

• Grad (GRAD): Die Gradationsachse ermöglicht subtile Anpassungen der Strichstärke der Schriftart, ohne den Gesamtabstand zu beeinflussen. Es ist nützlich, um die Lesbarkeit in verschiedenen Druck- oder Bildschirmumgebungen zu verbessern, wo eine leichte Gewichtszunahme oder -abnahme den Kontrast und die Klarheit verbessern kann.

• Kontrast (CNTR): Diese Achse verändert den Kontrast zwischen dicken und dünnen Strichen innerhalb einer Schriftart. Durch Anpassen des Kontrasts können Designer Schriftarten mit unterschiedlicher Betonung und visueller Wirkung erstellen, von kontrastarmen, humanistischen Stilen bis hin zu kontrastreichen, modernen Designs.

• X-Höhe (xhgt): Diese Achse passt die Höhe von Kleinbuchstaben im Verhältnis zu den Großbuchstaben der Schriftart an. Eine Vergrößerung der x-Höhe kann die Lesbarkeit bei kleinen Größen verbessern oder ein moderneres Erscheinungsbild erzeugen, während eine Verringerung der Höhe ein traditionelleres oder formelleres Gefühl hervorrufen kann.

Abgesehen von den registrierten Achsen können Ersteller variabler Schriftarten ihre eigenen benutzerdefinierten Achsen angeben. Bezüglich Kyiv Sans: Dazu gehören:

• Mittelschichteffekt (MIDL): Diese benutzerdefinierte Achse bietet Designern mehr Gestaltungsvielfalt und ermöglicht es ihnen, einen bestimmten Mittelschichteffekt innerhalb der Schrift zu ändern und so originelle Stilaspekte hinzuzufügen.

• Kontrast (CONT): Mit dieser benutzerdefinierten Achse können Sie den Kontrast zwischen dicken und dünnen Strichen in den Buchstabenformen steuern. Designer können diese Eigenschaft dynamisch ändern, um verschiedene Grade typografischer Ausdruckskraft zu erreichen, von gedämpften Kontrasten bis hin zu offensichtlicheren Abweichungen.

Abgesehen von den registrierten Achsen ermöglicht die Option zum Erstellen neuer Achsen Schriftdesignern ein hohes Maß an Anpassung und eine umfassende Kontrolle über das Erscheinungsbild und die Eigenschaften einer Schriftart. Benutzerdefinierte Achsen wie MIDL und CONT ermöglichen es Designern beispielsweise, die besonderen Eigenschaften der Schriftart anzupassen, was zu einer flexiblen und ausdrucksstarken Typografie führt. Diese Anpassungen bieten in Kombination mit der Registrierung variabler Schriftarten zahlreiche Möglichkeiten, vielfältige typografische Effekte zu erzielen. Mit der Middle Layer Effect (MIDL)-Achse können Designer beispielsweise eine einzigartige mittlere Ebene innerhalb der Schriftart ändern und so unverwechselbare visuelle Qualitäten hinzufügen, die die künstlerische Freiheit erhöhen. Die Kontrastachse (CONT) hingegen steuert die Variation zwischen dicken und dünnen Strichen und ermöglicht dynamische Anpassungen, die von subtilen bis zu ausgeprägten Kontrasten reichen. Durch die Interaktion mit Achsen wie „Gewicht“ und „Mittelschichteffekt“ können Designer Texte mit unterschiedlichen Stärken und einzigartigen Stilen erstellen und so eine präzise Kontrolle über das Erscheinungsbild der Schriftart erlangen. Ebenso ermöglicht die Kombination von Variationen in Gewicht und Kontrast die Erstellung von Texten mit unterschiedlichem Grad an Fettigkeit und Strichkontrast, wodurch visuelle Wirkung und Lesbarkeit in Einklang gebracht werden. Diese Beispiele zeigen die unübertroffene Freiheit, die sowohl registrierte als auch benutzerdefinierte Achsen bieten und es Designern ermöglichen, Schriftarten an ihre spezifischen ästhetischen Vorlieben und Designziele anzupassen.

Variable Schriftarten in CSS implementieren

Da Sie nun von den Möglichkeiten veränderbarer Schriftarten begeistert sind, wollen wir untersuchen, wie Sie diese in CSS-basierten Webprojekten anwenden können. CSS bietet die Möglichkeit, die Fähigkeiten dieser anpassbaren Schriftarten richtig zu nutzen. Definieren Sie zunächst die Schriftart mit @font-face, wodurch Sie die unterschiedliche Schriftartdatei und ihre Eigenschaften bereitstellen können. Sobald die Schriftart festgelegt ist, können Sie die Achsen der Schriftart mithilfe verschiedener CSS-Attribute dynamisch ändern und so die durch unterschiedliche Schriftarten gebotenen Möglichkeiten maximieren.

Besorgen der Schriftart

Zuerst müssen wir die variable Schriftart herunterladen, die wir für unser Projekt wünschen.
Auf einigen Websites im Internet können wir auf unterschiedliche Schriftartendateien zugreifen. Einige der am häufigsten verwendeten Schriftarten-Websites sind wie folgt:

• Typ Netzwerk
• Schrift Eichhörnchen
• Adobe-Schriftarten 
• Font Spring
• Google-Schriftarten
• Vfonts.com

Für dieses Beispiel gehen wir zu Vfonts.com, um unsere variable Schriftart „Kyiv Sans“ herunterzuladen. Das Dateiformat ttf oder woff2 funktioniert einwandfrei, in dieser Demonstration verwenden wir jedoch ein ttf. Wenn Sie Ihre Schriftartendatei von ttf in woff2 konvertieren müssen, gehen Sie zu everythingfonts.com:

Der Screenshot oben zeigt, was Sie sehen werden, wenn Sie bei Vfont ankommen.

Wir unterteilen das Projekt in folgende Schritte:

1. Zu vfont navigieren: Besuchen Sie die Website, auf der Ressourcen für variable Schriftarten verfügbar sind.

2. Typ „Kyiv*“ auswählen: Wählen Sie die Schriftart „Kyiv*“ aus. Dadurch werden Sie zu Behance.net weitergeleitet, wo die Schriftart gehostet wird.

3. Zugriff auf den Download-Link: Scrollen Sie auf der Behance-Seite ganz nach unten, um einen Link zum Herunterladen der Schriftart zu finden.

4. Von Google Drive herunterladen: Klicken Sie auf den Download-Link, der Sie zu einem Google Drive-Ordner führt. Laden Sie die Schriftartdatei von dort herunter.

5. Entpacken Sie die Datei: Nach dem Herunterladen entpacken Sie die Datei, um auf ihren Inhalt zuzugreifen.

6. Schriftartenoptionen überprüfen: Der entpackte Ordner enthält mehrere Optionen zur Auswahl.

   • Symbole
   • Keine Variable
   • Variable

7. Wählen Sie die variable Schriftart aus: Konzentrieren Sie sich auf die Dateien, die die variable Schriftart enthalten.

   • Serife
   • Kippen
   • Ohne

8. Sans-Schriftart verwenden: Richten Sie die Sans-Version der Schriftart ein und verwenden Sie sie. Beachten Sie, dass die Sans-Schriftgraddatei 360 KB groß ist, was der Verwendung von acht nicht variablen Schriftartdateien entspricht.

9. Bewerten Sie den Kompromiss: Überlegen Sie, ob sich die Verwendung variabler Schriftarten für Ihr Projekt lohnt. Wenn Sie nur normale, fette und kursive Schriftarten benötigen, ist die Verwendung variabler Schriftarten möglicherweise nicht erforderlich. Wenn Sie jedoch eine erweiterte Kontrolle über Variationen benötigen, können variable Schriftarten sehr nützlich sein.

Hinweis: Die oben genannten Dateien liegen im TTF-Format vor.

Jetzt gehen wir zu VSCode, wo wir ein Vanilla-Vite-Projekt verwenden werden.
Um mit der Arbeit am Projekt beginnen zu können, müssen Sie die erforderlichen Pakete installieren. Sie müssen die folgenden Schritte ausführen:

1. Öffnen Sie ein neues Terminal.

2. Führen Sie den Befehl aus
   

   npm create vite@latest
   

3. Nennen Sie Ihr Projekt.

4. Benennen Sie Ihr Paket.

5. Wählen Sie ein Vanilla-Framework aus.

6. Wählen Sie die JavaScript-Variante aus.

7. Das Ausführen von npm install hilft Ihnen, sich in das Projekt einzuarbeiten und die erforderlichen Module zu installieren.

8. Nachdem Sie die Abhängigkeiten eingerichtet haben, verwenden Sie den folgenden Befehl, um die Anwendung zu starten:
   

   npm run dev
   

9. Besuchen Sie http://localhost:your-port-number, um auf das laufende Programm in Ihrem Browser zuzugreifen.

Sobald wir unser Projekt abgeschlossen haben, verfügen wir über eine Fülle von Scheincode, den wir ändern können, um unsere beabsichtigte Anwendung zu erstellen. Die heruntergeladene variable Schriftart sollte in einem Schriftartenordner abgelegt werden, der im öffentlichen Ordner abgelegt wird. Wir werden den gesamten unnötigen Scheincode in style.css, main.js und index.html ersetzen.

Der index.html-Code sollte etwa so aussehen:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

Lassen Sie uns nun erklären, was im obigen Code vor sich geht:

Standardschriftart für den Text festlegen:

npm create vite@latest

• Zweck: Dadurch wird die Standardschriftart für das gesamte Dokument auf „Kyiv Sans“ festgelegt.
• Auswirkungen: Alle Textelemente im Textkörper erben diese Schriftart, sofern sie nicht durch spezifischere Stile überschrieben werden.

Definieren der benutzerdefinierten Schriftart:

npm run dev

• Zweck: Mit der @font-face-Regel können Sie eine benutzerdefinierte Schriftart definieren.
• Schriftartname: Die Schriftart heißt „Kyiv Sans“.
• Quelle: Die Schriftartdatei befindet sich unter /font/KyivTypeSans-VarGX.ttf.
• Schriftgewichtsbereich: Diese Schriftart unterstützt einen Bereich von Gewichten von 0 bis 1000 und ist somit eine variable Schriftart.
• Schriftartanzeige: Swap stellt sicher, dass Text sofort mit einer Ersatzschriftart angezeigt wird, bis die benutzerdefinierte Schriftart geladen wird.

Styling des

Element:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Variable font</title>
  </head>
  <body>
    <div>



<p>From the code above, we're setting up a simple HTML wrapper for our project where the JavaScript will render content in the <div>

<p>The main.js code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">import "./style.css";

document.querySelector("#app").innerHTML = `
  <div>
    <h1>



<p>This is where we use document.querySelector() to add content to the element we insert our content into using the id: #</p>

<p>And the style.css code should look something like this:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: 'Kyiv Sans';
}

@font-face {
  font-family: 'Kyiv Sans';
  src: url('/font/KyivTypeSans-VarGX.ttf');
  font-weight: 0 1000;
  font-display: swap;
}

h1 {
  color: #bd0c0c;
  height: 100vh;
  display: grid;
  place-content: center;
  margin: 0;
  text-align: center;
}

.variable-font {
  font-family: 'Kyiv Sans';
  font-size: 5rem;
  line-height: 1.1;
  font-weight: 100;
  font-variation-settings:
   'wght' 100, 'CONT' 250, 'MIDL' 0;
  transition: font-variation-settings 500ms;  
}

.variable-font:hover {
  font-weight: 1000;
  font-variation-settings:
    'wght' 1000, 'CONT' 250, 'MIDL' -1000;
}

• Farbe: Setzt die Textfarbe auf #bd0c0c, einen Rotton.
• Höhe: Die Höhe ist auf 100vh eingestellt, sodass

  Das Element erstreckt sich über die gesamte Höhe des Ansichtsfensters.

  Anzeige: Raster wird für das Layout verwendet und ermöglicht die Verwendung von Rastereigenschaften.

  Inhalt zentrieren: place-content: center zentriert den Inhalt sowohl vertikal als auch horizontal.

  Rand: Der Rand ist auf 0 eingestellt, um alle Standardabstände um

  zu entfernen.

  Textausrichtung: Der Text wird horizontal zentriert.

  Stil der .variable-font-Klasse:
  

  body {
    font-family: 'Kyiv Sans';
  }
  

  • Schriftfamilie: Verwendet „Kyiv Sans“ für den Text.
  • Schriftgröße: Setzt die Schriftgröße auf 5rem (relativ zur Schriftgröße des Stammelements).
  • Zeilenhöhe: 1,1 sorgt für einen leichten Abstand zwischen den Zeilen.
  • Schriftstärke: Anfangs auf 100 eingestellt.
  • Schriftvariationseinstellungen: Verwendet benutzerdefinierte Variationseinstellungen für die variable Schriftart:
    • 'wght' steuert das Gewicht (anfangs 100).
    • „CONT“ und „MIDL“ sind benutzerdefinierte Achsen für diese Schriftart, die zunächst auf 250 bzw. 0 eingestellt sind.
  • Übergang: Übergeht die Schriftartvariationseinstellungen reibungslos über 500 Millisekunden.

  Hover-Effekt für .variable-font hinzufügen:
  

  npm create vite@latest
  

  • Schriftstärke beim Schweben: Ändert sich auf 1000, wenn der Mauszeiger über das Element bewegt wird.
  • Schriftvariationseinstellungen beim Hover: Aktualisiert die Variationseinstellungen auf:
    • 'wght' auf 1000
    • 'CONT' bleibt 250
    • „MIDL“ ändert sich in -1000
  • Effekt: Erzeugt einen dynamischen und interaktiven visuellen Effekt, wenn der Benutzer mit der Maus über den Text fährt, was die Flexibilität der variablen Schriftart hervorhebt.

  Am Ende sieht unser Ergebnis ungefähr so ​​aus:
  

  Responsive Typografie mit variablen Schriftarten erstellen

  Da Designer eine perfekte Anpassung an viele Geräte und Bildschirmgrößen erreichen können, verändert responsive Typografie mit verschiedenen Schriftarten das Online-Design. Unübertroffene Vielseitigkeit entsteht durch variable Schriftarten, die ständige Änderungen der Schriftartattribute, einschließlich Stärke, Breite und Kontrast, innerhalb einer einzigen Schriftartdatei ermöglichen. Mithilfe von CSS und Medienabfragen können Designer diese Schriftattribute dynamisch ändern, um die Lesbarkeit und Ästhetik zu verbessern und sicherzustellen, dass der Text auf jedem Gerät, vom Desktop-Monitor bis zum Mobiltelefon, optimal aussieht. Da eine einzige variable Schriftart mehrere stationäre Schriftartdateien ersetzen kann, verringert sich die Notwendigkeit, umfangreiche Schriftarten zu laden, und die Leistung der Website wird verbessert. Diese Flexibilität verbessert nicht nur das Benutzererlebnis, sondern rationalisiert auch den Designprozess. Ohne responsive Typografie – die mit verschiedenen Schriftarten ansprechender, effizienter und zugänglicher wird – kann modernes Webdesign nicht existieren.

  Medienabfragen: Die Meister der Bildschirmgrößenanpassung

  Medienabfragen sind ein Eckpfeiler des responsiven Webdesigns und fungieren als Meister der Anpassung der Bildschirmgröße. Basierend auf den Merkmalen des Geräts des Benutzers – wie Bildschirmbreite, -höhe, Auflösung und Ausrichtung – ermöglichen sie Designern die Anwendung bestimmter CSS-Stile. Mediensuchen helfen Designern dabei, sicherzustellen, dass eine Website auf einer Vielzahl von Geräten, von Laptops und Desktop-Monitoren bis hin zu Smartphones und Tablets, optimal aussieht und funktioniert.

  Die Stärke von Medienabfragen liegt in ihrer Fähigkeit, flexible und flüssige Layouts zu erstellen, die für verschiedene Bildschirmgrößen geeignet sind. Mit Medienabfragen kann ein Designer Schriftgrößen ändern, Rasterlayouts ändern und sogar bestimmte Elemente basierend auf den Abmessungen des Ansichtsfensters ein- oder ausblenden. Dadurch wird sichergestellt, dass das Material seine Ästhetik und Zugänglichkeit behält, unabhängig vom verwendeten Gerät.

  Medienabfragen definieren Haltepunkte – bestimmte Stellen, an denen sich das Layout an unterschiedliche Bildschirmgrößen anpasst. Diese Haltepunkte zielen auf verschiedene Geräte ab und werden mithilfe von „Min-Breite“, „Max-Breite“ und anderen CSS-Merkmalen festgelegt. Beispielsweise könnte eine Medienabfrage die Verwendung eines mobilfreundlichen Layouts für Bildschirmbreiten von 768 Pixel oder weniger und eines anderen Layouts für größere Displays angeben.

  Die Einbindung von Mediensuchen in das Webdesign verbessert die Zugänglichkeit und das Benutzererlebnis. Auf allen Plattformen helfen Medienabfragen bei der Entwicklung inklusiver digitaler Erlebnisse, indem sie sicherstellen, dass Texte lesbar, die Navigation intuitiv und das Material gut organisiert sind. Jeder Webdesigner, der reaktionsfähige, anpassungsfähige und benutzerfreundliche Websites erstellen möchte, muss im Zeitalter der vielfältigen Gerätenutzung zunächst Medienabfragen erlernen.

  Hier ist ein Beispiel:
  

  npm create vite@latest
  

  In diesem Beispiel haben wir Medienabfragen verwendet, um die Schriftartvariationseinstellungen und die Stärke unserer Schriftart basierend auf der Bildschirmgröße anzupassen. Bei Geräten mit einer maximalen Breite von 600 Pixel wird die Schriftgröße auf 3rem reduziert. Die Gewichtung und andere Variationen werden für :Hover-Effekte entsprechend angepasst. Bei Geräten mit einer Breite zwischen 601 Pixel und 1200 Pixel wird die Schriftgröße auf 4rem eingestellt, mit angepasster Gewichtung und Variationen. Für Geräte mit einer Breite von 1201 Pixel und mehr beträgt die Schriftgröße 5rem, wobei die ursprünglichen Einstellungen beibehalten werden.
  Diese Medienabfragen sorgen dafür, dass sich die Schriftart an unterschiedliche Bildschirmgrößen anpasst und so die Lesbarkeit und das Benutzererlebnis auf verschiedenen Geräten verbessert.

  

  Das Bild oben zeigt die Anzeige für kleine Bildschirme

  

  Das Bild oben zeigt die Anzeige für mittlere Bildschirme

  

  Das Bild oben zeigt die Anzeige für große Bildschirme

  Ansichtsfenstereinheiten: Layouts flüssig gestalten

  Viewport-Einheiten sind ein leistungsstarkes Werkzeug im modernen Webdesign und ermöglichen die Erstellung flüssiger und reaktionsfähiger Layouts, die sich nahtlos an verschiedene Bildschirmgrößen anpassen. Zu den Ansichtsfenstereinheiten gehören vw (Ansichtsfensterbreite) und vh (Ansichtsfensterhöhe), die relativ zu den Abmessungen des Ansichtsfensters des Browsers sind. Ein vw entspricht 1 % der Breite des Ansichtsfensters und ein vh entspricht 1 % der Höhe des Ansichtsfensters. Mit diesen Einheiten können Designer sicherstellen, dass Elemente entsprechend der Größe des Bildschirms des Benutzers skaliert werden, wodurch ein dynamischeres und anpassungsfähigeres Design entsteht. Durch das Festlegen der Schriftgröße, des Abstands oder der Ränder in Ansichtsfenstereinheiten können Sie beispielsweise die Größe von Text und Objekten automatisch anpassen und so ein einheitliches Erscheinungsbild auf mehreren Geräten gewährleisten. Diese Anpassungsfähigkeit verbessert das Benutzererlebnis, indem sie sicherstellt, dass Inhalte lesbar und ästhetisch ansprechend bleiben, unabhängig davon, ob die Website auf einem großen Desktop-Monitor oder einem kleinen mobilen Bildschirm angezeigt wird. Mit Viewport-Einheiten können Designer anpassungsfähige Layouts erstellen, die sich leicht an das sich ständig ändernde Terrain digitaler Geräte anpassen lassen.

  Hier ist ein Beispiel für die Verwendung von vw zum Anpassen der Schriftgröße basierend auf der Breite des Ansichtsfensters:
  

  npm create vite@latest
  

  In diesem Beispiel wird aus dem obigen Code die Eigenschaft „font-size“ von .variable-font mithilfe von vw-Einheiten für die Breite des Ansichtsfensters festgelegt, sodass die Textgröße auf die Breite des Ansichtsfensters reagiert.

  Wir können Mediensuchen und Ansichtsfenstereinheiten mit unterschiedlichen Schrifteigenschaften kombinieren, um wirklich responsive Typografie zu erstellen, die sich elegant an jedes Gerät oder jede Bildschirmgröße anpasst. Dies ermöglicht es uns, ein herausragendes Benutzererlebnis zu bieten, unabhängig davon, welche Zugriffsmethode jemand für unsere Website wählt.

  Erweiterte typografische Effekte mit variablen Schriftarten

  Variable Schriftarten ermöglichen es Designern, äußerst individuelle und dynamische Textstile zu erstellen, indem sie ein neues Feld komplexer typografischer Effekte eröffnen. Designer können jetzt nahtlose Übergänge und ungewöhnliche visuelle Effekte erzeugen, die bisher mit stationären Schriftarten schwierig waren, indem sie Eigenschaften wie Stärke, Breite und benutzerdefinierte Achsen kontinuierlich anpassen. Die Stärke, der Kontrast und die Mittellinie können durch Anpassen der Schriftart dynamisch geändert werden, was eine komplexe Kontrolle über das Aussehen des Textes ermöglicht. Diese Anpassungsfähigkeit ist im responsiven Design sehr ausgeprägt, bei dem sich Schriftarten problemlos an verschiedene Bildschirmgrößen und -ausrichtungen anpassen lassen. Darüber hinaus ermöglichen interaktive Animationen, dass Text auf Benutzeraktionen wie Bewegen oder Klicken reagiert, was zu faszinierenden und immersiven Begegnungen führt. Viewport-Einheiten sorgen in Kombination mit unterschiedlichen Schrifteigenschaften dafür, dass die Typografie flüssig und skalierbar bleibt und verbessern so die Lesbarkeit und das Erscheinungsbild auf allen Arten von Geräten. Mithilfe dieser hochentwickelten Funktionen können Designer visuell eindrucksvolles digitales Material erstellen und dabei die Möglichkeiten der konventionellen Typografie erweitern. Lassen Sie uns einige faszinierende Methoden erkunden, um die Grenzen der Online-Typografie zu erweitern:

  Flüssige Typografie

  Flüssige Typografie ist eine Designmethode, bei der Text dynamisch mit der Größe des Ansichtsfensters skaliert wird und so auf vielen Geräten ein reibungsloses und reaktionsschnelles Leseerlebnis bietet. Ansichtsfenstereinheiten, Mediensuchen und veränderbare Schriftarten sorgen durch flüssige Typografie dafür, dass der Text unabhängig von der Bildschirmgröße verständlich und visuell ausgewogen bleibt. Diese Methode macht feste Schriftgrößen überflüssig und ermöglicht nahtlose Änderungen, wodurch die Lesbarkeit und das Erscheinungsbild auf eine Weise verbessert werden, die zu sehr unterschiedlichen Anzeigebedingungen passt.

  Hier ist ein Beispiel:
  

  npm run dev
  

  Wie es funktioniert:

  calc() Funktion: Diese Funktion erzeugt einen fließenden Skalierungseffekt durch die Kombination relativer Einheiten vw mit festen Werten rem. Schriftgröße, zum Beispiel, calc(2rem 2vw) reagiert auf die Breite des Ansichtsfensters und stellt eine Basisgröße sicher.

  Flüssige Typografie für verschiedene Elemente: Viele Elemente wie h1, h2 und p garantieren, dass der Text mithilfe flüssiger Typografie geräteübergreifend geeignet skaliert wird. Die Funktion calc() stellt eine Basisgröße mit einem Skalierungsfaktor bereit, der sich mit der Breite des Ansichtsfensters ändert.

  Variable Schriftarten: Durch die Kombination flüssiger Typografie mit veränderbaren Schriftarten können Sie dynamische Änderungen der Textattribute je nach Größe des Ansichtsfensters erzielen.
  Diese Methode garantiert, dass der Text auf einem breiten Spektrum von Geräten und Bildschirmgrößen ästhetisch ansprechend und lesbar bleibt.

  Durch die Animation von Text verleiht die kinetische Typografie ihm Leben und erzeugt interessante und dynamische visuelle Effekte, die den Betrachter begeistern. Diese Methode fügt Bewegung und Interaktion hinzu, indem Textattribute mithilfe von JavaScript- und CSS-Animationen geändert werden. Mithilfe eines :hover-Effekts zur Animierung der Schriftstärke in unserem Beispiel mit der variablen Schriftart haben wir kinetische Typografie demonstriert, d. h. nahtlos von leichteren zu kräftigeren Schriftstärken. Dies hebt nicht nur den Inhalt hervor, sondern zeigt auch, wie unterschiedliche Schriftarten durch fließende Änderungen in Echtzeit die Benutzerinteraktionen verbessern können. Kinetische Typografie ermöglicht es Designern, die visuelle Attraktivität und Benutzerfreundlichkeit ihres Textes zu verbessern und so seine grundlegende Rolle in einer interaktiven und interessanten digitalen Umgebung zu stärken.

  Beispiel: Gewicht beim Schweben animieren

  npm create vite@latest
  

  Hier verwenden wir einen sanften Übergang, um die Stärke des .variable-font-Elements bei :hover von normal 100 auf fett 1000 zu animieren, wodurch ein subtiler, aber wirkungsvoller Effekt entsteht.

  Dies sind nur einige der fantasievollen Möglichkeiten, die verschiedene Schriftarten bieten. Von dynamischen Animationen bis hin zu fließenden Layouts gibt es zahlreiche Möglichkeiten für unverwechselbare und faszinierende Schriftarten. Mit ein wenig Erfindungsreichtum und CSS-Verständnis können wir Webdesign-Normen in Frage stellen und bemerkenswerte Benutzererlebnisse schaffen.

  Abschluss

  Variable Schriftarten – am besten demonstriert von Kyiv Sans – verwandeln die Typografie im Web, indem sie mehrere Schriftarten in einer einzigen Datei gruppieren. Durch die Verringerung der Anzahl von HTTP-Abfragen vereinfacht diese Erfindung Prozesse, erhöht die Designflexibilität und steigert die Leistung. Designer können veränderbare Schriftarten in CSS vollständig nutzen, um reaktionsfähige, dynamische Schriftarten zu erstellen, die perfekt zu verschiedenen Bildschirmgrößen und Benutzerinteraktionen passen.
  Designer können visuell ansprechende und leicht zugängliche typografische Erlebnisse schaffen, indem sie Attribute wie Gewicht, Mittelschichteffekte und Kontrast sowie reaktionsfähige Ansätze wie Medienabfragen und Ansichtsfenstereinheiten verwenden. Variable Schriftarten sind ein notwendiges Werkzeug für zeitgenössisches Webdesign, da ihre Fließfähigkeit neue Wege für den künstlerischen Ausdruck ermöglicht.

  Ressourcen

  • Sehen Sie sich die auf Netlify gehostete Live-Vorschau an
  • Quellcode anzeigen

  Referenzen

  • Variable Schriftarten
  • OpenType
  • Kyiv Sans
  • Ansichtsfenster
  • Schriftart
  • registrierte Achsen
  • Benutzerdefinierte Achsen
  • @font-face
  • Typ Netzwerk
  • Schrift Eichhörnchen
  • Adobe-Schriftarten 
  • Font Spring
  • Google-Schriftarten
  • Vfonts.com
  • ttf
  • woff2
  • everythingfonts.com
  • Behance.net
  • Medienanfragen
  • px
  • rem
  • vw
  • vh
  • calc()

  Das obige ist der detaillierte Inhalt vonVariable Schriftarten für dynamische Typografie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!