Tutorial zu Google-Fonts

[Matthias Scharwies]

Guten Morgen!

Heute Nacht gab Vandalismus in unseren Google-Fonts-Tutorials.

Ich habe das zum Anlass genommen, das Tutorial zur Einbindung zu depublizieren - wir wollen ja nicht das Einbinden von 3rd-party-content zeigen.

Der Warnabsatz zum entsprechenden Urteil findet sich nun hier:

HTML/Tutorials/Google-Fonts_selbst_hosten

Danke an @Rolf B und @Jörg R für die Aktualisierung dieses Tutorials. Fällt jemand noch etwas auf, bzw. ein?

Vielen Dank im Voraus!

Herzliche Grüße

Matthias Scharwies

[Auge]

Hallo

Guten Morgen!

Heute Nacht gab Vandalismus in unseren Google-Fonts-Tutorials.

Ich habe das zum Anlass genommen, das Tutorial zur Einbindung zu depublizieren - wir wollen ja nicht das Einbinden von 3rd-party-content zeigen.

Der Warnabsatz zum entsprechenden Urteil findet sich nun hier:

HTML/Tutorials/Google-Fonts_selbst_hosten

Danke an @Rolf B und @Jörg R für die Aktualisierung dieses Tutorials. Fällt jemand noch etwas auf, bzw. ein?

Ja, im Abschnitt Ein paar Details gibt es einen mit „Alle modernen Browser“ beschrifteten Link. Der führt partiell ins Leere, weil der Abschnitt auf der Zielseite, auf den er offensichtlich zeigen soll (#Formate_und_Browser), nur #Formate heißt. Ich habe das soeben geändert.

Tschö, Auge

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich verstehe nicht, was mit „Beachten Sie, dass Sie für Font-Effekte keine speziellen Fonts brauchen. Die werden nämlich durch Firefox oder andere Browser durch ganz normales CSS emuliert und sind somit nicht an Schriftschnitte gebunden“ gemeint sein soll.

(Bestenfalls. Andernfalls hab ich eine Vermutung, bei der sich alle Haare sträuben.)

🖖 Живіть довго і процвітайте

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

Ich verstehe nicht, was mit „Beachten Sie, dass Sie für Font-Effekte keine speziellen Fonts brauchen. Die werden nämlich durch Firefox oder andere Browser durch ganz normales CSS emuliert und sind somit nicht an Schriftschnitte gebunden“ gemeint sein soll.

Ich auch nicht, habe den Satz entfernt.

(Bestenfalls. Andernfalls hab ich eine Vermutung, bei der sich alle Haare sträuben.)

Variable Fonts? ne, was denn?

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Ich verstehe nicht, was mit „Beachten Sie, dass Sie für Font-Effekte keine speziellen Fonts brauchen. Die werden nämlich durch Firefox oder andere Browser durch ganz normales CSS emuliert und sind somit nicht an Schriftschnitte gebunden“ gemeint sein soll.

(Bestenfalls. Andernfalls hab ich eine Vermutung, bei der sich alle Haare sträuben.)

Variable Fonts?

Nee, da würden sich die Haare glätten, wenn nicht gar vor Freude zu Locken kringeln.

Meine Befürchtung war, dass damit gemeint war, man müsse für Kursivschrift oder Fettschrift keine Extra-Fonts einbinden, sondern könne dem Browser das Schrägstellen bzw. Fettmachen der Normalschrift überlassen. Nicht machen, Kinder!

(Es sei denn, man weiß sehr genau, was man tut. So wie ich.)

🖖 Живіть довго і процвітайте

[Der Martin]

n'Abend Gunnar,

Variable Fonts?

Nee, da würden sich die Haare glätten, wenn nicht gar vor Freude zu Locken kringeln.

das stelle ich mir bei deiner derzeitigen Haarlänge schwierig vor. 😉

Meine Befürchtung war, dass damit gemeint war, man müsse für Kursivschrift oder Fettschrift keine Extra-Fonts einbinden, sondern könne dem Browser das Schrägstellen bzw. Fettmachen der Normalschrift überlassen. Nicht machen, Kinder!

Warum eigentlich nicht? Mich stört es schon seit jeher, dass bei manchen Schriften die fett oder kursiv gesetzten Varianten den Eindruck erwecken, als wären sie eine komplett andere Schriftart. Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

(Es sei denn, man weiß sehr genau, was man tut. So wie ich.)

Was leider nur in sehr wenigen, speziellen Fällen nachvollziehbar ist.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

Nein, das funktioniert nicht. Es gibt Schriftfamilien, bei denen die Fettschrift nur die vertikalen Linien verbreitert, aber die horizontalen nicht. Das ist dann so eine Art Schreibfedereffekt, je nach Strichrichtung wirkt sich eine breitere Feder anders aus.

Und eine Kursivschrift ist nicht nur eine zur Seite gescherte Normalschrift.

Guck Dir bspw. die Cormorant Garamond bei den Google Fonts an.

Sicher meinst Du das mit dem Einwand, dass die Kursivschrift wie eine andere Schriftfamilie aussieht. Aber "kursiv" heißt nicht "schräggestellt", das wäre "oblique" - was es als font-style übrigens auch gibt. "Kursiv" kommt von lat. "cursivus" (geläufig, fließend), was auf das Wwort "currere" (laufen) im zurückzuführen ist. Das ist die "geläufige" Schrift, oder zum Schreiben geeignetere Schrift. Deswegen sind Kursivschriften gern mal gerundeter oder geschwungener.

Fun Fact: Der "Cursor" hat ähnliche Etymologie…

Rolf

[Der Martin]

Hallo Rolf,

Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

Nein, das funktioniert nicht.

doch, das funktioniert eigentlich ganz gut. Der Font-Manager von Windows macht das genau so, wenn er zu einer Schrift keine eigenen Fontdateien für Fett- oder Kursivschrift vorfindet: Er erzeugt sie on the fly durch geometrische Transformationen.

Es gibt Schriftfamilien, bei denen die Fettschrift nur die vertikalen Linien verbreitert, aber die horizontalen nicht.

Ist das nicht immer so? Ich kenn's nicht anders. Fettschrift entsteht, indem das Schriftbild horizontal um eine Winzigkeit "verschmiert" wird.

Und eine Kursivschrift ist nicht nur eine zur Seite gescherte Normalschrift.

Das war aber bis heute mein Verständnis. Wobei ich mich schon lange wundere, dass es nicht auch Schriften gibt, die in Kursiv nach links geneigt sind (eine Art Linkshänder-Effekt).

Sicher meinst Du das mit dem Einwand, dass die Kursivschrift wie eine andere Schriftfamilie aussieht. Aber "kursiv" heißt nicht "schräggestellt", das wäre "oblique" - was es als font-style übrigens auch gibt. "Kursiv" kommt von lat. "cursivus" (geläufig, fließend), was auf das Wwort "currere" (laufen) im zurückzuführen ist. Das ist die "geläufige" Schrift, oder zum Schreiben geeignetere Schrift. Deswegen sind Kursivschriften gern mal gerundeter oder geschwungener.

Genau das meine ich, und ich find's nicht okay. So entsteht ein völlig anderes Schriftbild - also der Eindruck einer anderen Schriftart.

Fun Fact: Der "Cursor" hat ähnliche Etymologie…

Ja, das weiß ich seit kurzer Zeit auch. Ich habe jahrzehntelang gedacht, der Ausdruck stamme aus dem Englischen, konnte mir aber auf "den Fluchenden" keinen Reim machen.

Einen schönen Tag noch
 Martin

[Tabellenkalk]

Hallo,

Ich habe jahrzehntelang gedacht, der Ausdruck stamme aus dem Englischen, konnte mir aber auf "den Fluchenden" keinen Reim machen.

Ich dachte bis eben, du hättest schon mal mit einem Computer gearbeitet…

Gruß
Kalk

[Der Martin]

Hi,

Ich habe jahrzehntelang gedacht, der Ausdruck stamme aus dem Englischen, konnte mir aber auf "den Fluchenden" keinen Reim machen.

Ich dachte bis eben, du hättest schon mal mit einem Computer gearbeitet…

aber da wäre ich doch dann höchstens der Fluchende, und nicht die kleine blinkende Schreibmarkierung.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

ich denke, deine Erwartungen passen nicht zu denen der Typographen.

Fettschrift entsteht, indem das Schriftbild horizontal um eine Winzigkeit "verschmiert" wird.

Nein. Oder ja - je nach Schriftfamilie. Schau Dir die Roboto an, da wird die Strichstärke in allen Richtungen erhöht.

Und eine Kursivschrift ist nicht nur eine zur Seite gescherte Normalschrift.

Das war aber bis heute mein Verständnis.

Mag ja sein. Es gibt Schriftfamilien, bei denen die Kursivform auch die Obliqueform ist. Aber um den alten Mathematiker/Physiker/Ingenieurwitz zu zitieren: Nur weil 3, 5 und 7 prim sind, folgt daraus nicht, dass alle ungeraden Zahlen prim sind.

Rolf

[Der Martin]

Hallo,

ich denke, deine Erwartungen passen nicht zu denen der Typographen.

das habe ich schon öfter festgestellt. Und das gilt oft auch für mein Empfinden von Ästhetik.

Fettschrift entsteht, indem das Schriftbild horizontal um eine Winzigkeit "verschmiert" wird.

Nein. Oder ja - je nach Schriftfamilie. Schau Dir die Roboto an, da wird die Strichstärke in allen Richtungen erhöht.

Okay - solche habe ich bisher nicht bewusst(!) gesehen.

Und eine Kursivschrift ist nicht nur eine zur Seite gescherte Normalschrift.

Das war aber bis heute mein Verständnis.

Mag ja sein. Es gibt Schriftfamilien, bei denen die Kursivform auch die Obliqueform ist.

Vielleicht kommt meine Wahrnehmung daher, dass ich selbst einfache, schlichte Schriften bevorzuge, bei denen das oft der Fall ist.

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

Nein, das funktioniert nicht.

doch, das funktioniert eigentlich ganz gut. Der Font-Manager von Windows macht das genau so, wenn er zu einer Schrift keine eigenen Fontdateien für Fett- oder Kursivschrift vorfindet: Er erzeugt sie on the fly durch geometrische Transformationen.

Nein, das funktioniert nicht gut.

Ich hab das mal beispielhaft für die Fira Sans sichtbar gemacht.

• Die vom Browser schräggestellte Normalschrift ist stärker geneigt als die gestaltete Kursivschrift.

• Die richtige Kursivschrift hat ein einstöckiges a und ein zweistöckiges g. Das e ist runder, das f geht in die Unterlänge, das k hat einen Bogen.

• Die vom Browser fettgemachte Normalschrift ist deutlich weniger fett als die gestaltete Fettschrift, sogar noch weniger fett als die gestaltete Halbfettschrift. Sie hebt sich kaum von der Normalschrift ab und ist damit für Hervorhebungen unbrauchbar.

• Die gestaltete Fettschrift und Halbfettschrift laufen nur wenig weiter als die Normalschrift, während die falsche Fettschrift durch ihre deutlich vergrößerte Laufweite unangenehm auffällt.

Und eine Kursivschrift ist nicht nur eine zur Seite gescherte Normalschrift.

Das war aber bis heute mein Verständnis.

Ich hoffe, wir konnten deinen Irrtum ausräumen.

Wobei ich mich schon lange wundere, dass es nicht auch Schriften gibt, die in Kursiv nach links geneigt sind (eine Art Linkshänder-Effekt).

Gibt es. Insbesondere bei variable fonts – da gibt es welche, bei denen sich die Neigung von start nach links geneigt bis stark nach rechts geneigt quasi stufenlos einstellen lässt.

Sicher meinst Du das mit dem Einwand, dass die Kursivschrift wie eine andere Schriftfamilie aussieht. Aber "kursiv" heißt nicht "schräggestellt", das wäre "oblique" - was es als font-style übrigens auch gibt. "Kursiv" kommt von lat. "cursivus" (geläufig, fließend), was auf das Wwort "currere" (laufen) im zurückzuführen ist. Das ist die "geläufige" Schrift, oder zum Schreiben geeignetere Schrift. Deswegen sind Kursivschriften gern mal gerundeter oder geschwungener.

Genau das meine ich, und ich find's nicht okay. So entsteht ein völlig anderes Schriftbild - also der Eindruck einer anderen Schriftart.

Ein anderer Schnitt derselben Schriftart. Und ja, die Kursivschrift soll sich ja gerade durch ein anderes Schriftbild von der Normalschrift abheben. Sonst könnte sie ja nicht für Hervorhebungen eingesetzt werden.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

• Die gestaltete Fettschrift und Halbfettschrift laufen nur wenig weiter als die Normalschrift, während die falsche Fettschrift durch ihre deutlich vergrößerte Laufweite unangenehm auffällt.

Ich hab noch einen Block mit vermindertem Zeichenabstand hinzugefügt.

Die falsche Fettschrift fällt immer noch unangenehm auf – eben wegen der Verbreiterung der Striche in x-Richtung, aber nicht in y-Richtung. Dadurch wird Kontrast erzeugt, wo keiner sein sollte: vertikale Striche sind breiter als horizontale; sie sollten aber alle gleich breit sein.

---

doch, das funktioniert eigentlich ganz gut. Der Font-Manager von Windows macht das genau so, wenn er zu einer Schrift keine eigenen Fontdateien für Fett- oder Kursivschrift vorfindet: Er erzeugt sie on the fly durch geometrische Transformationen.

Nein, das funktioniert nicht gut.

Ich hab das mal beispielhaft für die Fira Sans sichtbar gemacht.

Und in diesem Vortag auf den Folien 23 und 24 für die Source Sans, wo es – bei Sonderbehandlung von a und g – ausnahmsweise doch funktioniert. Ich habe dort aber den Neigungswinkel nicht dem Browser überlassen, sondern dessen Größe angegeben. (Codepen – funktioniert natürlich nur, wenn Source Sans/Source Serif lokal installiert sind. Zum Einsatz kommt das auf dieser Seite.^[1])

Man sieht auch, dass sich das Schrägstellen anstatt Kursivschrift bei Serifenschriften verbietet.

🖖 Живіть довго і процвітайте

---

1. Bloß nicht dem dortigen Link folgen! Ich hab euch gewarnt. ↩︎

[Rolf B]

Hallo Gunnar,

man sollte doch annehmen, dass die Stylistic Sets, die man mit font-feature-settings auswählen kann, irgendwo dokumentiert sind und man die nicht erraten muss.

Allerdings gelingt es mir nicht, sie zu erduckeln. Ich würde erwarten, beim Hersteller der Source Sans Pro eine Übersicht zu finden. Fehlanzeige. Oder Blindfisch?

Rolf

[Font-Feature-Verlinker]

Hallo Rolf,

man sollte doch annehmen, dass die Stylistic Sets, die man mit font-feature-settings auswählen kann, irgendwo dokumentiert sind und man die nicht erraten muss.

• Liste der definierten Werte
• wakamaifondue.com – Gewünschten Font ins Browserfenster ziehen und staunen, was er so alles kann.

Grüße

[Rolf B]

Hallo Font-Feature-Verlinker,

wie schon erwähnt sind ss01 bis ss20 fontspezifisch und die von Dir gezeigte Seite besagt genau das. Vielen Dank für die Bestätigung meiner Aussage 😉

Die von Dir angegebene Experimentierseite ist ja nett, aber ein Try-And-Error Verfahren zum Ermitteln der Auswirkung der ssxx-Features wollte ich ja gerade NICHT. Ich suchte Dokumentation, vorzugsweise des Font-Herstellers. Gunnar wusste ja auch irgendwoher, dass er mit ss02 oder ss03 das andere a bekommen hat. Woher? Try & Error? Das ist unprofessionell (seitens des Anbieters), auch wenn das heutzutage der generelle Ansatz zu sein scheint. Hau was raus, blogge ein bisschen drüber, und dann spricht es sich schon rum. Brrrr.

Rolf

[Gunnar Bittersmann]

@@Rolf B

man sollte doch annehmen, dass die Stylistic Sets, die man mit font-feature-settings auswählen kann, irgendwo dokumentiert sind und man die nicht erraten muss.

In einer perfekten Welt wäre das so.

Ich habe da tatsächlich durchprobiert, was da so bei ss01, ss02, ss03, … passiert. Und mich dann gewundert, warum’s auf der Website nicht funktioniert.

Na klar: Lokal hab ich die Source Sans Pro installiert; auf gunnarbittersmann.de kommt die Source Sans Variable zum Einsatz. Man könnte annehmen, dass die stylistic sets bei beiden Fonts gleich wären. In einer perfekten Welt wäre das so.

Also nochmal durchprobiert.

🖖 Живіть довго і процвітайте

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Ich habe da tatsächlich durchprobiert, was da so bei ss01, ss02, ss03, … passiert. […] Also nochmal durchprobiert.

AFAIR hatte ich da zunächst was gefunden, was das einstöckige a und das zweistöckige g setzt, aber auch das kleine l beeinflusst und eine Glyphvariante ohne Bogen unten verwendet, was dann kaum bis gar nicht vom großen I zu unterscheiden ist.

Nachtrag: Kann sein, dass ich da zunächst kein stylistic set, sondern stylistic alternates salt verwendet hatte.

Hätte ich mit leben können; betraf ja in dem Fall bislang nur das l in „Vol. 3“.

Später hab ich dann durch Rumprobieren aber noch ein stylistic set gefunden, das a und g wie gewünscht ersetzt, aber das l so lässt: mit Bogen.

🖖 Живіть довго і процвітайте

[Rolf B]

Hallo Gunnar,

Rumprobieren

Na toll. Am Ende kommt's dann zum Rum probieren 🥃

Danke für die Story 😉

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Wobei ich mich schon lange wundere, dass es nicht auch Schriften gibt, die in Kursiv nach links geneigt sind (eine Art Linkshänder-Effekt).

Gibt es. Insbesondere bei variable fonts – da gibt es welche, bei denen sich die Neigung von start nach links geneigt bis stark nach rechts geneigt quasi stufenlos einstellen lässt.

Einige Beispiele sind auf v-fonts.com unter dem Tag Backslant zu finden.

🖖 Живіть довго і процвітайте

[Mitleser 2.0]

Warum eigentlich nicht? Mich stört es schon seit jeher, dass bei manchen Schriften die fett oder kursiv gesetzten Varianten den Eindruck erwecken, als wären sie eine komplett andere Schriftart.

D'accord. Solche Kandidaten gibt es auch.

Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

Das wiederum ist m.E. als allgemeine Empfehlung schon rein aus ästhetischen Erwägungen ein schrecklicher Gedanke.

[Gunnar Bittersmann]

@@Der Martin

Nee, da würden sich die Haare glätten, wenn nicht gar vor Freude zu Locken kringeln.

das stelle ich mir bei deiner derzeitigen Haarlänge schwierig vor. 😉

@Matthias Scharwies hat damit angefangen. Gerade der! 🤣

Meine Befürchtung war, dass damit gemeint war, man müsse für Kursivschrift oder Fettschrift keine Extra-Fonts einbinden, sondern könne dem Browser das Schrägstellen bzw. Fettmachen der Normalschrift überlassen. Nicht machen, Kinder!

Warum eigentlich nicht?

Weil’s Scheiße aussieht.

Mich stört es schon seit jeher, dass bei manchen Schriften die fett oder kursiv gesetzten Varianten den Eindruck erwecken, als wären sie eine komplett andere Schriftart.

Es sind andere Schnitte. Und die Kursivschrift soll anderes aussehen. Aber nicht komplett anders, sondern sie soll zur Normalschrift passen.

Meiner Ansicht nach sollten die Glyphen einer Schriftart in Fett- oder Kursivschrift tatsächlich nur geometrisch transformiert werden.

Nein. Bei Serifenschriften ganz gewiss nicht. Und auch bei serifenlosen gibt es Unterschiede – mal mehr, mal weniger.

Bei der Fira Sans gibt es etliche Unterschiede zwischen kursiv und schräggestellt …

(Es sei denn, man weiß sehr genau, was man tut. So wie ich.)

… bei der Source Sans betreffen die Unterschiede hauptsächlich das a (in Kursivschrift einstöckig, nicht zweistöckig) und das g (in Kursivschrift zweistöckig, nicht dreistöckig) – wobei die Glyphvarianten per OpenType-Features gesetzt werden können, womit in diesem speziellen Fall das Schrägstellen funktioniert, anstatt die richtige Kursivschrift als zusätzlichen Webfont einzubinden.

🖖 Живіть довго і процвітайте