Fontblog jetzt in Azuro … [Update]

… sowohl die Headlines als auch der Text. Mein Dank geht an Ivo, der sich eben mal kurz neben mich gesetzt hat. Bei der Beurteilung bitte beachten: Wir haben kein Fine-Tuning durch­ge­führt … sondern schlicht die FF Yoga und die Georgia ersetzt. Das ist natür­lich eine Kamikaze-Aktion, weil die Proportionen der Azuro (eine Sans-Serif) gewaltig von der Georgia (eine Serif) abwei­chen. Die Headlines sind noch zu groß (und noch nicht fett – das klappte eben nicht auf die Schnelle), der Grundtext ist eigent­lich auch einen Tick zu groß, der Grauton müsste neu einge­stellt werden.

Wer selbst Webseiten baut, weiß was da zu tun wäre und kann diese zur Beurteilung der Leserlichkeit von Azuro ausblenden. Hinter der Abbildung rechts befindet sich ein iPhone-Screenshot 1:1, 640 x 960 Pixel zur Begutachtung des mobilen Renderings, powered by Typekit.

[Update] Heute darf ich mit Stolz verkünden, dass ich für die Mikrotypografie des Fontblogs einen der besten CSSler und WordPress-Experten in diesem Land gewinnen konnte: Gerrit van Aaken (prae​gnanz​.de). Er hat gestern und heute eine Menge gefeilt und geschliffen, so dass diese Site in allen Browsern – zu Hause und unter­wegs – besser lesbar ist als je zuvor. Danke dafür.

Was genau hat sich verän­dert: Gerrit hat drei Schriftgrade fest­ge­legt, die unter allen Betriebssystemen ordent­lich aussehen: 21px für Headlines, 15px für Fließtext und 13 Pixel für Meta-Infos. Außerdem hat er die Randabstände über­prüft und zurecht­ge­rückt und das Aussehen und Verhalten von Hyperlinks nutzer­freund­li­cher und hübscher gestaltet, so dass es nicht nur gut aussieht, sondern sich auch etwas besser anfühlt. Schließlich erfolgten noch ein paar Korrekturen am Kontrast, zum Beispiel dunk­leres Hintergrundmuster und deut­li­chere Zebrastreifen in den Kommentaren.


41 Kommentare

  1. Carlos

    Äh… ja… viel­leicht gewöhnt man sich ja daran…

  2. Sami

    Im mobilen Safari sieht Azuro sogar gut aus, aber im „immo­bilen“ wirkt die irgendwie unor­dent­lich und grob.

  3. Gerrit van Aaken

    Grundtext zu groß? Um Gottes Willen! Der Grundtext muss noch deut­lich größer werden, um ange­nehm lesbar zu sein!

    (Nicht von der iPhone-Darstellung blenden lassen – da werden zu kleine Schriften auto­ma­tisch größer skaliert, als sie es eigent­lich wären.)

  4. Jens Tenhaeff

    Da mein Rechner gerade abge­baut ist (Renovierung) kann ich nur zur Darstellung auf dem iPad was sagen: Im Default view­port (also der Zoomstufe, die die Webseite vorgibt) ist die Schrift deut­lich zu klein und wirkt sehr krümelig. Wenn man auf Spaltenbreite zoomt ist die Lesbarkeit schon besser, der Gesamteindruck ist aber immer noch sehr unruhig. Die Schrift hat m.E. zu viel Charakter, um als Brotschrift auf niedrig aufge­lösten Bildschirmen zu funk­tio­nieren. Schön aber schwierig.

  5. Matthias

    Ich sehe da auch eher Potenzial nach oben (größere Schrift), keines­falls noch kleiner. Zumindest was die Darstellung am Bildschirm anbe­langt… Zur Orientierung viel­leicht The Brander.

  6. Chrs

    Hmm, kann es sein, dass das Hinting noch ausbau­fähig ist? Unter Windows wirkt die Schrift sowohl in Firefox als auch im IE stel­len­weise wie als wenn sie unscharf wäre. Also für die Schrift mit der besten Bildschirmlesbarkeit aller Zeiten halte die Azuro, aller Werbung zum Trotz, nicht.

  7. mrc

    Ich möchte mir wirk­lich nicht anmaßen ein Schriftexperte zu sein, aber auch ich teile die Ansicht, dass die Schrift noch sehr unruhig wirkt. Aber es wie oben erwähnt: es wird ja noch dran gear­beitet, ich bin gespannt. Noch finde ich das Ergebnis nicht überzeugend.

  8. Dave

    Kann man die Schrift nicht größer machen?
    (Wahnsinn … ich zitiere meine Kunden!)
    Ich stimme Gerrit und Matthias zu.

  9. charly

    lesbar­keit ist eine sache. und ich verstehe auch, dass ihr die neue azuro klarer­weise auch gleich hier einsetzen wollt. ich denke aber, dass die lesbar­keit nur ein aspekt für den einsatz einer schrift ist. gerade hier im font­blog hat die georgia sehr zur hoch­wer­tigen anmu­tung beigetragen. das leistet die azuro leider nicht.

    [nix gegen die azuro, ich hab sie mir gleich am ersten tag selbst gekauft, aber hier passt sie IMHO nicht]

  10. pistolero

    In firefox wird Azuro nicht geladen

  11. Marie

    Ich muss mich meinen Vorrednern anschließen – bin auch nicht begeis­tert. Mir ist das auch alles zu unruhig und „fuzzelig“, und den Fließtext bitte auf keinen Fall noch kleiner – eher größer! Entweder muss ich nur noch über­zeugt werden oder ich sage: Bitte wieder zurück zur alten Version!

  12. Gerrit van Aaken

    Technische Frage: Ihr habt die Azuro ja jetzt über Typekit einge­bunden, obwohl sie nicht offi­ziell im Angebot von Typekit ist. Kann ich als Käufer der Web-Variante das ebenso machen? Oder muss ich sogar die Web- und die Desktop-Variante kaufen, um das zu machen? Schließlich werden für Safari ja derzeit noch RAW-Fonts ausge­lie­fert, da Safari noch kein WOFF kann…

  13. Jürgen Siebert

    @Gerrit: Genau so ist es. Die Webfonts der Azuro werden auf Typekit gehostet. Wenn Du sie auf font​shop​.com erwirbst, können wir dir binnen weniger Sekunden einen Typekit-Voucher zustellen (mail@fontshop.de), der die 4 Schnitte mit nur einem Klick deinem Typekit-Konto hinzu­fügt … das ist sogar mir heute Morgen gelungen ;-)

    Die Office-Version der Azuro kann nicht auf Websites verwendet werden, weil sie
    + nicht bei Typekit gehostet wird
    + die Fonts tech­nisch für MS Office opti­miert wurden und deshalb
    + sehr groß sind (wegen rück­wärts­kom­pa­ti­blem Kerning und dgl.)
    + die Lizenz dies nicht gestattet

    Ausführliche tech­ni­sche Hintergründe in diesem Beitrag: https://​www​.font​blog​.de/​a​z​uro

  14. Gerrit van Aaken

    @Jürgen: Es genügt also, wenn ich die Webversion kaufe, um die volle Typekit-Umterstützung zu erhalten, richtig? (Abgesehen davon habe ich die Office-Version bereits gekauft…)

  15. Ben

    Die Größe der Schrift und die dezenten Headlines finde ich eigent­lich supergut. Ich würde da nicht mehr viel verändern.

  16. Jürgen Siebert

    @Gerrit: Ja, das genügt, wenn Du einen dazu passenden (bezahlten) Typekit-Plan hast, also keinen kosten­losen (nur 2 Fonts), falls Du alle 4 Schnitte einsetzen möchtest.

    Nicht von der iPhone-Darstellung blenden lassen – da werden zu kleine Schriften auto­ma­tisch größer skaliert, als sie es eigent­lich wären. 

    In genau diese Falle bin ich getappt … Danke für den Hinweis.

  17. Gerrit van Aaken

    @Jürgen: Blöd, wenn mail@fontshop.de nicht zustellbar ist … Wie mach ich das jetzt mit Typekit?

  18. Jakob

    Ich hab mal eine gegen­über­stel­lung gemacht wie das ganze bei mir am PC aussieht:
    http://​s7​.direc​tu​pload​.net/​i​m​a​g​e​s​/​1​1​0​5​2​7​/​4​t​3​h​c​s​i​n​.​jpg
    Links der Firefox, ohne Azuro, rechts Chrome, mit Azuro.
    Da bin ich ganz froh, dass es im Firefox noch aussieht wie bisher.

  19. Simon Wehr

    Erstmal: Toll, dass Ihr hier die Azuro mal einbindet! Ich hatte das neulich mal als Idee geäu­ßert und jetzt sehe ich die Idee umge­setzt, das finde ich super.
    Hier auf dem Safari finde ich die Schrift auch noch zu klein. Das Hinting scheint mir auch noch nicht perfekt. Ich fürchte auch, dass die Azuro mehr Platz braucht, um ihre schönen Formen auszu­spielen. Zu viel Charakter ist ein tref­fendes Argument.
    Insgesamt bekomme ich aber langsam Lust auf Azuro!

    PS: Die Unterstreichungen sind ewig weit weg von der Grundlinie. Ist das genau so gewollt? Ich finde es sieht nach einem Fehler aus.

  20. Jakob

    Ergänzung zu meinem vorigen Kommentar: mitt­ler­weile ist die Azuro auch im Firefox zu sehen, und wirkt dort deut­lich besser als im eben gepos­teten Screenshot vom Chrome.

  21. Gerrit van Aaken

    @Jakob: Mit komplett deak­ti­vierter Schriftglättung kann man jegli­ches Webfont-Treiben komplett vergessen. ClearType ist Voraussetzung, bei allen Schriften außer Arial, Verdana, Trebuchet, Times und Georgia

  22. sebastian nagel

    Zum Thema „lädt im Firefox nicht“: einmal cache leeren (cmd+R, cmd+shift+R, strg+F5, …) dann lädt sie.

  23. R::bert

    Ist es eigent­lich möglich über die Programmierung einer Webseite auszu­lesen, ob Cleartype akti­viert ist oder nicht?

  24. Jürgen Siebert

    Danke für die Auseinandersetzung mit Azuro … obwohl sie hier im Blog noch nicht fein­jus­tiert ist. Ich hatte mehr Missbilligung erwartet, weil solche Änderung oft aus purer Gewohnheit abge­lehnt werden.

  25. Florian

    Na das sieht doch wunderbar aus. Ich finde die Azuro macht soweit einen guten Job! Technisch 1A.
    Ob sie meinem „Schriftgeschmack“ trifft muss ich aber noch raus­finden, ich mag es ja gerne eher etwas rauher. Aber das sind ja nur Geschmäckliche Dinge.

    Finde ich übri­gens gut das ihr das mal so radikal in Angriff nehmt und kurzer­hand den kompletten Fontblog umstellt.

    Habt ihr noch -webkit-text-size-adjust: 100%; in eure CSS geschrieben? Hilft bei den Schrifgrößen im mobilen Safari.

    Florian

  26. Johannes

    Das Hinting ist wirk­lich sehr schlecht. Ich finde es schade, dass sie denn­noch als Screenfont ange­priesen wird.

  27. sebastian nagel

    @27: welches hinting denn? Unter winXP mit GDI+-Cleartype, würde ich sagen es ist „besseres Webfont-Niveau“ – keine Arial/Verdana/Georgia, aber näher da dran als an „wirk­lich sehr schlecht“.
    Auch unter OSX 10.5 ist es auf diesem Level, und vermut­lich dürfte es auch mit DirectWrite nicht schlecht aussehen.

  28. Chrs

    @28: Windows Vista, GDI, Cleartype: Sowohl in Firefox 4 als auch im IE 9 (jeweils mit abge­schal­teter Hardwarebeschleunigung aka DirectWrite) sieht die Azuro bei mir nicht toll aus, irgendwie unscharf, beispiels­weise das kleine „i“.

  29. R::bert

    Danke Ralf für diese wunderbar präzise Antwort! Du hast was gut bei mir ; )

  30. R::bert

    … darüber hinaus wurde der Absender dem Inhalt durch einen Bold-Schnitt über­ge­ordnet, die HTML-Schnipsel aufge­räumt und die Kommentar-Absender mit ins Azuro-Boot geholt. Sehr schön! Die Unterstreichung ist jetzt aller­dings ein Müh zu hoch gerutscht.
    Der Trend scheint bei Webfonts aber gene­rell zu mindes­tens 3 pt mehr in der Fließtextgröße zu gehen. Daran muss man sich wirk­lich erst gewöhnen. Die Generation 55-Plus hingegen wird sich sicher freuen!

  31. Jürgen Siebert

    Die Generation 55-Plus hingegen wird sich sicher freuen!

    Danke, Volltreffer ;-)

  32. Oliver Adam

    Sieht gut aus, die Unterstreichung finde ich zu dicht: Bei Jürgens Link durch­schneidet es das kleine g … Ansonsten schön :-)

  33. thomas junold

    ich finde, die azuro etwas arg eng in der metrik, da geht noch bissel mehr luft, die inter­punk­tionen beson­ders »!, ?« kleben förm­lich anein­ander. nichts gegen komapkte zeilen für möglichst viele wörter, aber das hier ist zu eng. 

    auf dem iPhone siehts besser aus. hier finde ich das maß von schrift­größe und zeilen­ab­stand noch nicht perfekt. geht eben doch nicht so »mal eben« eine schrift zu ersetzen. aber die rich­tung stimmt. :)

  34. Andreas

    Das größte Problem damit ist eindeutig der Ohrwurm, der mich bei jedem Besuch dieses Blogs jetzt auf’s Neue über­fällt. Die nächste Schrift also bitte einfach so nennen, vielen Dank. :D

  35. Paul S.

    Opera, XP, ClearType an. Die Azuro macht hier einen hervor­ra­genden Eindruck. Zudem sieht die Seite aufge­räumter aus.

  36. Ano Nym

    a) Ist das denn eigent­lich Datenschutztechnisch abge­klärt, dass diese Fremddatei einge­bunden wird?: use​.typekit​.com/​s​h​h​8​q​c​p​.js
    Immerhin wird die IP-Adresse des Besuchers an use​.typekit​.com übermittelt.

    b) Im Fließtext sehe ich weiterhin die Georgia. Mittels Webconsole kann ich keine Übertragung einer Schriftartdatei ausmachen.

  37. Ano Nym

    Nach einem Blick in http://​use​.typekit​.com/​s​h​h​8​q​c​p​.js muss die worst-prac­tices-Liste wohl erwei­tert werden. Es scheint sich um eine Browserweiche zu handeln. Muss das denn wiklich heute noch sein?

  38. Stefan

    Bei mir auf dem iphone und safari os x sehen alle buch­staben verschieden dick aus. Das kann es ja wohl nicht sein!

Kommentarfunktion ist deaktiviert.

<em>kursiv</em>   <strong>fett</strong>   <blockquote>Zitat</blockquote>
<a href="http://www…">Link</a>   <img src="http://bildadresse.jpg">