Die Suche nach einer neuen Schrift: schnell und einfach

von Sina Koch

Webdesign & Webentwicklung > Die Suche nach einer neuen Schrift: schnell und einfach

Software-Tools zur passenden Type

Inhalt öffne dich!

Die richtige Fontwahl beeinflusst den Erfolg Ihrer Website

Beim Öffnen einer Website richten Betrachter:innen das Augenmerk als erstes auf die Bilder, anschließend auf die Schrift. Die richtige Font-Wahl ist damit entscheidend für den Erfolg einer Internetseite. Die Schrift muss gut lesbar sein und dazu noch optisch zum Gesamt-Design passen. Die Möglichkeiten sind unüberschaubar groß!

Wie soll man da die richtige Entscheidung treffen?

Allein die Auswahl von GoogleFont ist immens: Fällt die Wahl auf eine moderne, minimalistische Schrift, oder auf eine alte oder handgeschriebene? Welche Farbe passt am besten und harmonieren die ausgesuchten Schriftarten überhaupt miteinander?
Führte der Gestaltungsprozess schließlich zu einer Schriftart, stellt sich die Frage nach dem Format! Viele Font-Familien bieten ein ganzes Paket verschiedener Stile an. So erscheint Arial in den Variationen Regular, Narrow, Bold und z. B. Rounded. Im folgenden Beitrag beschreiben wir einige Tools, die unsere Font-Wahl erleichtern.

Zusammenfassung der wichtigsten Informationen hier im Video:

Typegenius - die perfekte Font-Kombination finden

So sieht eine Font-Vorschau in dem Tool aus.
So sieht eine Font-Vorschau in dem Tool aus.

Layouter verbringen viel Zeit mit der Suche nach passenden Schriftkombinationen, oft mehr als Ihnen lieb ist. Eine Lösung für dieses Problem fand die Grafikdesignerin Waveney Hudlin: Im Rahmen eines selbst initiierten Produkt-Wettbewerbs veröffentlichte sie gemeinsam mit dem Entwickler Ruben Pierre-Antoine das Browser-Tool "Canva - Font Combinations" ehemals „TypeGenius“.

Und so geht's

Aus einer Palette von Schriftarten wählen Nutzer:innen passende Typen aus oder finden leicht eine Auswahl per Suchfunktion. Anschließend öffnet das Programm ein neues Fenster,  in dem eine weitere Übersicht passender Fonts erscheint. Der Nutzer kann nun die Text-Darstellung nach Belieben verändern, um so ein anschauliches Beispiel für seine spätere Arbeiten zu erhalten. Leider fehlen derzeit noch wichtige Schriftarten wie „Arial“, „Lobster“ oder beispielsweise „Lato“. Die Entwickler sind jedoch bemüht, das Kontingent stetig zu erweitern.


Typ.io - Kombinationen aus der Community

Bild eines Mannes und einem Text über das Schreiben eines Buches Human Always.

Ähnlich wie Canva - Font Combinations arbeitet die Internetseite „Typ.io“. Mit ihrem Slogan „Fonts that go together“ bringen die Entwickler:innen die Nutzer:innen dieser Seite auf den Punkt: Anwender:innen erhalten für seine Schriftkombinationen Rückmeldung von der Community! User:innen stellen ihre Lettern per Screenshot ins Netz und warten auf die Likes der anderen.

So nutzen sie ein kreatives Schriftarten-Kollektiv und müssen die Entscheidung zur Schriftwahl nicht mehr alleine treffen.

Weitere Vorteile

Ein weiterer Vorteil gegenüber Canva - Font Combinations ist die Menge der vorgeschlagenen Kombinationen: Derzeit befinden sich 2.468 Vorschläge (Stand 14.11.2018) auf der Webseite. Typ.io bietet ferner eine Suchfunktion in sogenannten Font-Librarys. Das bekannteste Beispiel ist „Google Web Fonts“. Sobald man diese Kategorie auswählt, stellt die Anwendung ausschließlich Schriftkombinationen von Google Web Fonts vor.


TypeWonder - Fonts am eigenen Beispiel testen

Website TypeWonder zur Auswahl von Webfonts.

Die Entscheidung für eine Schrift ist gefallen! Um zur Ansicht auf der Website zu gelangen, beginnt nun ein umständlicher Prozess: Schriftart downloaden, installieren und auf der Website anwenden. Leichter geht´s mit dem Browser-Tool TypeWonder!

Vorhandene Internetseite wird mit der Schriftart kombiniert

Einfach den Internetauftritt des Tools öffnen, die gewünschte Internetseite aufrufen und die Schriftart wählen. Das Tool kombiniert nun die Internetseite mit der Schriftart und zeigt diese zusammen an. TypeWonder setzt allerdings voraus, dass eine Site bereits besteht. Ideal ist die Anwendung also für diejenigen Nutzer:innen, die bereits eine Internetseite erstellt haben, aber mit der Schriftart unzufrieden sind.


Typesetwith.me - der Font Sandkasten

Benutzeroberfläche der Webseite Typesetwith.me zur Anpassung von Typografie-Parametern.

Sehr nützlich, diese Sandbox-Oberfläche! Typesetwith.me bietet den Nutzer:innen die Möglichkeit, Textformatierungen online und in Echtzeit anzupassen.
Die Umgestaltung erfolgt auf nativem Wege und umfasst folgende Punkte:

  • die Schriftart,
  • die Schriftgröße,
  • Breite und Höhe der Textbox,
  • die Farbsättigung.

Mithilfe virtueller Schieberegler verändern Anwender die Darstellung und vergleichen anschaulich das Erscheinungsbild und die Lesbarkeit des Textes.

Für Webdesigner:innen spielt die Typographie eine sehr wichtige Rolle, denn ein gut formulierter Text sollte nicht durch falsche Formatierung oder Schrift-Type in den Hintergrund geraten.


Typecast - der Font Sankasten 2.0

Typecast Webseite mit Slogan Design for the reader by putting type first.

Passend zu Typesetwith.me bietet Typecast eine ähnliche Sandbox-Oberfläche und Funktionen an. Zwei Vorteile maximieren jedoch den Nutzen:

1. Es können alle Schriften aus den Font-Librarys Typekit, Fontdeck, Fonts.com und Google Web Fonts durchsucht werden.
2. Es lassen sich die gewählten Formatierungswünsche direkt als HTML-/CSS-Code ausgeben.

Mit wenigen Klicks zum Ziel!

Das erspart Grafikdesigner:innen eine Menge Arbeit und hilft dabei, mit ein paar Klicks die perfekten Schriftkombinationen mit den dazugehörigen Formatierungen zu finden und direkt auszugeben. Ein eingeloggter User kann diverse Projekte anlegen und immer wieder aufrufen. Derzeit verfügt Typecast über ein Font-Repertoire von 23.000 Fonts!

Einen kleinen Haken hat dieses Tool, denn es kostet Geld. Mit 29 Dollar pro Monat ist es auch nicht gerade preiswert, aber im Anbetracht der Funktionen sicherlich das Geld wert. Für die Sparfüchse gibt es eine kostenfreie, zweiwöchige Testphase.


Font Flame - Tinder für Schriften

Font Flame - Tinder für Schriften

Das Prinzip von Tinder ist schnell erklärt: bewegt man das Bild nach rechts, interessiert man sich dafür. Sollte man kein Interesse haben, zieht man das Bild nach links. Nach diesem einfachen Prinzip ist auch FontFlame aufgebaut.

Und so geht's im Detail:

Mittig befindet sich ein Kasten mit dem Text "FontFlame - Tinder for Font Pairing" in einer zufälligen Schriftart. Nun gibt es für Nutzer:innen die Möglichkeit diese Schrift sofort zu vergessen oder aber sie zu favorisieren. Dieser Vorgang kann entweder mit einem Bilderziehen nach links oder rechts vollzogen werden, oder man benutzt die Buttons "Love" / "Hate" unter dem Kasten.

Als favorisierten Schriftarten finden Sie im Anschluss unter "My Types" in der oberen Navigationsleiste.


Calligraphr - die persönlichste Font

Font Flame - Tinder für Schriften

Es gibt Projekte, in denen eine normale Font nicht mehr ausreicht, sondern die Schriftart aus der Masse herausstechen muss. Was eignet sich da nicht besser, als seine eigene Font selbst zu erstellen.

Auf der Seite von Calligraphr steht eine Vorlage zum Download bereit, in der das Alphabet + Sonderzeichen per Hand eingetragen werden soll, um es anschließend wieder einzuscannen und auf die Website hochzuladen. Innerhalb weniger Sekunden kann man seine eigene - gerad erstellte Font herunterladen und frei nutzen.


Font Swap - Live Google Fonts testen

Font Swap - Google Font Live Preview

Auch wieder ein Live-Font-Test.

Font Swap nutzt jedoch lediglich Google Fonts und das auf der kompletten Website. Bedeutet: Die Erweiterung für Google Chrome installieren -> eine Website aufrufen und das Add-On starten.

Nun listet Font Swap alle Google Fonts auf und mit einem Klick übernimmt die Erweiterung die Schriftart für die komplette Seite. Sehr hilfreich wenn es viele verschiedene Seitentypen gibt mit mal mehr - mal weniger Text.

Filtermöglichkeiten vorhanden

Ein weiterer Pluspunkt sind die Filter-Möglichkeiten. So lassen sich Schriften nach folgenden Kriterien filtern:

  • Thicksness: Dicke
  • Slant: Neigung
  • Width: Breite
  • # of Styles: Wieviel verschiedene Styles die Schrift hergibt

Eine Suchfunktion ist ebenso verfügbar.


Wordmark.it - Mit einem Klick zur Font

WordMark.it - Einmal eine handvoll Schriften bitte

Sie haben sich immer gefragt, wie z.B. Ihr Firmenname in diversen Schritarten aussehen könnte? Bevor Sie sich in Photoshop oder in sonst einem Programm mit Klicken die Zeit verschwenden, unterstützt das Webtool "Wordmark.it" Sie da mit nur einem Klick.

So schnell geht's:

Einfach das gewünscht Wort - den gewünschten Satz - in den Suchschlitz eingeben und auf "Load Fonts" klicken. Schon erwartet Sie eine Übersicht vieler Versionen Ihrer Eingabe. Gefällt Ihnen Schriftart, können Sie diese markieren und oben in der Taskleiste auf "filter:selected" klicken. Schon sehen Sie nur Ihre Schrift und haben die Möglichkeit diese Auswahl entweder per Mail zu teilen oder auszudrucken.


Extra: Redacted Font

Beispiel von Redacted RegularBeispiel von Redacted Script

Redacted Font verdient bei uns einen kleinen Extra-Text.

Wer kennt sie nicht, die nervigen Lorem-Ipsum-Texte auf Website-Entwürfen. Vor allem im Anfangsprozess möchten Webdesigner  Schriftarten und -farben zunächst ignorieren.

An diesem Punkt kommt die Schriftart Redacted ins Spiel: Im Wireframing-Prozess eines Webseiten-Entwurfes deutet der Webdesigner hiermit Schrift lediglich an. Dafür bietet Redacted Font zwei unterschiedliche Schriftarten: Redacted Regular als schlichten, schwarzen Balken, und Script in Form einer Handschrift.

Beide sind verfügbar in den Schriftschnitten Bold und Light.


Delta Fonts: Firmen und Ihre Fonts

Delta-Fonts und Ihre Logos

Ob nun TopGunAkte X oder das A-Team - Schriftarten spielen in Logos eine zentrale Rolle und sind auf der Seite von Delta-Font fein säuberlich sortiert. Dank der Kategorien:

  • "Company"
  • "Movie"
  • "Music"
  • "Game"
  • "Sport"

lass sich Fonts, Schriftzüge oder Logos schnell durchsuchen und finden. Hat man sich für eins entschieden, wird unter dem Logo/Schriftzug die verwendete oder eine sehr ähnliche Schriftart aufgelistet.


Künstliche Intelligenz für Ihr Online Marketing – bleiben Sie auf dem Laufenden.

Roboter mit futuristischem Design

Jetzt unseren neuen Newsletter abonnieren!

Es ist Wahnsinn, was man jetzt schon alles damit erreichen und umsetzen kann. Ob Videoinhalte, Produkttexte oder das passende Bildmaterial - alles ist mittlerweile möglich! Mit unserer Liste

"KI-Tools für Ihre Webseite und Ihr Online Marketing"

stellen wir Ihnen unsere Tool-Sammlung zur Verfügung.

  • Kostenlose Liste mit über 50 KI-Tools – die Liste wird ständig erweitert.
  • Konkrete Anwendungsbeispiele und Videos
  • Tipps und Tricks per E-Mail
  • Jederzeit abbestellbar

Sie brauchen Unterstützung?

Ohne (An-) Frage - keine Antwort. So einfach ist das. Nutzen Sie einfach unser Kontaktformular und wir melden uns umgehend bei Ihnen zurück.

Wir können Ihnen bei folgenden Leistungen weiterhelfen:

Laden Sie sich diesen Beitrag als E-Book herunter

Wer schreibt hier?

Sina Koch - Online Marketing Managerin

Leidenschaftliche Teetrinkerin, äußerlich sowie innerlich ein kleiner (Kreativ-) Fuchs

Mehr erfahren ...

Sina Koch

Weitere Beiträge zum Thema Webdesign