Matthias Scharwies: Wiki: font-family und Webfonts

problematische Seite

Servus!

Ich bin grad über den font-face-Artikel gestolpert und würde ihn gerne neu gliedern. Dazu habe ich einige Fragen.

== Schriftfamiliennamen ==

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.
...
== Generische Schriftfamilien ==
Folgende generische Schriftfamilien sind fest definiert - diese Angaben können Sie also neben Schriftartnamen benutzen:
* serif, eine Schriftart mit Serifen
* sans-serif, eine Schriftart ohne Serifen
* cursive, eine Schriftart für Schreibschrift
* fantasy, eine Schriftart für ungewöhnliche Schrift
* monospace, eine Schriftart mit dicktengleichen Zeichen

Die Wikipedia hat bei den Artikeln für Schriftart und Schriftfamilie ebenfalls Probleme einer genauen Trennung.

MDN verwendet kurz und bündig nur den Begriff Schrift, später nur Schriftfamilie.

Ich wollte jetzt schon so anfangen:

Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Da sie oft aus mehreren Schriftschnitten für Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) bestehen, verwendet man auch den Begriff Schriftfamilie.

Diese Schriftfamilien kann man in generische Schriftfamilien wie Sans Serif ...

Das wird doch aber alles zu kompliziert, oder? sollte man nicht auch den Begriff Schrift, bzw. Schriftfamilie verwenden?

Thema Wingdings

Sollten Sie sich mit dem Gedanken tragen, eine der unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ in Ihrer CSS-Datei anzugeben, dann sollten Sie es sich lieber nochmal überlegen.

Das ist noch von Stefan Münz übrig und heute wohl nicht mehr nötig, oder?

Thema @font-face

Wie bindet ihr spezielle Schriften ein, mit font-face (wen ja, welches Format) oder über Google-Fonts? (Im Tutorial ist schon ein Warnhinweis wg. Datenschutz vorhanden.)

Herzliche Grüße

Matthias Scharwies

--
Es gibt viel zu tun: ToDo-Liste
  1. problematische Seite

    Servus!

    Ich suche grad ein Beispiel, dass eine auf Windows-System häufig verwendete Schrift auf Apple-Systemen nicht existiert. Kennt ihr da ein Beispiel (außer Wingdings)?

    Herzliche Grüße

    Matthias Scharwies

    --
    Es gibt viel zu tun: ToDo-Liste
    1. problematische Seite

      @@Matthias Scharwies

      Ich suche grad ein Beispiel, dass eine auf Windows-System häufig verwendete Schrift auf Apple-Systemen nicht existiert. Kennt ihr da ein Beispiel (außer Wingdings)?

      Arial. Und die ganzen C-Schriften (Calibri, Cambria, …).

      Ich denke, die hat man auf dem Mac nur drauf, wenn man das MS-Office-Paket installiert hat.

      LLAP 🖖

      --
      “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
      1. problematische Seite

        Servus!

        @@Matthias Scharwies

        Ich suche grad ein Beispiel, dass eine auf Windows-System häufig verwendete Schrift auf Apple-Systemen nicht existiert. Kennt ihr da ein Beispiel (außer Wingdings)?

        Arial. Und die ganzen C-Schriften (Calibri, Cambria, …).

        Ich denke, die hat man auf dem Mac nur drauf, wenn man das MS-Office-Paket installiert hat.

        Danke!

        Ich habe jetzt mal eine Neugliederung versucht. Habe ich noch etwas vergessen? Ist etwas falsch?

        LLAP 🖖

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. problematische Seite

          Hallo Matthias Scharwies,

          Die Angabe zur Syntax ist imho nur verwirrend.

          Bis demnächst
          Matthias

          --
          Rosen sind rot.
      2. problematische Seite

        Hallo Gunnar,

        Arial.

        Nope.

        Ich denke, die hat man auf dem Mac nur drauf, wenn man das MS-Office-Paket installiert hat.

        Die Arial und viele andere unter Windows standardmäßig installierte Schriftarten gehören auch zum Lieferumfang von macOS – auch in älteren Versionen.

        MfG, at

    2. problematische Seite

      Hallo Matthias.

      Ich suche grad ein Beispiel, dass eine auf Windows-System häufig verwendete Schrift auf Apple-Systemen nicht existiert. Kennt ihr da ein Beispiel (außer Wingdings)?

      Das trifft auf die sechs ersten ClearType-Schriftarten von 2006 zu: Calibri, Cambria, Candara, Consolas, Constantia, Corbel

      MfG, at

      1. problematische Seite

        Servus!

        Ich habe mal versucht alle Anregungen aufzunehmen:

        Die Angabe zur Syntax ist imho nur verwirrend.

        @Matthias Apsel

        Grad die älteren CSS-Artikel haben einen imho nicht sehr intuitiven Aufbau. Nach Einleitung und Iconset kommt gleich das Beispiel, dann erst irgendwann die möglichen Werte.

        Hier hilft die Syntax, dass die möglichen Werte anfangs schon erklärt und verlinkt werden. (Hatte beim Zwischenstand gefehlt, ich musste dann weg.)

        @at @Gunnar Bittersmann

        Arial, Helvetica, Times Roman usw. sind Schriftfamilien.

        Schriftart ist meinem Verständnis nach eher ein Synonym zu Schriftschnitt, also bspw. Helvetica 24pt fett. „Schriftart“ wird aber oft auch für „Schriftfamilie“ verwendet.

        Ja, das war meine Anfangsfrage nach der Abgrenzung, die auch die Wikipedia nicht beantwortet. Ich habe mich für eine wörtliche Übersetzung der Spec entschieden. Name einer bestimmten Schriftfamilie vs generische Schriftfamilie. Das Wort generisch habe ich mit allgemein erklärt.

        • monospace, eine Schriftart mit dicktengleichen Zeichen Zwar ist die Bezeichnung „dicktengleich“ korrekt, aber für Laien unverständlich.

        Ja, aber sie ist ja auch zum passenden Glossar-Artikel verlinkt. Ich hab's so gelassen - im Glossar-Artikel fehlt glaub ich noch ein Hinweis auf den Anwendungsfall Code-Listings.

        Font Stack ist glaub ich wieder so ein Wort, in dem die deutsche Bedeutung selten verwendet wird. Unser bisher verwendetes Schriftartenstapel hatte bei Google 9 Treffer, Schriftstapel 3980 - also hab ich's lieber im Original gelassen.

        Wichtig war mir eine Warnung vor zuviel Webfonts - ich glaube, dass ich da einen Kompromiss zwischen dezent und Holzhammer gefunden habe.

        Bezüglich der Wingding-Symbole habe ich im letzten Absatz eine Code-Tabelle verlinkt; müsste man irgendwann auch mal ins Wiki bringen.

        Herzliche Grüße

        Matthias Scharwies

        --
        Es gibt viel zu tun: ToDo-Liste
        1. problematische Seite

          Hej Matthias,

          Warnung vor nicht installierten Schriften:

          So stimmt es ja nciht. Es dürfte etlich, wenn nicht sogar die meisten Apple-Nutzer MS-Office installiert haben. Oder etwas anderes von MS (kommt beim kostenlosen OneNote nciht auch das ganze Schriften-Paket mit?).

          Einerseits gibt es in der Praxis also auf sehr vielen Apple-Systemen diese Schriften.

          Andererseits gibt es diese und andere Schriften vielleicht weder auf Apple noch unter Linux.

          Daher würde ich das anders formulieren. "Schriften können vom Browser nur zur Anzeige genutzt werden, wenn diese im Betreibssystem installiert sind oder von der Webseite bereit gestellt werden. Sie können allerdings mehrere Schriften angeben, um die Darstellung auf unterschiedlichen Systemen bestimmen zu können."

          Beispiel-Reihenfolge: "Helvetica, Arial, Geneva, sans-serif"

          (Helvetica ist das Original und gehört an den Anfang!)

          Marc

          1. problematische Seite

            Hallo marctrix,

            So stimmt es ja nciht. Es dürfte etlich, wenn nicht sogar die meisten Apple-Nutzer MS-Office installiert haben. Oder etwas anderes von MS (kommt beim kostenlosen OneNote nciht auch das ganze Schriften-Paket mit?).

            Die alten Windows-Standardschriftarten wie Arial, Times New Roman oder Wingdings gehören auch zum Lieferumfang von macOS, die neuen wie Calibra oder Consolas habe ich trotz MS Office nicht auf dem Mac.

            Daher würde ich das anders formulieren. "Schriften können vom Browser nur zur Anzeige genutzt werden, wenn diese im Betreibssystem installiert sind oder von der Webseite bereit gestellt werden. Sie können allerdings mehrere Schriften angeben, um die Darstellung auf unterschiedlichen Systemen bestimmen zu können."

            Beispiel-Reihenfolge: "Helvetica, Arial, Geneva, sans-serif"

            (Helvetica ist das Original und gehört an den Anfang!)

            Es handelt sich hier neben der allgemeinen Schriftart um eigenständige Schriftarten. Deren unterschiedliche Entstehungszeiträume und unterschiedliche Qualität ändern nichts daran, dass es allesamt Originale sind. Qualitativ äußerst hochwertige Nachbauten der Helvetica wären etwa die Swiss 721 von Bitstream oder die Nimbus Sans von URW.

            MfG, at

        2. problematische Seite

          Hallo Matthias,

          sehr gut, vielen Dank!

          Font Stack ist glaub ich wieder so ein Wort, in dem die deutsche Bedeutung selten verwendet wird. Unser bisher verwendetes Schriftartenstapel hatte bei Google 9 Treffer, Schriftstapel 3980 - also hab ich's lieber im Original gelassen.

          Ich würde hier von einer Rangfolge sprechen.

          Wichtig war mir eine Warnung vor zuviel Webfonts - ich glaube, dass ich da einen Kompromiss zwischen dezent und Holzhammer gefunden habe.

          Ich freue mich schon sehr darauf, in hoffentlich nicht allzu ferner Zukunft diese Warnung durch den Hinweis auf etwas anderes ersetzen zu können. Damit sinken Anzahl und Gesamtgröße der Schriftart-Dateien erheblich.

          MfG, at

          1. problematische Seite

            @@at

            Ich freue mich schon sehr darauf, in hoffentlich nicht allzu ferner Zukunft diese Warnung durch den Hinweis auf etwas anderes ersetzen zu können. Damit sinken Anzahl und Gesamtgröße der Schriftart-Dateien erheblich.

            Ja, variable fonts helfen dagegen, mehrere Dateien/größere Datenmengen übertragen zu müssen, wenn man denn Webfonts in verschiedenen Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) verwendet.

            Sie helfen aber nicht gegen FOUT bzw. FOIT.

            LLAP 🖖

            --
            “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. problematische Seite

              Servus!

              @@at

              Ich freue mich schon sehr darauf, in hoffentlich nicht allzu ferner Zukunft diese Warnung durch den Hinweis auf etwas anderes ersetzen zu können. Damit sinken Anzahl und Gesamtgröße der Schriftart-Dateien erheblich.

              Ja, variable fonts helfen dagegen, mehrere Dateien/größere Datenmengen übertragen zu müssen, wenn man denn Webfonts in verschiedenen Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) verwendet.

              Grad gestern gab's dazu nen Artikel im Smashing Magazine:

              Mit chr59 und ff53 ist die Browserunterstützung ja besser als erwartet. Ich würd's im Wiki erst mal unter [font-variant](https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Schriftformatierung/font-variant#Variable Fonts) andocken.

              Besser wäre aber ein Blog-Artikel zu einem späteren Zeitpunkt, wenn man das auch im Alltag verwenden kann.

              Herzliche Grüße

              Matthias Scharwies

              --
              Es gibt viel zu tun: ToDo-Liste
            2. problematische Seite

              Hallo Gunnar,

              Ja, variable fonts helfen dagegen, mehrere Dateien/größere Datenmengen übertragen zu müssen, wenn man denn Webfonts in verschiedenen Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) verwendet.

              … was der Normalfall sein dürfte.

              Sie helfen aber nicht gegen FOUT bzw. FOIT.

              … wofür es andere Techniken gibt, die mit variablen Fonts besser funktionieren, weil der Zielzustand beim Laden schneller erreicht wird.

              MfG, at

  2. problematische Seite

    Hallo Matthias,

    * monospace, eine Schriftart mit dicktengleichen Zeichen
    

    Zwar ist die Bezeichnung „dicktengleich“ korrekt, aber für Laien unverständlich. Was hältst du von „Schriftart, bei der alle Zeichen die gleiche Breite haben (Schreibmaschinenschrift)“? Zwar gibt es auch Schreibmaschinen, die mit Schriftarten variabler Breite arbeiten, aber das ändert sicher wenig an der Verständlichkeit der Aussage.

    Ich wollte jetzt schon so anfangen:

    Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Da sie oft aus mehreren Schriftschnitten für Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) bestehen, verwendet man auch den Begriff Schriftfamilie.
    
    Diese Schriftfamilien kann man in generische Schriftfamilien wie Sans Serif ...
    

    Das wird doch aber alles zu kompliziert, oder?

    Mache es so einfach wie möglich – aber keinesfalls einfacher. Ich halte das für verständlich und sinnvoll, würde vor „Schriftschnitten“ aber „sogenannten“ ergänzen.

    sollte man nicht auch den Begriff Schrift, bzw. Schriftfamilie verwenden?

    Ich würde beides nicht verwenden. Denn „Schrift“ hat häufig auch die Bedeutung von „Schriftstück“ und Schriftfamilien müsste man dann konsequenterweise noch gegen Schriftsippen abgrenzen. Da ist die Unterscheidung Schriftarten und Schriftschnitten sicher ein sinnvoller Kompromiss.

    Sollten Sie sich mit dem Gedanken tragen, eine der unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ in Ihrer CSS-Datei anzugeben, dann sollten Sie es sich lieber nochmal überlegen.
    

    Das ist noch von Stefan Münz übrig und heute wohl nicht mehr nötig, oder?

    Das spricht ja mehrere Aspekte an:

    • Die genannten Schriftarten sind unter zwar unter mehr Betriebssystemen als nur Windows verfügbar, aber nicht unter unter allen.
    • Symbol-Schriftarten sind unter Umständen Bedeutungsträger, deren Bedeutung durch Fehlen der Schriftart verloren geht.
    • Da unter Windows etwa die macOS-Systemschriftart Zapf Dingbats nicht standardmäßig vorhanden ist, ist auch ein direkter Bezug auf Windows nicht angemessen.

    Deshalb sollte die Aussage angepasst, aber nicht gestrichen werden.

    Wie bindet ihr spezielle Schriften ein, mit font-face (wen ja, welches Format) oder über Google-Fonts? (Im Tutorial ist schon ein Warnhinweis wg. Datenschutz vorhanden.)

    Ja, mit @font-face in den Formaten WOFF und WOFF2, erzeugt von Transfonter. Andere Formate nur bei kundenseitig gewünschter Unterstützung spezieller alter Browser.

    MfG, at

  3. problematische Seite

    @@Matthias Scharwies

    Schriftfamiliennamen

    Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Auch Schriftfamilien wie Sans Serif usw. gehören dazu.

    Arial, Helvetica, Times Roman usw. sind Schriftfamilien.

    Schriftart ist meinem Verständnis nach eher ein Synonym zu Schriftschnitt, also bspw. Helvetica 24pt fett. „Schriftart“ wird aber oft auch für „Schriftfamilie“ verwendet.

    Ich müsste aber bei Gelegenheit nochmal bei jemandem nachfragen, der sich damit auskennt.

    Generische Schriftfamilien

    Folgende generische Schriftfamilien sind fest definiert - diese Angaben können Sie also neben Schriftartnamen benutzen:

    • serif, eine Schriftart mit Serifen
    • sans-serif, eine Schriftart ohne Serifen
    • cursive, eine Schriftart für Schreibschrift
    • fantasy, eine Schriftart für ungewöhnliche Schrift
    • monospace, eine Schriftart mit dicktengleichen Zeichen

    Das wären dann keine Schriftfamilien, sondern (Haupt-)Gruppen.

    Ich wollte jetzt schon so anfangen:

    Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Da sie oft aus mehreren Schriftschnitten für Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) bestehen, verwendet man auch den Begriff Schriftfamilie.
    
    Diese Schriftfamilien kann man in generische Schriftfamilien wie Sans Serif ...
    

    Der erste Satz ginge dann in Ordnung, der zweite nicht.

    Thema Wingdings

    […] Das ist noch von Stefan Münz übrig und heute wohl nicht mehr nötig, oder?

    Die meisten (alle?) Wingdings-Zeichen sind mittlerweile in Unicode enthalten (z.B. im Block Dingbats U+2700–U+27BF). Moderne Betriebssysteme sollten eine Schriftart mit entsprechenden Glyphen intus haben.

    LLAP 🖖

    --
    “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. problematische Seite

      Hallo Gunnar.

      Generische Schriftfamilien

      Folgende generische Schriftfamilien sind fest definiert - diese Angaben können Sie also neben Schriftartnamen benutzen:

      • serif, eine Schriftart mit Serifen
      • sans-serif, eine Schriftart ohne Serifen
      • cursive, eine Schriftart für Schreibschrift
      • fantasy, eine Schriftart für ungewöhnliche Schrift
      • monospace, eine Schriftart mit dicktengleichen Zeichen

      Das wären dann keine Schriftfamilien, sondern (Haupt-)Gruppen.

      Das halte ich für eine Frage des Kontextes. Generell hast du mit dieser Aussage Recht, aber im Rahmen der Angaben zu font-family scheint mit die Bezeichnung „generische Schriftfamilien“ besser nachvollziehbar. Das kann aber auch an meiner Allergie gegen unzeitgemäße Eingruppierungen liegen.

      Weil „generisch“ allerdings im alltäglichen Sprachgebrauch ein wenig geläufiger Begriff ist, wären mir „allgemein“ oder „unspezifisch“ als Begriffe lieber, aber ich befürchte, „generisch“ ist in diesem Zusammenhang etabliert.

      MfG, at

      1. problematische Seite

        @@at

        Generell hast du mit dieser Aussage Recht, aber im Rahmen der Angaben zu font-family scheint mit die Bezeichnung „generische Schriftfamilien“ besser nachvollziehbar.

        Man muss keinen Bezug zwischen font-family und „Schriftfamilie“ herstellen. Mit charset gibt man ja auch keinen Zeichensatz an.

        Allerdings gibt man mit font-family schon Schriftfamilien (Plural, im Sinne von Schriftarten) an, nicht eine Familie (im Sinne von Gruppe). Bspw. Brush Script MT, Cambria, sans-serif; die Schriftarten können durchaus aus unterschiedlichen Gruppen kommen. (Ob das sinnvoll ist, sei mal dahingestellt.)

        Vielleicht ist es an der Stelle sinnvoll, den Begriff „Schriftfamilie“ gar nicht zu verwenden, sondern von „Schriftart“ zu sprechen? Möglicherweise beim ersten Autreten des Begriffs in Klammern dahintersetzen: Schriftart (Schriftfamilie).

        LLAP 🖖

        --
        “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. problematische Seite

          Hallo Gunnar,

          Man muss keinen Bezug zwischen font-family und „Schriftfamilie“ herstellen.

          Natürlich muss man das nicht. Aber es steigert die Verständlichkeit, gerade in Anbetracht der vielen unterschiedlichen Begriffe.

          Vielleicht ist es an der Stelle sinnvoll, den Begriff „Schriftfamilie“ gar nicht zu verwenden, sondern von „Schriftart“ zu sprechen? Möglicherweise beim ersten Autreten des Begriffs in Klammern dahintersetzen: Schriftart (Schriftfamilie).

          Yep, an anderer Stelle hatte ich ja bereits ähnlich argumentiert.

          MfG, at

  4. problematische Seite

    Hej Matthias,

    Schriftarten sind beispielsweise Arial, Helvetica, Times Roman usw. Da sie oft aus mehreren Schriftschnitten für Breiten (schmal, breit, …), Strichstärken (leicht, normal, fett, …) und Zeichenlagen (normal, kursiv, …) bestehen, verwendet man auch den Begriff Schriftfamilie.
    
    Diese Schriftfamilien kann man in generische Schriftfamilien wie Sans Serif ...
    

    Das wird doch aber alles zu kompliziert, oder? sollte man nicht auch den Begriff Schrift, bzw. Schriftfamilie verwenden?

    Nein, würde ich genauso machen!

    Marc

  5. problematische Seite

    Hallo Matthias,

    Thema Wingdings

    Sollten Sie sich mit dem Gedanken tragen, eine der unter Windows geläufigen Schriften „Symbol“, „Webdings“ oder „Wingdings“ in Ihrer CSS-Datei anzugeben, dann sollten Sie es sich lieber nochmal überlegen.
    

    Das ist noch von Stefan Münz übrig und heute wohl nicht mehr nötig, oder?

    hat mit Stefan Münz nichts zu tun - das hatte ich mal eingefügt:

    https://wiki.selfhtml.org/index.php?title=CSS%2FEigenschaften%2FSchriftformatierung%2Ffont-family&type=revision&diff=20988&oldid=15365

    Ich fand meinen Hinweis so schlecht nun nicht, ist aber natürlich nur für weniger erfahrene Leute potenziell nützlich. Aber egal, Ansichtssache, nun ist es halt Geschichte. ;-)

    Ach ja, und Glückwunsch zu euren Fortschritten im Wiki. Bin ehrlich beeindruckt, dass ihr so weit gekommen seid!

    MathiasB

    1. problematische Seite

      Hallo @mathiasb ,

      schön mal wieder von Dir zu hören!

      Das ist noch von Stefan Münz übrig und heute wohl nicht mehr nötig, oder?

      hat mit Stefan Münz nichts zu tun - das hatte ich mal eingefügt:

      Ich fand meinen Hinweis so schlecht nun nicht, ist aber natürlich nur für weniger erfahrene Leute potenziell nützlich. Aber egal, Ansichtssache, nun ist es halt Geschichte. ;-)

      Ein ähnliches Erlebnis hatten wir auch bei den Überschriften, wo es eine sehr deutliche (Die Textkorrektur hatte grad deutsche draus gemacht) Warnung gab, dass man Überschrift nicht stylen könne, sondern dafür CSS benötigte.

      Das ist heute hoffentlich wohl Grundwissen, genauso wie die Frage, was einen Link ausmacht und was das WWW eigentlich ist.

      Ach ja, und Glückwunsch zu euren Fortschritten im Wiki. Bin ehrlich beeindruckt, dass ihr so weit gekommen seid!

      Vielen Dank für die Blumen!

      PS: Hast du Lust im Oktober ein Wochenende in Berlin zu verbringen? Oops, muss mich heute abend selber noch anmelden!

      Herzliche Grüße

      Matthias Scharwies

      --
      Es gibt viel zu tun: ToDo-Liste