Vorteile, die man aus hochwertigen Schriftarten ziehen kann

• Versteckte Funktionen von Fonts: variable Achsen, alternative Glyphen, stilistische Alternativen, Swashes, Ziffern, Kapitälchen (Small Caps), kontextuelle Alternativen

Variable Achsen

• OpenType-Fonts können eine oder mehrere Achsen haben, und durch das Ändern der Achsenwerte lässt sich das Erscheinungsbild des Fonts verändern
• Die häufigste Achse ist wght, mit der die Strichstärke des Fonts gesteuert wird
• Weitere gängige Achsen sind wdth (Breite), slnt (Neigung), ital (Italic) und opsz (optische Größe)
• Achsen lassen sich mit CSS-Eigenschaften steuern
• Die Eigenschaft font-variation-settings kann Vererbungsprobleme verursachen, daher sollte man nach Möglichkeit spezifische CSS-Eigenschaften verwenden

Alternative Glyphen

• Ein Font kann alternative Glyphen für bestimmte Zeichen enthalten
• Alternative Glyphen umfassen verschiedene Stile wie Ziffern, Swashes und Ligaturen

Stilistische Alternativen

• Stilistische Alternativen sind eine Funktion zum Aktivieren alternativer Formen bestimmter Zeichen
• salt aktiviert stilistische Alternativen für alle Zeichen
• Stil-Sets wie ss01, ss02 usw. ersetzen bestimmte Zeichengruppen
• Zeichenvarianten wie cv01, cv02 usw. ersetzen einzelne Zeichen
• Mit den CSS-Eigenschaften font-feature-settings und font-variant-alternates lassen sich alternative Glyphen aktivieren

Swashes

• Manche Schriftarten enthalten Swashes, die Überschriften etwas mehr Persönlichkeit verleihen können
• Swashes sind dekorative Elemente, die Überschriften individueller wirken lassen können
• Mit font-feature-settings und font-variant-alternates lassen sich Swashes aktivieren

Ziffern

• Ein Font kann verschiedene Sätze von Ziffernglyphen enthalten
• Ziffern werden in Lining oder Old Style sowie tabellarisch oder proportional unterteilt
• Tabellarische Ziffern haben die gleiche Breite, proportionale Ziffern unterschiedliche Breiten
• Lining-Ziffern haben die gleiche Höhe wie Großbuchstaben, Old-Style-Ziffern die gleiche Höhe wie Kleinbuchstaben
• Mit der Eigenschaft font-variant-numeric lässt sich der gewünschte Ziffernstil festlegen

Kapitälchen

• Kapitälchen sind Großbuchstabenvarianten, die Kleinbuchstaben ersetzen
• Mit der Eigenschaft font-variant-caps lassen sich Kapitälchen aktivieren
• Wenn ein Font keine Kapitälchen enthält, kann der Browser sie synthetisch erzeugen

Kontextuelle Alternativen

• Kontextuelle Alternativen sind eine Funktion, die Glyphen je nach umgebenden Zeichen automatisch ersetzt
• Zum Beispiel kann -> durch einen Pfeil ersetzt oder die Position von @ angepasst werden, wenn es zwischen Großbuchstaben steht
• Kontextuelle Alternativen sind standardmäßig aktiviert und können mit der Eigenschaft font-variant-ligatures deaktiviert werden

Zusammenfassung von GN⁺

• Hochwertige Fonts bieten vielfältige Funktionen, und ihre Nutzung kann die Qualität der Typografie deutlich verbessern
• Besonders nützlich sind die variablen Achsen und alternativen Glyphen von OpenType-Fonts
• Funktionen wie kontextuelle Alternativen sind sowohl für Entwickler als auch für Nutzer praktisch

[halfenif]

Ich frage mich, warum es so schwierig ist, Font-Funktionen korrekt zu unterstützen
> Ein Problem, das die gesamte Menschheitsgeschichte begleitet hat … wie viel gibt es da wohl zu tun!

[seunggi]

Das Rendern von Schriftarten ist schwierig

https://faultlore.com/blah/text-hates-you/

[wedding]

An Ligaturen kann ich mich irgendwie überhaupt nicht gewöhnen..

[GN⁺]

Hacker-News-Kommentare

• Nützlich, wenn Zahlen über mehrere Zeilen hinweg ausgerichtet werden müssen
• Auch nützlich für Dinge wie Uhren oder Countdowns
• Es ist sehr nervig, wenn die Zeit auf dem Bildschirm springt
• Wenn man Font-Dateien untersuchen möchte, ist Wakamai Fondue empfehlenswert
• Tabellenziffern sind ein sehr nützliches Feature
• Google Fonts entfernt fast alle fortgeschrittenen OpenType-Features, um die Dateigröße zu verringern
  • Beispiel: Die Google-Version der Inter-Schrift bietet 11 Features, die Vollversion dagegen 44
• Die Schrift auf der Seite ist wunderschön
• Die Verwendung von Small Caps ist großartig; ich wünschte, mehr Websites würden sie nutzen
• Nachgesehen, ob Berkeley Mono v2 veröffentlicht wurde; ist noch nicht erschienen
• Das Verhalten der wght-Achse ist seltsam: Wenn man unter 400 geht, wird der Text dünner und zugleich gestaucht, aber über 400 wird er nur dicker
• Um in VSCode eine andere Schrift für Kommentare, JSDoc und sonstiges Syntax-Highlighting zu verwenden, braucht man die Erweiterung vscode-custom-css
  • Beispiel:

    .mtki {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    .comment:not(.punctuation) {
      font-family: 'IosevkaNFM-ExtraLightItalic', monospace !important;
      font-style: italic !important;
      color: #757575 !important;
    }
    

  • Die Font-Behandlung in VSCode ist ziemlich fehleranfällig, daher braucht es viel Ausprobieren
• Ich frage mich, warum es so schwierig ist, Font-Features korrekt zu unterstützen
• Wer sich für Typografie interessiert, dem sei Butterick's Practical Typography empfohlen
  • Voller praktischer Ratschläge, wie man Drucksachen und digitale Dokumente schön gestaltet
  • Seine Font-Lizenzen sind sehr großzügig; es gibt keine Begrenzung bei den Seitenaufrufen
  • Seine Schriften sind nicht Open Source, aber wunderschön
  • Ich habe die Schriften Valkyrie und Concourse gekauft, und Concourse ist bei kontextuellen Alternativen sehr flexibel