Webfont-Icons sind fester Bestandteil der meisten modernen Websites. Die vektorbasierten Grafiken sehen gut aus und haben gegenüber pixelbasierten Icons auch zahlreiche technische Vorteile. Webfont-Icons können beispielsweise stufenlos skaliert werden, sind auf jeder Art von Display gestochen scharf und lassen sich ohne großen Aufwand umfärben. In diesem Beitrag beschreiben wir, wie ihr einen individuellen Icon-Font erstellt und in eurer Website einsetzt.

Beitrag zu Ende lesen

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

Webfont-Anbieter ermöglichen es, Webfonts auf einfache und bequeme Weise in eine Website zu integrieren. Der große Vorteil ist, dass ihr die Schriften nicht kaufen, oder euch um das Lizenzmodell Gedanken machen müsst. Mittlerweile gibt es einige kostenfreie Anbieter für Open-Source-Schriften wie Google Fonts oder Adobe Edge Web Fonts. Wer auf der Suche nach hochwertigen Font-Klassikern ist, findet bei einem kommerziellen Anbieter wie Typekit den passenden Webfont. In diesem Beitrag zeigen wir euch, wie ihr die Web-Dienste nutzen und die Schriften auf eurer Website einbinden könnt. Beitrag zu Ende lesen

Wenn ihr einen Webfont selbst erstellt oder gekauft habt, könnt ihr ihn mit der CSS-Regel @font-face in eure Website einbetten. Websichere Schriften werden dann nur noch zur Sicherheit als Fallback-Font angegeben. In diesem Beitrag zeigen wir euch, wie das Einbinden eines Webfonts mittels @font-face funktioniert. Beitrag zu Ende lesen

Wer keine Systemschriften verwenden oder auf Webfont-Anbieter zurückgreifen möchte, kann selbst aus einer vorliegenden Desktop-Schrift einen Webfont erzeugen. In diesem Fall kann die Schrift sehr individuell für die Website ausgewählt werden. Allerdings solltet ihr in Bezug auf das Lizenzmodell der Ausgangsschrift einiges beachteten. Wie ihr mithilfe eines Webfont-Generators eine Schrift in das passende Dateiformat umwandelt, beschreiben wir in diesem Artikel. Beitrag zu Ende lesen

Wem Webdesign im Sinne von guter Gestaltung am Herzen liegt, der verzweifelte lange Zeit am eingeschränkten Schriftangebot. Eine ausgefallene Schriftart musste bisher meist in eine Grafik eingebettet werden. Das hat den Nachteil, dass Suchmaschinen den Text nicht lesen können. Mit der Entwicklung von Webfonts besteht die Möglichkeit, Schriften mittels CSS einzubinden, die nicht auf dem Computer des Anwenders installiert sein müssen. Die Auswahl an Schriften in der Webtypografie ist dadurch ähnlich umfangreich wie im Printdesign.

Beitrag zu Ende lesen

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