Artikel mit Tag fonts

05 Sep 2008 Schriftersetzung: FLIR

Eigentlich finde ich es ja immer noch ein wenig ärgerlich, dass hier im Blog die Überschriften z.B. in der Seitenleiste nur statisch durch Grafiken ersetzt werden. Die Grafiken, welche den Überschriftentext in einer schönen, nicht auf jedem Rechner installieren Schriftart enthalten, sind also genau so, wie sie benutzt werden, Teil des Templates, sie werden nicht dynamisch per Scripting auf dem Server generiert (was z.B. auch ein Grund ist, warum die Titel der Einträge nicht ersetzt werden – ich bin einfach zu faul, für jeden Eintrag eine seperate Titelüberschrift zu gimpen).

Nun gibt es verschiedene Ansätze, das dynamisch zu erledigen, welche alle irgendwelche mehr oder weniger subjektive Nachteile mit sich bringen (z.T. sind sie schlicht kompliziert einzurichten). Eine sehr simple Lösung, die noch dazu meiner Ansicht nach vertretbaren Code generiert, ist FLIR (FaceLift Image Replacement).

Müsste man allerdings zusätzlich vor Hotlinking schützen, denke ich - nicht unbedingt die generierten Bilder, aber das PHP-Script, welches die entscheidende Arbeit erledigt. Ich habe hier ein Beispiel vorliegen, wie man das über die .htaccess erledigt, indem man darauf prüft, ob der Referrer leer oder ungleich der eigenen Domain ist.

Frage an die stets wohlinformierte Gemeinde: Langt das? Ist das noch zeitgemäß oder gibt es was Schlaueres? (Ja, ich bin heute mal faul. Ich darf das, ich hab die Rüsselpest.)

Edit: Hmpf. Alles, was gut aussieht, hat einen Haken – so auch dieses. Für eine Überschrift wird hier auch immer eine Grafik generiert. Das ist natürlich suboptimal, zumal ich (bislang zumindest) keine Möglichkeit gefunden habe, den generierten Grafiken eine maximale Breite mitzugeben.

01 Jul 2008 Simple Image Replacement im Blog

Die Bastelei geht weiter …

Für die Überschriften der Seitenleisten kommt nun in diesem Template Simple Image Replacement nach der Methode von Mike Rundle zum Einsatz – der »Grunge«-Look schreit einfach danach. (Die verwendete Schrift ist übrigens die freie 3rd Man.)

Was ist Image Replacement? Dabei werden ausgewählte (X)HTML-Elemente durch (Hintergrund-)Bilder ersetzt, wobei die Struktur und Semantik des Dokumentes erhalten bleibt. Bilder bieten jedoch größere Freiheit in der Typographie.

Die Haken dieser Methode sind klar, bekannt und meines Erachtens den optischen Gewinn wert:

  • die Texte in den Bildern skalieren nicht
  • die Texte in den Bildern können nicht per copy & paste kopiert werden
  • schaltet der Besucher Bilder im Browser aus, CSS jedoch an, sieht er gar nichts

Zumindest die letzten beiden Punkte sind meines Erachtens in diesem speziellen Fall zudem zu vernachlässigen, da die Methode nur auf die Seitenleisten-Überschriften angewendet wird.

Weiter lesen →

13 Mai 2008 Font-Vergleich in Gnome

Wer in welcher Form auch immer gestaltet, kann eigentlich nicht genug Schriften installiert haben. Üblicherweise sammelt sich eine Wüste von (meist True-Type-)Schriften an, über die man ratzfatz den Überblick verliert und die noch dazu Etliches enthält, was sich verdammt ähnlich sieht.

Grundsätzlich bietet Gnomes Dateimanager nautilus eine Vorschau für Schriften, einerseits per Thumbnail direkt in nautilus, andererseits via Schriftanzeiger im Kontextmenü, der dann mehr als nur ein kleines und ein großes A anzeigt, sondern den berüchtigten Satz von Franz und seinem komplett verwahrlosten Taxi, mit dem er quer durch Bayern jagt. (Interessanterweise habe ich einen Kollegen namens Franz, der immer peinlichst auf die Sauberkeit seiner Droschke achtet.) Aber der Schriftanzeiger zeigt halt immer nur eine Schriftart an.

Hier kommt gnome-specimen ins Spiel – damit kann man mehrere Schriften im Beispielsatz (»Zwölf Boxkämpfer jagen Viktor quer über den großen Sylter Deich.« ist hier übrigens der Standardsatz. Ich kenne allerdings keinen Viktor.) in einstellbarer Schriftgröße untereinander darstellen und vergleichen. Nach der Installation unter Ubuntu im Anwendungen-Menü unter »Grafik« zu finden.