Arial, Verdana und Co. sind längst out

von Hakan Havutcuoglu

Früher hat man den Arial gehabt, heute hat man Free-Webfonts. Dank Google Fonts und Adobe© Edge Web Fonts, hat man viele kostenloser Webfonts zu Verfügung stehen. Außer die beiden kostenlosen Webfonts anbietern hat man ja auch den @font-face variante. Hierbei werden die unbekannten Schriften mit generierten SVG-Grafiken ersetzt. Ist natürlich kein richtige Lösung aber eine alternative. Ihr solltet aber darauf achten, ob Ihre Schriften, die Ihr in SVG-Grafiken umwandelt auch Lizenzfrei benutzt werden dürfen. Empfehlenswert für @font-face Variante wäre von meiner seits die Seite Cufon.

Google Fonts

Google stellt uns in seinem Server Hunderte von kostenlosen Open-Source-Schriften zu Verfügung, die für's Web optimiert sind. Zwischen dir und ein gutaussehendem Website stehen nur drei kurze Schritte.

Google Webfonts Directory

Erste Schritt
Besuche die Google Fonts Website und suche aus Hundert verschiedenen Font-Familien, das für dich passenden Font aus und füge zu deiner Sammlung.

Zweite Schritt
Vergleiche die Schnitte und Charakter in einem dyamischen Layout.

Dritte Schritt
Kopiere den Code, die generiert wurde in deiner Website in <head> bereich.

Nach dem der Code eingefügt wurde muss man nur noch in CSS-Datei als font-familie genau diesen Fontbezeichnung reinschreiben. Und fertig ist es.

Ich habe weiter unten einige Webfonts von Google mit direkten Links aufgelistet, die ich persönlich sehr nützlich und schön finde. Vielleicht findet Ihr eine oder andere ebenfalls nützlich. Schaut euch die Schrifte einfach an.

Adobe© Edge Web Fonts

Auch hier stellt uns das Unternehmen Adobe in seinem Server ein kostenloser Schriften-Bibliothek mit mehreren Schriften zu Verfügung, die ebenfalls für's Web optimiert sind. Beim Adobe gilt gleiche Prinzip wie beim Google Fonts. Nur Drei Schritte zum integrieren.

Adobe Edge Webfonts Directory

Erste Schritt
Besuche die Adobe© Edge Web Fonts Website und suche im Bibliothek passenden Font-Familie aus und füge zu deiner Sammlung.

Zweite Schritt
Wähle die Schnitte und Charakter in einem dyamischen Layout.

Dritte Schritt
Kopiere den Code, die generiert wurde in deiner Website in <head> bereich und fertig.

Wie Ihr seht bei beiden Anbietern hat man ein einfaches Vorgehensweise. Ihr werdet feststellen, dass Ihr Website durch die Webfonts viel moderne und attraktive Aussieht.

21 Webfont Empfehlungen für Überschriften und Mengentexte

Anaheim Webfont

Anaheim ist eine mischung von serifenlose Schrift und Typeschrift. Fällt von Strichstärke her sehr Schmal aus. Man kann sie sowohl als Mengentext aber auch als Überschrift bedenkenlos verwenden.

Arvo Webfont

Arvo ist eine Charakter-starke serifenbetonte Schrift. Durch die Slab-Serifen ist Arvo sehr gut im Web lesbar und eignet sich sehr gut für Überschriften oder Intro-Texte bzw. Text-Slogans.

Bree Serif Webfont

Bree Serif verfügt über eine charmante Persönlichkeit, Originalität und Vielseitigkeit. Am besten eignet sich als Überschrift. Man kann aber auch mit der richtigen Laufweite und Zeilenabstand auch als Mengentext verwenden.

Cabin Webfont

Cabin ist eine sehr gerade, moderne serifenlose Schrift und kann als moderner, serifenloser Mengentext oder auch für Überschriften eingesetzt werden.

Cookie Webfont

Cookie ist eine schöne Schreibschrift. Manchmal braucht man ein besondere Schrift die sich für Überschrift eignet, genau da könnte Cookie euch eventuell helfen.

Dosis Webfont

Dosis ist eine abgerundete, recht dünne serifenlose Schrift für moderne Mengentexte, Überschriften oder Slogans.

Droid Webfont

Droid Sans ist eine sehr gute Ersatz für Arial, Verdana und Co. aber durch die offene Formen bietet Droid Sans seinen Lesern eine sehr angenehme Zeilenführung und Lesequalität im Mengentext.

Fjalla One Webfont

Wer eine fette, schmale Schrift für Überschriften sucht, könnte mit der Fjalla One glücklich werden.

Gentium Basic Webfont

Die Serifen-Schrift Gentium Basic ist sehr angenehm lesbar und eignet sich daher vor allem, wenn man auf der Suche nach einer serifen Fließtext-Schrift ist.

Julius Sans One Webfont

Julius Sans One ist eine extravagante, schlanke Schrift für schicke, moderne Überschriften.

Lobster Webfont

Lobster ist eine Schreibschrift vom besonderen Art. Sie ist fett, wirkt elegant und besitz die Eigentschaft, das vorherige Buchstabe mit dem nächsten Buchstaben perfekt zuverbinden.

Lora Webfont

Lora wirkt durch elegant gestaltetem Serifen sehr modern und eignet sich ebenfalls als Mengentext oder als Überschrift.

Montserrat Webfont

Montserrat ist eine moderne serifenlose Schrift. Besitz verschiedene Zeichen im Kontex und eignet sich als Überschrift oder als Schaugrößen.

Muli Webfont

Muli kann als moderne, schicke Mengentext-Schrift eingesetzt werden.

Open Sans Webfont

Open Sans ist in den letzten Monaten immer mehr zu einer Standard-Schrift im Web geworden, besonders bei dem aktuellen WordPress Standard-Themen.

Oswald Webfont

Oswald ist eine schmale Schriftart mit sehr geringem Strichstärkenunterschied. Deshalb ist sie bedingt als Mengentext geeignet aber dafür für Schaugrößen oder für Überschriften und Zitate macht sie sich gute Figur.

Playfair Display Webfont

Playfair Display ist eine Barock-Antiqua und lehnt sich von der Art an die 18. Jahrhundert. Ist als Mengentext oder auch als Überschrift sehr empfehlenswert.

Raleway Webfont

Raleway ist eine weitere elegante und moderne serifenlose Schrift, die sehr vielseitig genutzt werden kann.

Source Sans Pro Webfont

Source Sans Pro ist die erste Open-Source Schriftfamilie von Adobe, funktioniert prima als Mengentext aber auch sehr gut als schlichte Überschrift.

Ubuntu Webfont

Ubuntu ist eine Serifenlose Schrift und eignet sich als Mengentext oder als Überschrift für Desktop und Mobile anzeige.

Vollkorn Webfont

Vollkorn ist eine bescheidener und gutaussehender Schrift. Wie der Name schon sagt ist ein Brotschrift und als Mengentext hervorragend geeignet aber auch als Überschrift ist sie ein Talent.

Zur Übersicht