Nov 25 2009

Gut gemeint muss nicht richtig sein

fhu
Plakat: Programm der 21. Adventsmusik im Kerzenschein

Plakat: Programm der 21. Adventsmusik im Kerzenschein

Klar — hätte mir selbst auch auffallen können. Eine Wesensart der gebrochenen Schriften ist die unterschiedliche Darstellung des Kleinbuchstaben “s”: gerundet am Wortende, aber spitz als Binnen-S.

Und daran hatte ich nicht gedacht.

Hier falsche Darstellung:

Fraktur Adventsmusik: Falsch mit rundem Binnen-S

Fraktur Adventsmusik: Falsch mit rundem Binnen-S

…und so sollte es eigentlich sein:

Fraktur Adventsmusik: Richtig mit spitzem Binnen-S

Fraktur Adventsmusik: Richtig mit spitzem Binnen-S


Nov 19 2009

Blog hat neuen Header verpasst bekommen

fhu

Bei meinen Schrift-Spielereien der letzten Tage fiel mir auf, dass mein behelfsmässiger Header “rhabarbra” langsam out-of-date ist. Jetzt habe ich einen — wenigstens für die Startseite — entsprechenderen entworfen. Für die Folgeseiten muss ich mir noch was einfallen lassen.

Edit 10. Dezember 2009: Nun ist fast alles wieder beim Alten – die Schriftenspielereien nervten mich, da das komplette Layout überarbeitungswürdig aussah — Schriftgrössen und Durchschuss passten nicht mehr. Nach längeren Sichtung der umfangreichen CSS-Datei war es angenehmer, mich dem Ausgangszustand wieder anzunähern — samt Headergrafik.


Nov 19 2009

Ziel erreicht! Website sieht in jedem Browser anders aus ;-)

fhu

Beim Studium von AListApart stiess ich auf den Schriftendienst TypeKit. Dieser bietet an, dass mensch aus einer Vielzahl an hochwertigen Bildschirmschriften bekannter Foundrys welche in die eigene Website einbindet. Es gibt ein Trial-Paket — zwei Schriften für umsonst einbinden.

Gleich mal testen… Wobei, es sind Dutzende Schriften, die erst mal auf Tauglichkeit gescannt werden müssen. Aber nach ner Weile hatte ich die beiden raus, die ich einbinden wollte:

Meine TypeKit-Schriften: FF Nuvo Web Pro und Legitima

Meine TypeKit-Schriften: FF Nuvo Web Pro und Legitima

Gut. Dann gabs ein Stückchen Code, das in die header.php integriert werden muß (Aufruf zweier JavaScript-Dateien). Danach musste ich angeben, für welche CSS-Selektoren welche Schrift gelten soll; das habe ich quick & dirty gelöst — ich will ja nicht bis morgenheute um halb vier hier sitzen. So. Nun warten, bis das System die Eingaben gefressen und verarbeitet hat.

Chrome 4.x — ähm, das sagten sie schon — wird nicht so richtig unterstützt. Hier taucht statt der Legitima (Serifenschrift für Überschriften etc.) die Georgia als fallback-Lösung auf, und sonst ist fast alles beim Alten:

GoogleChrome - Blog mit Typekit

GoogleChrome - Blog mit Typekit

So, denn halt des Font-Designers Liebling — Safari 4.x. Wow, bestens, so soll es sein:

Apple Safari4 -- Blog mit TypeKit

Apple Safari4 -- Blog mit TypeKit

FireFox 3.5.x hat es auch nicht so mit der neuen Methode — er ignoriert sie komplett, und verwendet die originalen Schriften:

Firefox 3.5 -- Blog mit TypeKit

Firefox 3.5 -- Blog mit TypeKit

Der InternetExplorer 7 übernimmt in jedem Falle mal die Serifen-Schrift, bei der Brotschrift bin ich mir da nicht so sicher…

InternetExplorer7 -- Blog mit TypeKit

InternetExplorer7 -- Blog mit TypeKit

Mich hat es gewundert, dass es überhaupt irgendwo funktionierte, da die CSS-Datei nun vollgestopft ist mit sich widersprechenden Angaben — heute habe ich ja dauernd was Neues rangepfropft, ohne mal durchzujäten.

Aber in Safari siehts schon mal ganz nett aus!


Nov 18 2009

Neue Schriften braucht das LandInternet

fhu

Nein, nicht ganz. Ich stiess heute auf einen Artikel bei AListApart — “On Web Typography“. Dort wird dargestellt, dass moderne Browser mittels der CSS-Methode @font-face andere Schriften definieren können. Diese müssen auf dem Webserver als Schrift-Dateien vorliegen.

Nun tun sich neue Problemfelder auf:

  1. Welche Schriften passen zueinander? Sind die Schriften überhaupt bildschirmgeeignet?
  2. Darf mensch die Schrift überhaupt verwenden? Die meisten Schriften müssen lizensiert werden…

Mich hat die Sache interessiert und hab ein bisschen weiter gelesen. Bei FDI fonts.info stiess ich auf die Schrift Graublau Sans Web, die für nichtkommerziellen Einsatz frei verfügbar ist. Ich machte mich an die Arbeit und ludt die Schrift hoch, überarbeitete meine CSS.

Nada, nichts.

Das Beispiel-CSS nannte den Schrifttyp “Truetype“, obwohl die Schriften auf *.otf endeten, also “Opentype” sind.

Dreh,… schraub,… Immer noch nichts. Sowohl mein Chrome 4.0.x wie auch FF 3.5.x zeigten weiterhin “Times” an. Times? Das ist ja die absolute Fallback-Lösung, sowas aber auch!

Dann habe ich mir die Beispielseite nochmals genau angeschaut (diesmal unter Safari 4.x, wie dort angegeben)… Aua haua ha, … urgs, ich hab mich von diversen CSS3-Spielereien täuschen lassen, das ist ja gar nicht die Blaugrau, was meine beiden Lieblinge da anzeigen! Ei verbibsch!

Zurück zu AListApart. Dort wird auf einen fundierten Artikel zum Einsatz von @font-face verwiesen — Nice Web Type: “How to use CSS @font-face“.
Dieser verweist auf ein Online-Tool, @FontFaceGenerator, mit dem die ursprüngliche TTF-Datei in alle möglichen Formate umgewandelt werden kann — jeder Browser braucht was anderes, … grmbl …), die dabei erzeugten Dateien mit einer HTML-Beispielseite und neu generiertem CSS-Code zu einer ZIP-Datei zusammenpackt und mensch zuschickt.

So. Alle Schriften hochgeladen, CSS-Code eingebaut und… …es funktioniert!

Aber wie unterschiedlich die Darstellung ist: Firefox zeigt den Schriftschatten an:

ff35 ist besser??!? kann schon einiges von css3

ff35 ist besser??!? kann schon einiges von css3

Chrome nur die Schrift… Im IE werd ichs gleich mal überprüfen …