Wiki: font-family und Webfonts

- html
- typografie
0 Matthias Scharwies
1 at
0 Gunnar Bittersmann
- typografie
0 at
0 Gunnar Bittersmann
0 at
0 marctrix
2 mathiasb
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
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
@@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 🖖
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
Hallo Matthias Scharwies,
Die Angabe zur Syntax ist imho nur verwirrend.
Bis demnächst
Matthias
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
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
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
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
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
@@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 🖖
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
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
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:
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
@@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 🖖
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
@@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 🖖
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
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
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
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