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 ‘Typografie’
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
CSS-Eigenschaften für Schrift und Text
Es gibt eine ganze Reihe von CSS-Eigenschaften, um Schriften und Texte in CSS zu stylen und so die Lesbarkeit von Webtexten zu optimieren. Viele Eigenschaften nutzt man täglich, andere werden weniger häufig verwendet. Um eine praktische Übersicht zu schaffen, habe ich die wichtigsten CSS-Eigenschaften und Tipps für das Stylen von Schrift und Text zusammen gefasst. 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.
Große Typografie als neuer Trend im Webdesign
Lange Zeit galten kleine Schriften im Webdesign als besonders schick und elegant. Lesbarkeit und Usability mussten da einfach hinten anstehen. Doch mit der Weiterentwicklung von responsive Webdesign und dem neuen Fokus auf optimierte Nutzbarkeit auch auf mobilen Geräten, wird das Thema Schriftgröße derzeit von vielen Webdesignern neu überdacht und große Typografie entpuppt sich mehr und mehr zum absoluten Webdesign-Trend. Weiterlesen
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
Webtypografie-Tipp: Pull Quotes umsetzen
Ein Pull Quote (auch Seitenansprache genannt) ist ein praktisches typografisches Mittel, um den Inhalt eines Textes hervorzuheben und den Leser so auf den Text neugierig zu machen. Im Gegensatz zum Zitat (Block Quote) werden Pull Quotes rechts- oder linksbündig am Textrand platziert. Ein kurzer, für den Text besonders relevanter Satz oder Absatz, wird also noch einmal extra aus dem Text herausgezogen (daher “to pull”) und somit besonders betont.

Im Printbereich werden Pull Quotes häufiger verwendet. Doch auch im Web können Pull Quotes genutzt werden, um lange Texte spannender zu gestalten und die Botschaft eines Textes noch besser zu vermitteln. Für die Umsetzung von Pull Quotes kannst du ein individuelles CSS Styling anlegen. Falls du mit WordPress arbeitest, gibt es sogar praktische Plugins, mit denen sich Plull Quotes leicht umsetzen lassen. Weiterlesen
English
Deutsch 