Firefox 3.6 wird das neue WOFF-Webfont-Format unterstützen. Zunächst hat das zwar nur idealistischen Wert, weil andere Browser erst nachziehen müssen und es aktuell auch noch keine (mir bekannten) Tools gibt, um TTF- und OTF-Fonts in WOFF umzuwandeln, aber das dürfte nur eine Frage der Zeit sein.

Da WOFF mit Kompression arbeitet und auch sonst für die Verwendung von Fonts auf Websites konzipiert ist, sollte der Standard bald die derzeitigen Zwischenlösungen für Fonts auf Websites ablösen. Bis dahin wird man für die Einbindung von Fonts per @font-face wohl erst einmal weiterhin auf TTF- und OTF-Fonts zurückgreifen.

• Kommentare: 2

Tags: @font-face, fonts, OTF, TTF, WOFF

Heute nochmal ein Tutorial, das während meines Site-Redesigns entstanden ist: Wie setzt man eines der klassischen Typo-Elemente aus dem Print-Bereich in HTML/CSS um – nämlich Initiale, gerne auch mal Initialien genannt?

Bei meinem Redesign habe ich mich schnell für ein schwarz-grau-weißes Farbschema entschieden. Der Stil gefällt mir einfach sehr gut und hebt sich von dem bunten Einheitsgeflimmer im Web ab.

Um so wichtiger war mir, ein paar nicht auf Farbe basierende, optische Akzente zu setzen. Also mußte unter anderem ein Initial am Anfang jedes Blog-Beitrages her.

Um es kurz zu machen: Die Umsetzung ist ziemlich einfach, wenn man uralte Browser-Versionen ignoriert. Das ist hier problemlos möglich, weil auch in älteren Browsern der Text fehlerfrei angezeigt wird, nur eben dann ohne Initial. Für die Umsetzung spielen zwei CSS-Pseudoklassen eine Rolle, nämlich :first-letter und :first-child. Weiterlesen »

• Kommentare: None

Tags: :first-child, :first-letter, css, Initial

Die Zeit für individuelle Schriftarten im Web ist da! Jetzt, da Firefox 3.5, Safari ab 3.1 und Opera ab 10 den CSS3-Selektor @font-face unterstützen und Microsoft mit dem proprietäre Embedded Open Type Format (.eot) bereits seit Internet Explorer 5 in Spiel ist, gibt es kaum mehr einen Grund, Webfonts nicht zu verwenden.

Endlich ist Schluss mit dem Einheitslook aus Arial, Verdana, Helvetica und Times New Roman. Nicht, dass das schlechte Schriften wären, aber wenn alle Websites gleich aussehen, wünscht sich so mancher Kreativer etwas Abwechslung und ein individuelles Schriftbild.

Im neuen Design von ceterumcenseo.net musste also auf jeden Fall ein individueller Font für die Überschriften her. Ergebnis meiner Erfahrungen ist das folgende Tutorial, bei dem ich versucht habe, mich auf das Wesentliche zu konzentrieren, ohne auf zu viele Umwege und Varianten einzugehen. Ziel: Es soll einfach laufen, ohne eine Doktorarbeit daraus werden zu lassen. Weiterlesen »

• Kommentare: 7

Tags: @font-face, Embedded Open Type Format, EOT, fonts, Open Type Format, OTF, Schrift, Schriftart, Truetype, TTF, Webfonts, WEFT