Tag: typografie

201214Nov

Webshims: Automatische Polyfills für ältere Browser

Um HTML5-Features auch in älteren Browsern nutzen zu können, werden sogenannte Polyfills erforderlich, die neue Funktionalitäten durch JavaScript simulieren. Mit Modernizr steht bereits schon seit einiger Zeit eine solide Erkennung für die Fähigkeiten des verwendeten Webbrowsers zur Verfügung. Wer auch gleich die beliebtesten Polyfill-Skripte laden möchte, kann sich dazu die Webshims Lib von Alexander Farkas ansehen.

Webshims lib - The capability-based polyfill-loading JS library

Mit der JavaScript-Bibliothek können Features wie Canvas, HTML5-Semantik, Audio- und Video-Unterstützung, localStorage, Geolocation oder JavaScript-ES5-Funktionen simuliert werden. Auf der Website des Skripts wird so beispielsweise simuliert, wie sich Platzhalter für Eingabefelder auch ohne HTML5 erzeugen lassen. Mit dem Skript können entweder alle oder auch nur bestimmte Polyfills geladen werden:

  • $.webshims.polyfill('forms json-storage');

Auf der Seite findet sich die Dokumentation sowie die Auflistung der einzelnen Polyfills.

201209Feb

Webdesign: CSS-Probleme mit GDI und DirectWrite

Die Welt des Webdesigns hat sich dank individueller Schriftarten durch "@font-face" zum Guten verändert, da Designer nicht mehr auf Systemschriftarten angewiesen sind. Inzwischen unterstützen alle modernen Browser Möglichkeiten, um Schriftarten per "@font-face" in CSS einzusetzen. Das Problem: Browserhersteller beginnen, die Methode zur Darstellung von Schriftarten zu ändern. Das betrifft alle Windows-Systeme ab Windows Vista, denn hier wurde für die ClearType-Darstellung neben der bisher verwendeten GDI-API die Direct2D-API bzw. DirectWrite-API eingeführt. Dadurch ist ein hardwarebeschleunigtes Rendering (also durch die GPU) im Browser möglich. DirectWrite wird in Firefox seit Version 4 und in Internet Explorer seit Version 9 unterstützt. Nur in Chrome kommt bis zum aktuellen Zeitpunkt (Version 16) noch das GDI-Rendering zum Einsatz. Der Safari-Browser ist von dem Dilemma nicht betroffen, da Mac OS X ein eigenes Font-Rendering (Core Text) besitzt. Dafür gibt es ein ähnliches Problem zwischen der Windows- und Mac-Version.
Das eigentliche Problem besteht nun darin, dass die Darstellung von Schriftarten abweicht. Je nachdem, ob die GDI- oder DirectWrite-API verwendet wird, können Abweichungen in Texten entstehen.

Webdesign - CSS-Probleme mit GDI und DirectWrite

In diesem Eintrag bei Stack Overflow wird der Effekt noch einmal deutlich. Wer das Ganze selbst testen möchte, kann dazu auf ein bestehendes jsFiddle-Snippet zurückgreifen. Der springende Punkt ist nun, dass das neue DirectWrite-Rendering ab Firefox 4 und Internet Explorer 9 automatisch aktiviert ist. Läuft der Text aus dem Snippet also über die graue Fläche hinaus, wird DirectWrite und damit Hardwarebeschleunigung verwendet.

Weiterlesen...
201109Aug

Fount: Web-Fonts per Bookmarklet identifizieren

Der Einsatz von Web-Schriftarten wird immer häufiger und die Auswahl solcher Fonts wächst ebenfalls stetig. Das Suche und Finden von passenden oder interessanten Web-Fonts kann daher schon etwas Zeit in Anspruch nehmen. Wie wäre es daher mit einem Bookmarklet, mit dem sich per Klick auf einen Textbereich einer Website die verwendete Schriftart anzeigen lässt? Diese Arbeit erledigt Fount, das genau jenen Zweck erfüllt, Web-Schriftarten zu identifizieren.

Fount - Identify any web font you see

Es handelt sich wieder um ein einfaches Bookmarklet, das einfach in eine Symbolleiste des Browser gezogen werden muss. Anschließend kann eine Website besucht werden und bei der Aktivierung des Bookmarklets wird ein Fadenkreuz sichtbar, das die jeweilige Schriftart von angeklickten Elementen enthüllt. Zudem erhält der Benutzer noch Informationen über Schriftgröße und Schriftstil, wobei sich Letzteres durch die CSS-Eigenschaften "font-weight" und "font-style" auszeichnet.

201108Mai

Webdesign: Anbieter von Web-Schriftarten im Blick

Sie heißen Typekit, Fonts Live, Google Fonts oder Fontdeck: Mittlerweile gibt es eine sehr große Auswahl von Anbietern, die Web-Schriftarten in verschiedenen Arten anbieten und unterschiedliche Modelle verfolgen. Die meisten Anbieter stellen die Schriftarten unter bestimmten Bedingungen bereit und so ist die Verwendung von Web-Fonts in der Regel an eine Domain (je nach Paket) gebunden. Die Preise für die Pakete sind unterschiedlich und ebenso variiert die Menge der angebotenen Schriftarten — während bei einigen Diensten etwa 100 Fonts zur Verfügung stehen, finden sich bei anderen Seiten über 3000 Schriftarten.
Um dabei den Überblick zu behalten, eignet sich eine Matrix, wie sie von Sylvia Egger erstellt wurde. Auf ihrer Seite "Web Font Services - An Overview" hat sie die wichtigsten Fakten zu den Font-Anbietern zusammengetragen und in einer ordentlichen Tabelle verpackt.

Web Font Services - An Overview

In der Auflistung finden sich neben den unterstützten Browsern auch die eingesetzten Technologien sowie Informationen zu den Lizenzmodellen und den damit verbundenen Einschränkungen. Ebenso gibt die Tabelle Aufschluss über die mögliche OTF-Funktionen und Plugins für verschiedene Content-Management-Systeme. Interessant ist auch die Spalte "Font Tools", in der eventuelle Besonderheiten des jeweiligen Dienstes genannt werden. Die Übersicht ist insgesamt sehr gelungen und sollte einen Platz in den Lesezeichen finden.

201106Mai

Modular Grid Pattern: Moderner Raster-Generator

Mittlerweile gibt es für das dynamische Erzeugen von Website-Rastern diverse Tools im Netz, die unterschiedlich arbeiten: Neben Online-Generatoren gibt es auch Firefox-Erweiterungen oder Photoshop-Panels, die entsprechende Raster einblenden. Hier noch einmal ein Überblick:

Eine weitere Online-Anwendung dieser Art ist Modular Grid Pattern. Damit lassen sich über etliche Einstellungen Raster erzeugen, die anschließend als PNG-Grafik oder Photoshop-Pattern heruntergeladen werden können.

Modular Grid Pattern

So können die Grundlinie, die Modulbreite und -höhe, der Zwischenraum und die Anzahl der Module bestimmt werden. Durch die Verwendung von Modulen ergibt sich ein X-Y-Raster, das für eine exakte Typografie genutzt werden kann. Schließlich gibt es das Tool auch noch als Photoshop-Panel, so dass keine Wünsche offen bleiben dürften.

201110Feb

Webdesign: Explorations in Typography

Typografie im Web wird vielseitiger. Durch die Verwendung von "@font-face"-Schriftarten müssen Fließtexte nicht mehr der Tahoma-Ära unterliegen und können individuell an das gesamte Erscheinungsbild einer Website angepasst werden. Wer nach weiteren Inspirationen aus der Welt der Schriftgestaltung sucht, kann sich die Seite zu dem in Arbeit befindlichen Buch "Explorations in Typography" von Carolina de Bartolo und Erik Spiekermann ansehen. Auf der Website findet sich derzeit ein interaktives Tool, mit dem sich diverse Schriftarten auf Fließtexte anwenden lassen. Zudem können verschiedene Optionen hinsichtlich Zeilenabstand, Zeileneinzug und Schriftgröße festgelegt werden.

Explorations in Typography - Mastering the Art of Fine Typesetting

Das dazugehörige Buch wird 188 Seiten umfassen, auf denen die beiden Designer diverse Schriftarten aufzeigen und miteinander kombinieren. Das Werk versteht sich daher als "visuelles Textbuch", das Designern die Anatomie von verschiedenen Schriftarten näher bringen soll. Auf jeder Seite finden sich zudem historische sowie spezifische Informationen zu der jeweiligen Schriftart.

201111Jan

Wordmark: Installierte Schriftarten anzeigen und filtern

Um die auf dem eigenen Computer installierten Schriftarten mit einem Beispieltext zu versehen und auf einen Blick zu haben, bieten sich diverse Offline-Anwendungen an. So können gleich mehrere Schriftbilder miteinander verglichen werden, was gerade im Bereich der Logo-Gestaltung einen zeitaufwendigen Faktor darstellt. Neben Offline-Lösungen gibt es auch im Netz unterschiedliche Tools und Websites, mit denen sich ohne die Installation eines Programms die installierten Schriftarten darstellen lassen. Wordmark.it stellt ein solches Projekt dar, das mit schönen Features ausgestattet ist.

Wordmark.it

So können neben dem Beispieltext für die einzelnen Schriftarten auch Größen und Kontraste (positiv und negativ) definiert werden. Ein Schriftbild kann so auf verschiedene Aspekte untersucht werden. Zusätzlich lassen sich mit Wordmark Schriftarten markieren und per Schaltfläche filtern — dadurch kann eine Auswahl an Favoriten getroffen werden, die dann direkt miteinander verglichen werden kann.

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.