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.

Generierter CSS-Content mit :before und :after

CSS-Content mit :before und :after

Mit Hilfe der CSS-Selektoren :before und :after habt ihr die Möglichkeit vor- bzw. nach einem HTML-Element ein sog. Pseudoelement zu erzeugen. Das Pseudoelement kann wie ein ganz normales HTML-Element mit CSS gestaltet werden, taucht allerdings im HTML-Markup nicht auf. Aus diesem Grund heißt es auch Pseudoelement.
Damit das Pseudoelement entstehen kann, benötigt es zumindest formal einen Inhalt, der über die CSS-Eigenschaft content definiert wird. Die Eigenschaft muss vorhanden sein, sie kann jedoch leer bleiben. Das macht u.a. dann Sinn, wenn das Pseudoelement für Zierelemente eingesetzt wird.

Beitrag zu Ende lesen

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

Kerning und Ligaturen im Browser

ligaturen-css3

Webdesigner wurden lange Zeit bei der Wahl einer individuellen Schriftart und insbesondere im Bereich der Detailtypografie massiv eingeschränkt. Diese grauen Tage sind zwar noch nicht ganz vorbei, in letzter Zeit wurden jedoch einige Techniken entwickelt oder zumindest neu entdeckt die uns bei der Arbeit mit Schriften unterstützen. In erster Linie sind das die sog. Webfonts, die in den meisten Browsern ohne größere Schwierigkeiten verwendet werden können. Moderne Browser unterstützen neben Webfonts aber auch Ligaturen und Kerning.

Beitrag zu Ende lesen