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