Stefan Niggemeier

Zwischenfrage für Schriftnerds

Vermutlich hat es jeder niemand bemerkt, aber seit ein paar Tagen sehen die Überschriften hier im Blog anders aus. Die Schrift ist eine andere, nicht mehr die „Tagesschrift“ von Yanone, sondern die „IM FELL DW Pica“.

Vor allem aber hat sich die Methode hinter der Darstellung geändert. Bislang generierte ein WordPress-Plug-in aus dem Text eine Grafik — das war die eher mittelelegante Notlösung, um nicht nur Standardschriften benutzen zu können, die auf fast allen Computern installiert sind. Inzwischen ist das nicht mehr nötig: Die meisten modernen Browser beherrschen die Möglichkeit, eingebettete Schriftarten anzuzeigen. Dadurch ist der Text tatsächlich Text und keine Grafik (und lässt sich zum Beispiel kopieren), und es gibt eigentlich keine Ausrede mehr für die große typographische Monotonie im Netz.

Ich habe allerdings ein Problem: Die Schriften sehen auf dem Mac anders aus als auf dem PC. Das hier ist die Darstellung auf meinem MacBook:

Auf meinem PC im Büro (Windows 7) aber sehen dieselben Buchstaben unabhängig vom verwendeten Browser furchtbar abgemagert aus:

Im Oslog, wo die Überschriftentype „Clarendon Text Pro Bold“ auf dieselbe Art dargestellt wird, fand ich die PC-Ansicht mit ihrer fehlenden Glättung so unansehnlich, dass ich versucht habe, mit einem Schatten für Linderung zu sorgen. Aber das kann doch auf Dauer auch keine Lösung sein.

Weiß ein typophiler Leser vielleicht Abhilfe?

92 Replies to “Zwischenfrage für Schriftnerds”

  1. Windows und Macs rendern Schriften historisch anders: der Mac probiert möglichst nah an einem Drcuk zu sein, wohingegen Windows sich stärker an den Pixeln des Bildschirms orientiert. Bei Safari unter Windows kann man sogar einstellen, welche Variante man bevorzugt.

    Ich fürchte, da kann man nicht sonderlich viel machen, aber viele PC-User schwören auf die ClearType PC Darstellung und ziehen sie dem Mac Rendering vor.

  2. Hallo Stefan,

    Grafiken als Überschriften sind sowieso ungünstig, da Suchmaschinen dann den Inhalt nicht mehr lesen können.

    Eine Lösung könnten die neuen Google-Schriften sein, wenn Dir eine davon gefällt: http://code.google.com/webfonts

    Sie sind im CSS-Stylesheet einbettbar wie eine Standardschrift und sehen auf allen Systemen (Mac/Windows) gleich aus.

    Grüsse,

    Attila :-)

  3. @Attila Albert: Ähm…

    1.) können Suchmaschinen den Inhalt von Grafiken lesen, wenn man den Inhalt ins Alt-Tag schreibt.
    2.) ist das Thema dieses Eintrages ja gerade, dass ich mich von den Grafiken verabschiedet habe und die Überschriften nun Text sind.
    3.) ist die jetzt von mir verwendete Überschrift eine der Google-Schriften.
    4.) sieht sie nicht auf allen Systemen gleich aus.

    Genau darum schrieb ich diesen Eintrag.

  5. Beim Mac wird grundsätzlich eine deutlich höhere Kantenglättung der Schriften durchgeführt. Die Standard-Schriften auf dem Mac sind auch meist etwas satter und wirken dadurch sauberer als auf dem PC. Durch den sehr hohen Kontrast der Apple-Displays fällt es auf diesen auch gar nicht auf, dass die Schriften wesentlich weicher sind, auf normalen Monitoren wirken die Schriften dann aber häufig leicht matschig weswegen unter Windows die ohnehin schwächere Kantenglättung möglichst reduziert werden sollte.

    Da Du aber ohnehin nicht genau kontrollieren kannst, wie die Schriften im Einzelfall bei dem User aussehen, würde ich auf Exoten-Schriften ganz verzichten. Bei mir ist auf Windows-Rechnern ohnehin immer Verdana als Default eingestellt weil ich jedes Mal das kalte Grausen bekomme, wenn ich irgendwo eine Seite mit Serifen-Schriften entdecke.

  6. Ich bin in sachen Typografie nicht sonderlich bewandert, aber das es unter Windows zu Darstellungsunterschieden kommt ist bekannt (siehe: http://praegnanz.de/weblog/windows-fontrendering-killt-webfont-fliesstext) und kann wohl nur durch eine aufwändige Bildschirmoptimierung der Schriftart umgangen werden (was wohl nur sehr wenige Schriftarten bieten).

    Ich nutze Windows und finde die Überschrift gut lesbar und in jedem Fall besser als die vorherige Variante.

  8. @5, @7 und Verdana für alles ist ein typischer Fehler von Leuten, die nicht wirklich was mit Gestaltung am Hut haben.

    @Stefan: Ich kann mir nicht vorstellen, dass es etwas mit den Webfonts zu tun hat, eher schon mit der konkreten Schriftart, bei der Mac und Windows unterschiedliches Glättungspotenzial erkennen. Ohne Glättung wirkt die Schrift in der Tat recht mager, die Windows-Glättungsverfahren sind ein bisschen dezenter als die auf dem Mac (die Windows-Nutzer auf dem Safari einstellen können). Man könnte mal mit Fettschrift oder text-shadow rumprobieren. Mich hat’s aber nicht gestört.

  10. Ja, ja von wegen Zwischenfrage. Gib’s zu, du wolltest bloß den Begriff „innerer Reichsparteitag“ noch ein bisschen weiter verbreiten.
    ;-)

  11. Schriftrendering unter Windows ist unansehnlich. Das war schon immer so, und es ist keine Besserung zu erkennen. So wie es aussieht, hast du unter Windows aber noch nicht einmal das (wenn auch nicht besonders qualitative) Antialiasing eingeschalten. Unter Windows XP kann man das in den Display Properties unter Settings -> Effects (dort „ClearType“ statt Standardrendering einstellen); ein Windows 7 habe ich gerade nicht zur Hand.

    (Ich wünschte, alle würden das Xft2-Fontrendering verwenden wie man das unter Linux hat… Da ist die Schrift nämlich nicht so schwer wie unter Mac OS und damit auf Bildschirmen besser zu lesen, aber wesentlich schöner gerendert als mit ClearType unter Windows.)

  12. Du könntest mal ein wenig auf http://typekit.com/ herumschnüffeln und Dir vor allem Fonts ansehen die für subpixel-rendering optimiert sind.

    Zum Beispiel die Meta Serif Web Pro. Unter dem Reiter „Browser samples“ kannst Du Dir dann das Erscheinungsbild in verschiedenen Betriebssystem-/Browser-Kombinationen ansehen.

  15. Gegen die notorisch schlechte Schriftdarstellung unter Windows ist leider kaum was zu machen, wenn man keine Grafiken nimmt. Und letzteres sollte man aus den bekannten Gründen eben nicht machen. Horden von Webdesignern gehen diese (und etliche andere) Designflaws und die technische Rückständigkeit des Internet-Explorers seit Jahren auf die Nerven. Die Entwicklung von ansprechendem, funktionablen Webdesign wird so deutlich gebremst.

    Ein Trost ist vielleicht, dass die Windows-Lemminge schlechte Schriftdarstellung gewohnt sind und sich nicht besonders dran stören. Mac- und Linux-User kommen hingegen in den vollen Genuss schöner Bildschirmschriften.

    Wenn Du die Auswahl an Google-Webfonts nicht gut genug findest, dann probier doch mal typekit.com aus. Das ist zwar kostenpflichtig, bietet aber die derzeit bestmögliche Einbettung von Webfonts – und sie haben eine Riesenauswahl, auch an professionellen Schriften. Man kann sich zudem alle Schriften in einer Voransicht in den unterschiedlichen Browsern anzeigen lassen.

  16. @Nils: Verdammt, ertappt!

    @Ben: Doch, ClearType ist an.

    @Florian: Ja. Aber mal abgesehen davon, dass mir das Krikelige meiner Überschriftentype gefällt… ist sie umsonst.

    @chefkocher: Oh, ja. Das ist der aus der Dulux-Werbung. Ist korrigiert.

  18. @15 Und der Internet Explorer hat jetzt mit dem Schriftarten-Rendering bitte was zu tun?

  19. Hallo zusammen,

    meiner Meinung nach gibt es kaum eine elegante Lösung für das »Problem«. Ein Standard zum Bildschirm-Rendering von Glyphen existiert nicht, deshalb nutzt jedes Betriebssystem (oder sogar jeder Browser) unterschiedliche Mechanismen zum nachträglichen subPixel-Rendering (ob Quartz unter Mac OS dem Windows-Pendant ClearType überlegen ist, ist dabei nur Geschmackssache).

    Aber: Grundsätzlich unterstützen neuere Font-Dateiformate (etwa auch TrueType und OpenType) in einer Zusatz-Tabelle Hinting-Informationen zur Bildschirmdarstellung; solche Informationen würden auch unter Windows und Mac OS (und anderen) gleich verarbeitet und somit die Schrift identisch dargestellt. Das Erstellen der Hinting-Informationen ist aber wohl recht aufwändig, weshalb bei vielen gratis-Schriften darauf verzichtet wird. Kostenpflichtige Schriftarten werden aber wohl kaum als WebFonts verfügbar gemacht.

    Meine Empfehlung: Die Schriften aus dem Libertine Open Fonts-Projekt beinhalten Hinting-Informationen. Damit sollte das Rendering für die meisten Betrachter identisch aussehen.

    Die alte Variante, die Überschriften vorzurendern, ist wohl die einzige Alternative, wenn gewünscht ist, dass (mit jeder beliebigen Schriftart) für alle Betrachter im Ergebnis das Gleiche zu sehen ist. Was Suchmaschinen und Screenreader angeht kann ich da nur dem Hausherrn zustimmen – den einzigen Nachteil hat man ggf. durch den enstehenden Trafic.

    Beste Grüße
    bela.d

    P.S.: Hier unter Linux sieht das Ganze dem Referenz-Rendering doch tatsächlich ziemlich ähnlich. Aber ein »Windows-User sind halt selber schuld« ist nunmal keine Lösung des Problems.

  20. Die Darstellung hängt neben dem (am Mac zu fetten) Rendering auch wesentlich von der Schrift ab. Speziell Serifenschriften sind für so eine zerfressene Darstellung unter Windows sehr anfällig. Die verschiedenen Browser liefern dann auch alle nochmal andere Ergebnisse.

    Mein Tipp ist, mal ein wenig an der Schriftgröße zu drehen. Da kann ein Pixel mehr oder weniger schon zu einem völlig anderen Ergebnis führen, das gleich viel hübscher ist. Das kommt daher, dass der Renderer die verschiedenen Strichstärken der Schrift irgendwie ins Pixelraster quetschen und ggfl. sinnvoll mit Antialiasing versehen muss. Die Kunst ist, die Größe zu erwischen, bei der das Raster der Schrift am besten mit den Pixeln überein stimmt, damit die wenigsten hässlichen Effekte auftreten.

    Letztlich ist das auch der Grund, warum es Schriften gibt, die für die Darstellung am Bildschirm optimiert wurden. Die Proportionen werden dann so angelegt, dass bei allen (hauptsächlich kleineren) Größen brauchbare Ergebnisse gerendert werden. Verdana ist so eine. Außerdem wird auf Details verzichtet, die beim Rendering „ineinander laufen“. Serifenschriften haben da automatisch schlechtere Karten.

  21. 19. / bela d. hat mit den Libertine Open Fonts bereits die einzige (kostenlose) Lösung genannt. Hier unter Linux ist übrigens auch alles schön.

    BTW:
    Kann man das Rendering unter Windows eigentlich immer noch nicht an die verwendete Hardware anpassen? Scheren die echt alles über einen Kamm oder stellt sich das automatisch (schlecht) ein?

  22. @bela.d: Es wird mit Grafiken allein deshalb schon nicht identisch aussehen, weil ein Teil der User CRT, der Rest Flachbildschirme hat. Man muss sich also entscheiden, ob man subpixel-Hinting verwendet. Und egal was man macht, für jeweils eine Partei wird die Grafik schlechter aussehen als möglich wäre.

    @Windows-Lemming:
    IE nutzt die schlechte Windows-Schriftdarstellung. Probier mal den Safari unter Windows aus und spiel dort mit den Einstellungen für die Schriftenglättung rum. Der kann eingebettete Schriften sehr wohl besser darstellen. Also kann man ohne IE auch unter Windows bessere Schriften darstellen. See my point?

  24. Probier doch mal die IM Fell Double Pica. Vielleicht rendert die sich etwas glatter. Sie sieht auch nicht so angeknabbert aus.

  27. hätte es nicht bemerkt.
    nach dem zweiten satz hab ich geguckt…..ist etwas schlankere schrift.aber ohne hinweis hätte ich es nicht gemerkt ;)

  28. Hallo,

    Erstens benutzt man heutzutage CSS Hintergrundbilder, falls man Grafiken verwenden moechte und keine img-Tags! Siehe z.B. hier: http://stopdesign.com/archive/2003/03/07/replace-text.html

    Und zweitens wuerde ich mal Cufon http://cufon.shoqolate.com/generate/ ausprobieren. Sehr gleichmaessige Ergebnisse auf Windows / Mac / etc. und auch nicht langsamer als @font-face. Braucht zwar Javascript, kann man aber mit einem Fallback auf @font-face abfedern.

    Oliver

  29. Hm, ich hab zwar keine Lösung, aber einen Hinweis. Ich bin auch auf einem Mac, benutze aber Opera, und damit ist die Schrift so dünn wie oben in dem Windows-Beispiel, aber so geglättet wie im Mac-Beispiel. Seltsames Web is seltsam.

  30. Kantenglättung ist hier eher ein Luxusproblem: Das „ü“ in der Überschrift zu diesem Artikel erscheint auf dem iPad als rechteckiges Kästchen.

    Und nein, das Problem habe ich noch bei keiner anderen Website beobachtet. Muss also an der extravaganten Schriftart liegen.

  31. @11: Bei Windows 7 kann man ClearType nicht deaktivieren. Und es geht ja nicht um schön oder hässliches Fontrendering sondern um Lesbarkeit. Da bietet ClearType messbare Vorteile.

    Das Problem hier scheint einfach die verwendete Schrift zu sein, die kein besonders gutes (oder gar kein?) »Hinting« nutzt, so dass ClearType nicht weiß, wo welche Pixel hingeschoben werden sollen.

    (Bei Windows 7 kann man ClearType übrigens mit einem integrierten Tool wunderbar an seinen Monitor anpassen: einfach »ClearType« ins Startmenü tippen.)

  32. Ersetze die Schrift.

    Ich habe mir die gerade mal auf Font Squirrel und unter Photoshop angeschaut und ehrlich gesagt ist die suboptimal, weil jeder Buchstabe vom Design her extrem unruhige Kanten aufweist. Mir scheint so, als wollte der Font-Designer eine Art zerzielselten Fotokopier-Look kreieren. Für den Druck mag sowas ja noch interessant aussehen, aber auf einem Display ist damit halt dann Schluss, gerade bei kleineren Schriftgrößen. Für eine Webseite ist die Schrift also von Anfang unbrauchbar, da ja, wie V bemerkt hat, die Browser auch noch ihren eigenen Senf beim Rendering dazugeben.

    Ich vermute auch mal, dass diese Schriftart wohl eine genau derjenigen ist, die mit ihrem Kanten-Wirrwarr das ClearType-Rendering in den digitalen Wahnsinn treibt. Denn die Darstellung sieht unter win 7 auch im Vergleich zu XP deutlich schlechter aus.

  33. @Tech-o-matic: Das ist aber nicht die Frage. Die Idee ist ja, dass die Seiten auf möglichst vielen Browsern gut aussehen — und realistischerweise werde ich es nicht schaffen, der Welt vorzuschreiben, welche Tools sie installieren sollen. (Und warum lassen Sie die Leute nicht flattrn, was Sie wollen? Müssen wir jetzt ernsthaft unter jedem Eintrag auch noch darüber diskutieren?)

    @Gunther: Ja, die Schrift sieht kaputt aus. Das ist beabsichtigt. Das gefällt mir an ihr.

  36. Mir gefällt dieser ausgefranste Look auch. Aber manchmal muss man gerade bei Webseiten den grausamen Schritt tun und sich selber sagen „geht leider nicht, egal wie cool es ist“. Glaube mir, ich kenne diesen Schmerz :)

    Ach ja: Mir ist Anfangs gar nicht aufgefallen, dass sie Schrift einen solchen Look hat, nicht mal auf den Screenshots. Insofern wäre mein Vorschlag, entweder die Schrift massig zu vergößern (was durchaus toll aussehen könnte) oder sie leider zu ersetzen.

  37. @Stefan: Ich meinte auch nur das Argument: „Bilder verhindern Suchmaschinen“ ist seit Ewigkeiten passé dank beschriebener Technik. Falls man also Bilder verwendet, dann sollte man es so machen wie verlinkt, zum einen fuer Suchmaschinen, zum anderen fuer die Accessibility.

    Ich haette wohl das heutzutage in Anfuehrungszeichen setzen sollen.

    Gruss,
    Oliver

  39. Auf meinem PC mit Windows Vista und SeaMonkey als Browser sieht die Schrift sogar *noch* abgemagerter und zittriger aus als im Windows-Beispiel oben, es entstehen sogar Lücken in den Strichen. Man hat den Eindruck gekünstelter Zwangsoriginalität, was ja offenbar nicht gewollt ist.

  40. ich musste gerade sehr lachen als ich das wort „windows-lemming“ gelesen habe, wenn auch wahrscheinlich nicht aus dem vom autor dafür vorgesehenen grund :)

    ansonsten empfinde ich persönlich den font in beiden varianten eher als rückschritt, verstehe zwar den lofi-gedanken mit dem „angeknabberten“ aussehen, finde ich jetzt aber inhaltlich irgendwie seltsam unpassend zum blog. so sind die geschmäcker verschieden…

  41. also hier siehts aus wie „pc“-screenshot, obwohl mac os
    benutze firefox, aber in safari gleich … liegts an 10.5 vs 10.6?
    10.5.8 hier.

  42. Die Ursache liegt eindeutig beim Hinting der Schrift, welches bei kostenlosen Fonts meist gar nicht oder lediglich automatisiert durchgeführt wurde. Beides reicht für das Rendering unter ClearType aber (gerade bei solchen schmutzigen Schriften) nicht aus. Ein professionelles ClearType-Hinting bedeutet sehr viel manuellen Aufwand für jedes einzelne Schriftzeichen, den man daher in der Regel nur bei Fonts findet, die man gegen eine Gebühr lizenzieren muss.

    Eine der allerersten Foundries, die entsprechende Webfonts mit aufwändigem Hinting zur angenehmen Bildschirmdarstellung auch unter Windows anbietet ist FontFont, deren Web FontFonts u.a. bei FontShop erhältlich sind. Ein Teil dieser Webschriften gibt es übrigens auch bei Typekit, wo man einige sogar kostenlos (sogar »angeknabberte«) mit Hilfe des Webservices einbinden kann.

  44. @Ivo: Danke, ich guck mich da mal um. Tatsächlich sieht die (kostenpflichtige) „Clarendon Text Pro Bold“, die wir jetzt beim Oslog benutzen (und die ich brav dafür gekauft habe), auf Windows schon besser aus als die (kostenlose) „Chunk“, mit der ich es vorher versucht hatte.

    (Vielleicht ist es natürlich auch insgesamt mal Zeit für ein neues Design hier.)

  46. Ich wollte oben keine Werbung für Typekit machen, nur darauf hinweisen, dass es eben für die Bildschirmdarstellung optimierte Schriften gibt. Das Hinting macht den Unterschied, wie auch Ivo anmerkt.

    Die Vorschau-Funktion von Typekit illustriert ganz gut den Unterschied zwischen optimierten und nicht optimierten Schriften.

  47. @stefan: gut, dann kann ich dir das feedback geben dass dein interesse am detail hier insofern richtig ist als dass mir die neue überschrift in der nunmehr „verhungerten“ variante (hier auf firefox) tatsächlich etwas negativ aufgefallen ist :-)
    ist aber wirklich meilenweit in der chinesischen reissack-liga (TM), und das design ansonsten finde ich hier tatsächlich ausgesprochen gelungen!

  48. …und der klassische früher-war-alles-besser trugschluss trotz praktischer beispiele im beitrag wurde bei mir noch insofern begünstigt weil nämlich bei mir die überschriften *noch* viel abgemagerter aussehen (hwohlgemerkt auf einem arbeitsrechner mit urzeit-XP und bewusst deaktivierter kantenglättung) als in den eingefügten vergleichsgrafiken.

    vielleicht sollte ich mal die ansonsten für meine arbeit besser geeignete plattform aufgrund einer font-befindlichkeit wechseln. sonst bin ich am ende noch ein lemming ;-)

  49. …bei mir ist die Schrift via mac/firefox genau so mager wie deine Screenshots vom PC. Früher war sie bei mir auch fetter. Mir ist das relativ egal. Ich würde an deiner Stelle auf ein Redesign verzichten und mich im Zweifelsfalle für Systemschriften entscheiden. Oder Clarendon. ;) Aber, ich glaube nicht ein Mensch liest deinen Blog wegen den „gut gestalteten Überschriften“.

  50. Am besten fährst Du mal zu Mediamarkt oder in eine öffentliche Bibliothek und siehst Dir Deine Seite auf zwanzig verschiedenen Computern an. Da wirst Du wahrscheinlich mit den Zähnen klappern.

  51. Bei mir siehts eigentlich viel schlimmer aus, weil die Schrift nicht weichgezeichnet wird (Firefox 3.6, windös xp)

  52. Bob nochmal. Schrift getestet am mac mit Camino, Firefox, Safari: überall mager wie auf den PC-Screenshots.

    Bei Camino wird mir die Überschrift als Times angezeigt. Die habe ich hier als meine „Wunschschrift“ für Websiten eingestellt. Wenn du wirklich an einem einheitlichen Schriftbild auf allen Computern interessiert bist, würde ich also zu der alten Renderingvariante zurückkehren…

  53. Browser rendern Fonts nach ihren eigenen undurchsichtigen Regeln. Das von einigen Postern erwähnte Hinting spielt eine Rolle, ist in diesem Falle aber nicht die Ursache, da Safari es ohnehin nicht berücksichtigt (was die Fonts deswegen oft etwas blurry aussehen läßt), während Cleartype immer versucht, Schriften so gut es geht aufs Pixelraster anzupassen. Das erzielt bei gängigen Bildschirmauflösungen m.E. meist das bessere Ergebnis (wenn denn nicht gerade eines der anderen Probleme, von denen PCs heimgesucht werden wie unterschiedlichste Grafikkarten mit ihren jeweiligen Treibern den Efffekt wieder aufhebt), auf dem Retina-Display des neuen iPhone wird Apples Methode aber wohl Vorteile haben. Mehr dazu: http://www.joelonsoftware.com/items/2007/06/12.html

    Du kannst versuchen, den Look mittels den CSS Angaben
    -webkit-font-smoothing: antialiased;
    -webkit-font-smoothing: subpixel-antialiased;
    noch etwas zu beeinflussen.

  54. @8: „dunkle Gestalten im Neonlicht gestalten die Schriften, doch die Texte nicht..“ – (Frust kommt auf, denn die Lust kommt nicht.) frei nach Peter Fix. „Schwarz zu Blau“ (Berlin, Du kannst so hässlich sein oder.)

  55. @ Stefan: Apropos Oslog: wie sieht es denn mit den versprochenen und lange erwarteten Outtakes aus? Oder müsst Ihr die noch drehen ;-)

  57. Vorweg: Es folgt keine Problemlösung.

    Ich verstehe nicht so richtig, warum Du jetzt die Notwendigkeit gesehen hast, die Grafik-Überschriften abzuschaffen. Das hat doch immer bestens funktioniert. Dass es jetzt diese Google Webfonts API gibt, finde ich noch keinen hinreichenden Grund, optische Schäden in Kauf zu nehmen. Zumal es beim Webdesign auch immer ein Ideal sein sollte, so wenig Bausteine wie möglich aus der eigenen Hand (sprich: Server) zu geben. Auch wegen dem Datenschutz™, aber da sowieso Google Analytics benutzt wird, ist das hier egal.

    Wo Du gerade schon an der Website rumbastelst: Wie wäre es, mal die JPEG-Artefakte im Rattelschneck-Cartoon auf der Startseite zu eliminieren? Dagegen sehen die neuen Überschriften klasse aus :-)

  58. @ajo: Ja, eine Notwendigkeit gab es nicht, das zu ändern. Nur die Verlockung, weil es jetzt einen richtigen Weg gibt, Schriften einzubauen. (Hm. Überzeugt mich plötzlich selbst nicht mehr.)

    Und beim Rattelschneck-Cartoon wär’s natürlich toll, wenn ich das Original wiederfände. Ich such mal!

  59. Für Ignoranten wie mich, die in ihren Browser-Einstellungen „immer meine Schriftart benutzen“ oder so ähnlich eingestellt haben (bei mir. z. B. mit Camino unter MacOS 10.6.3), hat sich natürlich eine Menge geändert, aber nicht nach Deinem Sinn.

    Statt der „kaputten“ oder „zerfaserten“ Schrift kommt nun z. B. klares, sauberes, langweiliges Arial (für leicht Sehbehinderte wie mich aber besser lesbar). Und von dieser Sorte wird’s wohl noch mehr geben, also bloß nicht zuviel Mühe auf ein Debugging verwenden, das ohnehin viele nicht würdigen können.

  60. @33 Stefan: Klar war mein Hinweis auf das MS-Cleartype-Tool eher als Kommentar-Mehrwert für die Windows-Lemminge unter deinen Lesern denn als Tipp für dich gedacht. Auch damit das Flattrn (*Krätze²*) bei diesem Artikel irgendwie doch Sinn ergibt.

    Übrigens ist mir das mit deiner neuen Schrifteinbettung tatsächlich aufgefallen. Die Überschriften hatten beim ersten Laden nach der Umstellung wohl ein ziemlich verzögertes Ladeverhalten. Das hab ich _zufällig_ bemerkt und musste nach einem „Markiertest“ verwundert feststellen, dass deine Überschriften nun keine Grafiken mehr sind.

    Ich würde meine Webseite übrigens nicht für solchen Firlefanz noch weiter von externen Anbietern abhängig machen.

  62. @61: Verwendest du NoScript oder blockst du Zugriffe auf googleusercontent.com? (Oder verwendest du gar noch Firefox 3.0?)

  63. Das von einigen Postern erwähnte Hinting spielt eine Rolle, ist in diesem Falle aber nicht die Ursache, da Safari es ohnehin nicht berücksichtigt …

    Es ist eben doch das Hinting. Deswegen ist Stefan ja auf seinem MacBook zufrieden und auf seinem PC nicht. Auf dem Mac spielt dieses Hinting nämlich eine sehr untergeordnete Rolle.

    Sowohl die ClearType- als auch die Quartz-Rendering-Methode unter Mac OS X sind übrigens beides Subpixel-Renderingmethoden, allerdings mit dem Unterschied dass Windows genau an die Auflösung und das Raster des Monitors hält, bleibt Mac OS X möglichst nah am ursprünglichen Schriftdesign. Die Schriften wirken daher bei letzterem im Gegensatz zur Microsoft-Methode etwas verschwommen, geben aber das ursprüngliche Schriftdesign originalgetreu wieder. Was das bessere Ergebnis ist hängt sehr von der Schrift, von der Schriftgröße, aber auch vom individuellen Nutzerempfinden ab.

    Übrigens finde ich es super, dass es Leute wie Stefan gibt, die neue Technologien sofort ausprobieren, als auf alten Krückenlösungen zu beharren. Solche Fortschritte sind allerdings immer mit einem persönlichen Lernprozess verbunden, sollten aber gerade aus diesem Grund nicht vermieden werden. Falls es interessiert, hier gibt es eine Linksammlung, die hervorragende Beispiele bereithält von Websites, die bereits auf die neuen Webfonts vertrauen.

  64. @Ivo „Design is not enough“ (Sandy Kaltenborn, http://www.image-shift.net) Trotzdem danke für die Linkliste, sind ein paar schöne Beispiele dabei. Werd mir das in Zukunft auch mal angucken.

    @Stefan Die Schrift ist jetzt „endlich“ auch auf meinem Mac fett. Scheint funktioniert zu haben!?

  66. Windows-User werden normalerweise nicht wissen, wie es auf Apple-Computer aussieht. Und umgekehrt. Ich finde, es sieht auf beiden ganz gut aus, die Unterschiede sind zwar offensichtlich, aber nicht entstellend.

  67. @all
    Die einzigst vernünftige weil zielführende Antwort war bis dato die 12. Wenn man bereit ist etwas Geld in die Hand zu nehmen, ist typekit eine wirklich Runde Sache.
    Ansonsten würe ich mal in Cufon (oder zur Not auch die „ältere Alternative“ sFIR 2.0) reinschauen, die rendern OS / Browser Übergreifend sehr, sehr schön.

    @30
    Ja, das ist nun wirklich ein Problem. Vielleicht kannst du bei Apple einen extra Obolus bezahlen?

  68. Die Schriftart _soll_ angeknabbert aussehen? Na dann ist die Darstellung auf Windows doch perfekt. Auf dem Mac-Screenshot sieht die Schrift alles andere als angeknabbert aus.

  69. Als Google seine Webfonts veröffentlicht hat, dachte ich mir auch: Spitze! endlich!
    Aber das Nachladen von Schriftarten funktioniert im IE eher suboptimal. Unter Windows XP mit IE6 (beim Kunden) ist ClearType per Default deaktiviert. Die Schriften sehen katastrophal aus. Der IE hat keinerlei Kantenglättung. Selbst wenn ClearType im System aktiviert wird, ist das Ergebnis im Browser eher suboptimal.
    Unter http://catcubed.com/2010/05/20/comparing-open-source-fonts-part-2/ gibt’s einen Vergleich der Google Fonts unter verschiedenen Windows-Systemen.
    Bis Windows XP, IE6 und IE7 verschwunden sind (wird wohl noch ein paar Wochen gehen) habe ich mein Fonts-Projekt auf Eis gelegt.

  70. @ivo:
    Umgekehrt wird ein Schuh draus: das fehlende Hinting führt zu einer schwereren Schriftdarstellung in Safari. Sehe nicht, inwiefern meine Aussage Deiner widerspricht ;-)

  71. Lustig, bei mir auf dem Macbook pro (MacOS 10.6.3) bekomme ich mit den zwei Beispielbildern und der Seite in zwei Browsern (Safari 4.0.5, Firefox 3.6.3) insgesamt vier verschiedene Rendering-Ergebnisse. Wobei aber die beiden in den Browsern dem PC-Beispielbild deutlich ähnlicher sind als dem Mac-Beispiel. So fett wird bei mir nicht gerendert.
    Dies nur zur Info …

  72. Wer Windows, insb. Xp und IE 6 verwendet, der legt doch offenbar eh keinen gesteigerten Wert auf letzte Worte in Sachen Schrift.

    Ich verwende übrigens auch Linux/Firefox und finde die Schrift schön, darf aber dazusagen, daß ich alle Webseiten in deutlich vergrößerter Schrift anschaue, was beim Firefox mit Ctrl- ja leicht machbar ist, zumal er sich erinnert, auf welcher Domain man wie groß unterwegs war. Ein sehr relaxtes Lesen. :)

  73. Ich war zwar zu Beginn meines Daseins hier über die unübliche Verwendung einer Überschrift als Grafik verwundert, sehe aber nach der kürzlichen Änderung (die ich sofort bemerkt habe) die Vorteile, da sie auf allen Systemen, mit denen ich arbeite, ein gleiches Bild produziert.

    Jetzt ist es mal eine große, mal ein kleine glatte Schrift, die bieder und langweilig im Vergleich zur freundlich-fusseligen Ursprungschrift wirkt. Von daher wäre mir der Weg zurück zur Grafik sehr recht.

    Und Redesign – nein, die Seite ist ein Kleinod in ihrer kargen Aufgeräumtheit, das geht nicht zu verbessern.

  75. Hallihallo,

    ich glaube dem Content-Anbieter im Netz bieten sich drei Alternativen:

    1. Das neue WebFont-System wird genutzt und mit der Zeit etabliert, wodurch auch ein einheitliches Hinting-System in Webbrowsern entstehen kann (etwa auf Basis der freien FreeType-Bibliothek) – denn es ist mir eigentlich nicht klar, warum ein Browser die Schriftdarstellungsmechanismen des Betriebssystems übernehmen müsste; sollte das Szenario nicht eintreten: Hinnehmen, dass SubPixel-Rendering, Anti-Aliasing und Hinting unterschiedliche Ergebnisse liefern – und die Wahl dem Nutzer überlassen.

    2. Die alte Variante mit den vorgerenderten Überschriften (auf die SubPixel-Rendering/AntiAliasing/Hinting keinen Einfluss haben) wird weiter verwendet und erst dann auf WebFonts gewechselt, wenn davon ausgegangen werden kann, dass alle Betrachter die Überschriften gleich dargestellt bekommen (also: nie).

    3. Man begeht einen Rückschritt in die Internet-Steinzeit und knallt dem Nutzer eine Betrachter-Empfehlung (»Best viewed with Firefox 3.6.3 running Windows XP Professional with activated ClearType technology«) vor den Latz.

    Meiner Ansicht nach ist Variante 1 die sinnvollste weil am ehesten zukunftsorientiert. Und ich finde es uneingeschränkt gut, dass diese Seite (und auch das Oslog) vorne mit dabei ist (sind), wenn es um die Einführung solcher Neuerungen geht.

    Beste Grüße
    bela.d

  76. Hi,

    bei mir auf dem PC sieht die Schriftart nicht sonderlich abgemagert aus. Gerade richtig für einen Freefont ;)

    Gruß,
    Johanna

  78. Noch eine schlechte Nachricht, Stefan: Auf dem iPad (Safari) fehlen deinen
    Überschriften Umlaute und das ß … eine Eigenschaft, die bei free fonts häufiger vorkommt. Die Zeichen sind zwar im Font enthalten, aber falsch codiert (und nicht getestet).

  81. @Jürgen Siebert: Mhm, mein erster Reflex wäre ja zu sagen „diverse Rendering-Engines schaffen es, die Umlaute darzustellen, da wird der Fehler wohl bei der iPad-Engine liegen“.
    Da ich selber schon mit Fontforge rumgespielt habe, würde mich natürlich interessieren, an welcher Stelle das Problem liegt: In FePIrm27C.otf ist das ß laut Fontforge als U+00DF (LATIN SMALL LETTER SHARP S) encodiert, Fontforge beschwert sich auch nicht beim Öffnen des Fonts. In der Axel-Regular erscheint das ß genauso.

    Wo liegt denn das Problem? Bzw. warum können die anderen Engines korrekt damit umgehen?

  82. Falls es was hilft:

    Ich bin mit XP Pro, Opera 10.53 unterwegs. Ich habe auch die dünne Schrift, aber während die Seite lädt, erscheint die Schrift für den Bruchteil einer Sekunde so fett wie beabsichtigt.

  83. @Simon: Fehlende Umlaute unter iPhone OS bei WebFonts sind ein bekanntes Problem: http://blog.typekit.com/2010/04/09/typekit-now-supports-fonts-for-the-ipad/

    Die OTF-Version hat damit nichts zu tun, beim SVG-Export (oder Rendern?) geht etwas schief. Google und Typekit haben sich aber gesagt: Umlaute kaputt? Egal! („we’ve noticed a few of our SVG fonts don’t include the full character set. This does not occur in the OTF, WOFF, or EOT versions of our fonts, and we’re tracking down the problem with SVG conversion now. We’ll update those fonts as soon as we can, but we felt that getting these fonts out sooner was better.“)

    Als Ad-hoc-Workaround habe ich dann eben eine Browser-Weiche (!) für iPad & co. eingebaut. Hat ja auch was Nostalgisches…

  84. „Innere Reichsparteitage“ in sehr hübscher Schrift, das habe ich wirklich gern. Mit solchen Schriften sagt man gerne Autobahn. Nur wie sieht das mit der Interoperabilität aus bei Schoönschriftdiktatur im Netz aus?

  85. Bei mir werden die Überschriften jetzt in der Times angezeigt.
    Ähem – für mich ist das ein klarer Fortschritt. Die zerhäckselte Schrift in den Überschriften hat mich hier immer verwirrt. Den neuen (anscheinend auch zerhäckselten) Font sehe ich nicht ;-) (ich verwende aber auch mit Absicht eine nicht ganz aktuelle Browserversion FF 3.0.19)
    Hier noch – für den, den es interessiert – ein Link zu einem ziemlich guten Vortrag zur Darstellung von Schriften im Web:
    http://vimeo.com/8920532

  86. Ziemlich angefressen!

    Nein, nicht ich, die Schrift.

    Hab allerdings Cleartype immer aus, da es auf LCDs oft lila Farbsäume produziert und Screenshots versaut.

    Und z.B. die graue Schrift da unlesbar macht:

    http://www.heise.de/tp/r4/artikel/32/32824/1.html

    Ist mir aber ziemlich egal, ob am Mac was anderes zu sehen ist als am PC. Solang der text sich nicht ändert…

  87. Ich hab die Lösung:

    1. Die Schrift ist, solange man’s lesen kann, piepegal.

    2. Alles andere als die von angeblichen Gestaltern verachteten Standardschriften macht mehr Ärger als es bringt.

    3. Mehr Artikel schreiben ist besser als an der Schrift rumzudrehen und sich die hämischen Kommentare von Apple- und Windows-Benutzern einzufangen.

  88. 3. Mehr Artikel schreiben ist besser als an der Schrift rumzudrehen und sich die hämischen Kommentare von Apple- und Windows-Benutzern einzufangen.

    Dafür gibt’s dann hämische Kommentare von Dauernörglern. Ob das so viel besser ist? *g*

  91. Nett, den FontShop versammelt zu finden. :)

    a) Zu #78: Free ist nicht gleich free. Igino’s Fell Type hat durchaus eine korrekte cmap table und das problem liegt woanders, wie in #81 und #83 bemerkt.

    b) Ivo, zu #63: „Es ist eben doch das Hinting. Deswegen ist Stefan ja auf seinem MacBook zufrieden und auf seinem PC nicht.“ Da widerlegt der zweite satz den ersten. Es ist eine sache des rasterizers der jeweiligen plattform. Wie Dein zweiter satz andeutet, kann Apples rasterizer auch ungehintete fonts lesbar darstellen. Wenn man Microsofts rasterizer als gottgegeben nimmt, mag man natürlich behaupten, daß im falle suboptimaler darstellung mit den fonts etwas nicht stimmt. Mit verweis auf Apples beispiel kann man jedoch durchaus auf dem standpunkt stehen, daß Microsofts rasterizer verbesserungswürdig sind.

    Ich verstehe ja, daß Ihr, mit einigen gehinteten fonts im gepäck, gern die werbungtrommel rührt. Aber bitte a) bei den fakten bleiben und b) nicht die wirklichkeit dem angebot gemäß verdrehen. Von verbesserten rasterizern würden wir alle profitieren. Bildhaft ausgedrückt: Wenn sich ein problem dadurch lösen läßt, daß einer eine schraube nachjustiert, ist mir unverständlich, daß sich viele geradezu darum reißen, viele schrauben nachzujustieren, wie momentan zu beobachten.

    Die frage, bei der man tatsächlich unterschiedlicher meinung sein kann, ist die der bevorzugten methode des rasterns. Graustufen- bzw subpixeldarstellung ist ohnehin standard. Die frage ist, ob man buchstabenkonturen aufs pixelgatter zurren will oder ob man buchstabenkonturen, wie alle anderen graphischen elemente auch, rastert „wie sie fallen“.

Comments are closed.