Kategorien
Essentials Icons & Fonts

IcoMoon: Hunderte Icons kostenlos als individueller Webfont

Icons werden zur Visualisierung von Funktionen und Inhalten auf Websites immer beliebter. Und die Vielfalt an entsprechenden Iconsets wächst stetig. Das macht die Auswahl passender Sets nicht unbedingt einfacher. Oft entscheiden Umfang oder Ästhetik der Icons darüber, ob sie eingesetzt werden. Im Falle von IcoMoon könnten es jedoch auch die besonderes Features sein, mit denen der Dienst aufwartet.


IcoMoon

Große Auswahl und viele Formate bei IcoMoon

IcoMoon von Keyamoon gibt es in zwei Versionen. Eine kostenfreie Version mit über 300 Icons liefert gängige Grafiken für Userinterfaces sowie Social-Media- und Browser-Symbolzeichen. Die Ästhetik der Icons ist wenig spektakulär, weshalb sie in den meisten Designs einsatzfähig sind, ohne aus dem Rahmen zu fallen.

Die kostenpflichtige Version umfasst über 700 Icons, welche sukzessiv um weitere ergänzt werden.

IcoMoon darf – dank Creative-Commons-Lizenz (CC BY-SA 3.0) – kommerziell genutzt werden. Auch eine Modifikation der Icons ist erlaubt, sofern die veränderten Icons wiederum unter Creative-Commons-Lizenz veröffentlicht werden.

Die Icons werden in verschiedenen Formaten bereitgestellt. Neben pixelbasierten Icons im PNG-Format – in 16 und 32 Pixel Größe – gibt es die Icons auch als vektorbasiertes SVG-Format sowie als als Illustrator-Datei. Außerdem gibt es eine .csh-Datei, mit der sich die Icons als Formen zu Photoshop hinzufügen und somit dort nutzen lassen.

IcoMoon als indiduellen Webfont herunterladen

Da sich Icon-Webfonts immer größerer Beliebtheit erfreuen, gibt es die Symbolzeichen auch als Webfont. Selten wird man alle 300 beziehungsweise 700 Exemplare von IcoMoon nutzen wollen. So ist es praktisch, dass die Möglichkeit besteht, sich einen Icon-Webfont individuell zusammenzustellen.


IcoMoon Web App

Über eine App wählt man die Bildzeichen aus, die in eine Website eingebunden werden sollen. Anschließend wird der individuelle Webfont zum Herunterladen angeboten. Neben den Icons von IcoMoon sind zusätzlich Iconsets Dritter verfügbar. Die Zeichenbelegung ist individuell festlegbar.

Neben den verschiedenen Webfont-Formaten ist auch eine Beispiel-CSS-Datei mit allen in der Schrift verfügbaren Icons enthalten.

Fazit: IcoMoon bietet umspektakuläre, aber dafür universell einsetzbare Icons und viele Formate – inklusive individualisierbarer Webfonts.

(dpe)

Kategorien
Essentials Icons & Fonts

Schriften richtig unterschneiden: nützliche Tipps und Tricks

Der englische Begriff „Kerning“, zu deutsch „Unterschneidung“, ist wohl jedem Printdesigner bekannt. Im Webdesign war Kerning lange Zeit kein Thema. Kerning ist die Bezeichnung für die Korrektur von Abständen zwischen Buchstaben. Der Abstand zwischen Buchstaben wird dabei so verringert, dass er gleichmäßig erscheint und dadurch ein optisch schöner Eindruck entsteht. Richtige Unterschneidungen sind auch im Webdesign wichtig, um den Gesamteindruck einer Seite zu perfektionieren. Jeff und Andy, die Betreiber der Webseite Paper Leaf, erklären in einem Beitrag, wie man das Thema Unterschneidungen am besten angeht. Einige ihrer Tipps stellen wir im folgenden vor.

Kerning: Um was geht es?

Ich habe den Beitrag der Betreiber der Seite Paper Leaf aufmerksam durchgelesen und dabei für mich viele neue Sachen entdeckt. Ich denke, dass wird dem ein oder anderen Leser ebenso gehen. Jeff und Andy liefern ein schönes Tutorial, sowohl für Profis als auch für Anfänger im Webdesign wie mich. Im Weiteren fasse ich zusammen, was ich Interessantes aus diesem Beitrag mitgenommen habe.

Auf einen Blick- was erfährt man aus dem Tutorial?

Die Motivation und Begriffserklärung

Warum sollte man sich mit Unterschneidungen befassen? Das erklären die Autoren als erstes in einem schönen Einstieg. Die Antwort ist einfach, wenn auch stark philosophisch: Man sei dann einfach ein besserer Designer, den die Kunden sehr gerne bezahlen würden. Kerning möge als Kleinigkeit erscheinen, als ein Detail, das von der Wichtigkeit her vielleicht auf den hinteren Rängen gesehen wird. Doch die kleinen Dinge sind es, die Mitsubishi gross machen, wie es mal in einem berühmten Werbespruch dieser Automarke gesagt wurde. Genauso ist es im Webdesign: kleine, nicht sofort sichtbare, unauffällige Details sind es, die das Werk eines Webdesigners schön und gleichzeitig brauchbar erscheinen lassen.


Begriffserklärungen: kurz und verständlich

Tipp #1: Mit dem Auge wahr genommene Abstände

Hier geht es darum, wie ein Betrachter die Abstände zwischen den Buchstaben mit dem Auge wahrnimmt. Das ist ein sehr wichtiger Punkt: viele Webdesigner beachten diese Eigenschaft und spielen mit der Stärke von Buchstaben oder ihrer Form, damit die Betrachter im Endeffekt den Text so wahrnehmen, als ob der Abstand zwischen den Schriften tatsächlich gleich ist.


Eine optische Täuschung? Abstände zwischen den Buchstaben

Tipp #2: Wörter auf den Kopf stellen

Ein cooler Tipp, den ich schon von der Kunstschule kenne: Wenn man sehen will, ob ein gemaltes Objekt symmetrisch ist, sollte man das Bild auf den Kopf stellen. Dann erkennt man sofort, ob die Symmetrie vorhanden ist, oder ob man doch lieber von vorn beginnen sollte. Genauso verhält es sich mit Buchstaben. Um sie perfekt zu unterschneiden, sollte man das Wort auf den Kopf stellen. Dann sind alle Ungenauigkeiten sofort erkennbar, was aus praktischer Sicht sehr hilfreich ist.


Ein einfacher Trick: das Wort auf den Kopf stellen

Tipp #3: Blöcke unterschneiden

Hier wird empfohlen, alle Buchstaben eines jeden Wortes in Gruppen aufzuteilen und diese Gruppen dann nacheinander zu unterschneiden. Jede Gruppe soll drei Buchstaben enthalten.


Buchstaben in Dreier-Gruppen

Tipp #4: Qualitativ hochwertige Schriftarten verwenden

Der letzte Tipp besteht darin, qualitativ hochwertige Schriftarten zu verwenden. Das sind am besten solche, die bereits über gut unterschnittene Abstände zwischen den Buchstaben verfügen. Meiner Meinung nach sollte man diesen Tipp zum Start der eigenen Überlegungen machen. Denn je besser die ausgesuchten Schriftarten sind, desto weniger Arbeit entsteht im weiteren Verlauf der Tätigkeiten.

Fazit: Lesenswerter Artikel mit hohem Nutzwert, der auch noch mit einer Liste weiterer Quellen zum Thema schließt. Gehört in die Bookmarks jedes Webdesigners.

(dpe)

Kategorien
(Kostenlose) Services Essentials Icons & Fonts

Perfektes Kerning für Webfonts mit TypeButter

Große Schriften auf Websites – vor allem bei Überschriften – liegen derzeit im Trend. Doch gerade hierbei macht sich das bescheidene Kerning von Schriften im Browser bemerkbar. Zumindest für typophil veranlagte Webdesigner und -entwickler mag der Abstand zwischen den Buchstaben gerade bei großen Schriften stark verbesserungsfähig sein. Das jQuery-Plugin TypeButter hilft und sorgt für perfektes optisches Kerning zwischen den Buchstaben.

So funktioniert TypeButter

TypeButter besteht aus dem eigentlichen jQuery-Plugin sowie einer Erweiterung, welche die jeweiligen Kerning-Paare einer Schrift beinhaltet. Für die Standardschriften Arial, Georgia, Helvetica, Times und Verdana stellt TypeButter Erweiterungen mit optimiertem Kerning zur Verfügung.


TypeButter

Plugin und die jeweilige Erweiterung müssen zusammen mit jQuery im HTML-Kopf eingebunden werden:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="typebutter.jquery.min.js"></script>
<script type="text/javascript" src="typebutter.arial.js"></script>

Anschließend kann das Kerning per jQuery auf beliebige Elemente angewendet werden. Soll das Kerning für alle Texte eines Dokumentes eingesetzt werden, lässt sich das wie folgt realisieren:

<script>
jQuery("body").typeButter();
</script>

Der Aufruf muss am Ende des Dokuments im Body des HTML-Dokumentes eingebunden werden. Fortan wird das Kerning von TypeButter auf alle Texte angewendet. Gerade bei großen Schriften macht sich das bemerkbar. Hier sind Buchstabenzwischenräume ohne TypeButter teils zu groß.


Beispiel: Text mit (oben) und ohne (unten) TypeButter

TypeButter umschließt jeden Buchstaben mit einem eigenen Element, dem KERN-Element. Diesem Element wird die CSS-Eigenschaft „letter-spacing“ zugewiesen, über die sich der Abstand definiert.

Kerning selbst festlegen

TypeButter kann auch auf Schriften, für die das Plugin keine Erweiterung zur Verfügung stellt, angewendet werden. Dazu müssen Abstände zwischen Buchstabenpaaren manuell optimiert und anschließend als Erweiterung heruntergeladen werden.

TypeButter bietet eine ganze Liste bekannter Webfonts an, für die Kerning-Paare angelegt werden können. Dazu stellt das Plugin in einer Liste alle Buchstabenkombinationen dar, für die optimierte Abstände definiert werden sollten („AA“, „AC“, „AG“ etc.).


Kerning-Paare selbst festlegen mit TypeButter

Insgesamt gibt es über 2.500 Paare, für die ein optimierter Abstand angegeben werden kann. Man muss also schon ein wenig Zeit in ein optimiertes Kerning investieren.

Fazit: Wem das perfekte Kerning einer Schrift auch auf der Website wichtig ist, hat mit TypeButter das richtige Werkzeug. Allerdings kann TypeButter eine Website unter Umständen deutlich langsamer machen, da das Plugin jeden Buchstaben anpasst. Bei viel Text macht sich das dann bei der Ladezeit bemerkbar.

(dpe)

Kategorien
Essentials Icons & Fonts

So laden Sie alle 500+ Google Web-Fonts auf Ihren lokalen Desktop

Über 500 Schriftarten beinhaltet das Google Web-Fonts-Verzeichnis mittlerweile. Alle Schriftarten stehen als Open Source kostenfrei zur Verfügung. Es gibt also keine lizenzrechtlichen Beschränkungen hinsichtlich der Nutzung. Dennoch ist es nicht ganz unkompliziert, möchte man sämtliche Webfonts auf dem eigenen Rechner lokal nutzen. Gehen tut es dennoch.

Google Web-Fonts: Schon für das Design-Mockup wichtig

Wieso sollte ich die Google Fonts runterladen, wo ich sie doch zur Laufzeit einbinden kann? Auf diese Frage gibt es mindestens zwei, sehr schlagkräftige Antworten. Zum einen wird in der Regel der Entwurf einer Website nicht direkt in HTML gesetzt, sondern mit einem Bildbearbeitungsprogramm vorbereitet.

Entwickler, die Photoshop nutzen, können das kostenlose Extensis-Plugin nutzen, um direkt auf Googles Verzeichnis Zugriff zu nehmen. Dr. Web berichtete vor einigen Wochen darüber. Was aber tun diejenigen Designer, die etwa mit Fireworks oder anderen Produkten arbeiten? Da wäre eine lokale Installation des Fundus nützlich. Das gilt im Übrigen auch für die Photoshop-Anwender, jedenfalls immer dann, wenn sie mal nicht über eine funktionierende Internetverbindung verfügen.

Zum anderen ist eine Website in der Regel kein isoliertes Kommunikationsmittel. Zumeist wird man auf der Basis des Onlineauftrittes eine Reihe weiterer Medien entwerfen, die naheliegenderweise ähnlich gestaltet sein sollen. Spätestens an dieser Stelle, an der Illustrator, Indesign oder Quark XPress ins Spiel kommen, hilft der reine Onlinezugriff auf die Web-Fonts nicht mehr weiter. Da die Schriften als TTF/OTF verfügbar sind, stellt die lokale Verwendung zudem kein Problem dar.

Google Web-Fonts: Nur portionsweiser Download vorgesehen

Nun mag man einwenden, dass die neueste Version des Google Verzeichnisses ohnehin den Download der eigenen Zusammenstellung erlaubt. Das ist gut und ein Fortschritt gegenüber der früheren Verfahrensweise. Allerdings erhält man auf diese Weise eben tatsächlich nur diejenigen Schriftarten, die man innerhalb des recht mühseligen Auswahlprozesses zusammen geklickt hat. Ist man sich der Fontauswahl sehr sicher, reicht diese Vorgehensweise möglicherweise sogar.

Selten jedoch habe ich es erlebt, dass ein Kunde direkt die erste Schriftart akzeptiert hat. Zumeist mussten doch etliche Vorschläge her, um zum Konsens zu gelangen. Müsste man nun für jeden Vorschlag eine neue Zusammenstellung aus dem Verzeichnis ziehen, so wäre das doch übermäßig mühselig. Außerdem lässt sich viel leichter assoziativ arbeiten, wenn man alle Optionen innerhalb des Grafikprogramms im Überlick sehen kann.

Ich denke, wir sind uns einig. Wir benötigen eine lokale Kopie des kompletten Google Web-Fonts Directory.

Google Web-Fonts per Mercurial runterladen

Es ist nicht so, dass Google den Download des gesamten Fontpakets verhindern möchte. Die Möglichkeit des Komplettdownloads ist halt nur nicht sehr prominent platziert und wirkt auf den ersten Blick auch recht kompliziert. Das vollständige Font-Directory wurde auf Google Code ausgelagert. Dass der Download jedoch keineswegs kompliziert ist, habe ich im Selbstversuch feststellen können.

Meine Versuchsanordnung basiert auf einem MacBook Air mit Mac OS 10.7. Ich bin kein großer Freund der Kommandozeile und vermeide diese seit MS DOS, wo ich nur kann. Deshalb entscheide ich mich nicht für die Variante des Downloads der Scriptvariante Mercurial, sondern setze direkt auf die GUI MacHG.

MacHG von Jeff Harris ist eine kostenlose Benutzeroberfläche für Mercurial, die eben letzteres direkt mitbringt. Eine separate Mercurial-Installation ist demnach nicht vonnöten. MacHG muss lediglich heruntergeladen und lokal entpackt werden, um sofort einsatzfähig zu sein. So präsentiert sich die GUI:

Ich wähle an dieser Stelle “Clone A Repository” und tätige im folgenden Bildschirm diese Eingaben:

Nach Klick auf “Add And Clone” geht es bereits los. Jetzt ist Geduld gefragt. Rund 1,4 GB zieht MacHG aus dem Weltennetz und organisiert sie sauber in das nun lokale Verzeichnis googlefontdirectory in meinem User-Ordner. So sieht das fertige Ergebnis im Finder dann aus:

In MacHG besteht ebenfalls die Möglichkeit, das Repository zu verwalten. Hierauf sollte man geflissentlich verzichten. MacHG benötigt man fürderhin nur noch, um das Repository zu updaten, sprich neue und/oder veränderte Schriften herunter zu laden.

Wie nun die in Ordnern sortierten Schriftarten im System installiert werden, dürfte jedem Anwender geläufig sein.

Für Windows-Anwender steht die GUI TortoiseHG zur freien Verfügung, die ebenso funktioniert wie MacHG. Auch hier ist lediglich die Angabe des Server-Repository in Kombination mit einem lokalen Speicherort erforderlich, um alle 500+ Google Web-Fonts im TrueType- oder OpenType-Format auf die heimische Festplatte zu holen.

Linux-Anwender kommen um Mercurial als Terminal-Anwendung mit einem beherzten apt-get install -y mercurial; nicht herum.

Kategorien
Essentials Icons & Fonts

3 elegante, kostenlose Vektor-Iconsets von Matt Gentile

Erst vor ein paar Tagen haben wir einige hochwertige Icons-Sets zusammen gestellt: SweetiePlus von Joseph North, Freshy Icons von Martin Karasek und Foundation Iconfonts von ZURB. Bei unseren Recherchen sind wir auf weitere, empfehlenswerte Symbolsätze gestoßen. Wir sind der Meinung, dass man von Icons nie genug bekommen kann. Deshalb stellen wir im folgenden Beitrag drei weitere kostenlose Sets vor. Alle stammen aus der digitalen Feder von Matt Gentile, einem Designer und Developer aus New Hyde Park, der die Website Icon Deposit betreibt.


Bild: Icon Supermonkeyball von Hans Dorsch auf Flickr, Lizenz: CC-BY-SA 2.0

Premium Pixels (PNG/CSH/PSD)

Das erste Set hört auf den Namen Premium Pixels. Es ist ein Vector Icon-Set mit 58 Bildzeichen. Alle Icons sind in der Auflösung von 16×16 Pixel abgelegt. Das Set steht auf premiumpixels.com kostenlos bereit. Für den Download will Matt die E-Mailadresse wissen. Danach liefert er das Set als Zip-Datei in das angegebene Postfach. Die Icons liegen in den Formaten PNG, PSD und CSH vor. Alternativ lässt sich das Set auch auf der Webseite des Entwicklers herunterladen. Wichtiger Hinweis: Bei der Verwendung in eigenen Onlineprojekten ist ein Backlink zu setzen. Und zwar entweder auf die Startseite von Icon Deposit oder auf den zum Set gehörigen Blogbeitrag. Weiterhin darf man die Icons nicht selber wieder zum Download bereit stellen.


Ein Ausschnitt aus dem Premium Pixels Icon-Set

Micro Icon-Set (PSD)

Das Micro Icon-Set ist ebenfalls ein Vector Icon Set. Es beinhaltet 110 Icons in der Auflösung von 16×16 Pixel. Da die Icons als PSD-Datei mit Vektorformen vorliegen, können sie bei Bedarf auf beliebige Grössen angepasst werden. Bei der Verwendung des Micro-Icon Set soll ebenfalls entweder auf die Startseite von Icon Deposit oder auf den zum Set gehörigen Blogbeitrag verlinkt werden.


Ein Ausschnitt aus dem Micro Icon-Set

Glyph UI Icons (PNG/CSH/PSD)

Das Glyph UI Icon-Set beinhaltet 48 Icons in den Auflösung von 16×16 Pixel. Die Bildzeichen liegen in den Formaten PNG, PSD und CSH vor. Bei Bedarf können sie auf beliebige Grössen angepasst werden. Wie auch bei allen oben vorgestellten Sets, soll bei der Verwendung entweder auf die Startseite von Icon Deposit oder auf den zum Set gehörigen Blogbeitrag verlinkt werden.


Ein Ausschnitt aus dem Glyph UI Icon-Set

Zusätzliche Informationen

Alle Icon Sets stehen unter der Creative Commons Lizenz CC By-SA 3.0.

(dpe)

Kategorien
Essentials Icons & Fonts

20 kostenlose Fonts mit deutschen Sonderzeichen

Kostenlose Schriftarten gibt es wie Sand am Meer. Leider passiert es bei einer Verwendung in eigenen Projekten dann oft, dass statt „Späßen“ nur „Sp  en“ auf dem Bildschirm steht, weil die passenden Sonderzeichen nicht vorhanden oder nur in der kostenpflichtigen Version verfügbar sind. Wir haben daher erneut das Web durchforstet. 20 schicke Fonts mit deutschen Sonderzeichen stellen wir heute vor:.

Lobster


Pablo Impallari hat mit „Lobster“ eine hervorragend ausgearbeitete Schriftart erstellt, die seit der ersten Version bereits mehrmals optimiert und erweitert wurde. Die Schriftart ist bereits in Version 1.8 verfügbar und darf sowohl privat als auch kommerziell frei verwendet werden.

 

Respective


Der schwedische Designer Måns Grebäck hat bereits viele sehr gute Schriftarten erstellt und Respective setzt diese Reihe fort. Die Schrift darf privat kostenlos genutzt werden. Kommerzielle Nutzung erfordert eine Lizenz.

 

Channel


Mit Channel entstand eine weitere kreative Schrift von Måns Grebäck aus Schweden. Privat darf die Schrift kostenlos genutzt werden. Kommerzielle Nutzung erfordert eine Lizenz.

 

HvD Comic Serif


Designer Hannes von Döhren setzt mit Comic Serif eine erstklassige Alternative zur unbeliebten Comic Sans und bietet die Schrift zum freien Download an. Die Nutzung ist für private und kommerzielle Projekte kostenlos.

 

Nederland Fantasy


Die junge Melanie Blanco gestaltete diese verspielte Schriftart und bietet sie frei zum Download an. Private Nutzung ist kostenlos. Die kommerzielle Nutzung setzt eine Spende voraus.

 

Janda Manatee


Kimberly Geswein erstellt seit 2006 Schriftarten als Hobby und stellt diese kostenlos zur Verfügung. Ihre Schriften dürfen privat kostenlos verwendet werden. Für  5$ Spende können Ihre  Schriften auch kommerziell genutzt werden.

 

Mezzanine


Frédéric Rich erstellte diese Schrift inspiriert von alten Postern aus der U-Bahn und bietet diese zum Download an. Privat darf die Schrift kostenlos genutzt werden. Vor einer kommerziellen Nutzung muss Kontakt aufgenommen werden.


 

Helve Cursive


Toto erstellte diese Schriftart anhand von alten Zeichnungen der „Helvetica Cursive“ und bietet sie zum Download an. Die Schrift darf privat und kommerziell frei verwendet werden.

 

B de Bonita


Fernando Haro wurde durch alte spanische Filmplakate inspiriert. Er versuchte, deren Stil in eine Schriftart zu übertragen. Die Schriftart kann kostenlos heruntergeladen und privat genutzt werden. Einer kommerzielle Nutzung erfordert eine kleine Spende

 

Dimbo


Der junge  Jayvee D. Enaguas entwarf diese Schrift nach einem alten Cartoon und stellt sie für private und kommerzielle Nutzung kostenlos zur Verfügung.

 

Tusj


Designer Magnus Cederholm hat mit der Tusj eine gut ausgearbeitete und sehr detaillierte Schrift erstellt und veröffentlicht sie kostenlos für private und kommerzielle Nutzung.


 

Traveling Typewriter


Carl Krull hat die Schrift einer alten Olympia Schreibmaschine, die er in Dänemark fand, digitalisiert, ohne dabei den typischen Schreibmaschinen Stil zu verlieren. Der Download und die private Nutzung ist kostenlos. Bei kommerzieller Verwendung wird um eine kleine Spende gebeten.

 

Salamandre


Claude Pelletier hat diese schlanke Serifenschrift entworfen und bietet sie komplett kostenlos zum Download an. Genutzt werden darf sie sowohl privat als auch kommerziell.

 

Deserted


Entworfen vom Ungarn Bálint Erdősi steht diese schlanke Sans-Serif kostenlos zum Download bereit. Die Schrift darf privat und kommerziell benutzt werden.

 

Marie


Sascha Timplan stellt für die private Nutzung 2 Schnitte seiner Schrift zur freien Verfügung.  Für kommerzielle Projekte kann man die Schnitte bei  MyFonts erwerben.

 

Transmission


Sascha Timplan stellt weitere 2 Schnitte einer anderen Schrift für die private Nutzung zur Verfügung. Für eine kommerzielle Nutzung stehen diese und weitere Schnitte bei MyFonts.com zum Kauf bereit.

 

Roboto


Google Android: Das Entwicklerteam hat für sein Betriebssystem eine eigene Schriftart mit 16! Schnitten erstellt und bietet sie für private und kommerzielle Projekte kostenlos zum Download an.

 

Sansation


Designer Bernd Montag hat eine sehr moderne Schrift gestaltet und hervorragend ausgearbeitet mit 6 Schnitten und diversen Ligaturen. Sie darf sowohl für private als auch kommerzielle Zwecke  heruntergeladen und benutzt werden.

 

Coolvetica


Typodermic Fonts ließ sich bei dieser Schrift von der Werbung der 70er Jahre inspirieren, wo Helvetica vielfach variiert wurde. Dieser Schriftschnitt darf privat und  kommerziell kostenlos heruntergeladen und verwendet werden.

 

Ubuntu


Gestaltet von Dalton Maag Ltd enstand die Schriftart zur gleichnamigen Linux Distribution. Und genauso wie Linux, darf die Schrift sowohl privat als auch kommerziell  genutzt werden. Sie kann auf der extra eingerichteten Webseite  font.Ubuntu.com kostenlos heruntergeladen werden.

Kategorien
Icons & Fonts

Font Dragr: Beliebige Schriftarten auf Websites live testen

Webfonts werden immer beliebter. Allein im Google Webfonts-Verzeichnis liegen aktuell mehr als 500 leicht einzubindende Schriftarten bereit. Hinzu kommen weitere Anbieter, die teils kostenlos, teils kostenpflichtig ihre Schriftenvielfalt ins Weltennetz entlassen. Zu den bekanntesten kommerziellen Anbietern dürfte wohl Font-Veteran Adobe mit dem Dienst Typekit gehören. Wer Wert auf eine ganz bestimmte Schriftart legt, die er womöglich sogar selbst designt hat oder wer einfach nur alles hasst, was nicht total individuell ist, wird mit diesen Diensten dennoch nicht glücklich. Etwas Eigenes muss her!

Neben den lizenzrechtlichen Problemen, die sich aus der Verwendung von Fonts ergeben, die nicht unter Open Source, wie bei Google, oder einer anderen nachvollziehbaren Lizenz, wie bei Typekit, stehen, ergibt sich ein Problem in der Bewertung der Eignung der jeweiligen Schriftart unter Designgesichtspunkten. An dieser Stelle kann eine relativ neue Webapp namens Font Dragr helfen.

Font Dragr: Darstellung beliebiger Schriften in praxisnahem Szenario

Die Webapp Font Dragr besteht aus drei Modulen. Das eine Modul ist eine kleine Schriftartgalerie mit immerhin neun verschiedenen, teils extravaganten Fonts, die zumeist unter der SIL Open Font Lizenz stehen, jedenfalls alle frei verwendet werden dürfen.


Font Dragrs kleine Schriftengalerie

Interessanter als die kleine Schriftensammlung ist indes die Möglichkeit, eigene Schriftarten von der lokalen Festplatte in den Formaten TTF und OTF per Drag und Drop in die Webapp zu laden. Dort stehen sie dann im zweiten Modul des Font Dragr, dem Editor, zur Verfügung. Im Editor werden sie in unterschiedlichen per CSS gesetzten Größen und Farben zur Beurteilung bereit gestellt. Alle Beispieltexte können frei angepasst werden. So ist ein praxisnahes Testen der Tauglichkeit einfach gegeben. Auch die Verfügbarkeit deutscher Sonderzeichen wird schnell offenbar.


Font Dragrs Editor: Übersichtliche Darstellung des optischen Eindrucks

Font Dragr: Liveeinsatz auf beliebigen Websites

Noch eindrucksvoller lässt sich eine Schriftart natürlich dann beurteilen, wenn man sie direkt auf einzelne oder alle Elemente einer Live-Website anwenden kann. Hierfür bringt Font Dragr ein Bookmarklet mit, das genau das leistet. Auf einer beliebigen Website, hier im Beispiel auf Dr. Web, aufgerufen, wendet Font Dragr jede per Drag and Drop auf die Website gezogene Schriftart auf deren Bodytag an.


Ich glaube, diese Schriftart aus Font Dragr werden wir für Dr. Web doch nicht verwenden…

Durch Angabe des Selektors lässt sich die Wirkung feiner tunen. So könnte man besonders plakative Schriftarten etwa gezielt auf h1 a anwenden und dezentere Vertreter auf p. Font Dragr behält für die Dauer der Sitzung die gewählten Fonteinstellungen bei. Es ist also möglich, mehrere Selektoren mit unterschiedlichen Fonts zu bestücken.

In meinem Test funktionierte das Drag und Drop von lokalen Schriftarten unter Windows 7 allerdings überhaupt nicht. Ich musste mich auf dem Microsoft-OS mit der kleinen Schriftengalerie des Font Dragr bescheiden. Unter Mac OSX hatte ich indes keinerlei Probleme. Jedwede installierte Schrift liess sich ohne Probleme in den Font Dragr ziehen.

So erhält Font Dragr von mir – zumindest bezogen auf das Mac OSX – das Prädikat „Uneingeschränkt empfehlenswert“.

Zum Schluss sei noch der Hinweis erlaubt, dass Font Dragr sich naturgemäß absolut nicht um die rechtliche Seite des Schrifteneinsatzes schert. Wer einen Font als Webfont einsetzen will, muss aber unbedingt diese Frage im Vorfeld klären.

Links zum Beitrag:

Kategorien
Essentials Icons & Fonts

400 kostenlose Icons und ein komplettes UI-Kit als Photoshop-Datei

Icons gibt es wie Sand am Meer. Wie immer, wenn es etwas scheinbar im Überfluss gibt, findet man jedoch leider mehr schlechte als gute Arbeiten. Gute Iconsets sind daher stets gesucht wie die berühmte Nadel im Heuhaufen. Da ist es doch schön, wenn ein Entwicklerteam gleich drei richtig gute Sammlungen kostenlos zur Verfügung stellt. Wir bedanken uns beim Team von Brankic1979.


350 Pixel-Perfect-Icons: Ein kleiner Ausschnitt…

Grafische Icons oder Icon-Fonts?

In den letzten Wochen haben wir hier bei Dr. Web einige Tools und Sets zum Thema Icon-Fonts vorgestellt. Icon-Fonts sind Schriftarten, die nur Bildsymbole beinhalten. Das ist im Grunde nicht neu. Wingdings und Webdings, die Symbolschriftarten von Microsoft, begleiten mich sicherlich schon seit den Neunzigern. Erst die Webfont-Technologie macht jedoch den ernsthaften Einsatz von Schriftarten auf Websites sinnvoll möglich. Und der Siegeszug der mobilen Geräte zwingt Entwickler dazu, ihre Designs zumindest auf diesen Geräten nutzbar zu machen. Icon-Fonts sind da eine gute Wahl, weil sie frei skalieren und so quasi automatisch responsiv sind. Via Mediaquery wird die Größe der Schriftart für den jeweiligen Client gesetzt und der Nutzer ist zufrieden.

Grafische Icons hingegen skalieren nicht frei mit, sind aber häufig schicker, aufwändiger, eleganter. Wenn sie vektorbasiert erstellt werden, können sie prinzipiell auch frei skalieren, dies allerdings nicht durch das Setzen einer Schriftgröße im relevanten CSS. Da sich jedoch CSS-Sprites immer mehr durchsetzen und ohnehin spezifische Stylesheets via Mediaqueries gesetzt werden müssen, fallen die Vorteile der Icon-Fonts nicht sehr deutlich ins Gewicht.

Es ist vielmehr Geschmackssache, für welche Art von Icon-Lösung man sich entscheidet.

Wem verdanken wir die heutigen Vorstellungen?

Das kleine Webdesignteam Brankic1979 verkauft einerseits klassische Designleistungen und andererseits Themes und Templates über ThemeForest. Nebenher machen sie immer wieder Teile ihrer Arbeit kostenlos verfügbar. Auf ihrer Website gibt es einen recht großen Bereich mit einem guten Dutzend Freebies, von denen mir drei besonders positiv aufgefallen sind.

350 Pixel-Perfect-Icons als Photoshop-Datei

Die neueste Arbeit des Teams ist ein Set namens 350 Pixel-Perfect-Icons. 350 Bildzeichen werden in einer knapp 2,3 MB großen PSD-Datei völlig kostenlos zur privaten und kommerziellen Nutzung bereit gestellt. Dass es sich um eine ganz frische Entwicklung handelt, erkennt man nicht nur am sehr zeitgemäßen Design, sondern vor allem daran, dass auch Cloud-Icons, sowie Akkustandsanzeigen und viele andere erst in jüngerer Zeit für das Webdesign relevant gewordene Symbole enthalten sind.


350 Pixel-Perfect-Icons in Photoshop CS6

Die Icons liegen in der PSD jeweils auf einer separaten Ebene und sind voll bearbeitbar. Da sie als Vektorformen angelegt sind, lassen sie sich beliebig skalieren.

50 Free Social-Media-Icons


50 freie Social-Media-Icons im Überblick

Auch das Iconset mit 50 Bildzeichen bekannter und weniger bekannter Social-Media-Plattformen wird kostenfrei in der Form einer rund 2,8 MB großen PSD-Datei zum Download angeboten. Vom Stil her lassen sich diese Sets, sowie das weiter oben genannte Pixel-Perfect-Set gut gemeinschaftlich einsetzen. Die Social-Media-Symbole beinhalten auch neuere Dienste, so etwa Google+.


50 freie Social-Media-Icons in Photoshop CS6

Ebenso wie beim Pixel-Perfect-Set liegen alle Bildzeichen auf eigenen Ebenen und sind so voll bearbeitbar.

Clean UI-Kit

Das mit rund 7 MB größte Paket liefert sehr moderne UI-Elemente. Suchboxen, Radiobuttons, Slider, Schaltflächen und vieles mehr enthält die PSD, die ebenfalls sowohl kommerziell wie privat frei eingesetzt werden kann.


Ein kleiner Ausschnitt aus dem Clean UI-Kit

Nutzt man diese drei Sammlungen für den nächsten Designauftrag, ist jedenfalls sicher, dass der Kunde nicht über altbackene Optik klagen wird. Ein Hinweis zum Schluss: Der kommerzielle Einsatz in Kundenprojekten ist erlaubt. Nicht erlaubt hingegen ist das Bereitstellen der einzelnen Sets zum Download. Aber das sollte sich ja eigentlich von selbst verstehen…

(do)

Kategorien
Essentials Icons & Fonts

3 moderne Icon-Fonts für das nächste Web-Projekt

Die Gestaltung von Icons ist keine einfache Sache. Sie müssen möglichst prägnant sein und auf engstem Raum in kleinen Größen eindeutig ausdrücken, wofür sie stehen. Da Icons nicht immer wieder aufs Neue gestaltet werden müssen, lassen sich in vielen Fällen fertige Symbole verwenden, die sich dank Webfonts mittlerweile einfach in das eigene Web-Projekt integrieren lassen. Icon-Fonts haben zudem den Vorteil, dass sie beliebig skalierbar sind und auch auf hochauflösenden Bildschirmen, wie beispielsweise dem Retina-Display des neuesten iPad, gestochen scharf dargestellt werden. Wir haben drei interessante Vertreter zusammengestellt.

Raphaël Icon-Set


Das Raphaël Icon-Set im Überblick

Das Raphaël Icon-Set stellt eine ganze Reihe Icons für bekannte Funktionen zur Verfügung. Dazu gehören Pfeile, Symbole für Datums- und Uhrzeitangaben sowie Lupen, Zahnräder und Stifte. Außerdem gibt es Wetter-Icons für fast jede Wetterlage sowie die Icons der bekannten Browser.

Da es sich bei der Schrift um einen Webfont handelt, kann sie einfach per CSS eingebunden werden. Ein entsprechendes CSS-Snippet wird beim Download direkt mit angeboten. Der Webfont steht unter der MIT-Lizenz zur kostenlosen Nutzung bereit.

Font Awesome


Font Awesome: Ein paar Beispiele aus der großen Bibliothek

Der Icon-Font Font Awesome bietet mit über 150 Icons eine große Palette unterschiedlicher Symbole an. Zu den Base-Icons gehören diverse Pfeile sowie gängige Symbole, die einem immer wieder im Web begegnen: Papierkorb, Einkaufswagen, Dokumente, Label etc.

Zu den Extended-Icons gehören unter anderem Symbole für soziale Plattformen wie Twitter und Facebook.

Die Schrift ist ebenfalls als Webfont erhältlich und lässt sich über ein Stylesheet einbinden. Außerdem gibt es bereits eine fertige CSS-Datei, mit der sich Icons einfach per CSS-Klasse ansprechen lassen. Besonderes Augenmerk richteten die Entwickler auf die Integration des Fonts mit Twitter Bootstrap. Font Awesome steht unter der Lizenz Creative Commons Attribution 3.0, kann also auch kommerziell frei verwendet werden, sofern ein Hinweis auf die Entwickler im publizierten Projekt verankert wird.

Web Symbols typeface


Web Symbols typeface: Minimalistische Icons, gut für das App-Design geeignet

Die dritte Schrift im Bunde ist Web Symbols typeface. Auch hier gibt es viele User-Interface-Icons, die zum Beispiel in Content-Management-Systemen oder in Galerien zum Einsatz kommen können.

Außerdem stehen eine ganze Reihe von Symbolen für soziale Netzwerke wie Facebook, Twitter, YouTube und viele andere zur Verfügung. Der Icon-Font kann unter Beachtung der Open Font License (OFL) kostenlos verwendet werden. (dpe)

Kategorien
Icons & Fonts

Schrift im Web: Stolperfallen, Workarounds und neue Möglichkeiten

Die Möglichkeiten, beliebige Schriften auf Webseiten einsetzen zu können, haben sich in den letzten zwei Jahren schneller entwickelt, als es die meisten erwartet hätten. Derzeit müssen Webdesigner lediglich noch mit einem Format-Wirrwarr kämpfen, um die Schriften browserübergreifend auszuliefern. Dieses Problem wird aber im Verlauf der nächsten Jahre verschwinden, wenn sich das Web Open Font Format (WOFF) als Standard für Webschriften etabliert hat.


Typografische Vielfalt fernab vom Einerlei der Systemschriften

Ein weiterer Stolperstein ist derzeit noch die recht große Verbreitung von Windows-Rechnern, bei denen die Subpixel-Darstellung nicht standardmäßig aktiviert oder vom Anwender bewusst abgeschaltet wurde. Dies führt bei in Webseiten eingebundenen Webfonts meist zu einer deutlich schlechteren Darstellung als es bei den üblichen Systemfonts der Fall ist. Auch dies wird sich im Laufe der Jahre natürlich bessern, wenn die Anwender auf neue Rechner mit aktuelleren Betriebssystemversionen umsteigen. Der Internet Explorer wird zudem ab der Version 9 mit der Text-Layout-Engine DirectWrite arbeiten, die eine noch mal deutlich bessere Textdarstellung bietet.

Es ist also immer ratsam, Webfonts in möglichst vielen Browsern und Betriebssystemversionen zu testen und dabei auch die möglichen Textdarstellungsoptionen nicht zu vernachlässigen. Sollte die Darstellung ohne Subpixel-Rendering zu schlecht sein, kann die Webseite alternativ mit Systemfonts ausgeliefert werden. In der einfachsten Variante, kann man ältere Browser- und Betriebssystemversionen mithilfe von Conditional Comments ausschließen, um so die Mehrzahl der Anwender, die ohne Subpixel-Rendering arbeiten, zu erfassen. Es ist aber auch möglich, die Aktiviertung der Subpixeldarstellung über JavaScript direkt abzufragen.

Textlayout

Mit den neuen Möglichkeiten, Schriften in Webseiten einbinden zu können, nähert sich das Layout vieler Webseiten näher der Darstellung von Drucksachen an. Dennoch gibt es immer noch einen deutlichen Unterschied: Browser besitzen immer noch keine akzeptable Möglichkeit für eine automatische Silbentrennung. So ist besonders bei den typisch deutschen langen Wörtern meist unmöglich, Webseitentexte im Blocksatz anzuzeigen, da mangels automatischer Silbertrennung dann riesige Löcher in den Schriftsatz gerissen werden, wodurch sich die Lesbarkeit natürlich deutlich verschlechtert.

Mithilfe von JavaScript lässt sich eine sprachabhängige Silbentrennung client-seitig realisieren. Auch eine serverseitige Lösung liegt mit dem phpHyphenator vor. Dennoch sind auch dies natürlich nur Notlösungen für eine Funktion, die direkt im Browser integriert sein müsste und in Zukunft hoffentlich auch sein wird.

OpenType-Funktionen

Mit der Verbreitung der Webfonts fiel auch ein weiterer Mangel der Textlayout-Möglichkeiten der gängigen Browser auf: die fehlende Unterstützung von OpenType-Funktionen, wie sie seit längerem in professionellen Layout-Programmen wie Adobe InDesign oder QuarkXPress möglich sind.

Durch OpenType-Funktionen können Fonts mit einer gewissen eingebauten „Intelligenz“ versehen werden. Sofern das Anwendungsprogramm dies unterstützt, sind dann automatische Ersetzungen möglich. In Schriften, die auf der lateinischen Schrift aufbauen, sind dies vor allem typografische Funktionen wie Ligaturen, Kapitälchen, spezielle Bruchziffern und so weiter, die automatisch gesetzt werden können, ohne dass der Ersteller des Textes diese Zeichen manuell heraussuchen müsste.


Synthetisch generierte (grauer Schriftzug oben) und echte echte Kapitälchen (unten) in der Beta-Version von Firefox 4

So manche Schrift wird durch OpenType-Funktionen überhaupt erst benutzbar. Bei verbundenen lateinischen Schreibschriften oder arabischer Schrift hängt zum Beispiel die Form der Buchstaben von der Position im Wort und den benachbarten Zeichen ab. Gut ausgebaute OpenType-Schriften können deshalb verschiedenen Alternativ-Zeichen für die jeweiligen Buchstaben enthalten. Und mithilfe von OpenType-Funktionen können dann die nötigen kontextbedingten Ersetzungen automatisch vorgenommen werden.


Perfekte Buchstabenverbindungen (blauer Schriftzug unten) dank kontextbedingter Ersetzungen in Firefox 4

Die aktuelle Beta-Version von Firefox 4 bietet erstmals Zugriff auf diese OpenType-Funktionen. Dies erfolgt aktuell noch über einen solchen proprietären Aufruf:

h1 {
-moz-font-feature-settings:’smcp=1′;
}

Dieses Beispiel stellt die Überschriften im echten Kapitälchen dar, sofern die Schriftart entsprechend ausgestattet ist. Eine Liste der gängigen OpenType-Funktionen kann hier eingesehen werden. Noch gibt es leider keinen einheitlichen Weg, diese Funktionen im CSS-Code anzusprechen, aber der Entwurf des CSS Fonts Module Level 3 sieht diese Möglichkeit bereits vor und man kann erwarten, dass die anderen Browserhersteller dem Beispiel von Firefox mittelfristig folgen werden.

Wie man sieht, gibt es für die Browser-Entwickler noch einiges zu tun, bis das Web die Qualität des Textsatzes von Drucksachen erreichen oder gar überflügeln kann. Doch erfreulicherweise zeigt sich bei allen Browser-Herstellern eine wachsende Sensibilität für solche typografischen Feinheiten und man kann daher erwarten, dass hier schon den kommenden Jahren weitere Fortschritte gemacht werden.

(mm), ™

Kategorien
Icons & Fonts

Webfonts „mieten“ – Auswahl aktueller Webfont-Dienste

Webfonts müssen auf Webseiten funktionieren, sprich, wenn der Betrachter des Webdokumentes gerade online ist. Der Gedanke liegt deshalb gar nicht so fern, dass man die Fonts gar nicht unbedingt auf dem eigenen Server zur Verfügung stellen muss, sondern sie als Webdienst von einem externen Anbieter einbinden kann. Dazu genügt es in der Regel, einen simplen CSS-Import-Befehl in die eigene Webseite aufzunehmen.

Schriften durch eine fortwährende Bezahlung zu mieten, ohne die Fontdateien selbst zu erhalten, mag auf manchen Anwender zunächst befremdlich wirken, doch es bringt auch einige Vorteile mit sich. Wer kommerzielle Druckschriften lizenziert, muss buchstäblich die Katze im Sack kaufen. Die Schriften können nicht im Voraus getestet werden und selbst wenn die Schriften später gar nicht zum Einsatz kommen – zum Beispiel, weil der Kunde sie ablehnt – kann man sie nicht zurückgeben. Mit Webfont-Diensten hat man diese Sorgen nicht. Man kann die Fonts problemlos im eigenen Layout testen und präsentieren. Zudem bezahlen Sie beziehungsweise Ihr Kunde für die verwendeten Schriften nur für den tatsächlichen Zeitraum der Nutzung.

Verfügbarkeit ist kein Problem

Die am meisten geäußerte Befürchtung gegenüber Webfont-Diensten bezieht sich übrigens auf die Verfügbarkeit. Was passiert, wenn die Server des Webfont-Dienstes einmal versagen? Doch darüber muss man sich keine Gedanken machen. Alle Anbieter setzen auf ein Content Distribution Network, das die Daten überall auf der Welt schnell und verlässlich ausliefert.

Fallback auf Systemschriften definieren

Und natürlich sollte man auch zukünftig die üblichen Fallback-System-Fonts im CSS definieren, denn Anwender oder Systemadministratoren können die Anzeige der Webfonts ja auch deaktivieren und so mancher alter Browser oder mobile Client, der keine Webfonts unterstützt, wird noch einige Jahre eingesetzt werden.

Die Anbieter

Zahlreiche Webfont-Dienste sind seit dem letzten Jahr gestartet und es kommen sicher noch einige hinzu. Nachfolgend eine Auflistung der derzeit aktiven:

Google Font Directory

Der Schriftkatalog von Google wirkt zunächst wenig spektakulär, da er sich auf eine kleine Auswahl von Open-Source-Fonts beschränkt. Der Dienst besticht aber vor allem durch seine Einfachheit. Es genügt eine Zeile Code, um die Webfonts in die eigenen Seite einzubinden. Es ist nicht einmal eine Registrierung notwendig. Beispiel:

<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic' rel='stylesheet' type='text/css'>

Typekit

Dieser Dienst des kalifornischen Unternehmens Small Batch Inc kann sicherlich als der Branchenprimus unter den Diensten für kommerzielle Webfonts angesehen werden. Typekit kann nach nur einem Jahr bereits auf einen beachtlichen Schriftkatalog von mehreren tausend Fonts und eine große Nutzerzahl zurückblicken. Zudem arbeitet das Unternehmen fortwährend an der Optimierung der Font-Auslieferung und setzt hier derzeit die technischen Maßstäbe, an der sich alle anderen Dienste messen lassen müssen.

Bezahlt wir jährlich und die drei Preisstufen (24,99 $/49,99 $/99,99 $) richtet sich in erster Linie nach der Anzahl der Fontabrufe. Dafür muss man sich bei Typekit übrigens nicht auf bestimmte Fonts festlegen, sondern erhält Zugriff auf die gesamte Bibliothek.

Typotheque

Der niederländische Schriftanbieter Typotheque war das erste Schriftenhaus, das selbst einen Webfont-Dienst startete. Bestehende Kunden, die Fonts bereits als Druckschriften lizenziert haben, können die Webfonts kostenlos nutzen, solange der monatliche Traffic 500 MB nicht überschreitet. Ansonsten können die Schriften für 20 Prozent des Druckschriften-Preises auch einzeln für den Einsatz auf Webseiten lizenziert werden.

Fonts.com web fonts

Hinter diesem Dienst steckt der amerikanische Schriftanbieter Monotype, der mit ca. 7000 Schriften derzeit den größten Bestand an Webfonts liefert, darunter viele Schrift-Klassiker der 20. Jahrhundert wie zum Beispiel Helvetica, Frutiger und Univers. Der Dienst hat gerade die Beta-Phase verlassen und steht nun allen Anwendern offen. Die Preise richten sich nach den monatlichen Seitenabrufen und beginnen bei 10 US-Dollar für 250.000 Abrufe.

FontsLive

Dieser Dienst wird von dem Microsoft-nahen Schriftunternehmen Ascender angeboten. Dementsprechend finden sich hier auch insbesondere die typischen Systemschriften von Microsoft und Monotype zur Lizenzierung als Webfonts.

Die Preise beginnen bei 10 US-Dollar pro Jahr und Font und richten sich nach dem monatlichen Traffic-Aufkommen.

Fontdeck

Fontdeck ist wie Typekit ein unabhängiger Webfont-Anbieter, der derzeit ca. 100 Fonts von 13 Schriftanbietern zur Verfügung stellt. Die Abrechnung erfolgt pro Jahr und Font, sind jedoch von Schrift zu Schrift unterschiedlich, da sie von den beteiligten Schriftanbietern selbst bestimmt werden können.

WebINK

Hinter diesem Angebot steht der Software-Entwickler Extensis, der für seine Schriftverwaltungsprogramme bekannt ist. Zum angebotenen Schriftkatalog zählen derzeit 13 mittelgroße Schriftanbieter. Die Preise sind auch hier vom monatlichen Datendurchsatz abhängig und liegen zwischen 0,99 $ für 1 GB bis zu 19,99 $ für 80 GB pro Monat.

Webtype

Über Webtype kann man bildschirm- und größenoptimierte Webfonts des Schriftanbieters Font Bureau und anderer Anbieter beziehen. Die Preise liegen abhängig von Zahl der monatlichen Abrufe zwischen 10 $ (30.000 Abrufe) und 100 $ (600.000 Abrufe) pro Jahr.

Just Another Foundry

Bei diesem Schriftanbieter kann man die derzeit 5 erhältlichen Schriftfamilien jeweils komplett für 19 Euro pro Jahr mieten. Der Datendurchsatz ist dabei auf 2 Gigabyte pro Monat beschränkt.

Kernest

Dieser Dienst bietet vor allem kostenlose Webfonts zur einfachen Einbettung in Webseiten an. Wie bei Google reicht ein einfacher CSS-Aufruf, der ohne Registrierung zugänglich ist. Wer sich registriert kann die Schriften auch als Cross-Browser-kompatible Webfont-Pakete zum Hosting auf einem eigenen Server herunterladen. Darüber hinaus gibt es auch einige kommerzielle Schriften im Angebot, die allerdings momentan nicht mit der Qualität der oben genannten Webfont-Dienste mithalten können.

Fazit

Klare Empfehlungen zu den bestehenden Webfont-Diensten können momentan noch nicht gegeben werden. Es handelt sich hier um einen völlig neuen Markt und es ist noch nicht abzusehen, welche Anbieter sich besonders gut etablieren können und welche eventuell auf der Strecke bleiben. So muss die Entscheidung über den zu benutzenden Webfont-Dienst bislang in erster Linie projektabhängig über die Schriftwahl selbst fallen. Denn es sieht eher nicht danach aus, dass die kommerziellen Schriftanbieter ihre Fonts in vielen verschiedenen Webdiensten anbieten werden. Entweder besitzen die Schriftanbieter selbst einen Webfont-Dienst oder sie arbeiten mit einem unabhängigen Dienst ihres Vertrauens zusammen.

So müssen die Webdesigner wohl projektbezogen mit verschiedenen Diensten arbeiten. Eine große Einarbeitungszeit ist dafür allerdings kaum vonnöten. Alle Dienste arbeiten nach dem gleichem Schema: Nach der obligatorischen Registrierung legt man ein neues Projekt an und definiert die zugehörigen Domains. Im Anschluss können diesem Projekt bestimmte Fonts des Anbieters zugewiesen werden. Man erhält daraufhin einen kleinen Code-Schnippsel, den man in die eigene Seite einbindet. Dies ist entweder ein Link auf eine externe CSS-Datei oder aber ein kurzer JavaScript-Code, der den entsprechenden CSS-Aufruf beim Laden der Seite generiert. Mehr ist bei Webfont-Diensten nicht vonnöten, um die gewünschten Schriften zuverlässig und browserübergreifend auszuliefern.

(mm),

Kategorien
Icons & Fonts

Webfont-Formate: Beschaffenheit und Einsatzmöglichkeiten im Webdesign

Mit der neuen Möglichkeit, beliebige Schriften per @font-face in Webseiten einzubinden, ist ein neues Stilmittel hinzugekommen, dass die gewohnte Eintönigkeit der Systemschriften ablösen soll. Diese Artikelserie beleuchtet die Entwicklung und vor allem die heutigen Möglichkeiten dieser Technik ausführlich. In diesem Teil der Serie geht es um die Vor- und Nachteile der verschiedenen Formate.

Diese Beiträge könnten Sie auch interessieren:

Webfont-Formate

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, …
Sich im Dschungel der Fontformate zurecht zu finden, ist nicht gerade einfach. In diesem Artikel werden jene Fontformate näher beleuchtet, die für den Einsatz auf Webseiten besondere Relevanz besitzen.

TrueType

Dieses Format wurde Ende der 1980er Jahre als Alternative zu Adobes PostScript-Schriften-Formaten entwickelt. Als skalierbares Outline-Format löste es die bis dahin bei der Bildschirmdarstellung üblichen Bitmap-Fonts ab. In der Folge wurde es auch von Microsoft übernommen und entwickelte sich rasch zu dem Format für Systemschriften. Der Grund liegt vor allem in der Möglichkeit, die Bildschirmdarstellung sehr präzise und abgestimmt auf die jeweilige Schriftgröße kontrollieren zu können.

OpenType

Dieses Format wurde in Partnerschaft von Microsoft und Adobe entwickelt. Es setzt direkt auf dem TrueType-Format auf, bietet aber optionale, erweitere typografische Funktionen (Ligaturen, Bruchziffern, Kontextbedingte Alternativzeichen etc.), die vor allem in professionellen Design-Anwendungen zum Einsatz kommen und bislang leider in Browsern noch unzureichend unterstützt werden.

Wichtig zu wissen ist ferner, dass OpenType-Fonts in zwei Arten vorliegen können, je nachdem welche Outline-Technologie zum Einsatz kommt. Es gibt OpenType-Fonts mit TrueType-Outlines (OpenType TT) und solche mit PostScript-Outlines (OpenType PS). Letzteres werden häufig auch CFF-basiert (Compact File Format) genannt. Dies spielt beim Einsatz als Webfonts eine Rolle, da unter Windows die PostScript-basierten Fonts derzeit meist ohne Subpixel-Rendering dargestellt werden, was die Darstellungsqualität beträchtlich verschlechtert. Hier sind also die TrueType-basierten Fonts klar zu bevorzugen, auch wenn Microsoft dieses Problem in Zukunft ausmerzen wird.

Da sich TrueType- und OpenType-Fonts strukturell sehr ähneln, gilt die Unterstützung in der Regel für beide Formate. Bei Browsern ist eine Unterstützung gegeben seit Safari 3.1, Firefox 3.5 und Opera 10.

EOT

Das Format Embedded OpenType (EOT) wird seit Ende der 1990er Jahre im Internet Explorer eingesetzt. Es ist eine Abwandlung des TrueType bzw. OpenType-Formates, die sich durch zwei Besonderheiten auszeichnet: Zum einen sind EOT-Fonts in der Regel für eine schnellere Auslieferung im Web komprimiert. Zum anderen lassen sich EOT-Fonts an bestimmte Webseiten koppeln (URL Binding). Der Font funktioniert dann nur auf den so voreingestellten Webseiten. Ein unberechtigtes Kopieren zu einer anderen Domain ist nicht möglich.

EOT funktioniert ausschließlich im Internet Explorer. Auch wenn es sicherlich als Webfont-Format keine Zukunft hat, bietet es sich derzeit noch an, dieses Format auszuliefern, um auch die Benutzer der verschiedenen IE-Versionen mit Webfonts zu versorgen.

Ein aktuelles Windows-Programm zum kostenlosen Erstellen von komprimierten EOT-Fonts ist EOTFast.

WOFF

Das Web Open Font Format (WOFF) schickt sich derzeit an, der Standard für Schrift auf Webseiten zu werden. Es ist als ein Kompromiss zwischen Schrift- und Browser-Herstellern entstanden. Und so verwundert es auch nicht, dass das Format von zwei Schriftgestaltern und einem Mozilla-Entwickler in Gemeinschaft entwickelt wurde. Streng genommen ist WOFF kein neues Format, sondern eher ein Container-Format um das weit verbreitete OpenType-Format.

Auch bei WOFF ist wie beim EOT-Format eine Komprimierung direkt integriert. Darüber hinaus können Meta-Daten hinterlegt sein, die zum Beispiel eine Nutzungslizenz ausweisen, auch wenn diese Daten allenfalls Informationscharakter haben und in keiner Weise von Browser überprüft werden.

Mozilla kann seine Hausschrift FF Meta dank einer WOFF-Lizenz nun ohne Umwege auf der eigenen Webseite verwenden

Firefox unterstützt das Format seit Version 3.6 und eine Standardisierung durch das W3C ist derzeit im Gange. Alle anderen Browserhersteller arbeiten bereits an einer Integration in kommende Browser-Versionen.

Zur Konvertierung in das WOFF-Format kann der kostenlose Online-Dienst von Fontsquirrel benutzt werden.

SVG

Innerhalb des Vektorgrafik-Formates SVG lassen Fonts direkt in die entsprechenden SVG-Dateien einbetten. Man spricht meist von SVG-Fonts, wobei es sich in technischer Hinsicht dann kaum noch um Fonts im eigentlichen Sinne handelt. Vielmehr sind die Umrisslinien der einzelnen Buchstaben hinterlegt und sie werden dann entsprechend auf der Zeichenfläche der SVG-Grafik dargestellt.

Das Format hat im Zusammenhang mit Webfonts aktuell dennoch Relevanz, da es momentan das einzige der hier beschriebenen Formate ist, das auf iPhone und iPad im Mobile Safari benutzt werden kann.

Zur Erstellung kann ebenfalls der Dienst von Fontsquirrel benutzt werden.

Der Webfont-Dienst Typekit liefert seine Fonts auch im SVG-Format für iPhone und iPad aus.

In den nächsten Teilen der Serie lesen Sie:
  • Webfont-Anbieter
  • @font-face-Einbindung selbst gemacht
  • Ausblick: Schrift im Web

(mm),

Kategorien
Essentials Icons & Fonts

Typo-Tools: Kleine Helferlein für die Web-Typografie

Im Webdesign spielt die Auswahl der gestalterischen Merkmale des Schriftsatzes zumeist nur eine kleine Nebenrolle. Dabei sind Lesbarkeit und Räumlichkeit auch und gerade im Netz sehr wichtig. Geeignete Schriften und deren Formatierung entdeckt man weitaus leichter mit diesen Tools.

Typetester

Der Typetester erfreut den Gestalter schon mit seinem ansprechenden Design. Ein veränderbarer Beispieltext wird dabei in allen erdenklichen Formaten abgebildet. Über das Interface kann dieser Text vielseitig angepasst werden. Bei der Auswahl der Schriftart unterscheidet Typetester schon in einen sicheren Bereich mit Schriften, die weit verbreitet sind, und Schriften, die nur mit bestimmten Betriebssystemen, wie etwa Windows, Mac oder Windows Vista, mitgeliefert werden.

Weiter kann die Formatierung bei der Größe, dem Zeilenabstand, der Laufweite, der Ausrichtung, dem Abstand der Wörter sowie in den Farben des Textes und seinem Hintergrund beeinflusst werden. Drei gleich editierbare Spalten stehen dem Anwender zur Verfügung, wobei zu jeder der CSS-Code aufgerufen werden kann.

PX to EM

Um herauszufinden, wie sich Pixel zu der Einheit em verhalten, sollte man das Tool PX to EM einsetzen. Mit nur einem Klick erhält man basierend auf den Body font die entsprechenden Werte. Damit man diese nicht von Hand eintragen muss, kann über einen zweiten Punkt der CSS-Code angezeigt werden. Ein dritter Punkt mit dem Namen Learn bietet nach dem Aufrufen noch einige Informationen an, wie etwa zur Berechnung der verschiedenen Einheiten.

CSStype

Sehr einfach gehalten ist das Tool CSStype. Nach der Eingabe eines Beispieltextes kann die Schriftart und –farbe, deren Größe und Hintergrundfarbe bestimmt werden. Auch Wort- und Buchstabenlaufweite lassen sich regeln. Spezieller sind die Einstellungsoptionen zur Breite des Absatzes und dem Padding. Auch eine Beschriftung für einen Button kann man festlegen. Ein Klick auf Generate CSS ruft dann den CSS-Code auf.

HTMLipsum

HTMLipsum ist, wie der Name schon andeutet, ein Vorlagenanbieter für weitere Versatzstücke, die der Webdesigner ständig benötigt. Statt einem Blindtext, wie bei Lorem Ipsum, werden hierbei allerdings Code-Schnippsel für Absätze, Listen, Formulare, Tabellen und sogar Navigationsgrundlagen zum sofortigen Einsatz angeboten.

Typographic Grid

Typographic Grid ist kein Framework, sondern eine Formatierungsvorlage. Wer also mit seinem Entwurf gleich auch eine anspruchsvolle Formatierung des Textes vorstellen möchte, der erhält hiermit eine saubere Vorlage. Die 32 KB große Datei kann auf der Seite kostenlos heruntergeladen werden und enhält neben den Dateien für das Grid auch zwei PSD-Files.

CSStypeset

Beim CSStypeset muss man nicht erst die CSS-Datei aufrufen. Sie wird direkt neben dem Text dargestellt. Die Schriftart und –größe gibt man numerisch ein, die Laufweite der Buchstaben und Wörter kann man über Schieberegler steuern. Auch der Zeilenabstand wird so angesprochen. Die Fontfarbe und auch die des Hintergrundes wählt man bequem über einen Farbwähler aus. Einige Buttons lassen den ganzen Text fettgedruckt oder kursiv, links- oder rechtsbündig erscheinen. Ein einfaches Tool, mit guter Aufteilung.

Dummy Text Generator

Es gibt wirklich unendlich viele Lorem Ipsum-Generatoren. Im Webdesign ist solch ein Lückenfüller ja auch sehr nützlich, wenn schnell für neutrale Inhalte gesorgt werden soll. Allerdings mal ehrlich: Etwas langweilig wird das schon mit der Zeit. Und so freut man sich beim Dummy Text Generator über zehn verschiedene Blindtexte, mit Cicero und Li European lingues, Far Far away und Pangram, Kafka und Werther. Die Anzahl der Wörter oder Zeichen sowie die Absätze können hierbei bestimmt werden.

Flipping Typical

Das Tool Flipping Typical bietet einzig das Eintippen eines Wortes oder kurzen Satzes an. Sofort wird die Eingabe auf die verschiedensten Schriftarten umgesetzt, um diese besser vergleichen zu können. Gefällt eine Schrift besonders und möchte man diese vergrößert betrachten, so klickt man deren Namen an. Die größere, einzelne Vorschau wird dann ausgetauscht.

Typograph

Den Typograph auf lamb.cc sollte man besser nicht mit dem Internet Explorer oder Opera öffnen. Da mag der nicht funktionieren. Browser wie Mozilla Firefox oder Apples Safari zeigen keine Probleme und einen Text in der Mitte, der von einigen Dialogen umrahmt wird, die sich auch neu positionieren lassen. Darüber lassen sich die Schriftgröße anpassen, der Zeilenabstand beeinflussen und das generelle Layout verändern.

Identify und FontIdentifier

Dank Identify kann man sehr schnell herausfinden, wie der Name eines Fonts lautet, der nur als Grafik vorliegt. Man gibt zunächst an, wie beim Q das “Strichschwänzelchen” positioniert ist, dann wird das $-Symbol und die Baseline analysiert. Es folgen weitere Fragen, bis eine Schriftart abgegrenzt wurde, die sich womöglich als die gesuchte erweist. Ganz ähnlich geht auch der Service FontIdentifier vor, allerdings werden hierbei weitaus mehr Optionen abgefragt.

FontTester

Beim FontTester können bis zu drei Absätze verschieden formatiert werden. Generell kann für jeden Bereich der Text inhaltlich geändert oder sein CSS-Code abgerufen werden. Einstellen lassen sich dann die Textgröße, die Schriftart und –farbe, die Ausrichtung und zahlreiche weitere Optionen, wie etwa die Zeilenhöhe, die Laufweite oder Textdekorationen.

Web-Typografie-Tool

Jan Quickels bietet das Web-Typografie-Tool an. Das ist eine Matrix zum Berechnen von Schriftgröße und Zeilenabstand in em und px. Nach der Eingabe der Schriftgrößen zeigt die Matrix die entsprechenden Werte an. Auch wird der Sourcecode zum schnellen Kopieren angeboten.

(mm),

Kategorien
Icons & Fonts

Typographische Verrohung

Früher war der Textsatz den Profis vorbehalten. Gelernte Setzer kannten jeden Handgriff um Texte korrekt zu Papier zu bringen. Korrekt im Sinne von „der Lehrmeinung entsprechend“. In den Anfangszeiten des Print waren die Setzer obendrein noch die Verfasser dieser Lehren selbst, ähnlich wie heute viele Webdesigner an HTML-Spezifikationen mitarbeiten. Erkenntnisse aus der Ästhetik gingen zwar auch bedingt in die Typografie mit ein, hauptsächlich passten sich die alten Lehren aber den äußeren Umständen wie der Beschaffenheit des Papiers, die Eigenschaften der Bleilettern oder der Qualität der Tinte an. Über die Jahre der Erkenntnisgewinnung hinweg wandelten sich diese typografischen Regeln, da sich auch die Umstände änderten. Die Eigenschaften des Mediums hatten direkten Einfluss auf die Lehrweisen des Setzens.

Heute leben wir in einer Welt, in der sich das Medium für Textübertragung innerhalb einer sehr kurzen Zeitspanne enorm verändert hat. Anstatt auf Papier lesen wir Texte vermehrt am Bildschirm – eine drastische Veränderung der Umstände. Sind die Typografie-Regeln, die wir als Webdesigner heute noch im Web einsetzen, allein deshalb veraltet? Wir übertragen Satztechniken aus der Zeit eines völlig anderen Mediums in die Zeit des Web, müsste da nicht einiges an Qualität auf der Strecke bleiben?

Muss sich der Inhalt anpassen, wenn sich das Medium ändert?

Noch viel schwerer als die technischen Veränderungen wiegen die gesellschaftlichen. Mit der Erfindung der Schreibmaschine, und vor allem mit dem Beginn der billigen Produktion dieser, konnten plötzliche alle Menschen Texte verfassen. Die von den professionellen Setzern mühsam erarbeiteten Regeln und Konventionen wurden mit einem Schlag überrollt von der Unbefangenheit des Laien, der sich an seine Schreibmaschine setzt und nach Gutdünken auf irgendwelche Tasten drückt. Dass dabei schon bei der Konzeption der Maschinen von vornherein auf wichtige typografische Zeichen verzichtet wurde, war zum einen zwar technisch bedingt, zum anderen aber der notwendigen Einfachheit bei der Bedienung geschuldet. Anstatt zwei verschiedener Anführungszeichen gab es auf einmal nur noch eines. Eine sinnvolle Vereinfachung.

Die Etablierung des Mitmachweb war ein weiterer Schritt hin zur „typografischen Verrohung“. Mit den Texten aus seiner Schreibmaschine erreichte der Schreiber, wenn er nicht gerade Gefängnisinsasse in Stuttgart Stammheim war, einen Kreis von maximal 100 Lesern. Mit seiner Computertastatur dagegen erreicht man womöglich mehrere tausende Leser. Anstatt wie bisher nur typografisch „falsche“ Texte zu schreiben, kann man sie heute auch überall lesen.

Prägen nicht die User das Medium?

Die einfachen Hochkommata, die fehlende Differenzierung zwischen Divis und Halbgeviertstrich oder das falsche Bild eines Apostrophs haben sich in unserer heutigen Medienwelt etabliert. Das bemerkt jeder, der für zwei Stunden im Internet surft. Denn nicht nur einfache (Micro-)Blogger oder Forenuser missachten die alten Regeln, auch große Nachrichtenportale setzen selten korrekt. Ist diese Entwicklung tatsächlich so schlimm? Oder sind es nicht die Nutzer, die ein Medium entwerfen?

Das wohlbekannte @-Zeichen kann man als bisher größte typografische Errungenschaft des Computerzeitalters ansehen. Ursprünglich nur als Trenner zwischen Usernamen und Host bei diversen Adressen gedacht, waren es die Nutzer, die dem Zeichen dessen heutige Bedeutung verliehen und damit zeigten, dass sie geschickt genug sind, sich ihre eigenen Konventionen zu schaffen.

Und fällt das Argument der besseren Lesbarkeit nicht sowieso raus?

Mittlerweile wissen wir, dass der Unterschied in der Lesbarkeit zwischen Serifen- und serifenlosen Schriften nicht daher rührt, dass die kleinen Füßchen Leitlinien für das Auge zeichnen, sondern dass es schlicht auf die Gewohnheit der Zeichen ankommt. Ebenso weiß man, dass konstruierte Schriftarten, die z.B. auf Biegen & Brechen irgendwelche Schnitte und Verhältnisse einhalten, nicht lesbarer erscheinen als freiere. Wenn also die Lesbarkeit allein keinen Ausschlag gibt, sondern es lediglich um die Gewohnheit beim Lesen geht, können allerhöchstens noch ästhetische Aspekte ein Argument pro „alte“ typografische Regeln sein. Aber selbst viele einflussreiche Grafikdesigner behaupten, Ästhetik müsse sich stets nach den Umständen und dem Zweck richten. So habe Typografie laut Stanley Morison „nur durch Zufall einen ästhetischen Charakter“.

Müssen Webdesigner also umdenken? Sollte man bewusst auf korrekte – d.h. alte – Typografie verzichten? Ich selbst weiß auf diese Fragen keine eindeutige Antwort, ich weiß jedoch, dass man sich diese Fragen stellen sollte und nicht einfach auf die alte Art und Weise weitermachen kann.

(sl)

Kategorien
Essentials Icons & Fonts

20 Professionelle Fonts – Zum Nulltarif, kostenlos, nada

Kostenlose hochwertige Freefonts sammeln wir fleißig und regelmäßig. Denn wer nach einem schönen Schnitt sucht, wird entweder tief in die Tasche greifen müssen oder viel Zeit mit zahlreichen Fonts-Repositories verbringen, die eigentlich eher Quantität als Qualität liefern. Die Arbeit möchten wir unseren Lesern gerne abnehmen und präsentieren deshalb immer wieder die schönsten Perlen, die wir im Laufe der letzten Monate veröffentlicht haben oder die inzwischen aktualisiert wurden.

Alle unten aufgelisteten Schriftarten können kostenlos heruntergeladen und verwendet werden. Bitte beachten Sie, ein Blick in die Lizenzbestimmungen lohnt sich, um eventuellen Rechtsstreitigkeiten und Missverständnissen vorzubeugen.

Sketch Rockwell
Eine skizzenhafte, handgezeichnete Schreibschrift, die von Lukas Bischoff entworfen wurde und zum kostenlosen Download für PC und Mac OS X bereitsteht. Der Schnitt überzeugt durch unregelmäßige und elegante Konturen, die ihn informell, aber dennoch elegant und sehr deutlich erscheinen lassen. „Sketch Rockwell“ kann insbesondere in Überschriften wirksam eingesetzt werden. Die Schrift darf nur zu privaten Zwecken verwendet werden – etwa in Blogs.

Screenshot

Weitere Schreibschriften finden Sie im Beitrag 10 Handwritten Fonts You Can’t Miss, der unter anderem Estrya’s Handwriting und Imitation zum Download anbietet. Weitere professionelle kostenlose Schreibschriften finden Sie hier und hier.

Screenshot

Freebooter Script
Ein schöner Schreibfont mit eleganten, windenden Kurven. Beachten Sie, dass alle Buchstaben schön aneinander gepaart sind, wodurch das authentische kalligrafische Bild entsteht. Der Schnitt lässt sich insbesondere im Verpackungsdesign und in Retro- und Vintage-Designs einsetzen. Verfügbar in Formaten „PC Type 12, „PC True Type“ und „Mac Type 1“, doch leider nicht „OpenType“. Entworfen von Graham Meade.

Freebooter Script

Myndraine
Diese Schrift ist „work in progress“, zeigt aber jetzt schon einige interessante typografische Details und eignet sich ganz gut im Einsatz für Überschriften. Der Schnitt ist von Christopher Miller entworfen und enthält 182 characters. Auf den ersten Blick erinnert Myndraine an „Myriad Web“, hat jedoch deutliche Unterschiede, was vor allem in Fließtext deutlich ist. Einige Buchstaben „sitzen noch nicht richtig“ oder passen nicht ganz in das Schema wie etwa „p“ und „g“. Freeware, PC und Mac OS X-Versionen stehen zum kostenlosen Download bereit. [via]

Screenshot

Quicksand
„Quicksand“ ist eine sehr sorgfältig gestaltete serifenlose Schriftfamilie, die in verschiedensten Situationen zum Einsatz kommen kann. Entworfen von Andrew Paglinawan und kostenlos verfügbar. Es liegen insgesamt 7 Schnitte vor — Light, Bold, Dash, Book, Light Oblique, Bold Oblique und Book Oblique.

Quicksand

Gentium (specimen) und Gentium Basic | Lizenz (Open-Source)
„SIL International“, eine amerikanische wissenschaftliche Organisation zur Förderung des linguistischen Wissens, veröffentlichte vor kurzem die Release-Version von „Gentium Basic“ und „Gentium Book Basic“ – eine Modifikation der in 2004 veröffentlichen Schriftfamilie „Gentium“.

Die letztere wurde entworfen, um diversen ethnischen Gruppen eine hochwertige, gut lesbare und universelle Schriftart bereitzustellen, die neben klassischen Symbolen des lateinischen Alphabets zahlreiche Glyphen aus verschiedenesten Sprachen der Welt darzustellen vermag. Dies erklärt auch, weshalb SIL Gentium gerne als das „typeface for nations“ bezeichnet. Es ist erwähnenswert, dass beim Design ein besonderer Schwerpunkt auf den Symbolen aus der griechischen Sprache lag. Demnächst soll ein weiteres Release folgen, in dem kyrillische Glyphen sowie sämtliche Symbole aus Unicode 5.1 vollständig umgesetzt werden sollen.

Screenshot

Screenshot

Gentium Basic und Gentium Book Basic basieren auf dem Typodesign der Schnittfamilie Gentium, verfügen jedoch über zusätzliche Gewichte. Die “Book”-Familie ist ein wenig kräftiger und braucht mehr Platz zu ihrer Entfaltung.

Beide Familien verfügen über die Schnitte regular, bold, italic und bold italic. Der verfügbare Zeichensatz ist bei Gentium Basic und Gentium Book Basic jedoch wesentlich bescheidener als bei Gentium. Sie unterstützen nur „Basic Latin“ und „Latin-1 Supplement Unicode“, einige wenige, häufig eingesetze Buchstaben aus dem lateinischen Alphabet sowie einige diakritische Zeichen und die Interpunktion. Sowohl Gentium als auch seine Abkömmlinge können sicherlich sowohl in Fließtexten als auch in Überschriften für die optimale Lesbarkeit und ein glasklares typografisches Bild sorgen. Gentium und seine Nachfolger können ohne jegliche Einschränkungen in privaten und kommerziellen Projekten verwendet werden. Sie wurden vom britischen Typo-Designer Victor Gaultney entworfen.

Gentium ist open-source und kann beliebig modifiziert und weiterentwickelt werden. SIL ruft Designer explizit dazu auf, weitere Schriftarten auf der Grundlage von Gentium zu entwerfen. Die Organisation erhofft sich daduch viele frei verfügbare „reichhaltige“ Schnittfamilien, in denen das typografische Erbe unserer Kultur manifestiert wird.

Screenshot

Mayberry Pro SemiBold (Registrierung ist erforderlich)
AscenderFonts stellte vor kurzem den Schnitt „Mayberry Pro Semi Bold“ zum kostenlosen Download bereit. Der Schnitt gehört zur Schriftfamilie „Mayberry Pro“, die extra für die optimale Bildschirmdarstellung und Druckausgabe entworfen wurde. „Mayberry Pro“ ist eine humanistische serifenlose Schriftart, die ihre Stärke insbesondere in Nutzerschnittstellen (UIs), etwa in Web-Applikationen, zeigen kann. Um den Font herunterzuladen, muss man zuerst ein Anmeldeformular ausfüllen. Mayberry Pro wurde von Steve Matteson gestaltet.

Mayberry Pro SemiBold

Aller Sans | Specimen | Lizenz | Download
Henrik Birkvig gestaltete die serifenlose „Aller Sans“ im Rahmen eines Projekts, das durch das dänische Verlagshaus „Aller“ finanziert wurde – daher der Name der Familie. Die Schrift steht im Format „OpenType“ zum kostenlosen Download bereit und kann sowohl in privaten als auch kommerziellen Projekten kostenlos verwendet werden. Beachten Sie, es gibt Unklarheiten wegen der Lizenz.

Aller Sans

Birra Stout (Registrierung ist erfoderlich) | Specimen
Seine Ausmaße hat „Birra Stout“ den Einflüssen der Kalligrafie des frühen 20. Jahrhunderts zu verdanken. Der Schnitt hebt sich durch breite handgezeichnete Formen hervor, die gerne groß, stark und überwältigend wirken. Entworfen und veröffentlicht durch die Typedesign-Agentur „Darden Studio“. OpenType.

Birra Stout

Museo Sans
Jos Buivenga veröffentliche die Sans-Version seiner Schriftfamilie Museo. „Museo Sans“ ist ein kräftiger Schnitt, der schwache Kontraste aufweist und durch präzise geometrische Formen stark geprägt ist. Er wurde insbesondere im Hinblick auf die Lesbarkeit entworfen und passt demnach ausgesprochen gut für die Darstellung auf dem Bildschirm und in Fließtexten. Die OpenType-Familie unterstütze europäische Sprachen und sogar Esperanto. Darüber hinaus kann der Schnitt elegante Ligaturen und „oldstyle“-Zahlsymbole aufweisen. Die ganze Familie besteht aus 10 Schnitten: 5 Gewichte (100 300 500 700 900) und dazu kommen noch Kursive zu jedem Gewicht. 2 Schnitte können kostenlos heruntergeladen werden (500/500 italic). Eine Registrierung ist erforderlich, um die Schrift herunterzuladen.

Screenshot

Screenshot

FF Nuvo OT Medium | Herunterladen
Ein klassischer, sauberer Schnitt mit schönen Ligaturen, die der Schrift einen soliden Eindruck verleihen. Entworfen von Siegfried Rückel. Diese Schrift ist ein Beispiel für modernes Typodesign mit einem starken vertikalen Kontrast und kalligrafischen Einflüssen (siehe die Symbole „a“, „g“ und „y“). Am besten ist die Schrift für Überschriften geeignet, aber auch im Fließtext kann sie ihre Lesbarkeit gut ausnutzen. Auch in der Werbung, im Verpackungsdesign oder in Corporate-Designs ist sie durchaus geeignet. Der Schnitt kann zu privaten und kommerziellen Zwecken verwendet werden und steht nur kurze Zeit zum kostenlosen Download bereit. OpenType.

Screenshot

The Fell Types
Igino Marini hat sich die Mühe gemacht und einige klassische Frakturen und Schriften mit Ligaturen, Ornamenten und Zierbuchstaben mittels iKorn digitalisiert. Als Vorlage nutzte der Typodesigner Schriften aus den 17.-19. Jahrhunderten (Stilrichtungen Black Letter und The Roman Italic). Das Ergebnis stellt der Typodesigner nun zum kostenlosen Download bereit — in Formaten TrueType und OpenType. Um die Schriften verwenden zu können, müssen Sie die Anmerkung «The Fell Types are digitally reproduced by Igino Marini. www.iginomarini.com» in Ihre Werke einfügen. Das Archiv enthält insgesamt 13 Schnitte, darunter 8 reguläre Gewichte und 7 Kursive. [via]

Screenshot

Megalopolis Extra | Specimen | EULA License
Eine eigentümliche moderne, und dennoch klassische Schriftart mit vielen Unregelmäßigkeiten, Ligaturen und einem großen Zeichensatz mit verschiedensten Stilen. Im Fließtext lässt sich „Megalopolis Extra“ definitiv nicht einsetzen, dafür aber in Plakaten, im Verpackungsdesign und in Überschriften. Mit ihren geschwungenen Glyphen zieht sie die Aufmerksamkeit auf sich und kann dadurch gewisse Botschaften der Seite attraktiv und originell kommunizieren. Die Schrift steht zum kostenlosen Download bereit und darf im Rahmen der EULA-Lizenz zu privaten und kommerziellen Zwecken verwendet werden. [ via ]

Sketch Rockwell

Sansation
Ein moderner serifenloser Schnitt mit interessanten, ungewöhnlichen Details. Die Glyphen weisen Unregelmäßigkeiten auf, wie etwa das „t“, „A“ und „k“, die in dieser Gestalt im Fließtext nur selten auftreten. Entworfen von Bernd Montag und verfügbar für PC und Mac OS X. „Sansation“ darf in privaten und kommerziellen Projekten ohne jegliche Einschränkungen verwendet werden.

Advent

Miso | Vorschau
MISO ist eine kompakte und gut lesbare Schriftart, die sich vor allem zu Annotationen und Anmerkungen eignet (etwa in Bauplänen – deshalb wird MISO als „architectural lettering font“ bezeichnet). Entworfen von Mårten Nettelbladt und verfügbar in drei Gewichten (light, regular, bold). Formate: TrueType und OpenType.

Miso

Rally Character Set | Specimen | Vorschau | Download
Lukyan Turetsky veröffentlichte einen Zeichensatz mit Rallye-Symbolen- und Icons. Die Schrift enthält klassische Schilder und Verkehrszeichen, Infografiken u.a. „Rally Character Set“ steht als OpenType zum Download bereit und kann in privaten und kommerziellen Projekten verwendet werden.

Rally Character Set

Weitereführende Links

  • 30 Free Grunge Fonts
    Eine umfangreiche Sammlung von Grunge-Schriften. In der Liste sind unter anderem Grunge Serifa und BB Petie Boy vertreten. Weitere Grunge-Freefonts.
    Screenshot 

    Screenshot

  • 21 Awesome Free Fonts
    Abduzeedo präsentiert eine Sammlung von ungewöhnlichen, kreativen Schriften. ™
Kategorien
Essentials Freebies, Tools und Templates Icons & Fonts Inspiration Showcases

35 hochwertige Freefonts

Für eine hochwertige Schriftfamilie musste man schon immer tief in die Tasche greifen. Die Preisspanne für renommierte Schnitte wie Helvetica, Frutiger oder Avenir startet etwa bei 20-25 € pro Schnitt oder 400-500 € pro Familie. Nicht zu Unrecht, denn eine glasklare typografische Darstellung ist mit einem hohen Arbeitsaufwand verbunden, der sich häufig in monate- oder jahrelanger Arbeit widerspiegelt.

Doch für mittelgroße Projekte sind solche Schriftarten meistens weder notwendig noch nützlich, insbesondere wenn das Budget nicht gerade üppig ist. In solchen Fällen macht es Sinn, sich vor dem Erwerben einer kostspieligen Schriftfamilie zuerst in der Freefont-Ecke umzuschauen. Dabei wird man schnell mit ernüchternder Realität konfrontiert. Die meisten Schnitte, im Web weit und breit verteilt auf unzähligen Freefont-Sammlungen, sind für professionelle Auftritte schlicht und einfach nicht zu gebrauchen. Sucht man dennoch fleißig und hartnäckig weiter, so entpuppt sich die Suche nach den wenigen Perlen schnell als eine recht zeitaufwendige Angelegenheit.

In 2007 haben wir fleißig nach kostenlosen professionellen Schriftarten gesucht und sie auch fleißig gesammelt. Wir haben Typo-Agenturen und Foundaries beobachtet, wir haben mit Typo-Designern gesprochen, wir haben sie unterstützt und sogar motiviert, Freefonts-Perle der Öffentlichkeit zur Verfügung zu stellen. In diesem Beitrag stellen wir Ergebnisse vor. 35 hochwertige Freefonts, die sich gut für den Einsatz in privaten und kommerziellen Projekten eignen und die manch einem kostspieligen Schnitt die Stirn bieten können.

Anmerkung: Einige der Bilder stammen aus der Gerrit van Aaken’s Sammlung Freie Schriften im Portrait. Die Sammlung wird regelmäßig aktualisiert, es lohnt sich also ab und zu vorbeizuschauen. Vor der Verwendung der Fonts lesen Sie die Lizenzen sorgfältig durch; sie können sich im Laufe der Zeit ändern.

Pigiarniq Inuktitut Font
Nunavut ist eine ruhige und schöne Gegend in Kanada mit einer der kleinsten Bevölkerungsraten der Welt. 0,01 Menschen leben hier pro km2, großteils Eskimo, die Französisch, Englisch, Innuinaqtun und Inuktitut beherrschen. Vor wenigen Jahren hatte die Regierung der Region eine Schriftart für ihre 28,000 Bürger gestalten lassen, welche die vier Sprachen uniform präsentieren sollte. Das Ergebnis ist eine schöne, abgerundete serifenlose Schriftart. Die Schriftfamilie enthält mehrere Schnitte, darunter bold, heavy, italic, light und regular. Beispiele.

Pigiarniq Inuktitut font

Pigiarniq Inuktitut font

District Thin
Ein ruhiger, ernsthafter und glasklarer sans-serif-Freefont der GarageFonts-Foundry. Die Schriftart wird in folgenden Formaten zum kostenlosen Download bereitgestellt: Mac Postscript, Mac TrueType, PC Postscript, PC Truetype und OpenType.

Freefont

MG Open Moderna
Ein Sans-Serif-Geschenk der griechischen Typo-Agentur Magenta, das sämtliche Unicode-Glyphen enthält, stark an Helvetica erinnert und im TrueType-Format zur Verfügung gestellt wird.

Moderna

Gentium
Gentium wurde entworfen, um verschiedenen ethnischen Gruppen eine übergreifende Schriftart anzubieten, die lateinische Buchstaben mit Glyphen aus regionalen Sprachen in einer hochwertigen lesbaren Schriftart vereinigen würde. Die Schriftart eignet sich insbesondere zu akademischen Zwecken, kann ihren Dienst aber auch bei privaten und kommerziellen Projekten leisten. Gentium unterstützt zahlreiche Alphabete sowie alle Zeichen, die im Unicode-Standard vorkommen. Beispiele.

Screenshot

Screenshot

Delicious
Bei der Gestaltung seiner Serifenschriftart Delicious wollte Jos Buivenga insbesondere eine homogene Gestalt der Glyphen benoten und musste deshalb viel Zeit in ein optimales Kerning investieren. Mit seiner relativ großen x-Höhe kann Delicious insbesondere in Texten mit kleiner Schriftgröße zwecks optimaler Lesbarkeit eingesetzt werden. Mac und PC-Versionen stehen zum kostenlosen Download bereit.

Delicious

Delicious

Delicious

Anivers
Ein robuster, flexibler, eleganter Freefont, der in verschiedensten Situationen verwendet werden kann, etwa für Schlagzeilen auf einem Poster. Die Schriftart wurde extra zum einjährigen Jubiläum unseres Smashing Magazine entworfen. Mit Ligaturen und „oldstyle“-Ziffern unterstützt Anivers europäische Sprachen, darunter auch Esperanto. Der Freefont hat über 350 Glyphen und enthält 1.600 angepasste Kerningpaare. Beispiele.

Anivers Freefont

Anivers Freefont

Tallys
Tallys ist eine konservative Schriftart, die brete Kapitälchen, kleine x-Höhe und Buchstaben mit langer Oberlänge hat. Nur „Roman“-Schnitt wird kostenlos angeboten.

Tallys Freefont

Tallys Freefont

Mido
Eine leicht spielerische, abgerundete Schriftart, die als „limited test version“ angeboten wird. Die vollständige Version wird in 2008 veröffentlicht. Kostenlos, versteht sich.

Mido STF

Fontin
Fontin sollte insbesondere bei kleinen Schriftgrößen eingesetzt werden. Die Ziffern haben ein „hybrides“ Design, sie lassen zum einen an die mittelalterlichen Traditionen erinnern, sind aber zum anderen deutlich höher als die x-Höhe. Mac (Type 1), PC (TTF, Opentype).

Fontin

Fontin

Fontin Sans
Fontin Sans Familie kommt in regular, italic, bold, bold italic und small caps Schnitten. Sie ist das serifenlose Gegenstück von Fontin und ist im OpenType-Format für Mac & PC verfügbar. Beispiele.

Fontin Sans

Fontin Sans

MG Open Cosmetica
Eine serifenlose Schriftart, die an Optima erinnert und in der MgOpen-Familie enthalten ist.

Cosmetica

Geo Sans Light
Eine lesbare, ruhige und klare serifenlose Schriftart von Manfred Klein.

Geo Sans Light Freefont

Nadia Serif
Ein SlabSerif-Font von Nadia Knechtle, Quersicht (s. Rubrik “Labor”,), verfügbar für PC und Mac. Gefunden via dersven.de.

Nadia Serif Freefont

Yanone Kaffeesatz
Dieser “Kaffee”-font ist speziell für Überschriften und kurze Textpassagen gedacht und sollte sparsam eingesetzt werden. Im Text wirkt er unruhig, was nicht zuletzt auf ungewöhnliche Formen seiner Glyphen zurückzuführen ist. Ziffern und Währungszeichen sind „monospaced“, das heißt sie haben die gleiche Breite. Dies kann nützlich sein, etwa wenn Gerichte und Preise auf einer Menükarte präsentiert werden sollen. Weitere Glyphen, Ligaturen und historische Symbole können mittels der Option »optional ligatures« aktiviert werden. Veröffentlicht unter Creative Commons license. Beispiele.

Screenshot

Screenshot

JustOldFashion
Ein Freefont von Manfred Klein, der insbesondere durch seine spielerische Natur überzeugt und im informellen Kontext benutzt werden kann.

JustOldFashion

Lido STF
Diese Schriftart passt zu beliebigen Zeitungen, Magazinen aber auch Text-Editoren und Büroanwendungen. Lido STF verfügt über eine relativ große x-Höhe von Kleinbuchstaben, verkürzte Serifen und abgerundete Endungen. Beispiele. Kostenlos für private, nicht kommerzielle Projekte.

Screenshot

Cardo
Cardo ist insbesondere für akademische Zwecke zu empfehlen, kann aber auch für eine konservative, klassische Stimmung sorgen. Kostenlos für private, nicht-kommerzielle Projekte. Beispiele.

Screenshot

Day Roman
Diese Schriftart soll eigentlich die technische Unvollkommenheit des 16. Jahrhunderts betonen. Zu diesem Zweck wurden Serifen (im Gegensatz zu modernen Schriftarten) ungleichmäßig gestaltet, auch die vertikalen Proportionen stimmen nicht immer überein. Die Serifen-Schriftart eignet sich für Texte in der Schriftgröße 10 bis 30 Punkten. Verfügbar in PC Type 1 und PC True Type-Formaten. Beispiele.

Screenshot

Day Roman

Liberation Serif
Eine serifenlose Schriftart, entworfen von der Open Source community. Public domain, GNU GPL, Regular, Italic, Bold, Bold Italic, verfügbar für PC und Mac OS X.

Liberation Serif

Liberation Sans
Veröffentlich als Public domain unter GNU GPL-Lizenz. Kommt in Schnitten regular, italic, bold, bold italic und steht für PC und Mac OS X zum Downloaden bereit.

Liberation Sans

Romeral
Romeral bietet neben optimaler Lesbarkeit einen eleganten Stil, abgerundete Formen und klare geometische Strukturen der Buchstaben. Das Ziel des Designers war eine lesbare Schriftart, die durch angenehme, visuell ansprechende Formen überzeugt. Romeral kann sowohl für Texte als auch für Überschriften verwendet werden, in privaten und kommerziellen Projekten.

Der Designer verschickt Romeral via E-Mail. Um den OpenType-Freefont zu erhalten, muss man eine E-Mail an den Designer richten oder einen Kommentar im seinem Blog schreiben. Mehr Informationen auf Typies, dem Weblog des Designers Pablo De Gregorio.

Romeral

Romeral

Scriptina
Einen Handschrif-Font gefällig? Mit Scritina wird man optimal bedient. Verfügbar für PC und Mac.

Scriptina Freefont

Mank Sans
Ein weiterer eleganter, glasklarer, serifenloser Freefont, gestaltet von Manfred Klein.

Mank Sans Freefont

Chúcara
Um den OpenType-Freefont zu erhalten, muss man eine E-Mail an den Designer richten oder einen Kommentar im seinem Blog schreiben. Die E-Mail findet man wenn man nach dem At-Zeichen sucht.

Chucara

Qlassik
Eine Schriftart mit deutlichem europäischen Akzent. Regular und bold-Schnitte sind für PC und Mac OS X verfügbar.

Qlassik Freefont

Diavlo
Ein bisschen rechteckig und ein wenig gespitzt, verfügt Diavlo über 300 Glyphen und 1.300 kerning-Paaren. Diavlo enthält einige osteuropäische Zeichen, unterstützt Esperanto und kann demnach sowohl „Tørwald“ als auch „Téléphone“ problemlos darstellen. Die Schriftfamilie besteht aus 5 Schnitten: Light, Book, SemiBold, Bold und Black.

Diavlo Freefont
Diavlo Freefont
Diavlo Freefont

Engel Light Ltd
Serifenlose Schriftart ohne spezielle Symbole. Für PC und Mac.

Engel Light Ltd Freefont

Cicle
Serifenlose „Cicle“ kommt in 7 Schnitten und kann sowohl in Überschriften als auch in Text verwendet werden.

Fresh Free Fonts - Cicle Font | dafont.com

Kontrapunkt
Kontrapunkt wurde mit dem Dänischen „Design Prize“ als die beste Schriftart des Jahres 2004 ausgezeichnet. Das Ziel der Typo-Designer war eine besondere Schriftart, die einzelne Buchstaben in den Vordergrund stellt und ein „schickes“ Bild anbietet. Die SlabSerif-Familie besteht aus light, light italic und bold-Schnitten.

Freefont

Colaborate
Dieser OpenType-Freefont kommt in fünf Schnitten und eignet sich für Text genauso gut wie für Überschriften. Das unruhige „t“ verleiht der Schriftart eine besondere Gestalt. Gefunden via typoblog.ch.

Colaborate

Colaborate

Fertigo
Eine sehr schöne und spielerische Schriftart mit sorgfältig angepassten Ligaturen, Serifen und abgerundeten Formen. Fertigo eignet sich am besten für Plakate und Überschriften; im Text kann der Font unruhig und allzu informell wirken. Zum Download steht nur der „regular“-Schnitt bereit.

Freefont

Freefont

AUdimat (v2)
Ein eleganter Freefont mit französischem Akzent, manchmal zu rigide, manchmal zu informell. OpenType, verfügbar für Mac und PC; mit vier Schnitten: regular, italic, bold, bold italic. Gefunden via fontleech.

AUdimat

Lacuna
Um Lacuna herunterzuladen, muss man die Flash-Seite laden, auf “Glashaus Fonts” im Navigationsmenü oben klicken und auf der geöffneten Seite das passende Format auswählen. Gefunden via Typemotion.de

Lacuna Reg

Lacuna Reg

Lacuna Reg

Style-Force Semplice Pixelfonts
Eine Familie von winzigen Pixelfonts, die flashkompatibel sind und in Pixeldesign gut gebraucht werden können. Das Freefont-Package enthält eine ausführliche Einleitung, die genau beschreibt, wie die Schriftarten zwecks optimaler Lesbarkeit verwendet werden können.

Pixelfont Freefont

Pixelfont Freefont

Unibody
Unibody wurde extra für die Darstellung auf dem Bildschirm optimiert und ist vor allem zum Ensatz in Macromedia Flash MX und Adobe Photoshop zu empfehlen. Der Freefont kann nur in der Größe 8 Punkte benutzt werden.

Unibody Freefont

Silkscreen
Silkscreen ist insbesondere dann zu empfehlen, wenn eine extrem kleine, aber dennoch lesbare Darstellung von Inhalten gefragt ist. Der TrueType-Freefont leistet seinen Dienst auch bei größeren Schriftgrößen, wodurch der Text im „Schreibmaschine“-Stil dargestellt wird. Silkscreen wurde von Jason Kottke gestaltet, ist für Mac, Windows und Linux verfügbar und kann kostenlos in privaten und kommerziellen Projekten eingesetzt werden. ™

Silkscreen Freefont

Dieser Beitrag ist in ähnlicher Form und auf Englisch bereits in unserem Weblog Smashing Magazine erschienen.