Tag: typografie

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.

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:

• Gridulator
• Grid System Generator
• ZURB CSS Grid Builder
• Yahoo! CSS Grid Builder
• Hashgrid
• GridFox
• Gridmaker

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.

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.

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.

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 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.

FontFonter: Web-Fonts auf Websites anwenden

Das Geschäft mit speziellen Schriftarten, die für die Darstellung im Web ausgelegt sind, läuft schon seit längerer Zeit. Entsprechende Lizenzen gibt es etwa bei Fontspring oder TypeKit. Kostenlose CSS3-Schriftarten, die über externe Server auf Websites eingebunden werden können, gibt es mit der Google Font API. Auch auf Kernest sollte bei dieser Thematik einen Blick geworfen werden.
Einen aktuellen Service für Web-Schriftarten steht mit FontFonter von FontShop bereit. Dabei können bestimmte Schriften direkt auf eine Website angewendet werden, so dass sich das Schriftbild in Echtzeit begutachten lässt.

Die Auswahl der verfügbaren Schriftarten bezieht sich auf die Web FontFonts, die über WOFF oder EOT auf einer Website eingebunden werden können. Mehr über die Technik und die Nutzung der Fonts findet sich in diesem Blog-Eintrag.
Die eigentlichen Preise für die Web-Schriftarten sind derzeit noch etwas umständlich zu finden. Dennoch gibt es eine Auswahl an sehr modernen Fonts und so sind beispielsweise 4 Schnitte der Schriftart "FF Fago Web Condensed" für 129,00 EUR zu haben. FontFonter soll die Entscheidung für eine Schriftart durch die Echtzeit-Vorschau erleichtern und ist in dieser Hinsicht sicherlich ein nützliches Werkzeug.

Kernest: Große Auswahl an @font-face-Schriftarten

Google hat mit seiner Font API eine sehr schöne Technik zur Verfügung gestellt, durch die sich unkompliziert CSS3-Schriftarten mit dem "@font-face"-Attribut auf Websites nutzen lassen — die Schriftdateien befinden sich dabei auf einem dedizierten Google-Server. Ein ähnliches Projekt stellt Kernest dar, mit dem ebenfalls CSS3-Fonts per Stylesheet implementiert werden können. Die Vorgehensweise bleibt gleich:

• HTML:
• <link href="http://kernest.com/fonts/pt-sans-narrow.css" media="screen" rel="stylesheet" type="text/css" />
• …
• <a href="http://kernest.com">Fonts by Kernest</a>
•  
• CSS:
• p {
• font-family: 'PT Sans Narrow';
• }

Aus einem sehr umfangreichen Repertoire können Schriftarten gewählt werden, die größtenteils für kommerzielle Zwecke eingesetzt werden dürfen und in den Formaten OTF, TTF, EOT, SVG und WOFF bereitstehen.

Hinter dem Projekt steht Garrick Van Buren, der für das Kernest-Projekt einen eigenen Font-Server namens Fontue entwickelt hat — dieser kann bei GitHub heruntergeladen werden.
Das Einbetten der Kernest-Fonts funktioniert gut und lediglich die Website des Projekts weist kleinere Mankos auf: Die Suchfunktion ist rudimentär und bei einer Auflistung von mehreren Schriftarten wird dem Rechner sehr viel Performance abverlangt. Man sollte für eine Auswahl also die oben aufgeführten Kriterien und Optionen benutzen, um die Darstellung einzuschränken.

Webentwicklung: Unterschiede bei @font-face

Die Woche war geprägt von Entwicklungen und Diensten für CSS3-Schriftarten, die per "@font-face" eingebettet werden. Neben Fonts Live wurde die Google Font API gestartet. Auch ohne externe Dienstleister können Schriftarten in CSS3 verwendet werden.
Unabhängig von der Verwendung und der Auswahl an verfügbaren CSS3-Fonts sollte man sich einmal die finale Darstellung im Webbrowser ansehen — bei Typophile wurde eine detaillierte Grafik veröffentlicht, in der die Funktionsweise von "@font-face" und dessen Darstellungsunterschiede in Browsern gezeigt wird.

Wie in der Grafik zu erkennen ist, gibt es durchaus sichtbare Differenzen unter den verbreiteten Webbrowsern. Während Anti-Aliasing bei Internet Explorer 6 gänzlich fehlt, erscheinen CSS3-Fonts unter Mac OS X bzw. Safari etwas dicker. Man sollte sich also dynamische Schriftarten (vor einem eventuellen Kauf) auf jeden Fall in mehreren Browsern ansehen, wenn ein Projekt für eine breite Zielgruppe ausgelegt ist. In der Grafik findet sich übrigens auch eine Vorschau auf das Font-Rendering von Internet Explorer 9 und Firefox 3.7.
Natürlich befinden sich CSS3 und HTML5 noch in der Entwicklung und es wird sicherlich noch eine Weile vergehen, bis moderne Browser den Markt beherrschen. Dennoch sollten sich Webentwickler schon jetzt mit der Technik der Zukunft auseinandersetzen und über Details informiert sein.

Fonts Live: Weitere Quelle für @font-face-Schriften

Gestern wurde Googles Font API veröffentlicht — die Auswahl an Schriftarten ist im Vergleich zu kommerziellen Diensten wie Typekit eingeschränkt. Wer also sehr individuelle oder exklusive Schriftbilder auf seiner Website nutzen möchte, sollte ein kostenpflichtiges Angebot wie Typekit nutzen. Das Font-Portal ist jedoch nicht das einzige seiner Art: Bei Fontspring lassen sich ebenfalls Schriftarten mit "@font-face"-Option erwerben. Wer ein ähnliches Angebot wie Typekit mit Subscription-Option sucht, ist jedoch mit Fonts Live besser bedient.

Die Seite beinhaltet ein umfangreiches Repertoire an modernen Schriftarten und bietet verschiedene Optionen zur Lizenzierung an. Hier eine kleine Vergleichstabelle, in der die Möglichkeiten von Typekit enthalten sind:

Es hängt vom jeweiligen Web-Projekt ab, welche Art von Schriftarten benötigt werden. Dienste mit dedizierten Font-Servern stellen in jedem Fall eine interessante Option für individuellere Website-Typografie dar.

Google Font API: CSS3-Fonts über Google nutzen

Zur Implementierung von CSS3-Schriftarten über "@font-face" steht mit Typekit eine komfortable (jedoch kostenpflichtige) Möglichkeit zur Verfügung, mit der viele dynamische Schriftbilder zur Auswahl stehen — die Einbettung auf einer Website erfolgt über Typekit-Server. Zuletzt wurde das Beta-Programm von den "Web Fonts" bei Fonts.com gestartet, in dem ebenfalls aus CSS3-Schriftarten gewählt werden kann. Derartige Angebote haben in der letzten Zeit zugenommen, da Schriftarten mit entsprechenden Lizenzen verknüpft sind, um die man sich durch solche Dienste nicht kümmern muss.
Nun bietet auch Google mit der Google Font API und dem Google Font Directory eine schöne Möglichkeit an, mit der sich diverse Schriftarten über Google-Server auf Websites einbetten lassen.

Die Implementierung funktioniert über eine dynamische CSS-Datei, was in etwa so aussieht:

• <link href='http://fonts.googleapis.com/css?family=Cantarell' rel='stylesheet' type='text/css'>

Anschließend kann die Schriftart so genutzt werden:

• h1 { font-family: 'Cantarell', arial, serif; }

In dem Font Preview des Schriftverzeichnisses lassen sich die verfügbaren Fonts ausprobieren und mit Beispieltext begutachten. Mehr über die Funktionsweise findet sich in der Dokumentation. Weiterhin bietet Google mit dem WebFont Loader ein Pendant zu dem Ajax-Loader an, mit dem sich auch mehrere Schriftarten über Google auf einer Website implementieren lassen.
Das Google Font Directory wird sicherlich noch Zuwachs bekommen und insgesamt steht mit dem Projekt von Google eine schöne Möglichkeit zur Verwendung von CSS3-Fonts bereit.