Alle Artikel der Kategorie “Typografie

Kommentare 16

Google Webfonts in WordPress einbinden – so funktioniert’s

google-webfonts-thumb Google Webfonts sind eine tolle Möglichkeit das eigene Webdesign mit schöner und etwas individuellerer Typografie umzusetzen, ohne gleich auf eine kostenpflichtige Lösung zurückgreifen zu müssen. Um Google Webfonts in einem WordPress-Theme einzubinden sollte man, statt der auf der Google Webfonts-Seite empfohlenen Methode der direkten Einbindung innerhalb des head-tags oder der Einbindung über @import ins Stylesheet, auf jeden Fall die Einbindung über eine Funktion in der functions.php Datei nutzen.

Und so funktioniert’s

Im neuen Twenty Thirteen WordPress Standard-Theme wird die Lösung der Einbindung von Google Webfonts in der functions.php sehr schön umgesetzt. Um die Ladezeit der Schrift so gering wie möglich zu halten kann man sogar abfragen, ob die genutzte Schrift Sonderzeichen enthält oder nicht. So werden z.B. Sonderzeichen (wie ß oder ö, ä, ü) auch wirklich nur geladen, wenn sie auch benötigt werden.

Weiterlesen

Kommentare 16

Genericons: Eine kostenlose Icon Font für WordPress-Projekte

Es gibt inzwischen jede Menge Icon Fonts und in einem früheren Artikel habe ich bereits über die sehr beliebte Font Awesome Icon Font (eine Icon Font, die sich vor allem für Bootstrap-Projekte geeignet) berichtet.
genericons-icon-font-for-wordpress
Für unser nächstes WordPress-Theme haben wir uns für die Genericons Icon Font entschieden. Die Font besitzt zwar keine so riesige Icon-Auswahl, aber für die meisten WordPress-Projekte sind die Icons meiner Ansicht nach vollkommen ausreichend. Außerdem ist Genericons Font von Automattic (der Firma des WordPress-Gründers Matt Mullenweg) speziell für den Einsatz in WordPress-Themes entwickelt worden und hat eine Open Source GPL-Lizenz.

Weiterlesen

Kommentare 54

Meine Top 10 Google Webfonts für Webdesign-Projekte in 2013

Meine Top 10 Google Webfonts fuer 2013 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.

Weiterlesen

Kommentare 22

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 erklaert
Kommentare 21

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

Kommentare 3

Link-Tipp: Typekit Webfont Inspirationen

Link-Tipp: Typekit Fonts Inspirationen

Webdesigner und Typo-Fan Daniel Eden hat mit “Just my Type” eine schöne Zusammenstellung verschiedener Typekit-Webfonts vorbereitet.

Typekit Webfonts Inspiration

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.

Kommentare 20

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

Kommentare 18

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

Kommentare 19

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.

Pull Quotes im Webdesign umsetzen

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