Schrift unter heise.de/ct sieht merkwürdig aus...

JeffWood

Hallo,

die Schrift, welche bei der c't für den Artikeltext verwendet wird, hat bei allen getesteten FireFox Versionen (u.a. ESR/Nightly) eine sehr ungleichmäßiges Aussehen. Etliche Buchstaben haben am oberen Rand eine Art 'Verdickung', die sehr merkwürdig aussieht. Edge zeigt exakt das gleiche Verhalten wie der Firefox.
Aber: Chrome stellt die Schriften wesentlich besser dar!? :-??

Hier ein Beispiel:
https://www.heise.de/ct/artikel/Bat…ng-4227234.html

FireFox:
[attachment=1]ScreenFireFox.png[/attachment]
Chrome:
[attachment=0]ScreenChrome.png[/attachment]

Habe im Chrome-Inspektor bei diesem Abschnitt noch den Zusatz gefunden :

Code

-webkit-font-smoothing: antialiased;

Aber ob das damit zusammenhängt, kann ich nicht sagen.

Kann man in der UserContent.css diesbezüglich irgendwas drehen ?

PS: OS ist Win10Prof/1803...

2002Andreas

Hier sieht das mit dem Fx so aus:

[attachment=0]Screenshot (985).png[/attachment]

Ich habe die Seite extra mal auf 150% vergrößert.

2002Andreas

Und so mit ESR 60.

[attachment=0]Screenshot (986).png[/attachment]

JeffWood

Bei 150% sieht die Seite bei mir auch gut aus, aber nicht bei 100%...
[attachment=0]ScreenFireFox2.png[/attachment]

2002Andreas

Fast neues Profil bei 100%

[attachment=0]Screenshot (987).png[/attachment]

Sören Hentzschel

Hallo,

Zitat von JeffWood
Habe im Chrome-Inspektor bei diesem Abschnitt noch den Zusatz gefunden :
Code
-webkit-font-smoothing: antialiased;
Aber ob das damit zusammenhängt, kann ich nicht sagen.

-webkit-font-smoothing: antialiased beziehungsweise das in Firefox implementierte Pendant -moz-osx-font-smoothing: grayscale funktionieren nur auf Apple macOS. Daher besteht kein Zusammenhang, wenn du Windows nutzt.

Hast du auf keiner anderen Webseite Probleme mit der Schrift? Das Problem sieht mir nämlich eher nach einem allgemeinen Font-Rendering-Problem aus. Ich kenne mich mit den Windows-Parametern (Cleartype etc.) aber nicht gut genug aus, um da Tipps geben zu können. Ansonsten würde ich testen, mittels userContent.css vielleicht eine andere Schriftart zuuzweisen. Vielleicht zeigt sich das Problem ja auch nur konkret mit dieser Schrift.

JeffWood

andreas: Du hast recht, das sieht wesentlich besser aus, als bei mir... :-??

@Sören:An ClearType oder sonstigen OS-abhängigen Schrifteinstellungen habe ich nichts verändert und da das 'Problem' ja auch beim Edge auftritt, ist es vermutlich etwas Grundlegenderes.
Bis jetzt ist mir das merkwürdige Schriftbild nur bei heise/ct aufgefallen.

Als 'Übersprungshandlung' werde ich mal meinen Grafikkarten-Treiber updaten.

Danke erstmal...

JeffWood

Das Grafikkarten-Treiber-Update hat nichts gebracht. Werde jetzt als Workaround einfach die Seite mit 90% darstellen, da sieht die Schrift dann wieder ganz normal aus. Da es nur bei heise/ct auftritt, kann ich damit leben...

Sören Hentzschel

Das könntest du auch testen:

Zitat von Sören Hentzschel

Ansonsten würde ich testen, mittels userContent.css vielleicht eine andere Schriftart zuuzweisen. Vielleicht zeigt sich das Problem ja auch nur konkret mit dieser Schrift.

JeffWood

Zitat von Sören Hentzschel

Ansonsten würde ich testen, mittels userContent.css vielleicht eine andere Schriftart zuuzweisen. Vielleicht zeigt sich das Problem ja auch nur konkret mit dieser Schrift.

Habe ich gemacht. Und siehe da, sieht wieder richtig gut aus (auch bei 100%).

CSS

@-moz-document url-prefix(https://www.heise.de/ct/){


*{
    font-family: Verdana !important;}
}

[attachment=0]ScreenFireFox3.png[/attachment]

Habe jetzt mal 'Verdana' genommen ( vorher war laut Inspektor: DejaVu Sans Condensed,Arial,Helvetica,sans-serif eingestellt)

Zu den DejaVu Fonts habe ich in WP folgendes gefunden:

Zitat

Die „Condensed“-Schnitte sind zurzeit noch als experimentell markiert, da in diesen noch nicht alle Hinting-Informationen enthalten sind.

Aber warum taucht dann das Problem nur bei mir auf und warum nur im FireFox und Edge :-??

Sören Hentzschel

Font-Rendering gehört zu den komplexeren Themen. Da gibt es Unterschiede zwischen den Betriebssystemen (und den jeweiligen Einstellungen des Betriebssystems) und dann nochmals zwischen den Browsern, weil das jeder Browser anders implementiert. Und das Schriftformat spielt auch noch mit rein. Wenn du bei Google "font rendering differences between browsers" eingibst, bekommst du 8,3 Millionen (!) Ergebnisse.

Meistens nimmt man als Nutzer keinen Unterschied wahr. Aber in manchen Fällen eben schon.

Hier ein paar Artikel zu dem Thema:

https://www.smashingmagazine.com/2012/04/a-clos…font-rendering/
https://szafranek.net/blog/2009/02/2…hing-explained/

JeffWood

andreas: Was mir noch bei deinen Screenshots aufgefallen ist: bei dir ist das Antialiasing anscheinend ausschließlich mit grauen Füllpixeln durchgeführt worden, bei mir werden mindestens 4 Farben dafür verwendet.

Frage: Hast du irgendwas an den ClearType Einstellungen verändert?

2002Andreas

Zitat von JeffWood

ClearType Einstellungen

Ist bei mir deaktiviert.

[attachment=0]Screenshot (989).png[/attachment]

JeffWood

Zitat von 2002Andreas

Ist bei mir deaktiviert.

Ach so. Habe es jetzt auch mal testweise deaktiviert, ändert aber an meinem Font-Anzeige-Problem nichts. Sieht auf der Seite mit der voreingestellten Schriftart mit und ohne Cleartype bescheiden aus. Werde weiter nach dem Grund forschen...

Speravir

Zitat von JeffWood

Ach so. Habe es jetzt auch mal testweise deaktiviert, ändert aber an meinem Font-Anzeige-Problem nichts. Sieht auf der Seite mit der voreingestellten Schriftart mit und ohne Cleartype bescheiden aus. Werde weiter nach dem Grund forschen...

Ich habe lokal Cleartype aktiv und auch individuell eingestellt. Ich kann bestätigen, dass auf der C't-Seite die Darstellung bei einigen Buchstaben nicht ideal ist, bei mir auf der aktuellen Startseite in der Normalschrift bei A und R. Die verwendete Schrift ist DejaVu Sans Condensed. Die habe ich auch lokal auf meinem Rechner und sehe dort die Probleme für beide nichtfette Schriften und kleinere Schriftgrößen in der Windows-Schriftinfo – immerhin bis Größe 24; die nächstgrößere Anzeige ist 36.

Aber mal nebenbei, so ganz sauber ist das auch nicht (heise.de, ct.css

Code

@font-face {
 font-family:DejaVu Sans Condensed;
 src:url("/fonts/dejavu-sans/DejaVuSans-BoldOblique.woff2") format("woff2"),url("/fonts/dejavu-sans/DejaVuSans-BoldOblique.woff") format("woff");
 font-weight:700;
 font-style:italic
}
@font-face {
 font-family:DejaVu Sans Condensed;
 src:url("/fonts/dejavu-sans/DejaVuSansCondensed-Bold.woff2") format("woff2"),url("/fonts/dejavu-sans/DejaVuSansCondensed-Bold.woff") format("woff");
 font-weight:700;
 font-style:normal
}
@font-face {
 font-family:DejaVu Sans Condensed;
 src:url("/fonts/dejavu-sans/DejaVuSansCondensed-Oblique.woff2") format("woff2"),url("/fonts/dejavu-sans/DejaVuSansCondensed-Oblique.woff") format("woff");
 font-weight:400;
 font-style:italic
}
@font-face {
 font-family:DejaVu Sans Condensed;
 src:url("/fonts/dejavu-sans/DejaVuSansCondensed.woff2") format("woff2"),url("/fonts/dejavu-sans/DejaVuSansCondensed.woff") format("woff");
 font-weight:400;
 font-style:normal
}

Alles anzeigen

Wieso nehmen die für fett kursiv nicht die existierende DejaVuSansCondensed-BoldOblique.ttf (hier als WOFF)? Und eigentlich fehlen auch Anführungszeichen um den Schriftnamen.