Skip to content

Spaß mit Webfonts

In letzter Zeit hab ich mal wieder ein bißchen rumgesponnen und mir überlegt, was man nicht alles Sinnloses mit Webfonts anstellen könnte. Anstatt den Artikel zum Apostroph fertig zu machen, habe ich also zwei lustige Mini-Webfonts gebastelt:

Das erste CSS-Graffiti

Das erste CSS-Graffiti

Auf typefacts.com/graffiti kann man feinsten Skeuomorphismus bewundern: Ein Graffiti, das lediglich aus einem Webfont (mit dem sich nur das Wort »Style« setzen läßt) und CSS-Effekten besteht, ohne ein Bild. Nackt sieht die Seite so aus:

Der Text bleibt somit bei aller Effekthascherei noch durchsuch- und auswählbar. Und wofür das Ganze? Keine Ahnung. Aber bei 1000 Daumen hoch mal ich das Bild auf ne Wand!

Korrekte Anführungszeichen für Verdana

Nicht ganz so sinnlos, aber auch eine Spielerei: Quodana, der Webfont, der Verdanas falsche Anführungszeichen repariert.
Verdanas Anführungszeichen repariert

Das Anführungszeichen, das im Deutschen schließt und im Englischen öffnet, sollte einer »66« ähneln, siehe meinen Artikel zum Thema. Bei der System-Verdana ist das seit jeher ein Problem, denn das entsprechende Zeichen ist gespiegelt. Die letztes Jahr erschienene Verdana Pro enthält korrekte Anführungszeichen, die Systemschriften leider weiterhin nicht.

Mein kleiner Webfont enthält exakt zwei Zeichen: Die Anführungszeichen (einfach und doppelt), die in Verdana gespiegelt sind – nur eben richtig.
Im CSS kann man den Font einbinden und im Font-Stack vor Verdana stellen. Alle Zeichen, die Quodana nicht enthält (also alle außer den korrigierten Anführungszeichen) werden aus dem nächsten Font genommen, nämlich Verdana – voilà.

Als nächstes aber der Artikel zum Apostroph, versprochen. (Und mal wieder was zu gewinnen!)
Dranbleiben!

Kommentare (1) [abonnieren]

  1. 1 | Mario Wehner | 03.10.2012 19:38

    Also das Thema Webfonts beschäftigt mich die letzte Zeit auch sehr. Ich hab diesbezüglich neulich auch einen ausführlichen Beitrag zum Thema Open Type–Features verfasst. Zu finden auf meiner Webseite http://www.mwgestaltung.de und dann auf den Blog. Ich werde das Thema weiter verfolgen!

Kommentieren

Deine E-Mail-Adresse wird streng vertraulich behandelt.
Pflichtfelder sind mit rotem Sternchen (*) markiert.