Typekit erklaert
Kommentare 15

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.

Über Typekit

Typekit ist ein kostenpflichtiger Premium-Dienst. Die Kosten für die Nutzung der bei Typekit zur Verfügung stehenden Schriften richtet sich danach, auf wie vielen Webseiten du Typekit-Schriften einsetzen möchtest und wie viele Seitenaufrufe im Monat (Pageviews/month) deine Webseite hat. In den meisten Fällen wird der Personal- oder der Portfolio-Plan (für 25 bzw. 50 US Dollar im Jahr) ausreichend sein.

Es gibt auch eine kostenlose Option von Typekit. Mit dem Free-Plan kannst du eine begrenzte Auswahl von Schriften für eine Webseite mit max. 25 000 Pageviews nutzen. Bei diesem Plan wird ganz unten rechts auf der Webseite eine kleiner, recht dezenter Typekit-Banner eingeblendet. Zum Testen von Typekit bietet sich der Free-Plan besonders gut an.

Da Typekit inzwischen zur Adobe-Familie gehört, bekommst du bei der Neuanmeldung inzwischen eine Adobe ID. Alternativ kannst du deine Adobe ID angeben, falls du bereits eine hast. Wenn du das neue Adobe Creative Cloud Angebot nutzt, ist der Portfolio-Plan von Typekit kostenlos. Hier findest du mehr Infos zur Nutzung von Typekit und der Adobe Creative Cloud.

Die Einbindung von Schriften mit Typekit

Die Verwendung von Typekit ist recht einfach. Als erstes kannst du dir geeignete Fonts aussuchen. Dies ist wahrscheinlich auch schon der schwierigste Teil, da so viele schöne Schriften zur Verfügung stehen. In der Font-Library kannst du daher Schriften nach verschiedenen Kriterien filtern (z.B. nach Schriftschnitt, Eignung für Überschriften oder Fließtext, font-weight oder Sprachunterstützung), um dir die Auswahl zu erleichtern.

Typekit Webfonts nutzen

Die Filter-Optionen in der Typekit Bibliothek.

Über den Launch Kit Editor-Button (rechts oben auf der Webseite) kannst du dir dann ein eigenes Schrift-Set für deine Webseite zusammenstellen.

Typekit Webfonts nutzen

Der Typekit Kit-Editor zur Einrichtung des eigenen Schrift-Sets.

Wichtig ist, dass du nur die benötigten Schriftschnitte und die richtige Sprachunterstützung (für deutschsprachige Webseiten “All Charcters”) bei der jeweiligen Schrift auswählst. Unten im Fenster bekommst du direkte Infos über die Dateigröße deiner Schriftauswahl. Du solltest dein Kit möglichst klein halten, da deiner Webseite sonst unnötig lange Zeit zum Laden in den Browser benötigt.

Wenn du alle Schriften ausgewählt hast, kannst du dein Schrift Kit über den Publish-Button speichern. Es kann manchmal ein paar Minuten dauern, bis dein gespeichertes Kit für deine Webseite verfügbar ist.

Im nächsten Schritt musst du den zweizeiligen JavaScript Embed-Code innerhalb des head-tags (bei WordPress in also in der header.php Datei) einbinden. Den Code kannst du über den Link “Embed Code” oben rechts im Kit Editor aufrufen. Dann kannst du die Schrift-Familie in deinem Stylesheet angeben:

h1 {
  font-family: "proxima-nova-condensed",sans-serif;
}

Wenn du eine komplette Schriftfamilie austauschen möchtest, kannst du am besten die Finden/Ersetzen-Funktion in deinem Text-Editor nutzen, um die Schrift-familie in einem Schritt im kompletten Stylesheet zu ersetzen.

Typekit Webfonts nutzen

Die Suchen / Ersetzen Funktion eines Text-Editor nutzen, um die Typekit-Fonts anzugeben.

Alternativ kannst du auch direkt im Typekit-Editor bestimmen, welche Selektoren (also h1, h2, h3 etc. du mit der Typekit-Schrift nutzen möchtest). Hierzu kannst du die Selektoren direkt oben links für die jeweilige Schrift eintippen.

WordPress-Plugin zur Einbindung von Typekit

Wenn du Typekit für deine selbst-gehostete WordPress-Webseite einsetzen möchtest, kannst du auch das WordPress Plugin “Typekit Fonts for WordPress” installieren, um die Einbindung direkt über das Plugin zu erledigen. So musst du keine Template-Dateien im Theme selbst bearbeiten und dein Code würde auch bei einem Theme-Wechsel erhalten bleiben.

Auch bei einem WordPress.com Blog kannst du Typekit-Schriften verwenden. Hierzu gibt es eine hilfreiche Anleitung auf der Typekit-Webseite: Using Typekit with WordPress.com.

Deine Meinung zu Typekit

Wie sind deine Erfahrungen und deine Tipps zur Nutzung von Typekit? Findest du die Schrift-Einbindung praktisch gelöst und lohnt sich deiner Ansicht nach die finanzielle Investition in Premium-Schriften via Typekit? Über dein Feedback und deine Tipps zur optimalen Nutzung von Typekit freue ich mich sehr!

15 Kommentare

  1. Hallo Ellen,

    guter Artikel und er kommt genau zur richtigen Zeit. Überlege mir nämlich schon seit einigen Tagen ob ich Typekit mal für mein nächstes Projekt verwenden soll. Auch das Typekit jetzt in der Creative Cloud ist, finde ich gut. Das macht die Cloud für mich noch attraktiver. Den irgendwie bin ich wegen dem Preis immer zu Google Webfonts gewechselt.
    Aber ich glaube es ist an der Zeit Typekit zu Testen.

    Eine Frage hätte ich dann doch noch. Was passiert eigentlich wenn man über die Monatliche Anzahl der Pageviews kommt?

    LG,
    Chris

  2. Schöner Artikel, danke dafür.

    Ich setze Typekit zusammen mit WordPress schon seit gut 2 Jahren ein. Ich kann sagen dass es nie Probleme bei der Verfügbarkeit meiner gewählten Schriftarten gab.

    Auch wenn es was kostet (so viel ist es auch nicht pro Jahr) würde ich immer auf diese alternative zurückgreifen, statt zum Beispiel Bilder als Headlines zu setzen. Das ist besonders bei SEO so eine Sache.

    Bei unserer Unternehmensseite (war kein WP) hat sich das Ranking bei Google nach dem Austausch der Headlines von Bild zu echten HTML-Headlines mit unserer gewählten Schriftart via Typekit deutlich verbessert. Sicher hätten wir auch eine Standardschriftart nehmen können, doch das wollten wir aus Schönheitsgründen nicht.

  3. Hallo zusammen,

    wir setzen Typekit seit knapp 2 Jahren in mehreren großen Projekten ein, und hatte nie Probleme damit. Einmal eingerichtet arbeitet es vollkommen transparent.

    In vorherigen Projekten hatten wir die Schriften noch per Cufon eingebunden. Da gab es dann aber doch immer mal wieder Probleme, die damit zusammenhingen, dass Cufon noch eigene Klassen und einen Canvas um den Text in das HTML generiert.

  4. Thomas

    Einen großen Nachteil hat Typekit: für Windows Nutzer mit deaktiviertem ClearType sehen die Schriften einfach nur furchtbar aus. Es wäre gut, wenn Adobe da endlich mal eine Lösung parat hätte…

  5. Ich bin seit Anfang an dabei und bin soweit sehr zufrieden mit typekit. Der zwischenzeitliche Aufkauf von Adobe hat mich am anfangs etwas abgeschreckt aber eigentlich bringt es ja nur Vorteile.

    Wer sich ein wenig mehr für Typographie interessiert sollte auch einen Blick auf webink werfen, vergleichbar mit typekit nur meiner Meinung nach bieten sie interessantere Schriften an, werde wohl zum nächsten Jahr wechseln. :)

  6. Anmerkung zur Cleartype Aussage von @Thomas:
    Cleartype ist im Prinzip nur bei Windows XP ein Problem. Bei Windows Vista und Windows 7 ist das standardmäßig aktiviert. Bei Windows XP nutzen dann der Firefox, Chrome, Opera und der IE6 die Systemeinstellung für das Text-Rendering. Sollte Cleartype deaktiviert sein, sieht es hier dann nicht so gut aus. Der IE7 und IE8 nutzen eine eigene Cleartype-Einstellung für die Schriftdarstellung und zeigen somit Schrift immer gut an, egal was im System eingestellt ist. Der IE8 aktiviert Cleartype bei der Installation auf einem Windows XP System sogar systemweit – dann gibt es auch kein Problem mehr mit Firefox usw.

    So schlecht ist die Ausgangslage für das Nutzen von typekit also wirklich nicht.

  7. Dennis

    Hallo Ellen,

    Wir nutzen Typekit mittlerweile auch bei sehr vielen großen Projekten. Besonders praktisch ist, dass durch den Kauf von Adobe immer neue kostenpflichtige Schriftarten dazukommen, die man vorher gar nicht online nutzen durfte, da es keine Lizenzen zur Onlinenutzung gab.

    Einziger Nachteil ist, dass man bei der Schriftauswahl auch immer darauf achten sollte, wie groß denn das JavaScript der Schriften wird. 100kb und mehr hat man schnell beisammen, was gerade für mobile Geräte (Stichwort responsive) nicht zu unterschätzen ist.

  8. Thomas

    @Tobi: Das stimmt schon alles was du schreibst. Du gehst aber auch davon aus, dass man Cleartype als etwas positives empfindet. Ich habe es unter Win7 bewusst deaktivert und nutze auch nicht den IE, weil mir die Art des Fontrenderings trotz aller Anpassungsmöglichkeiten überhaupt nicht zusagt. Lieber sehe ich einzelne Pixel als (für mein Empfinden) verschwommene Buchstaben. Und dafür, dass mir die Systemfonts gefallen, muss ich halt damit leben, dass die Typekit Schriften in Firefox/Chrome scheußlich aussehen. Wäre trotzdem schön, wenn es eine Lösung dafür gäbe… :)

  9. nic

    Hi Ellen
    Danke – einmal mehr – für diesen wertvollen Artikel. Habe mich mit diesem Thema eigentlich noch nie so richtig befasst – jetzt wird’s Zeit dafür. Mitgliedschaft bei Typekit gesichert und Plugin installiert. Über das kommende Wochenende probiere ich es dann aus.

    Grüsse, nic

  10. Alex

    Hallo,

    hat jenand Erfarung wie es mit dem Laden der Schriften aussieht? Auf vielen Seiten sehe ich zuerst die Systemschrift und danach die eigentliche Schrift. Das ist manchmal nicht so schön, da das komplette Schriftbild bzw. Erscheinungsbild der Seite kurzzeitig springt. Einen Namen gibts dafür auch: FOUT.

  11. Ich kann mich noch gut an Diskussionen aus früheren Zeiten mit Kunden von mir erinnern, damals war es eigentlich fast unmöglich, die entsprechenden Hausschriften der Kunden im Web darzustellen. Zum Glück gehört dieses nun der Vergangenheit an.

    • @Martin P: Ja mit dem Adobe Creative Cloud Abo kriegt man Typekit so weit ich weiß inklusive. Da wir Typekit momentan nicht selbst nutzen, aber das CC-Abo haben, bin ich nicht ganz auf dem Laufenden, ich habe es aber so in Erinnerung. Grüße, Ellen

Schreibe eine Antwort