kulturbanause blog


Hier findest Du Artikel, Tutorials, Downloads, Tipps, Hacks, Snippets und aktuelle Szene-News rund um illustratives Webdesign, Social Media und digitale Bildbearbeitung.



Webfonts
Hier siehst Du eine Übersicht aller Beiträge, die mit dem Stichwort "Webfonts" versehen wurden. Um nichts zu verpassen kannst du alle Beiträge zu diesem Stichwort per RSS-Feed abonnieren. Oder du nutzt den Feed mit allen Inhalten des Blogs.

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.

Diesen 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.

Diesen 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.

Diesen 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.

Diesen 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.

Diesen 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.

Diesen Beitrag zu Ende lesen