Tag: typografie

201020Jul

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.

FontFonter

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.

201009Jun

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.

Kernest

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.

201021Mai

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.

Typophile - @font-face rendering

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.

201021Mai

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.

Fonts Live

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:

Fonts Live Typekit
$27,50 pro Jahr
30.000 Besucher pro Monat
Bis 1 GB Bandbreite
Auf beliebigen Websites nutzbar
$24,99 pro Jahr
50.000 Besucher pro Monat
Uneingeschränkte Bandbreite
Auf 2 Websites nutzbar
$55,00 pro Jahr
100.000 Besucher pro Monat
Bis 3 GB Bandbreite
Auf beliebigen Websites nutzbar
$49,99 pro Jahr
100.000 Besucher pro Monat
Uneingeschränkte Bandbreite
Auf beliebigen Websites nutzbar
$110,00 pro Jahr
300.000 Besucher pro Monat
Bis 9 GB Bandbreite
Auf beliebigen Websites nutzbar
$99,99 pro Jahr
1.000.000 Besucher pro Monat
Uneingeschränkte Bandbreite
Auf beliebigen Websites nutzbar
SSL nutzbar
$192,50 pro Jahr
600.000 Besucher pro Monat
Bis 18 GB Bandbreite
Auf beliebigen Websites nutzbar
Auf Anfrage

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.

201020Mai

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.

Google Font API

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.

201003Apr

Webdesign: Darstellung von Schrifarten testen

Vor einiger Zeit hatte ich ein schönes Werkzeug gefunden, mit dem sich die Darstellung von Schriftarten im Browser testen lässt. Der "Web Font Specimen" stellt eine schöne Musterseite für Web-Schriftarten dar, die auf das Testen von "@font-face"-Schriften ausgelegt ist. Die umfangreiche Musterseite besteht aus etlichen Textblöcken (Headlines, Fließtexte, verschiedene Schriftgrößen) und Farbkontrasten, so dass die ausgewählt Schriftart in vielen Szenarien betrachtet werden kann.

Web Font Specimen

Die Seite ist einfach anzupassen, da lediglich im oberen style-Bereich des HTML-Templates die gewünschte Schriftart eingetragen werden muss. Anschließend wird der Schrift-Stil auf alle Elemente der Datei übertragen. Bei dem Betrachten von Schriftarten für das Web spielt beispielsweise die Kantenglättung eine wichtige Rolle, da diese in verschiedenen Betriebssystemen und Browsern variiert. Weiterhin sollte auf die Strichstärke und die Laufweite einer Schriftart geachtet werden, um eine gute Lesbarkeit bei Fließtexten zu gewähren.
Die Website des Web Font Specimens verweist zudem auf das Typekit-Projekt sowie die Browser-Testumgebung Litmus. Mit diesen Tools können komfortabel individuelle Schriftbilder erstellt und getestet werden.

201011Mär

Fonts2u: Umfangreiches Schriftarten-Archiv

Wer seine Quellen für Schriftarten um ein sortiertes und gut gefülltes Archiv ergänzen möchte, sollte einen Blick auf Fonts2u werfen. Die Sammlung beinhaltet etliche Kategorien, die mit Freeware-, Shareware-, Donationware- oder GNU/GPL-Schriftarten von unterschiedlichen Designern bestückt sind. Die Zeichensätze können mit einem individuellen Beispieltext dargestellt und durch verschiedene Kriterien sortiert werden. Zudem werden die Schriften von der Community bewertet und so gibt es auch die Kategorien "Top rated fonts" oder "Top downloads". Sehr schön ist die Einblendung der Lizenz bzw. Nutzungsart, in der die Fonts bereitgestellt werden — dennoch sollte man stets doppelt überprüfen, für welche Zwecke eine Schriftart genutzt werden darf (Textdateien finden sich in der Regel in der ZIP-Datei).

Fonts2u

Die Seite ist in vielen Sprachen verfügbar und wertet mit weiteren Bereichen auf: Die Schrift-Designer werden alphabetisch in einem Verzeichnis aufgelistet und in der "Tools"-Abteilung finden sich viele Programme, mit denen sich Schriftarten verwalten oder erstellen lassen. Zudem steht ein Online-Converter bereit, mit dem Schrift-Dateien konvertiert werden können.

201003Mär

TypeWar: Kenntnisse über Schriftarten auffrischen

Der Fotograf hinter "Ironic Sans" hatte vor einiger Zeit ein Typografie-Quiz veröffentlicht, in dem Designer ihr Wissen über Arial und Helvetica testen können. Wer weitere Zeichensätze testen oder sein Wissen über Schriften auffrischen möchte, kann sein Glück bei TypeWar versuchen. Bei dem Test werden einzelne Zeichen einer Schriftart gezeigt, die der entsprechenden Schrift zugeordnet werden müssen. In der ersten Stufe finden sich hauptsächlich Buchstaben von "Times New Roman", "Optima" oder "Helvetica Neue".

TypeWar

Mit dem Erreichen eines weiteren Levels steigt auch der Schwierigkeitsgrad, so dass Betrachter die signifikanten Unterschiede der Schriftarten sehr genau kennen sollten.
Die Website erlaubt es zudem, ein Benutzerkonto anzulegen — dadurch kann der Spielstand gespeichert werden. Zusätzlich ist das Quiz für 1,60 EUR als iPhone-Anwendung zu haben. Damit können Designer ihre Fähigkeiten mit anderen Spielern in der TypeWar-Community testen.