Der Durchschnittsmensch überlegt, welcher Geschmack von Doritos mit seinem Heineken gut schmeckt. Der raffinierte Mann überlegt, welcher Käse gut zu seiner Weinauswahl passt. Der Designer berücksichtigt natürlich, welche zwei Schriftarten auf derselben Seite gut aussehen.
Heute verwenden wir die Google Font API als Spielplatz zum Mischen von Schriftarten und zum Finden idealer Paarungen. Sie werden in der Lage sein, die Auswahl zu durchlaufen, die Sie für Ihre Projekte als geeignet erachten. Der beste Teil? Sie müssen lediglich unseren Code kopieren und einfügen, um diese Schriftarten auf Ihrer Website zu implementieren. Es ist völlig kostenlos und es sind keine Downloads erforderlich.
Warum Google Fonts?
Das Web-Font-Spiel war vor einigen Jahren in der Luft. Jeder hatte eine Idee und eine Lösung, aber niemand wusste wirklich, was übrig bleiben würde, wenn sich der Staub gelegt hatte. In meinen Augen ist diese Debatte vorbei: @ font-face gewonnen.
Hier ist, warum @ font-face gewinnt. Erstens, eine reine CSS-Lösung, mit der Entwickler an Bord gehen können. Die Tatsache, dass @ font-face Textauswahl und -aktionen wie Kopieren und Einfügen vollständig unterstützt, bedeutet, dass Usability-Experten es lieben. Die Tatsache, dass Sie ein @ font-face-Rezept für fast jede Schriftart auf einfache Weise zubereiten können, bedeutet, dass Designer es lieben, weil sie eine große Auswahl an ordnungsgemäß lizenzierten Schriftarten zur Auswahl haben. Wenn Sie Entwickler, Designer und die Usability-Leute an Bord holen, ist das Spiel für Flash, JavaScript und bildbasierte Lösungen vorbei.
In der @ font-face-Welt gibt es viele Konkurrenten. Meine persönliche Lieblingslösung ist es, FontSquirrels @ font-face-Kits zu verwenden, unabhängig davon, ob ich eine der vordefinierten Optionen herunterlade oder eine Fontdatei hochlade, damit die Website den Rest für mich herausbringt.
Ich habe diese Lösung jedoch schon mehrmals bei Design Shack verwendet, also wollte ich heute die Dinge ändern und etwas anderes verwenden. Da das Google Font-Verzeichnis kostenlos ist und viele Optionen bietet, schien es eine natürliche Ergänzung zu sein!
Schnelle Tipps zum Kombinieren von Schriftarten
Bevor wir loslegen, gibt es einige Grundregeln, die Sie beim Kombinieren von Zeichensätzen beachten können. Dies ist nicht absolut, dass Sie bei jeder Gelegenheit befolgen müssen, sondern lediglich einige Richtlinien, an die Sie sich im Zweifel halten sollten.
Verwenden Sie Schriftfamilien
Zuerst sollten Sie, wenn möglich, die verschiedenen Schriftarten innerhalb einer einzelnen Familie überprüfen. Diese Schriftarten wurden sorgfältig zusammengestellt und sind daher die sicherste Methode, Ihre Schrift zu verändern, ohne visuelle Unstimmigkeiten zu verursachen.
Kontrast ist König
Wenn Sie zwei Schriftarten kombinieren, sollten Sie den Kontrast festlegen. Versuchen Sie, eine kühne Platte mit einer leichten Serifenlose zu verbinden. Wenn Sie zwei Schriftarten mischen, die sich ziemlich ähneln, wirkt der fehlende Kontrast eher so, als wäre etwas mit der Typografie etwas weniger als mit dem beabsichtigten Eindruck zweier verschiedener Schriftarten. Machen Sie Designern und Nicht-Designern gleichermaßen klar, dass zwei unterschiedliche Stile vorhanden sind.
Geh einfach
Beschränken Sie sich auch auf wenige Schriftarten. Wenn Sie mit zwei auskommen, machen Sie es, wenn nicht, halten Sie um drei an. In allen außer den erfahrensten Händen beeinträchtigen viele verschiedene Schriftarten den Zusammenhalt eines Designs. Es ist leicht, wie ein Kind auszusehen, das gerade erst das Schriftmenü in Photoshop entdeckt hat.
Überlegen Sie, welche Schriftarten geeignet sind
Lassen Sie den Inhalt eine wichtige Rolle bei der Auswahl der Schriftarten spielen. Wenn Ihr Inhalt modern und professionell ist, halten Sie sich an Schriften, die diese Eigenschaften suggerieren. Wenn es nach etwas aus dem 17. Jahrhundert aussehen soll, ist Helvetica Neue Ultra Light möglicherweise nicht der beste Weg.
Die Schriften
Genug Diskussion, lass uns zur Sache gehen. Navigieren Sie zum Google Font-Verzeichnis und suchen Sie nach den folgenden Optionen.
Wenn Sie noch nie mit dem Google Font Directory gearbeitet haben, machen Sie sich keine Sorgen, es ist die einfachste Lösung für benutzerdefinierte Schriftarten. Alles, was Sie tun müssen, ist, einen Link in den Kopfbereich der Seite zu ziehen und dann auf die Schriftart in Ihrer CSS-Schriftfamilie zu verweisen, genau wie Sie es auch sonst tun würden. Für jedes Schriftpaar unten versende ich Sie mit allen erforderlichen Codefragmenten, so dass Sie nur noch kopieren und einfügen müssen!
Hummer und Kabine
Hummer ist eines meiner Lieblings-Skripte aller Zeiten. Es ist mutig und schön, bleibt aber dennoch gut lesbar, Attribute, die in anderen Skripten nicht leicht zu finden sind.
Um diese starke Aussage zu ergänzen, möchten Sie nichts, was um Aufmerksamkeit wetteifert. Wählen Sie stattdessen einfach und unkompliziert wie Cabin.
Das HTML
Das CSS
Raleway & Goudy Bookletter 1911
Raleway ist eine super attraktive Schriftart, die jedoch so dünn ist, dass sie nicht immer am besten für Textkopien funktioniert. Aus diesem Grund sollten Sie es am besten so groß wie möglich halten, wenn Sie können. Dies macht es zu einer perfekten Schriftart für Ihre Kopfzeilen.
Ich denke, dass die Kombination aus Raleway und dem ziemlich verzierten alten Goudy Bookletter 1911 für ein erstklassiges Paar sorgt. Seien Sie vorsichtig, dieser Goudy ist für Tonnen von Körperkopien etwas zu komplex und ich möchte auf keinen Fall eine große Seite mit darin geschriebener Kopie lesen. Diese Kombination ist wahrscheinlich am besten für Szenarien mit minimaler Kopie geeignet.
Das HTML
Das CSS
Allerta & Crimson Text
Allerta ist eine gemäßigt kühne Sans-Serif mit einer Persönlichkeit.Wenn Sie etwas Langweiliges oder Verrücktes nicht wollen, ist dies ein guter Mittelweg, der sowohl in der Schlagzeile als auch in der Textversion gut aussieht.
Crimson Text ist eine unkomplizierte Schrift mit starken Serifen, die aber kaum oder gar nicht zwischen dick und dünn unterscheiden. Dadurch bleibt die Lesbarkeit auch im kleinen Bereich gut erhalten.
Das HTML
Das CSS
Arvo & PT Sans
Ohne eine gute Slab-Serife wäre keine Schriftauswahl vollständig. Das Google Font Directory enthält nur ein paar davon und Arvo ist derzeit eine der kühnsten Optionen. Ich mag die meisten Charaktere wirklich, gebe aber zu, dass die? S? fühlt sich etwas unbeholfen an.
Ich habe dies mit einer weiteren großen Sans-Serif kombiniert: PT Sans. Es gibt verschiedene Varianten davon, aber die einfache Version eignet sich am besten für Körperkopien. Ich mag es wirklich, wie rund die Charaktere sind, was für ein sehr freundliches Gefühl sorgt.
Das HTML
Das CSS
Tanzenskript & Josefin Sans
Skripts lassen sich nur schwer richtig implementieren, insbesondere wenn sie nicht so weit verbreitet sind wie Lobster. Das Tanzskript, das im obigen Beispiel gezeigt wird, ist definitiv nicht mein Lieblingsskript, aber es ist eines der besseren im Google Font Directory.
Da Dancing Script viel weiblicher ist als Lobster, habe ich es mit Joesfin kombiniert, einer wirklich dünnen Sans-Serif, um diesen Stil zu fördern. Diese Kombination ist auf jeden Fall für Produkte oder Websites mit weiblicher Neigung geeignet.
Das HTML
Das CSS
Allan und Cardo
Normalerweise hasse ich Comic-Schriften, aber Allan ist auffällig und attraktiv. Ich liebe die Kühnheit der Schrift und die kursive Darstellung.
Mein Pairing mit einer alten Schriftart (Cardo) scheint fast ein Konflikt der Zeitperioden zu sein, aber ich mochte es wirklich, wie sie zusammen aussahen. Fühlen Sie sich frei, stattdessen für eine Leichte Serifenlose zu entscheiden.
Das HTML
Das CSS
Molengo & Lekton
Molengo und Lekton fühlen sich zusammen wie ein alter technischer Versuch. Hauptsächlich aufgrund des Schreibmaschinengefühls der letzteren.
Diese Kombination ist etwas, was ich auf einer Website mit einem Hintergrund aus Pergamenttextur sowie Fotos mit einem Polaroideffekt und vielleicht sogar Kaffeeflecken erwarten würde.
Das HTML
Das CSS
Droid Serif & Droid Sans
Einer unserer Tipps oben schlug vor, in einer Familie zu wohnen. Ich verwende das hier mit der natürlichen Kombination von Droid Serif und Droid Sans.
Wie Sie sehen, sind beide wunderschöne Schriften, die sich perfekt ergänzen. Diese konnten leicht gewechselt werden, so dass Droid Serif die Body-Schriftart und Droid Sans die Header-Schriftart war. Sie können Droid in freier Wildbahn auf einem bestimmten, beliebten Design-Blog entdecken.
Das HTML
Das CSS
Corbin und Nobile
Wenn Sie ein Fan von Cooper Black sind, ist Corben eine ausgezeichnete kostenlose Alternative. Diese dicke und toonyische Serife eignet sich perfekt für alles, was ein Gefühl der 1920er Jahre haben sollte.
Nobile ist eine modernere Schrift mit vertikal gestreckten Buchstabenformen. Das minimale Styling konzentriert sich dabei auf die mutigen Schlagzeilen.
Das HTML
Das CSS
Ubuntu & Vollkorn
Ubuntu ist eine bemerkenswert runde Sans, die ein modernes Gefühl hat. Ich habe hier die fette Variante verwendet, um einen zusätzlichen Kontrast zum Haupttext zu erhalten.
Vollkorn ist definitiv eine ganz andere Schrift, die eine längst vergangene Zeit widerspiegelt. Seien Sie immer vorsichtig beim Mischen von Schriftarten aus verschiedenen Zeiträumen. Stellen Sie sicher, dass es beabsichtigt und mit Absicht ist!
Das HTML
Das CSS
Sag uns deine Favoriten!
Dieser Artikel soll ein Tool sein, das Sie mit einem Lesezeichen versehen und darauf zurückgreifen können, wenn Sie nicht weiterkommen und eine gute Schriftkombination für die Website benötigen, an der Sie gerade arbeiten. Sowohl Webfonts als auch Browser haben einen langen Weg zurückgelegt, und diese Lösungen sollten generell gut funktionieren. Sie enthalten jedoch jeweils geeignete Backup-Schriftarten, falls die Google-Schriftart nicht geladen wird.
Hinterlassen Sie einen Kommentar und teilen Sie uns Ihre bevorzugten kostenlosen Schriftkombinationen mit.Das Google-Verzeichnis hat auch nicht genug abscheuliche Angebote, also können Sie auch Ihre kleinsten Favoriten teilen!
Google-Schriftarten
Google Fonts ist eine Bibliothek mit über 800 verschiedenen Schriftarten, die vollständig in Ihr Webprojekt eingebettet werden können. In dieser Serie wird erläutert, was Google Fonts ist. Sie zeigt interessante Beispiele und Kombinationen von Schriftarten, mit denen Ihr Projekt auf die nächste Stufe gebracht werden kann.