Als Webdesigner ist man immer auf der Suche nach geeigneten, schönen Free-Fonts für neue Webdesigns und dank kostenloser Schriften-Ressourcen wie den Google Webfonts werden die Möglichkeiten glücklicherweise auch immer vielseitiger. Die Zeiten in denen Georgia, Arial und Verdana im Web dominiert haben sind also endlich vorbei (nichts gegen diese Schriften, aber etwas mehr Vielseitigkeit ist doch wünschenswert). Als Inspirationsquelle für mehr typografische Vielfalt in deinen Webdesigns hier eine kleine Sammlung meiner derzeitigen Google Web-Font Favoriten.
Artikel der Kategorie ‘Webfonts’
CSS-Tipp: rem als Einheit für Schriftgröße nutzen
rem hat dieses mal nichts mit Musik zu tun, sondern es ist der Begriff der CSS3-Schriftgrößeneinheit rem (= root em) gemeint. rem verhält sich genauso wie em mit dem einzigen Unterschied, dass das sich der rem-Wert am Root-Element orientiert (also an der Schriftgröße, für body bzw. html), statt sich wie em an der Schriftgröße des jeweiligen Eltern-Elements zu orientieren. Weiterlesen
Typekit Webfonts nutzen: So funktioniert’s
Mit Hilfe des Typekit-Dienstes von Adobe kannst du eine riesige Auswahl hochwertiger Web-Schriften unkompliziert und Browser-kompatibel auf deiner Webseite verwenden. Typekit bietet damit eine Alternative für alle Typo-Fans, um mit Webfonts zu experimentieren und Alternativen zu den oft genutzten Standard-Schriften (wie Verdana oder Georiga) oder den kostenlosen Google Webfonts zu finden. Weiterlesen
Link-Tipp: Typekit Fonts Inspirationen
Webdesigner und Typo-Fan Daniel Eden hat mit “Just my Type” eine schöne Zusammenstellung verschiedener Typekit-Webfonts vorbereitet.
Da es bei Typekit inzwischen über 700 Schriften im Sortiment gibt kann es ab und an wirklich hilfreich sein, einige Schriften und Schrift-Kombinationen direkt auf einer Seite ansehen zu können. Zu jeder Schrift gibt es außerdem noch eine kleine Erklärung zum Charakter der Schrift, sowie ein Link zum Typekit-Verzeichnis. Eine gute Anlaufstelle also, wenn man sich wieder einmal nicht für eine bestimmte Schrift fürs nächste Webseiten-Projekt entscheiden kann.
Skalierbare, Retina-Display ready Icon Fonts für responsive Webdesigns
Icon Fonts sind eine spannende Alternative zur Verwendung von Bildern, um skalierbare, 100% scharfe Icons in einem responsive Webdesign umzusetzen. Das Icon Font Set “Font Awesome” bietet eine große Auswahl an Icons, ist leicht zu nutzen und kann frei für private und kommerzielle Projekte eingesetzt werden. Ich habe die Einbindung von “Font Awesome” vor ein paar Tagen getestet und meine Erfahrungen hier im Artikel zusammengefasst. Weiterlesen
Die Verwendung von Web Fonts über die Schriften-Bibliothek Typekit kurz erklärt
Wenn du ein Typografie-Fan bist, wünscht du dir bestimmt auch oft ein wenig mehr Möglichkeiten bei der Auswahl von Schriften für deine Webdesigns. Die Online Font-Library Typekit bietet eine praktische Lösung für dieses Problem. Über einen Abo-Service kannst du die bei Typekit verwalteten und gehosteten Schriften gegen eine Jahresgebühr nutzen und unkompliziert auf deinen Webseiten einsetzen. Es gibt auch ein kleines, kostenloses Paket von Typekit, so dass du das Angebot erst einmal unverbindlich testen kannst. Ich habe im folgenden Artikel kurz zusammengefasst, wie die Verwendung von Webfonts über Typekit funktioniert. Weiterlesen
Pixel, em oder Prozent – Welche Einheit ist für Schriftgrößen in CSS am besten geeignet?
Ich muss ganz ehrlich sagen, dass ich das Thema, welche Einheit für die Schriftgröße im CSS am besten geeignet ist, bisher immer ein wenig vernachlässigt hatte. Das liegt sicherlich daran, dass ich die Vorstellung von festen Größeneinheiten für ein Designlayout einfach nicht so leicht aus meinem Kopf bekommen habe. Erst durch die Auseinandersetzung mit dem Thema Responsive Webdesign (mehr Infos findest du z.B. in den Artikeln “Was können CSS3 Media Queries wirklich leisten?” und “Responsive Webdesign mit CSS3 Media Queries: So funktioniert’s”) habe ich mich intensiver mit den flexibleren Einheiten em und Prozent als Maßeinheit für Schriften beschäftigt. Weiterlesen
Kreative Web Typografie mit dem Lettering.js jQuery-Plugin
Wenn du gerne mit typografischen Elementen bei der Webseiten-Gestaltung arbeitest, hast du eventuell schon vom Lettering.js jQuery-Plugin gehört. Das Plugin wurde von Trent Walton und Dave Rupert entwickelt, um mit Hilfe von JavaScript mehr Kontrolle über die Darstellung einzelner Buchstaben, Worte eines Satzes oder Satz-Abschnitte im Webdesign zu gewinnen. Da mit Lettering.js tolle Typo-Effekte (bunte Logos, CSS-Animationen und Rotation einzelner Buchstaben) realisierbar sind, eignet sich die Verwendung vor allem im Webseiten-Logo, oder um einen Slogan-Text individuell zu gestalten.
Weiterlesen
English
Deutsch 