Lesen im Web

Anders als beim Lesen eines Buches, werden beim Lesen im Internet Texte meist nur kurz mit dem Auge abgescannt oder überflogen. Erst dann entscheidet der Leser, ob er sich länger auf einer Webseite aufhält oder einen Blog-Artikel vollständig lesen möchte.

Dieses Abscannen von Texten wird beim Lesen auf mobilen Geräten sogar noch verstärkt. Hier sitzt der Leser meist nicht konzentriert am Schreibtisch, wie bei der Nutzung eines Desktop-Computers. Ein Smartphone oder Tablet nutzt man vor allem in der Freizeit oder unterwegs, und dort ist man noch schneller abgelenkt oder unaufmerksam.

Lesen erleichtern

Daher sollte man es seinen Lesern nicht noch unnötig schwer machen, lange Texte zu lesen. Durch das Auflockern von längeren Texten kann das Auge entlastet und die Aufmerksamkeit und der Spaß beim Lesen gesteigert werden. Hier ein paar Tipps, um lange Texte spannender und angenehm lesbar zu gestalten.

1. Ausreichende Schriftgröße

Als erstes sollte man auf eine ausreichende Schriftgröße achten. Eine kleine Schriftgröße für Fließtexte sieht zwar schick aus, strengt aber das Auge beim Lesen unnötig an. Besonders längere Texte werden unangenehm zu lesen. Schlimmstenfalls bricht der Leser den Text sogar komplett ab.

Eine angenehme Schriftgröße vs. eine zu kleine Schriftgröße (Neue Helvetica, Roman 55, 16px und 13px)

Die Größe der Schrift fällt bei jeder Schriftart etwas anders aus. Als Richtlinie kann man aber von einer Fließtext-Schrift ausgehen, die mindestens 16 Pixel haben sollte. Ein geniales Tool zum Abmessen von Schriftgrößen im Browser ist »What the Font« (als Bookmarklet, Chrome oder Safari Browser-Extension).

2. Lange Texte in kurze Abschnitte gliedern

Bei langen Texten ist es ideal, diesen in kürzere Absätze zu unterteilen. Bei Web-Texten kann man diese Technik noch viel intensiver betreiben, als bei Print-Texten. So kann der Leser auch beim flüchtigen Überlesen eines Textes Anhaltspunkte finden und verliert sich nicht in einem langen, zähen Textfluss.

Beim Setzen von Textabschnitten solltest du immer darauf achten, das der Texte auch inhaltlich logisch getrennt wird. Eine willkürliche Trennung (z.B. nachdem der Text bereits fertig geschrieben ist), macht natürlich weniger Sinn.

3. Textabschnitte durch Überschriften trennen

Eine weitere Gliederung deines Textes kannst du durch das Setzen von Überschriften erreichen. Der Leser bekommt so eine Vorstellung, was ihn im nächsten Absatz zu erwarten ist. Wird ein Text nur flüchtig abgescannt, kann der Leser auch viel leichter mitten im Artikel mit dem Lesen beginnen, z.B. wenn ihn eine Überschrift besonders interessiert.

4. Gesamtbreite des Textes

Wichtig ist auch, dass die Gesamtbreite eines Textes nicht zu lang ist. Die ideale Breite hängt immer etwas von der Schriftgröße ab. In den meisten Fällen ist es aber nicht angenehm, wenn ein Text auf einem Desktop-Bildschirm breiter als 700-800 Pixel ist.

5. Mehrspaltigkeit

6. Listen

Ein weiteres tolles Tool zum Gliedern und Auflockern von Texten ist eine Liste. Listen lassen sich leicht überfliegen und sind angenehm zu lesen, da die einzelnen Punkte klar unterteilt sind. Einen langen Webtext durch eine (auch nur kurze) Auflistung zu unterbrechen ist ein hilfreiches Mittel, um einen Text aufzulockern.

• Listenelement 1
• Listenelement 2
• Listenelement 3
• Listenelement 4

7. Bilder

Bilder als auflockernde Elemente in einem langen Text zu nutzen, ist ebenfalls sehr effektiv. Bilder sind immer ein Hingucker und können daher einen Text für den Leser interessanter machen. Du solltest allerdings darauf achten, das du nicht zu viele Bilder in einem Text integrierst. Wenn der Textfluss zu stark unterbrochen wird, kann der Leser dem Text nicht mehr flüssig folgen und das Lesen des Textes wird anstrengend.

8. Zitate und Pullquotes

Wenn es inhaltlich Sinn macht, kannst du auch Zitate in einen Text einbinden. Diese Unterstreichen und Hinterlegen noch einmal die Botschaft deines Textes und bieten außerdem eine grafisch spannende Abwechslung zum normalen Standard-Fließtext.

Wenn du dich an die Form des Löffels erinnerst, mit dem du die Suppe gegessen hast, dann war es eine schlechte Form. Löffel und Letter sind Werkzeuge: das eine nimmt Nahrung aus der Schale, das andere nimmt Nahrung vom Papierblatt. Die Schrift muss so sein, dass der Leser sie nicht bemerkt…
Adrian Frutiger

Mit Pullquotes einen Textabsatz hervorheben

Mit einem Pullquote (auch Seitenansprache genannt) kannst du einen wichtigen, aussagekräftigen Text-Absatz oder Satz deines Textes noch einmal hervorheben und den Leser so auf deinen Inhalt neugierig machen. Im Gegensatz zum Zitat wird der Text beim Pullquote doppelt angezeigt, einmal hervorgehoben und dann noch einmal ganz normal im Fließtext.

9. Text auf Hintergrundflächen

Ähnlich wie bei einem Zitat oder Pullquote kannst du wichtige Textabschnitte auch durch einen farbigen Hintergrund hervorheben. Dies kann z.B. eine bestimmte Info sein oder eine Auflistung.

Damit der hervorgehobene Text als etwas besonderes im Text hervorsticht, solltest du den Text in der Fläche aber nicht zu lang werden lassen.

Deine Vorschläge zur Text-Optimierung

Fallen dir noch weitere typografische Elemente ein, um einen langen Text aufzulockern und attraktiver zum Lesen zu machen? Über dein Feedback und weitere Tipps freue ich mich sehr.

1. Was sind Google Web Fonts?

Mit den Google Web Fonts hast du die Möglichkeit eine ganze Reihe von Schriften auf deiner Webseite zu nutzen, ohne dass du diese auf deinen eigenen Server hochladen oder über ein @font-face Kit (z.B. von Fontsquirrel) selbst aufwendig einbinden musst.

Du musst lediglich, die für dein Design benötigten Schriften und Schriftstile über einen Code-Schnipsel einbinden (hier die Erklärung zur Verwendung der Google Fonts). Sobald deine Webseite aufgerufen wird, werden die Schriften dann über den Google-Server geladen. Mit Hilfe des von Google und Typekit (dem derzeit größten Anbieter einer kostenpflichtigen Web Font Library) entwickelten Web Font Loader (einer JavaScript-Bibliothek) kannst das Ladeverhalten deiner Schriften sogar noch gezielter beeinflussen.

Ein großer Vorteil von Web Fonts, besonders im Vergleich zur Verwendung von Images, ist die so verbesserte Ladezeit. Außerdem können mit den Web Fonts eine viel breitere Vielzahl von Schriften unkompliziert genutzt werden, und auch moderne CSS3-Eigenschaften (wie text-shadow oder gradients) können verwendet werden.

2. Neue Features im Google Font Directory

Um die Schriften im Google Font Directory zu sortieren, gibt es inzwischen die neuen, praktischen Filter-Optionen.

Du kannst die Schriften zum einen nach den Schriftklassen Serif, Sans-serif, Display (dekorative Fonts, besonders für Logos oder Überschriften geeignet) und Handwriting filtern.

Daneben gibt es noch die Möglichkeiten die Web Fonts alphabetisch, nach Einstellungsdatum, Trend, Beliebtheit und Anzahl von Schrift-Varianten zu sortieren.

Eine zusätzliche Option ist das Filtern nach kyrillischen, griechischen, Khmer und lateinischen Schriften. Mit einem kleinen, blauen Symbol in der Schriften-Liste sind die zur Verfügung stehenden Schriften auch noch einmal markiert.

Unter Download the Font in der Einzelansicht der Schriften findest du jetzt neben dem Download-Button auch noch einen Spenden-Button. Wenn du möchtest, kannst du den jeweiligen Font-Designer hier mit einer Spende unterstützen. Da alle Schriften im Google Fonts Directory kostenlose Schriften sind, ist dies für die Verwendung der Schrift aber nicht notwendig. Weiter Infos zur Spenden-Option findest du in den Google Fonts FAQs.

3. Die beliebtesten Google Web Fonts vorgestellt

Inzwischen sind schon eine ganze Reihe Web Fonts im Google Font Directory eingestellt. Daher möchte ich die beliebtesten Font hier etwas genauer vorstellen.

Ubuntu

- Die kostenlose Font-Familie des Open Source Betrieb-Systems Ubuntu.

Auch auf der Ubuntu-Webseite gibt es die Ubuntu-Schrift im Einsatz zu sehen.

The typeface is sans-serif, uses OpenType features and is manually hinted for clarity on desktop and mobile computing screens.

Seit Dezember 2010 kannst du auch die Ubuntu Schrift-Familie über die Google Font API nutzen. Ubuntu ist in den vier Varianten normal, italic, bold und bold italic verfügbar.

Droid Sans

- Eine beliebte serifenlose, fürs Web optimierte Schrift von Steve Matteson.

Droid Sans was designed with an upright stress, open forms and a neutral, yet friendly appearance.

Droid Sans ist die derzeit beliebteste Schrift der Google Web Fonts. Du kannst die Schrift in den Varianten normal und bold nutzen. Droid Sans ist extra für die Verwendung im Web entwickelt worden, und eignet sich besonders gut für Fließtexte.

Droid Serif

- Eine fürs Web optimierte, angenehm lesbare Serifen-Schrift designt von Steve Matterson.

The Droid Serif font family features a contemporary appearance and was designed for comfortable reading on screen.

Die Droid Serif gibt es in den Varianten normal, italic, bold und bold italic. Die angenehm lesbare Serifen-Schrift eignet sich besonders gut für Überschriften und Fließtexte von Webseiten.

Yanone Kaffeesatz

- Eine von Jan Gerner gestaltete Free-Font.

Its Bold is reminiscent of 1920s coffee house typography, while the rather thin fonts bridge the gap to present times.

Yanone Kaffeesatz eignet sich meiner Ansicht nach besonders für Webseiten-Slogans oder größere Überschriften. Die Schrift gibt es in den font-weights 200, 300, 400 und 700.

Vollkorn

- eine 2005 entwickelte Schrift des Typografen und Designers Friedrich Althausen.

It intends to be a quiet, modest and well working text face for bread and butter use. Unlike its examples in the book faces from the renaissance until today, it has dark and meaty serifs and a bouncing and healthy look.

Vollkorn ist eine Serifenschrift, die sich sowohl für den Fließtext, als auch für Überschriften sehr gut eignet. Es gibt die vier Schrift-Varianten normal, italic, bold und bold italic zur Auswahl. Auf der Webseite von Friedrich Althausen kannst du dir Vollkorn im Einsatz anschauen.

Natürlich sind diese Schriften nur eine kleine Auswahl, und deiner Kreativität sind bei der Verwendung der Google Web Fonts keine Grenzen gesetzt. Viele der Schriften, die zwar nicht unbedingt für Fließtexte geeignet sind, könnten zum Beispiel im Webseiten-Logo zum Einsatz kommen.

4. Nützlich Infos zur Verwendung der Google Fonts

Unterstützung mobiler Geräte

Alle Google Web Fonts unterstützen inzwischen die mobilen Geräte mit den Plattformen Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Weitere Infos zum Support der mobilen Geräte kannst du im Artikel »Web fonts go Mobile« auf dem Google Web Fonts Blog nachlesen.

Browser-Support

Natürlich werden die Web Fonts auch von allen modernen Browsern unterstützt:

- Chrome: 4.249.4+
- Firefox: 3.5+
- Safari: 3.1+
- Opera: 10.5+
- Internet Explorer: 6+
(Quelle: Google Web Fonts FAQs)

Fallback-Schrift im CSS bestimmen

Auf alle Fälle solltest du immer eine Fallback-Schrift in deinem Stylesheet angeben. Dazu kannst du neben Web-safe Fonts, wie Arial für eine Sans-serif Schrift, auch die allgemeingültigen CSS-Werte serif für eine Standard-Serifenschrift (Times New Roman, Georgia), sans-serif für eine standardmäßige serifenlose Schrift (Arial, Verdana) oder monospace für eine Schriftart, in der alle Buchstaben eine einheitliche Breite haben (Courier) nutzen.
(Quelle: W3C Editors Draft Fonts)

Den Web Fonts Loader nutzen

Was in dem kurzen Moment des Ladens der Web Fonts in den Browsern angezeigt wird (nur bei einer sehr langsamen Internet-Verbindung sichtbar), ist nicht einheitlich geregelt. In Safari und Chrome werden leere Zeichen angezeigt, Firefox lädt dagegen erst die angegebene Fallback-Schrift hoch, und wechselt diese zur Google Web Fonts, sobald das Laden abgeschlossen ist.

Um diesen Vorgang besser beeinflussen zu können, kannst du die JavaScript-Bibliothek Web Font Loader nutzen. Eine ausführliche Anleitung zur Verwendung des Scripts mit Anwendungsbeispiel findest du in der Google Font API Dokumentation.

5. Weitere hilfreiche Ressourcen

• Auf der Google Font API FAQ-Seite kannst du alles über Browser und mobile Support, Open Source, Webseiten-Performance und vieles weitere nachlesen.
• Der Google Web Fonts Blog bietet die neusten Infos zu Updates und News der Google Fonts.
• Der Google Font API, Getting Started Guide bietet einen umfangreichen Einstieg in die Nutzung der Google Web Fonts.
• Eine hilfreiche Übersicht über die verschiedenen Anbieter von Webfonts (kostenlos und kostenpflichtig) im Artikel »Webfont Services: Eine Bestandsaufnahme« von Fontwerk.

Wie gefallen dir die bisher integrierten Schriften der Google Font API? Hast du weitere Tipps oder Fragen zur Verwendung der Web Fonts, und wie schätzt du das Angebot der Google Web Fonts im Vergleich zu kostenpflichtigen Anbietern wie z.B. Typekit ein? Über dein Feedback freue ich mich sehr!

1. Logo Inspirationen für Typografie-Fans

Es gibt jede Menge kreative Beispiele für eine minimalistische, nur mit Typografie umgesetzte Logo-Gestaltung. Wichtig ist bei der Gestaltung darauf zu achten, dass die Auswahl der Schriftarten passend zum Stil der Webseite gewählt ist.

Jon Tan

Mal ganz abgesehen davon, dass John Tan sein Webseiten-Logo wunderschön und mit viel Kreativität gestaltet hat, ist auch die Umsetzung nur mit CSS sehr interessant. Über seine Gedanken und auftretende Probleme bei der Logo-Umsetzung schreibt der Webdesigner in seinem Artikel »Complex Type: CSS Fix, ClearType Miss«.

Manchester Craft Mafia

Das Logo von Manchester Craft Mafia ist durch das Zusammenlegen von geometrischen Flächen erstellt. Mich hat diese Vorgehensweise sofort an das chinesische Tangram-Spiel erinnert. Durch die frischen, bunten Farben wirkt das Logo freundlich und kreativ.

Finch

Finch (engl. für Fink) ist die Webseite von Designer Francisco Inchauste. Das Logo ist nicht nur sehr groß, sondern durch die moderne, warme, geschwungene Typografie sehr charaktervoll. Interessant gelöst ist die Verknüpfung der zwei Buchstaben c und h.

Image Mechanics

Das minimalistische Logo von Image Mechanics ist nur mit den Initialen »im« umgesetzt. Der geschwungene Bogen vom i-Punkt zum m macht das Logo zu etwas Besonderem.

Brand New Conference

Ein kreatives Webseiten-Logo hat auch die von Under Consideration veranstaltete Konferenz »Brand New Conference«. Die Farben sind sehr harmonisch gewählt, und die Schrift ist lediglich mit Formen und schmalen Trennstrichen umgesetzt.

Infin Vision

Das Logo der Webseite Infin Vision wird durch die Mischung unterschiedlicher Schriftarten und Größenverhältnissen interessant. Durch die dezente Verwendung von Farbe wird ein Highlight gesetzt.

Tokyo Digital

Das Logo von Tokyo Digital ist sehr minimalistisch mit einer geometrischen, serifenlosen Schrift gestaltet, und ein schönes Beispiel für eine schlichtes, kreatives Typografie-Logo.

WHIT

Was mit Schrift alles möglich ist, zeigt die Umsetzung auf der Webseite der Modedesignerin Whitney Pozgay. Die aktuelle Kollektion der Designerin ist im i des Logos WHIT eingebunden, und kann als Slide-Show angeschaut werden.

I am Tiago

Der portugiesische Webdesigner Tiago Sá hat sein Webseiten-Logo »I am Tiago« in einem fetten, charakterstarken Schriftzug umgesetzt. Die Buchstaben berühren sich fast alle, und das t läuft sogar in das i hinein.

Airside

Für das Logo des Kreativbüros Airside wurde eine serifenlose, geradlinige Schriftart schräg angeschnitten. An den oberen und unteren Enden des Logos sind auch die Buchstaben angeschnitten. Das Logo funktioniert auf hellem und dunklem Hintergrund.

Grandpeople

Bei Grandpeople werden Buchstaben des Logos übereinander gesetzt, so dass ein interessantes, grafisches Bild aus dem Schriftzug entsteht. Bei Hover ist die Schrift animiert, und wechselt langsam von Schwarz auf Grau.

nGen Works

Die Kreativagentur nGen Works verwendet eine dominante, schräg gestellte Slabserifen-Schrift als Logo. Auf der roten, ebenfalls schrägen Hintergrund-Fläche kommt das weise Logo gut zur Geltung. Spannendes Details sind die ausgeschnittenen Elemente zwischen gn und rk.

Typejockeys

Typejockeys verwendet eine geschwungene, an Kalligrafie erinnernde Typografie im Logo. In Kombination mit der recht dezenten Webseiten-Gestaltung wirkt das Logo aber dennoch modern und bildet einen erfrischenden Kontrast.

DANZK

Das Logo der von chopeh gestalteten Webseite DANZK arbeitet mit fehlenden Buchstaben-Elementen und reduziert die Schrift auf ihr Minimum. Besonders interessant sind das N und das Z gelöst, da beide Buchstaben das gleiche obere Element nutzen.

Zachary Pulman

Ein klassisches, aber dennoch modernes Logo sind die Initialen ZP von Zachary Pulman. Die beiden Serifen-Buchstaben laufen ineinander und bilden so eine eigenständige, neue Form.

2. Tipps zum kreativen Umgang mit Schriften im Logo

Gerade bei der Gestaltung eines Logos, das nur mit Typografie funktionieren soll, ist es oftmals schwer eine kreative Lösung zu finden. Daher habe ich einige hilfreiche Tipps und Anregungen für den Umgang mit Schrift im Logo zusammen gestellt.

• Unterschiedliche Schriftgrößen
  Besonders wenn du mehrere Wörter oder einen Logo-Slogan für die Gestaltung zur Verfügung hast, bietet es sich an mit unterschiedlichen Schriftgrößen zu spielen. So kannst du Gewichtung auf ein Wort legen, und gleichzeitig spannende optische Kontraste schaffen.
• Mehrere Zeilen verwenden
  Ein weiteres wichtiges Stilmittel ist es, den Logotext in mehrere Zeilen zu unterteilen. So kannst du langen Text besser zusammenfassen und ein spannendes Logo-Bild schaffen.
• Serifen und serifenlose Schrift
  Durch die Kombination unterschiedlicher Schrift-Schnitte schaffst du spannende Kontraste für dein Logo. Wählst du beispielsweise eine eher klassische Serifenschrift für dein Logo, kannst du durch einen serifenlosen Logo-Slogan in einer kleinen Schriftgröße eine moderne Komponente schaffen.
• Groß- und Kleinschreibung
  Ebenfalls spannende Kontraste kannst du durch die Kombination zwischen Groß- und Kleinschreibung schaffen. Oftmals bietet es sich z.B. an, einen Logo-Slogan zwar in einer kleinen Schriftgröße zu setzen, dafür aber die Schrift in Versalien zu setzen.
• Farbe verwenden
  Natürlich muss ein Typografisches Logo nicht Schwarz Weiss sein. Mit der Wahl einer passenden Farbkombination oder Signalfarbe kannst du dein Logo aufpeppen.
• Buchstaben bearbeiten
  Wenn man kreativ mit Typografie umgeht, entdeckt man oft neue Formen oder Bilder in einem Schriftzug. Gerade für ein Logo bietet es sich an, einzelne Buchstaben zu bearbeiten, und so z.B. ineinander fließen zu lassen oder eine neue Form aus einem Buchstaben oder einem Wort entstehen zu lassen. Wichtig ist beim Umgang mit Schrift aber meiner Meinung nach immer, dass man es nicht mit der Bearbeitung übertreibt. Der Charakter einer Schrift sollte immer beibehalten werden. Ein dezente Bearbeitung hat meist eine größere Wirkung.

3. Verschiedene Methoden, um ein Logo auf deiner Webseite einzubinden

Natürlich kannst du für dein Logo nur Websafe-Fonts verwenden. (auf der Webseite Typetester kannst du verschiedene Websafe-Fonts testen). Doch wenn dir diese begrenzten Optionen für die Umsetzung deines Logos nicht ausreichen, gibt es jede Menge Lösungen, um ein typografisches Logo auf deiner Webseite einzubinden.

Images verwenden

Vor allem wenn du deine Schriften bearbeitest hast, und unterschiedliche Nicht Websafe-Fonts für dein Logo verwendest, ist es wohl immer noch am einfachsten ein Image von deinem Logo zu erstellen und dieses einzubinden. Der Schriftzug ist dann zwar im Quellcode nicht einlesbar, aber du kannst dein Webseiten-Seiten Name immer noch über das title- und alt-Attribut im HTML-Code angeben.

Google Webfonts

Eine noch recht neue Option ist die Verwendung von Schriften aus dem Google Font Directory. Hier hast du derzeit eine Auswahl von fast 30 Schriften, von denen sich einige sehr gut für die Logo-Gestaltung eignen. Im Artikel »Die kostenlosen Webfonts der Google Font API nutzen« findest du eine praktische Anleitung zur Verwendung der Google-Schriften.

@font-face

Eine weitere Möglichkeit kreative Schriftarten auf deiner Webseite zu verwenden, ist die @font-face Methode. Auf der Webseite Fontsquirrel kannst du dir etliche Free-Fonts bereits fertig vorbereitet für die @font-face Einbindung herunterladen.

Typekit (kostenpflichtig)

Wahre Typografie-Fans können auch in Erwägung ziehen, den kostenpflichtigen Dienst von Typekit zu nutzen. Für eine Gebühr von ca. 25-50$ im Jahr (eine kleine private Version gibt es auch zur kostenlosen Probenutzung) kannst du verschiedene Schriftarten für die Verwendung auf deiner Webseite nutzen. Natürlich lohnt sich dieser Dienst eher, wenn du neben dem Logo auch noch weitere Schriften der Typekit-Library auf deiner Webseite nutzen möchtest.

Noch ein Tipp: das Lettering jQuery-Plugin

Ein spezielles Feature, das eventuell für das ein oder andere Typografie-Logo in Frage kommt, ist das Lettering- jQuery-Plugin, mit dem du einzelne Buchstaben deines Logos animieren kannst. Auf der Webseite des Plugins kannst du den Effekt ausprobieren, und ein Showcase mit Beispielen anschauen. Auf der Webseite des Entwicklers Dave Rupert findest du eine Anleitung zur Nutzung des Plugins.

Wie gefallen dir Logos, die nur mit Schrift umgesetzt sind? Kennst du weitere kreative Beispiele oder hast du noch mehr Ratschläge, auf was man bei der typografischen Logo-Gestaltung achten sollte? Über dein Feedback und deine Tipps freue ich mich sehr!

1. Die Google Fonts auf deiner Webseite nutzen

Eine Übersicht aller derzeit zur Verfügung stehenden Schriften kannst du dir im Google Font Directory anschauen.

Im Font Directory findest du alle Google Webfonts in der Übersicht.

Die Verwendung der Google Fonts hat den großen Vorteil, dass du deine Schriften nicht mehr aufwendig umwandeln und einbinden musst, wie das z.B. bei der @font-face Methode nötig ist. Außerdem musst du die Schriften auch nicht mehr auf deinem eigenen Server laden, sondern sie werden direkt von Google aufgerufen. In deinem Stylesheet bestimmst du dann die Schriften wie gewohnt, z.B. mit font-family: ›Droid Sans‹, serif;

Für das Einbetten deiner Schriften musst du lediglich eine Code-Zeile als erstes Element unterhalb des head-tags deiner Webseite, oder über @import in deinem eigenen Stylesheet aufrufen. Den benötigen Code kannst du dir am einfachsten über die Google Font Directory erstellen.

1.1. Code im head-tag

Dazu klickst du deine gewünschte Schrift im Google Font Directory an, und wählst im Tab-Menü »Get the Code« (neben dem Code zum Einbetten findest du hier auch noch jede Menge nützliche Infos zur Schrift). Wichtig ist, hier gleich die Varianten deiner Schrift zu bestimmen, wenn du z.B. auch Bold- oder Italic-Styles auf deiner Webseite benötigst.

Alle Infos inklusive dem Code für die DroidSans in der Google Font Directory.

Den Code-Schnipsel fügst du dann in die erste Zeile deines head-tags ein. Für Die Verwendung von DroidSans Regular und Bold ist der Code zum Beispiel:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin' rel='stylesheet' type='text/css'>

Möchtest du auf einer Webseite verschiedene Schriften der Google Font API nutzen, kannst du diese gemeinsam aufrufen. Jeden Font-Name trennst du lediglich mit einem Trennstrich |. Für die Verwendung der DroidSans und der DroidSerif nutzt du also den Code-Schnipsel:

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|Droid+Serif:regular,bold,bolditalic&subset=latin' rel='stylesheet' type='text/css'>

1.2. Code mit @import in deinem Stylesheet

Möchtest du deine Fonts lieber mit @import in deinem Stylesheet aufrufen, kannst du den Code hierfür unter dem Punkt »Advanced Techniques« in der Code-Beschreibung finden. Für die DroidSans ist dieser z.B.:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold&subset=latin);

Die @import-Methode solltest du allerdings nur in deinem Haupt-Stylesheet nutzen, da es sonst Probleme mit der Schriftansicht im Internet Explorer gibt.

1.3. Den WebFont Loader nutzen

Als weitere Möglichkeit kannst du deine Schriften auch mit Hilfe von JavaScript über den WebFont Loader einbetten. Den Code und eine ausführliche Beschreibung zu dieser Option findest du ebenfalls unter »Advanced Techniques«.

Außerdem kannst du dir hier auch deine Webfont im .ttf Format auf deinen Computer herunterladen, um dein Webdesign in einem Grafikprogramm oder in Photoshop anzulegen.

2. Google-Schriften im Font Previewer testen

Eine weitere praktische Option zum Testen der Google Webfonts in verschiedenen Browsern ist der Font Previewer.

Du kannst jede der Google Webfonts auswählen, und einen eigenen Text im Textfeld eingeben. Über die Schrift-Einstellungen links im Menü kannst du dann Varianten der Schrift testen, und dir den passenden CSS-Code für dein Stylesheet zusammen stellen.

3. Weitere Tipps

Möchtest du die Verwaltung deiner Google Fonts im WordPress Admin-Bereich vornehmen, kannst du auch das WordPress Plugin »WP Google Fonts« verwenden. So kannst du deine Google Fonts schnell austauschen oder anpassen.

Auf dem Google Web Font Blog findest du im Artikel »Optimizing the Use of the Google Font API« jede Menge hilfreiche Tipps für die Nutzung der Google Fonts.

Eine ausführliche Beschreibung mit Beispielen und Tipps kannst du auch im Beitrag »A Guide to Google Font API« bei Six Revisions nachlesen.

Wie gefällt dir die Option, deine Schriften über die Google Font API aufzurufen? Hast du bereits Erfahrungen mit der Verwendung der Google Fonts gemacht? Über dein Feedback und weitere Tipps zur Nutzung freue ich mich sehr!

1. Girly Style und Bakery Logos

Der Girly-Style ist vor allem bei Bäckerei- und Café Logos sehr beliebt. Pastellfarben, Muffins und Schriften mit dünnen, oft geschwungenen Linien im Art Deco-Stil passen super zu diesem Trend.

Logo Inspirationen

Passende Free-Fonts für Logos im Girly-Style

2. Asiatische Logos

Asiatisches Design ist immer sehr stilvoll. Als Schrift für dein Logo im Asia-Style kannst du z.B. eine Schrift mit kalligrafischem Pinselstrich oder eine ganz minimalistische, serifenlose Schrift verwenden.

Logo Inspirationen

Passende Schriften für Logos im asiatischen Stil

3. Futuristisch, minimalistische Logos

Für ein Logo im futuristischen Computer-Stil eignet sich eine dünne, serifenlose Schriften besonders gut. Oft wird hier auch komplett auf Großbuchstaben verzichtet.

Logo Inspirationen

Passende Free-Fonts für futuristische Logos

4. Bubble Style Logos

Der Bubble-Style ist spätestens mit den Logos von Twitter und Skype zum Kult geworden. Die Wirkung ist der Logos ist modern mit einer netten, freundlichen nicht zu kühlen Komponente. Kein Wunder das dieser Stil im Web so beliebt ist.

Logo Inspirationen

Kostenlose Schriften im Bubble Style

6. Retro und klassische Logos

Immer wieder schön sind klassische Logos mit einem modernen, zeitlosen Twist. Für den klassischen Stil findest du jede Menge wunderschöne Free Fonts, meist passen Serifen-Schriften am besten.

Logo Inspirationen

Passende Schriften für den klassischen Logo-Stil

Wie gefallen dir die Logos und Schriften? Kennst du weitere schöne Free-Fonts, die zu diesen Logo-Stilen sehr gut passen würden? Über deine Tipps und dein Feedback freue ich mich sehr!

1. I Love Typography

Auf dem Blog I Love Typography erfährst du alles, was du je über Typografie wissen wolltest. Es gibt regelmäßig Interviews, Bücher-Empfehlungen, Infos zu neuen Schriften und vieles mehr.

2. Typographica

Auf der Webseite Typographica werden neue Schriften und Bücher zum Thema Typografie besprochen.

3. Slanted

Slanted ist ein deutscher Blog und Print-Magazin mit jeder Menge Infos über Typografie, Design und Illustration.

4. Ministry of Type

Ein toller Blog mit wunderbarer Typo-Inspiration.

5. Typophile

Die Typophile-Webseite bietet News, ein TypoWiki und ein tolles Forum, indem du dich mit Gleichgesinnten Typo-Fans austauschen kannst.

6. TypoJungle

TypoJungle ist eine tolle Ressourcenquelle rund um Typografie und Design. Es werden auch neue Bücher und Ausstellungen vorgestellt.

7. we love typography

we love typography ist ebenfalls eine Inspirations-Seite mit vielen Fotos, Typografie- und Designarbeiten.

8. Typography Served

Typography Served bietet eine inspiriernende Sammlung kreativer typografischer Arbeiten.

9. typo/graphic posters

typo/graphic posters stellt jede Menge kreative Posterdesigns vor.

10. Type for you

Ein weiterer Blog mit tolles Insights zum Thema Typografie.

11. Free Typography

Der Blog stellt die besten Free Fonts vor. Eine tolle Ressource!

12. TYPEinspire

Jede Menge Inspiration für Schrift und Typography findest du auch auf der Ressoucenseite TYPEinspire.

Kennst du weitere inspirierende Webseiten zum Thema Typografie? Dann schreibe mir doch einfach einen Kommentar. Ich freue mich auf deine Tipps!

1. wp Typography

wp Typography ist ein »Must have Plugin« für alle Typo-Liebhaber! Das Plugin ermöglicht Silbentrennung in zahlreichen Sprachen, erleichtert den Umgang mit Sonderzeichen, und ermöglicht es Absätze und Spalten genauer zu definieren.

2. WP Cufon

Die Verwendung von Non-Websafe Fonts ist zur Zeit DER Renner im Webdesign. Mit dem WP Cufon Plugin wird es zum Kinderspiel Cufon auf deine WordPress-Seite zu integrieren, um so alternative Schriften zu nutzen.

3. WP sIFR

Möchtest du sIFR für die Verwendung Nicht-Websicheren Schriften verwenden? Mit dem WP sIFR-Plugin kannst du so ziemlich alle sIFR-Funktionen direkt von deinem WordPress Adminbereich einstellen, und so ganz bequem die verschiedensten Schriften auf deiner Webseite integrieren.

4. Any Font

Mit dem Any Font-Plugin kannst du jede beliebige True Type oder OpenType Schrift laden, und diese z.B. als Überschriften mit Hilfe von Image Replacement auf deiner WordPress-Seite verwenden.

5. Facelift Image Replacment (FLIR)

FLIR ersetzt mit Hilfe von JavaScript deine Schriften durch Bilder, welche du direkt im Adminbereich von WordPress erstellen kannst. Und etliche Free-Fonts sind beim Plugin gleich schon mit dabei.

6. Font Burner Control Panel

Mit Fontburner kannst du ganz einfach über 1000 Fonts von der Fontburner-Webseite nutzen, um sie auf deiner WordPress-Seite zum Einsatz zu bringen. Toll ist, dass du Farben und Größe deiner Fonts direkt im Admin-Panel anpassen kannst

7. Disable Auto Formatting

Das Plugin deaktiviert die Standard-Formatierung von WordPress.

8. Syntax Highlighter and Code Colorizer for WordPress

Mit diesem Plugin kannst du Code in deinen Artikeln anzeigen, was besonders für Tutorials sehr nützlich ist.

9. Simple Pull Quotes

Mit dem Simple Pull Quote-Plugin schaffst du ganz leicht, Zitate in deinem Blog besonders hervorheben.

10. WP Footnotes

Du benötigst oft Fußnoten für deine Blog-Artikel? Dann ist das WP Footnotes Plugin genau das Richtige für dich!

Kennst du noch weitere Plugins, die den Umgang mit Typografie und Schrift auf WordPress-Blogs verbessern? Dann schreibe mir doch deine Tipps in einem Kommentar. Ich freue mich auf dein Feedback!

1. CopyPasteCharacter

Eine tolle Seite und definitiv ein Browser-Lesezeichen wert, wenn du auf der Suche nach HTML-Codes für Sonderzeichen bist. Und wenn du ein wahrer Fan von Sonderzeichen bist, ist der CopyPasteCharacter-Kaffeebecher ja vielleicht sogar etwas für dich ;-)

2. What the Font

Du hast ein Schriftzug oder Logo im Netz gefunden und möchtest wissen, welche Typo verwendet wurde? Dann lade doch einfach bei »What the Font« ein Image hoch, und es wird dir eine Liste der möglichen Schriften angezeigt.

3. Typechart

Bei Typechart kannst du dir Web-Fonts in verschiedensten Styles ansehen, die Unterschiede zwischen der Ansicht auf Mac und Windows vergleichen, und den dazugehörigen CSS Code kopieren.

4. Fontstruct

Fontstruct ist ein kostenloser Online-Editor für Schriften. Deinen fertigen Schrift-Entwurf kannst du als TrueType-Font für Mac und Windows speichern.

5. TypeTester

Mit dem TypeTester kannst du bis zu drei Font-Styles parallel vergleichen. Du kannst aus einer Liste von Web-Safe, Windows und Mac-Fonts wählen und u.a. die Werte von Schriftgröße, Farbe und Hintergrund anpassen.

6. Fonttester

Fonttester ist ein praktisches Tool, um mehrspaltigen Text anzulegen. Du kannst etliche Schrift-Werte anpassen, und dir den CSS Code für deine Auswahl generieren lassen.

7. CSS Typeset

Ein super simples und übersichtlich gestaltetes Font-Tool, mit dem du schnell den passenden CSS Code für deine Styles generieren kannst.

8. Em Calculator

Du willst deine Schriftgrößen von Pixel in EM umwandeln? Dann ist dieses Tool dein neuer bester Freund ;-)

9. PxtoEM

Das praktische Online-Tool PxtoEM konvertiert dir jede Schriftgröße von Pixel zu EM und andersrum.

10. Blindtext Generator

Um dein Design-Layout oder dein Theme mit Blindtext zu füllen, kannst du dir die passenden Texte mit dem Blindtext Generator erstellen.

11. Lorem Ipsum Generator Chrome Extension

Und falls du mit Google Chrome arbeitest, ist die Lorem Ipsum Generator Extension ein toller Tipp.

12. HTML Ipsum

Wenn du Blindtext direkt in deinen Code einfügen möchtest, kannst du dir bei HTML Ipsum bereits fertig generierte Texte kopieren.

13. Color Contrast Checker

Mit diesem Tool kannst du herausfinden, wie gut eine bestimmte Text- und Hintergrundfarbe miteinander harmonieren, und ob sich der Text genügend vom Hintergrund absetzt.

14. STC fontBrowser

Der STC fontBrowser ist ein geniales Tool um Schriften miteinander zu vergleichen, die du auf deinem Computer installiert hast.

15. CSSTXT

Ein weiteres hilfreiches Online-Tool, um den CSS Code deiner Schriftauswahl online zu generieren.

Wie gefallen dir diese Font-Tools für Webdesigner? Arbeitest du selbst mit den Tools, oder kennst du weitere hilfreiche Webseiten für Typografie und Schrift? Ich freue mich schon auf deine Tipps!

1. Chunk Five

2. Charis SIL

3. Charrington

4. Tonky

5. Alexandria

6. Covington SC

7. Akenaten

8. Museo Slab

9. Orchidee

10. Love Ya Like a Sister

11. Kontrapunkt

12. Nadia Serif

13. Rough Rockys

14. Academic M54

15. Lifestyle Marker M54

Slab Serifen im Einsatz

Hier einige schöne Beispiele für die Verwendung von SlabSerifen im Webdesign.

1. Second And Park

2. Brookyn Fare

3. Jeroen Homan

Wie gefallen dir serifenbetonte Schriften im Webdesign? Kennst du weitere schöne Slab-Serfifen Fonts, die du unbedingt weiterempfehlen kannst? Dann schreibe mir doch einfach einen Kommentar, ich freue mich auf deine Nachricht!

1. Eraser

2. Idolwild

3. Sketchetica

4. Tinet

5. FFF Tusj

6. Journal

7. Little Days

8. Hand Test

9. Honey I stole your Font

10. Gorillaz

11. Sketchy Times

12. Mia’s Scribbling

13. Simon Script

14. Coert Schrift

15. April 16

16. Rodeo King

17. Rai

18. Brushed

19. Sketch Block

20. WC Roughtrad

Handmade Fonts im Einsatz

Und hier noch ein paar Inspirationsquellen, was sich mit Handmade-Schriften so alles anstellen lässt.

Kennst du noch weitere tolle Handmade Free Fonts oder inspirierende Webseiten im Handmade Style? Dann schreib doch einfach einen Kommentar, ich freue mich auf deine Tipps!