Empfehlungen zu CSS font-family

 (chrismorgan.info)
1 Punkte von GN⁺ 12 시간 전 | 1 Kommentare | Auf WhatsApp teilen
  • Wer im Web beim Design auf einen bestimmten Font-Namen vertraut, kann je nach Plattform, Netzwerk und Sicherheitseinstellungen scheitern. font-family sollte daher unter der Annahme eines generischen Fallbacks aufgebaut werden
  • Für Code, Artwork und Layouts, die eine nichtproportionale Darstellung benötigen, muss monospace unbedingt enthalten sein. Auch serif und sans-serif sollten sicherheitshalber mit angegeben werden, wenn die gewünschte Schriftgattung gewährleistet sein soll
  • Lange Stacks mit lokal möglicherweise vorhandenen Fonts bringen meist wenig; die generischen Standardwerte des Browsers können unter Umständen die bessere Wahl treffen
  • Webfonts sind langsamer als keine Webfonts und bringen Ladefehler sowie font-display-Abwägungen mit sich. Für Inhalte ist es daher auch eine realistische Option, einfach den Standard-Font der Nutzer zu verwenden
  • system-ui und ui-* sind eher für kurze UI-Texte gedacht und können für lange Inhalte und Sprachunterstützung ungeeignet sein. Als Ersatz für den Standard-Font bei Inhalten sind sie riskant

Font-Namen nicht vertrauen

  • Es gibt keinen websicheren Font, der auf allen großen Plattformen gemeinsam bereitsteht; man sollte also nicht davon ausgehen, dass ein bestimmter Font-Name immer funktioniert
  • Auch Webfonts sind keine sichere Lösung
    • Nicht inline eingebundene Subressourcen können aus verschiedenen Netzwerkgründen nicht geladen werden
    • Font-Loading ist ein Bereich mit Sicherheitsbedenken und kann in manchen Umgebungen blockiert sein
    • uBlock Origin hat einen eigenen Button zum Deaktivieren externer Fonts
    • Datensparmodi mancher Browser können das Laden von Fonts verhindern; auch dort, wo sie es nicht tun, wird vertreten, dass sie es tun sollten
  • Wenn Nutzer die eigene Font-Auswahl einer Website nicht zulassen, funktionieren nur generische Familien
  • Wenn man in JavaScript document.fonts.load("1em my-web-font") verwendet, kann die zurückgegebene Promise rejected werden
    • Über die sechs Jahre von 2020 bis 2025 habe ich etwa vier Fälle gesehen, in denen dadurch etwas kaputtging; zwei davon traten 2025 auf

Fallback-Familie immer ausdrücklich angeben

  • Wenn nichtproportionaler Text benötigt wird, muss font-family unbedingt monospace enthalten
    • Das Fehlen von monospace fällt vielen Nutzern nicht auf, kann aber in manchen Umgebungen das Layout oder die Absicht eines Werks ruinieren
    • Beispielsweise fehlte Adel Faures ASCII might fly? zum Zeitpunkt des Schreibens monospace, sodass es möglicherweise nicht nichtproportional dargestellt wird
  • Auch serif oder sans-serif sollte man aufnehmen, wenn ein Fallback für die gewünschte Font-Gattung nötig ist
    • Beispiel: font-family: Arial, sans-serif;
    • Beispiel: font-family: Times New Roman, serif;
    • Lässt man das weg, wird der Standard-Font verwendet; dieser kann serif sein, aber auch etwas völlig anderes

Aufzählungen vermutlich installierter Fonts reduzieren

  • Lange Listen von Fonts, die vermutlich auf dem System vorhanden sind, wie Arial, Helvetica, Helvetica Neue, Liberation Sans, Noto Sans, helfen im Allgemeinen nicht
  • Insbesondere Arial wird meiner Ansicht nach nie eine bessere Wahl als sans-serif sein
  • sans-serif kann als Font interpretiert werden, der nicht schlechter ist als die explizit genannten Fonts; möglicherweise wird sogar ein besserer Font ausgewählt
  • Ein tatsächlich gesehenes Beispiel für eine nichtproportionale Deklaration ist eine übermäßig lange Liste
    • font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif
    • Diese Deklaration ist strikt schlechter als font-family: monospace, monospace; monospace kann als Font interpretiert werden, der nicht schlechter ist als diese Liste
  • Benannte Nicht-Webfonts müssen nicht vollständig verboten werden, aber höchstens einer ist angemessen
    • Georgia) und Times New Roman gehören beide zu Microsofts Core fonts for the Web und sind Serif-Fonts, haben aber unterschiedlichen Charakter
    • Georgia ist deutlich breiter als Times New Roman; wenn diese Eigenschaft stilistisch nötig ist, ist font-family: Georgia, serif eine vertretbare Wahl
  • modernfontstacks.com und das Repository enthalten Ideen zur Font-Auswahl je nach Plattform
    • Allerdings werden benannte Fonts dort zu stark vorgeschrieben; viele davon wären besser zu entfernen
    • Der Umgang mit Courier New ist stark fehlerhaft, und die Bilder sehen so aus, als seien sie mit macOS Courier erstellt worden

Nur generische Familien verwenden

  • Wenn man die Liste lokal installierter Fonts reduziert hat, kann man auch noch einmal prüfen, ob Webfonts wirklich nötig sind
  • Webfonts sind langsamer als keine Webfonts und können Ladeprobleme verursachen
    • Deshalb gibt es font-display
    • Statt Abwägungen zwischen Block- und Swap-Phasen, erneutem Zeichnen und Reflow zu handhaben, kann man aber auch einfach die Fonts verwenden, die Nutzer bereits haben
  • Auch bei monospace ist es möglich, nur die generische Familie zu verwenden
    • Früher war der Standardwert für monospace schlecht; insbesondere Microsofts Courier New#Courier_New) war schlecht digitalisiert und sah nicht wie Weight 400 aus, sondern praktisch eher wie 200–250
    • Später führte Apple Menlo) ein, und in einer Zeit, in der der monospace-Standard der Browser nicht aktualisiert wurde, begannen Leute, Menlo in ihre Font-Stacks aufzunehmen
    • Die heutigen Browser-Standardwerte sind alle besser geworden; sie sind nicht in jedem Fall hervorragend, aber auch nicht mehr schlecht
  • Man kann Listen wie Menlo, Monaco, Consolas, Bitstream Vera Sans Mono, Courier, Courier New verwerfen und nur monospace übrig lassen
  • Courier New absichtlich in einen Font-Stack aufzunehmen, wird sehr negativ bewertet

monospace, monospace und Browserverhalten

  • Wenn font-family: monospace; explizit oder implizit verwendet wird, kann font-size standardmäßig möglicherweise nicht auf 100 %, sondern auf 81,25 % gesetzt sein
    • Nutzer können generische Fonts, die Standard-Schriftgröße und die Standardgröße für nichtproportionale Schrift ändern
  • Wenn in der Liste eine zweite Family steht, tritt dieses Verhalten nicht auf
    • font-family: my-web-font, monospace; ist in Ordnung
    • font-family: monospace, monospace; ist ebenfalls in Ordnung
    • Auch eine direkte Angabe von font-size ist möglich
  • Lightning CSS hat ein Problem, das monospace, monospace kaputtmacht
  • Dieses Problem betrifft nur monospace
  • Die Position ist, dass Browser das Größenverhalten von monospace aufgeben und den vermutlich 13px großen Wert vermutlich auf 16px anheben sollten
    • Ein möglicher Ort für einen Vorschlag wäre die CSSWG

system-ui und ui-* nicht für Inhalte verwenden

  • UI-Fonts sind für kurze UI-Texte gedacht, nicht für lange Inhalte
  • UI-Fonts unterstützen die Sprache des Inhalts möglicherweise nicht gut
  • Manche Nutzer wählen absichtlich lächerliche System-UI-Fonts; in einigen Android-Communities soll das recht verbreitet sein
    • Bei Verwendung von system-ui besteht die Sorge, dass auch Inhalte so aussehen können
  • w3c/csswg-drafts Issue #3658 diskutierte mehrere Probleme von system-ui und enthält die Schlussfolgerung, dass system-ui weithin missbraucht wurde
  • mdn/content Issue #41244 fügte MDN einen Hinweis hinzu, der vor übermäßiger Nutzung warnt
  • system-ui und ui-* wurden als eine Art Proxy verwendet, um bessere Standard-Fonts zu erhalten, aber dieser Einsatzzweck ist nicht gut
  • Die Position ist, dass system-ui ein Fehler war
    • Die Ansicht ist, man hätte nur -apple-system belassen und BlinkMacSystemFont dazu ändern lassen sollen
    • Zum Zeitpunkt der Standardisierung gab es auf anderen Plattformen kein nützliches entsprechendes Konzept; inzwischen gebe es das auf einigen Plattformen
    • Es wird angenommen, dass es größtenteils missbraucht wurde, um das Problem zu umgehen, dass Browser die veralteten Standardwerte der bestehenden generischen Familien nicht aktualisiert hatten
  • ui-serif, ui-sans-serif, ui-monospace und insbesondere ui-rounded seien offensichtliche Fehler, die entfernt werden sollten
    • In Nicht-Apple-Umgebungen ist nicht zu erwarten, dass sie auf irgendeinen Font gemappt werden
    • Da das Konzept selbst nur auf Apple-Plattformen existiert, hätte es nicht in den Standard aufgenommen werden sollen
    • Wenn Apple es bereitgestellt hätte, hätte es nach dieser Ansicht wie -apple-system eine Form mit -apple-Präfix sein sollen
  • Für Web-Apps gibt es legitime Anwendungsfälle für system-ui, tatsächlich sei es aber dem Eindruck nach fast ausschließlich missbraucht worden; ein Eingriff zur Entfernung könnte daher nicht schlecht sein

Verwandte Beiträge

1 Kommentare

 
GN⁺ 12 시간 전
Lobste.rs-Kommentare

  • Auf https://lindenii.org wird überhaupt keine font-family angegeben, sodass die vom Nutzer im Browser gewählte Standardschrift respektiert wird
    Ich persönlich bevorzuge Sans-Serif, aber wenn jemand Serif als Standard nutzt, sehe ich keinen Grund, das unbedingt zu überschreiben
    Wenn man allerdings wie auf https://runxiyu.org/soc/ta/ Zeichen verwenden muss, die in den meisten Schriftarten nicht vorhanden sind, bleibt einem nichts anderes übrig, als Webfonts einzubinden, und dadurch wird dann leider auch der restliche Text statt mit der Nutzervorgabe mit Sans-Serif erzwungen
    Außer man umschließt jedes ungewöhnliche Zeichen mit etwas wie <unusual-character>, fällt mir keine bessere Lösung ein, und es wäre schön, wenn man auch so etwas wie eine „vom Nutzer bevorzugte Schrift für Code“ angeben könnte
    Der Trick mit monospace, monospace war hilfreich, und die Größenunterschiede waren ziemlich verwirrend

    • Beim zweiten Problem könnte es ein brauchbarer Fallback sein, neben ungewöhnlichen Zeichen einen Bildersatz-Indikator anzuzeigen
      Seiten mit Unicode-Zeichenlisten machen das auf diese Weise
    • Ich mache auf meinem Blog https://hauleth.dev etwas Ähnliches, verwende aber monospace
      Mein Seitendesign wurde schon gelobt, aber tatsächlich habe ich im Grunde nur ein Zola-Theme übernommen und CSS sowie benutzerdefinierte Elemente reduziert; gerade bei persönlichen Seiten kann ich dem Grundgedanken des Artikels also ziemlich viel abgewinnen
    • Was die Variante angeht, font-family gar nicht anzugeben: Es könnte für Nutzer sogar besser sein, wenn die Standard-Standardschrift des Browsers von Serif zu Sans-Serif geändert würde
      Die meisten Nutzer wählen ihre Schrift nicht selbst aus, daher gibt es keine Möglichkeit, zwischen „vom Nutzer gewählte Schrift“ und „Browser-Standardschrift“ zu unterscheiden
      Ich mag Serif, aber heute bevorzugen die meisten vermutlich eher Sans-Serif
      In meiner Umgebung habe ich blockiert, dass Seiten Schriftarten festlegen können, und ich habe auch keine ordentlichen CJK-Schriften installiert
      Denn selbst wenn statt Han-Zeichen nur Kästchen wie „4E2D“ erscheinen, bedeutet mir das letztlich auch nicht mehr als das entsprechende Ideogramm
      Diese Fallback-Schriftbehandlung ist gut gelöst, aber leider gibt es keine Möglichkeit, den Namen der Standardschrift direkt anzugeben
      Stattdessen sieht man in JavaScript in einem leeren Dokument mit getComputedStyle(document.documentElement).fontFamily je nach meinen erweiterten Schrift-Einstellungen "serif" oder "sans-serif"
      Ich weiß nicht genau, was mit „bevorzugter Schrift für Code“ gemeint ist; offenbar ist etwas anderes als monospace gemeint

  • Der Artikel ist noch ein Entwurf, also ziemlich unfertig, und wirkt etwas chaotisch, weil zwei oder drei unterschiedliche Fragmentformen zusammengemischt sind
    Wahrscheinlich wird er am Ende mehr als eine Seite umfassen und deutlich anders aussehen als jetzt; manches könnte auch handgeschrieben, handgezeichnet oder manuell layoutet werden
    Im Moment konzentriere ich mich stattdessen auf die Implementierung einer leichten Markup-Sprache, die inzwischen fast benutzbar ist, sodass es sich anfühlt, als ob die letzten 90 % ausnahmsweise einmal nicht mehr übrig wären
    Danach will ich wieder am Text weiterschreiben und ihn veröffentlichen

  • Ich finde den Punkt wirklich interessant, dass bei font-family: monospace; font-size standardmäßig nicht auf 100 %, sondern auf 81,25 % gesetzt werden kann, während das nicht passiert, wenn in der Liste eine zweite Schrift steht
    font-family: my-web-font, monospace; oder font-family: monospace, monospace; wären also unproblematisch, aber das scheint bei MDN derzeit nicht dokumentiert zu sein
    Ich frage mich, ob jemand erklären kann, warum das so gekommen ist und warum es nicht dokumentiert ist

    • Soweit ich mich erinnere, nimmt Firefox diese Schriftgrößenanpassung tatsächlich nicht vor, Chrome dagegen schon
      Das führt also teilweise auch zu Unterschieden zwischen Browsern
    • Vermutlich sollte dadurch erreicht werden, dass Text in Festbreitenschrift visuell gleich groß wie Fließtext wirkt

  • Auch wenn es ein Entwurf ist, gibt es im Text eine seltsame Wiederholung, als wäre ein Abschnitt versehentlich ein zweites Mal hineinkopiert worden
    Mich hat das besonders gestört, weil es so klang, als sei meine Lieblings-Festbreitenschrift nicht besonders gut

    • Solche Stellen sind noch vorhanden, weil ich die Struktur gerade erst neu ordne
      Wenn man genau liest, gibt es auch leichte Widersprüche, weil ich noch sortiere, was als feste Empfehlung stehenbleiben soll und wo ich eine differenziertere Position einnehmen will
      Es würde mich interessieren, welche Festbreitenschrift du am liebsten magst

  • Ein Grund, warum man nicht nur serif und sans-serif verwenden möchte, ist, dass die Standard-Serifschrift oft Times ist und sich das häufig nicht besonders gut anfühlt
    Deshalb stelle ich die Textschrift gerade von Serif auf Sans-Serif um

  • In Bezug auf den Rat „Liste keine Schriftarten auf, die wahrscheinlich auf dem System installiert sind“ und „selbst für Festbreitenschriften möglichst nur die generische Familie verwenden“ habe ich meine Website so konfiguriert:
    Ich verwende --sans-serif: Adwaita Sans, Adwaita Sans Bundled, Inter, sans-serif; und --monospace: Iosevka, Iosevka Web, Cascadia Code, monospace;
    Die Idee ist: Wenn unter GNOME Adwaita Sans installiert ist, wird die Systemschrift verwendet und kein Webfont heruntergeladen; andernfalls wird der Webfont Adwaita Sans Bundled verwendet und während des Ladens auf Inter und sans-serif mit ähnlichen Metriken zurückgefallen
    Bei der Festbreitenschrift genauso: Wenn systemweit Iosevka vorhanden ist, wird sie genutzt, andernfalls Iosevka Web, und während des Ladens wird auf Cascadia Code und monospace zurückgefallen
    Ich habe auch berücksichtigt, dass monospace unter Windows auf Consolas hinausläuft, was ich nicht besonders gut finde, und dass auf neueren Windows-Versionen Cascadia Code installiert ist
    Ich weiß, dass es nicht ideal ist, weil Cascadia Code metrisch stark von Iosevka abweicht, aber mich würde interessieren, wie dieser Ansatz wirkt

    • Es kann auch sein, dass ich mangels Webprogrammierungswissen eine bessere Methode übersehe, um „Schriftarten nur herunterzuladen, wenn sie nicht systemweit installiert sind“ festzulegen

  • Ein sauberer Artikel, und den Trick mit monospace, monospace kannte ich überhaupt nicht
    Ein kleines Formatierungsproblem: In meinem Browser liegt der Text des Absatzes .unimportant zwar vor dem gelben Hintergrund, aber hinter dem fixierten Text der .status-Leiste, sodass es seltsam aussieht, wenn man an einem .unimportant-Abschnitt vorbeiscrollt
    Beim diagonalen DRAFT-Wasserzeichen scheint etwas Ähnliches zu passieren