blog.marekventur.de

Ein netter Effekt, den ich auf html5boilerplate.com gefunden habe:

Der Effekt funktioniert (natürlich) nicht im Internet Explorer, aber wen stört das schon?

Hier der CSS-Code:

font-family: MolotRegular, Arial, sans-serif; /* Am besten eignet sich eine kantige Schriftart */
text-shadow: black 1px 1px 0px, #476871 2px 2px 0px, #476871 3px 3px 0px, #476871 4px 4px 0px, #476871 5px 5px 0px, #476871 6px 6px 0px, #476871 7px 7px 0px; /* Netter Trick, nicht? */
text-transform: uppercase; /* Verschandle nicht dein HTML mit Großbuchstaben */

Die Schrift ist übrigens auf FontSquirrel zu finden, aber passt bei dieser Lizenz bitte höllisch auf!

Bei der Suche nach frei verwendbaren Schriftarten verhält es sich ähnlich kompliziert wie bei Icons: Viele kann man zwar downloaden, darf sie dann aber nur unter einigen Bedingungen und oft nicht kommerziell einsetzten. Ich habe mir daher mal die Mühe gemacht und meine Linksammlung an guten Fontquellen zusammengefasst:

Google Font Directory
Hauptsächlich für die @font-face-Verwendung gedacht hostet Google seit kurzem eine immer größer werdende Menge an freien Schriftarten. Man kann nach dem Umfang der Glyphen filtern, die Schriften direkt im Browser testen oder direkt das passende Stylesheet für ein Webprojekt verlinken. Ein ZIP mit den (in der ersten Phase freigegebenen, also nicht mehr ganz aktuellen) Schriften als TTF findet ihr hier.

Font Squirrel
Momentan finden sich dort 622 freie Schriften. Zu jedem findet man die jeweilige Lizenz, es wird aber angegeben, dass alle “frei für kommerzielle Nutzung” sind. Sich trotzdem davon vor der Verwendung noch einmal selbst zu überzeugen kann natürlich nicht schaden. Wollt ihr die gefunden Schrift dann online einsetzten empfiehlt sich der geniale FontFace-Generator.

The league of moveable type
Hier finden sich nicht annähernd so viele Schriften wie bei den beiden vorhergehenden Seiten, dafür sind sie aber alle von bester Qualität – allein die Vorschaubilder machen Lust auf ein paar kreative Experimente.

Wer -wie ich- einen leichten(?) Faible für Schriften hat, der kommt beim Webdesign nicht mehr um @font-face herum. Google macht seit einigen Monaten die Sache mit Font Directory noch ein wenig leichter und besser indem es eine immer größer werdende Auswahl an freien Schriftarten auf ihren Servern hostet. Das hat (wie auch bei JS-Libraries via Google CDN) nicht nur den Vorteil, dass die Schriften immer aktuell sind und sie rasend schnell ausgeliefert werden, sondern auch dass die HTTP-Request auf eine fremde Domain verweisen und so von einigen älteren Browsern schneller dargestellt werden, da diese sich oft noch an die antiquierte Grenze von 2 parallelen Request pro Domain halten. Auch der Vorteil durch Caching sollte bei einem Anbieter wie Google nicht vergessen werden, den wer schon einmal auf einer Seite war, die Google Font Directory einsetzt, dessen Browser wird bei der nächsten Begegnung mit der Schriftart nur noch im Cache kramen.

Vor zwei Tagen fiel mir auf, dass Google das Directory weiter ausgebaut hat (es gibt jetzt wieder ein paar Schriften mehr und internationale Glyphen werden unterstützt) und dabei einen neuen Google-Dienst einsetzt der sich Moderator nennt. Moderator ist ein kostenloser, bisher werbefreier Dienst der ursprünglich nur intern verfügbar war, nun über App-Engine gehostet wird und es beliebigen Nutzern (mit und ohne Google Account) erlaubt, Vorschläge zu einem Thema abzugeben und über die Ideen anderer abzustimmen. Das ganze ist schön schlank gehalten, begrenzt Vorschläge auf 160 Zeichen länge (wohl damit die ganze Sache übersichtlich bleibt) und ist Google-typisch technisch auf einem hohen Niveau. Enstanden ist es übrigens während der 20% Arbeitszeit, die Google-Mitarbeiter für eigene Projekte aufwenden dürfen.

Während die bei Font Directory verlinkte Variante inzwischen einfrig genutzt wird um neue Schriften vorzuschlagen kann der Service “Moderator” an sich für beliebige Seiten verwendet werden. Der Dienst erlaubt es jedem einen eigene “Serie” zu erstellen und diese für eigene Projekte zu nutzten. Ambitioniert z.B. ist “Ask a world leader”, unter anderem mit Fragen an Angela Merkel.

PS: Als “Test” könnt ihr gerne meinen Vorschlag ein wenig hochvoten

UPDATE: Aus irgendeinem unerklärlichen Grund fehlen 4 Icons, die in dem Originalset dabei waren. Ich habe keine Lust, alles neu zu machen, also bleiben sie wohl noch eine Weile verschollen…

Ich habe mich vorgestern mal hingesetzt und das Iconset Raphaël (eigentlich als Beigabe für die JavaScript-Library RaphaëlJS gedacht) in einen @font-face-kompatiblen Webfont konvertiert. Das bedeutet, dass 120 Zeichen der Schriftart keine Buchstaben darstellen, sondern Symbole. Eingebunden werden diese dann via CSS (JavaScript ist nicht nötig) und ein wenig HTML:

<span class="icon">M</span> Send me an email!

Das ist zwar zugegebenerweise nicht semantisch korrekt oder besonders Barrierefrei (dazu hier eine Notiz von dem Pictos-Macher), macht das Einbinden aber ziemlich einfach, ist beliebig skalierbar und funktioniert in fast alle Browsern (Safari in iOS spielt komischerweise nicht mit). Einfärben geht intuitiv mit “color” und man kann beliebige CSS3-Effekt auf die Zeichen anwenden. Außerdem ist der gesamte Font relativ klein, 47kb reichen den meisten Browsern.

Die Idee dahinter ist nicht neu, als Vorbild kann Pictos gelten – die aber leider nicht kostenlos sind und sich somit für kleinere Projekte und zum Experimentieren disqualifizieren.

In natura zu bewundern ist das ganze hier. Dort könnt Ihr auch die Dateien (die wie die original Icons unter MIT stehen) runterladen und sie für eure Projekte verwenden.

Für alle, denen immer wieder auffällt, dass Text in Word hässlich aussieht, er aber angenehmer wirkt, sobald er als PDF gedruckt wurde, hier der Grund:

Microsofts “Feature” Clear Type sorgt für im Pixelraster angeordnete Glyphen, was jedoch nicht mit einer Schriftgrößendefinition in Punkten korreliert. Das Ergebnis sind unregelmäßige Abstände zwischen den Buchstaben, welche unbewusst (vor allen in langen Texten) als störend wahrgenommen werden. Adobe Reader hingegen verwendet Sub-Pixel-Rendering was zwar zu einem Unschärfe-Effekt führt, dafür aber gleichmäßiger wirkt.

(Dieses Bild wurde schamlos geklaut und hotgelinkt. Das Bild stammt auch aus dem oben verklinkten Artikel)

Googles newest attempt to make the web nicer has given us webdeveloper a great new resource to play with: Google Font Directory. It’s an easy way to spice up your site with some nice web fonts without having to worry about compatibility and licenses.

Google explicit states that the fonts can be used for other purposes but sadly does not offer a good-to-go-package with all fonts in it. So after trying to find a single zip-file somewhere on the web I’ve decided to do it myself.

Here you are: All Google Font Directory Fonts in one single zip-file.

Please remember to check first, whether your choosen font is readable at a given size.