Tag: typografie

201013Dez

Font Comparer: Web-Schriftarten vergleichen

Mit der Google Font API und dem dazugehörigen Google Font Directory steht eine übersichtliche Anzahl an freien Web-Schriftarten zur Verfügung, die per Code auf der gewünschten Seite eingebettet werden können. Wer die Google-Schriftarten mit einem eigenen Text versehen und nebeneinander vergleichen möchte, kann sich zu diesem Zweck einmal den Font Comparer ansehen. Bei dieser Seite können Überschriften und Fließtexte eingegeben und verschiedene Optionen wie Schriftfarbe, Hintergrundfarbe oder Textschatten eingestellt werden.

Font Comparer

Per Klick auf den Link "Get font" wird der entsprechende Code angezeigt, der für das Einbetten der Schriftart benötigt wird. Neben den Google-Schriftarten können mit dem Font Comparer auch Typekit-Fonts verglichen werden — hierfür wird allerdings ein Typekit-Konto vorausgesetzt.
Das Tool kann für den visuellen Vergleich von Web-Schriftarten sicherlich nützlich sein. Auch der Type Browser stellt ein hilfreiches Werkzeug dar, wenn es um die Darstellung verschiedener Schriftgrößen geht.

201010Nov

What Font is: Schriftarten online identifizieren

Der Service ist mittlerweile schon etwas bekannter, aber vielleicht kann er dem einen oder anderen Designer behilflich sein: Bei What Font is können eingescannte oder abfotografierte Bilder von Schriftarten hochgeladen werden, deren Name anschließend online identifiziert werden kann. Die Website funktioniert ähnlich wie WhatTheFont! und bietet eine Datenbank mit über 157.000 Schriftarten.

What Font is

Beim Hochladen des Schriftbildes kann definiert werden, ob alle möglichen Schriftarten oder nur solche, die eine kommerzielle Nutzung erlauben, angezeigt werden sollen. Damit eine Schriftart eindeutig erkannt werden kann, müssen die Zeichen durch Abstände voneinander getrennt sein und auf einem klaren Hintergrund platziert sein. Sollte eine Schrift einmal nicht identifiziert werden können, kann stets das Forum befragt werden.

201020Okt

Awesome Fontstacks: Schriftarten-Sets erstellen

Um auf einer Website individuelle Schriftarten verwenden zu können, bieten sich inzwischen komfortable Möglichkeiten an, da moderne Browser das Einbetten von TTF-, OTF- oder WOFF-Fonts per "@font-face" erlauben. Durch intelligente Font Stacks können somit entsprechenden Benutzern die gewünschten Schriftarten präsentiert werden, während bei älteren Browsern die Fallback-Fonts verwendet werden.
Auf der Seite Awesome Fontstacks stehen momentan 58 solcher Schriftarten-Sets bereit, die verschiedene Web-Fonts enthalten.

Awesome Fontstacks

Das Schriftbild einer Website kann auf der Seite für verschiedene Bereiche definiert werden: So können Schriftarten für Überschriften, Fließtexte und Dekorationen ausgewählt werden. Als finale Ausgabe erscheint der fertige CSS-Code, der alle notwendigen Deklarationen enthält. Zu den Schriftarten zählen diverse Kreationen wie "Droid Sans", "Coolvetica" oder "Yanone Kaffeesatz". Die Sets sind aufeinander abgestimmt und geben daher insgesamt ein rundes Bild ab. Für Alternativen zur Verdana-Welt finden sich auf der Seite also schöne Exemplare.

201029Sep

Webfonts.info: Infos rund um Web-Schriftarten

Mit der Einführung des "@font-face"-Attributs wurde es möglich, in aktuellen Webbrowsern Schriftarten auch dynamisch auf Websites einsetzen zu können. Die Thematik rund um TTF, OTF, EOT und WOFF kann anfangs etwas komplex wirken, denn nicht alle Browser unterstützen und die gleichen Formate. Zudem ist Vorsicht bei dem Einsatz von Web-Schriftarten geboten, da diese in einer entsprechenden Schriftlizenz vorliegen müssen.
Viele nützliche Informationen zum diesen Themen wurden daher auf der Seite Webfonts.info zusammengetragen.

Webfonts.info - Infos rund um Web-Schriftarten

Dort findet sich zum Beispiel eine Auflistung der verschiedenen Browser" und deren "@font-face"-Unterstützung. Weiterhin gibt es eine Liste der verfügbaren Web-Font-Anbiete sowie weitere Quellen (auch kostenlose Web-Schriftarten werden explizit aufgelistet). Diverse Anleitungen für die Einbettung von Web-Schriftarten runden die Infoseite ab.

201026Sep

TypeShow: Website-Widget für Schriftkünstler

Angepasste Web-Schriftarten und aktuelle Typografie-Technologien dürften mittlerweile etliche Internetauftritte mit individuellen Schriftbildern verschönern. Neben den Benutzern und Käufern von Schriftarten stehen die Schriftdesigner, die sehr viel Zeit und Kreativität in ihre Pfade investieren. Um auch unabhängig von großen Schriftanbietern seine Werke im Netz anbieten zu können, bedarf es einer angemessenen Präsentation. Dieser Notwendigkeit haben sich die Entwickler von TypeShow gewidmet, die mit ihrer kostenlosen Lösung ein Widget zur Verfügung stellen, mit dem sich Schriftarten auf der eigenen Website integrieren lassen.

TypeShow

TypeShow wird also auf dem eigenen Server installiert (PHP 5.2 wird benötigt) und kann anschließend den Bedürfnissen angepasst werden. Das Widget, das neben PHP jQuery einsetzt, ist als interaktives Schaufenster zu verstehen: Per Klick können Schriftarten und Hintergrundbilder geändert werden und zusätzlich kann der dargestellte Text manuell eingegeben werden. TypeShow bietet also alle Funktionen, die zur modernen Schriftart-Präsentation benötigt werden. Zur Anleitung geht es hier entlang.

201023Aug

Grid Designer 2: Raster und Typografie erstellen

Online-Portale und inhaltsstarke Websites benötigen ein durchdachtes Raster, um viele Inhalte unterbringen und ansprechend darstellen zu können. Für die Erstellung eines CSS-Rasters bieten sich etliche Werkzeuge an, die online abgerufen werden können (siehe Liste). Ein aktuelles Projekt, um entsprechende Raster und auch gleich die dazugehörigen Typografie-Einstellungen zu erzeugen, stellt der Grid Designer 2 von Rasmus Schultz dar. Hier können wie gewohnt die Anzahl und Größen der Spalten festgelegt werden — die restlichen Berechnungen übernimmt das Online-Tool.

Grid Designer 2

Hat man sich für eine Einteilung entschieden, können im zweiten Abschnitt etliche Anpassungen für die Textdarstellung der Seite vorgenommen werden. Hierzu zählen Einstellungen wie Schriftgröße, Schriftart, Zeilenhöhe, Laufweite sowie gängige Textformatierungen. Im letzten Schritt kann schließlich der finale CSS- und HTML-Code eingesehen und kopiert werden. Bei Bedarf können ein skalierbares Raster und auch gleich ein CSS-Reset ausgegeben werden.
Da sich mittlerweile etliche Raster-Werkzeuge im Netz finden, gibt es hier eine kleine Liste der verbreiteten Projekte:

Von Online-Diensten über Photoshop-Skripte bis hin zu Firefox-Erweiterungen ist hier alles dabei. Die Werkzeuge können bei der Erstellung von komplexen Rastern viel Zeit sparen, so dass sich ein Blick auf die einzelnen Projekte lohnt.

201029Jul

Intelligencefont: Schriftarten im Browser konfigurieren

Das Einstellen und Optimieren einer Schriftart für eine Website kann nicht im Grafik- oder Layout-Programm erfolgen, da noch keine Software existiert, die ein echtes Browser-Rendering simulieren kann (Anwendungen wie Adobe Dreamweaver bilden die Ausnahme) oder eine bestehende Browser-Engine integriert hat — daher besteht die einzige Möglichkeit in der Erstellung entsprechender CSS-Stile. Um den Prozess etwas zu beschleunigen, stehen diverse Tools wie CSS Type Set oder Typetester zur Verfügung. Eine Alternative mit weiteren Einstellungen gibt es mit Intelligencefont. Hier können Schriftbilder online angepasst und abgestimmt werden.

Intelligencefont

Auf der Website lassen sich Blöcke anlegen, die mit Texten gefüllt werden können. Auf die Makrotypografie bezogen können die Anzahl der Spalten eines Blocks sowie der Abstand zwischen den Spalten festgelegt werden. Wesentlich mehr Optionen stehen hinsichtlich der Mikrotypografie bereit: Hier können Schriftart, Schriftgröße, Zeilenabstand, Laufweite und Wortabstand bestimmt werden. Zusätzlich gibt es noch die Option "OS Version", durch die entsprechende Schriftarten zur Auswahl stehen. Ist man mit dem Schriftbild zufrieden, können die CSS- und XHTML-Codes generiert und kopiert werden.

201022Jul

Type Folly: WYSIWYG-Editor für Schriftbilder

Was sich aktuell mit HTML5 und CSS3 realisieren lässt, zeigt sehr schön das Projekt Type Folly. Dabei handelt es sich um eine Art WYSIWYG-Editor, der mit Ebenen und speziellen Text-Einstellungen ausgestattet ist. Mit Type Folly lassen sich so komfortabel Texte gestalten und auf einer Arbeitsfläche platzieren. Die Schriftart für die Texte kann aus einem vordefinierten Pool gewählt werden und zur Verfügung stehen diverse Optionen wie Textfarbe, Schatten, Laufweite, Zeilenabstand, Deckkraft oder Rotation. Zudem kann ein Raster eingeblendet werden, das durch verschiedene Einstellungen angepasst werden kann.

Type Folly

Type Folly demonstriert, was mit aktuellen Web-Techniken (und einem entsprechenden Browser) möglich ist. Folly steht unter Anderem für Narrheit und soll es Benutzern ermöglichen, verschiedene Schriftbilder ausprobieren und erstellen zu können. Beeindruckend ist zudem die Möglichkeit, den Code (HTML und CSS) des fertigen Bildes zu kopieren und anderweitig einsetzen zu können. Voraussetzung dafür ist natürlich ein HTML5- und CSS3-fähiger Webbrowser.