Webfonts

Mit der CSS-Technologie @font-face lassen sich Schriften in Form von Webfonts unkompliziert in eine Website einbinden. Den typografischen Möglichkeiten im Web sind somit kaum mehr Grenzen gesetzt.

Social Media Icons als Webfont und Vector

webfont-social-icons

Ich bin kein großer Fan von Artikeln, in denen Unmengen von Social Media Icons zum Download angeboten werden. Selbst wenn ein Icon-Set noch so schön gestaltet ist, so passt es in meinen Augen selten hundertprozentig ins Layout und muss häufig noch angepasst werden. Viel brauchbarer ist eine solide Ausgangsbasis, die sich schnell und einfach individualisieren lässt.
Mit JustVector Social Icons hat Alex Peattie nun genau diese Basis geschaffen und stellt 150 monochrome Social Icons als Vector und als Webfont (!) zur Verfügung.

Beitrag zu Ende lesen

Webfont-Bibliotheken im Vergleich

webfont-vergleich

Webfonts, bzw. die CSS-Technologie @font-face, ermöglichen es uns mittlerweile eine Vielzahl fantastischer Schriftarten in Websites zu verwenden. Auch dann, wenn der Besucher die Schrift selbst gar nicht auf seinem Computer oder Smartphone installiert hat. Besonders komfortabel ist der Einsatz so genannter Webfont-Bibliotheken wie beispielsweise der Google Font Directory. Die Schrift wird online gehosted und muss vom Webdesigner anschließend nur noch im Quellcode eingebunden werden.
Da die verschiedenen Schrift-Bibliotheken jedoch Unterschiede haben, und sich somit nicht für jedes Projekt gleich gut anbieten, wurde auf sprungmarker.de nun der ultimative Webfont-Vergleich veröffentlicht.
Sehr lesenswert - auch um sich einfach mal bewusst zu machen welche Unterschiede überhaupt existieren.

Beitrag zu Ende lesen

HTML-Texte an Pfad ausrichten: CSS3 Warp

pfadtext-css

In Photoshop und Illustrator ist die Funktion längst bekannt: zunächst wird ein Pfad erstellt, anschließend wird diesem Pfad ein Text zugewiesen um ihn in beliebigen Formen verlaufen zu lassen. Soll ein solches Design dann allerdings ins Web übertragen werden, so wird meist eine Grafik verwendet was natürlich zum Nachteil hat, dass der Text weder vergrößert noch markiert werden kann und darüber hinaus zusätzlich im Code versteckt werden muss um von Suchmaschinen indexierbar zu bleiben.
Mit CSS3-Funktionen und dem Online-Tool CSSWarp lassen sich diese Pfadtexte nun kinderleicht auch als Plain-Text in die eigene Website integrieren.

Beitrag zu Ende lesen

Kostenlose Webfonts im FontShop

webfonts

Vor rund einem Jahr veröffentlichte der FSI FontShop International anlässlich des Starts der FontFont-Web-Library eine Schriftsammlung mit über 1250 Fonts speziell für Webdesigner. Zum ersten Geburtstag dieses Events steht im FontShop nun eine Schrift von Neville Brody zum kostenlosen Download zur Verfügung. Natürlich als Webfont.

Beitrag zu Ende lesen

CSS: @font-face im Praxistest

css-font-face

Zu einem individuellem Layout gehört in den meisten Fällen auch eine individuelle Schriftart. Doch was tun, wenn diese allzu exotisch ist und es keine Hoffnung gibt, das sie jemals flächendeckend als Systemschrift installiert ist? Die CSS-Eigenschaft @font-face hilft hier weiter.

Bereits seit CSS2 gehört @font-face zum Standard. Aufgrund mangelnder Unterstützung seitens der Browser-Entwickler, mit Ausnahme des Microsoftschen Browsers, wurde die Eigenschaft in Version 2.1 jedoch wieder aus dem Standard herausgenommen. Umso mehr erfreut es mich jetzt natürlich, das ein breites Umdenken statt gefunden hat und @font-face in CSS3 ein Comeback feiert.

Beitrag zu Ende lesen

@font-face Bibliothek "Kernest"

kernest-logo-icon-webfonts

Vor kurzem habe ich über die neue Google Font Directory berichtet die mittels CSS-Eigenschaft @font-face den Einsatz von Schriften im Web um einiges erleichtert. Abgelegt werden die Fonts auf dem Google-Server und eingebunden über eine Mini-API.
Nun ist es leider so, dass bei Google bisher nur wenige Schriften zur Verfügung stehen was die praktische Idee (aktuell) noch wenig praktikabel macht. Hier kommt "Kernest" ins Spiel.

Beitrag zu Ende lesen

Web-Fonts mit Google Font Directory API

google-font-directory-logo-icon

Google hat einen neuen Online-Dienst namens Font-Directory Beta gestartet. Dieser Service ermöglicht es Webdesignern individuelle Schriftarten in Websites zu verwenden auch wenn diese nicht zu den wenigen systemübergreifenden Schriftarten gehören.
Schriften stellen im Internet leider nach wie vor ein echtes Problem in der Gestaltung dar. Der Grund liegt darin, dass eine Schriftart nur dann korrekt angezeigt wird sofern der Besucher den Font auch installiert hat. Ist dies nicht der Fall so wird eine alternative Schriftart geladen was zwangsläufig zu Fehldarstellungen führt.
Zwar bieten JavaScript- und Flash-basierte Lösungen wie Cufón oder sIFR eine passable Alternative aber Googles neue API verspricht über kurz oder lang ein echter Hit zu werden.
Ich habe das neue Tool einmal ausprobiert.

Beitrag zu Ende lesen