Bei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus im neuesten Update der Adobe Creative Cloud verfügbar ist. Variable Fonts bieten eine Reihe neuer Möglichkeiten über die sich vor allem Webdesigner (aber nicht nur) freuen dürften. Im Typekit-Blog wurde bereits 2016 darüber berichtet und die neuen Features zusammengefasst.
Webfonts sind heutzutage eine Selbstverständlichkeit. Allerdings wird die Schrift von modernen Browsern so lange versteckt, bis sie komplett geladen ist. Mit der CSS-Eigenschaft font-display kann der Fallback- und Ladeprozess (FOIT, FOUT) von Webschriften ähnlich gestaltet werden wie mit JavaScript-basierten Lösungen. Allerdings ist dafür nur noch eine Codezeile nötig. Jeremy Wagener erklärt, wie font-display eingesetzt wird und welche Auswirkung die verschiedenen Werte haben.
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.
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.
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