Als ich mit dem Kreieren von Webseiten angefangen habe, existierte mit CSS ein damals schon ausgereiftes Werkzeug zur Schriftgestaltung. Meine erste CSS Tutorials waren damals die Webmonkey Serien bei Wired.com. Fonts waren eines der ersten CSS Module, dass von allen Browser relativ konsequent unterstütz wurde, aber irgendwann waren auch hier schnell die Grenzen erreicht, was man mit den üblichen paar Fonts so anstellen konnte. Das Grundproblem sollte viele Jahre nicht gelöst werden, nämlich die sehr geringe Vielfalt an Schriften. Ich habe so ziemlich jede Lösung ausprobiert, die zwischenzeitlich aufgetaucht ist. Alles weit davon entfernt, den Komfort zu bieten, den es braucht um bei der breiten Masse anzukommen. Und jetzt gibt’s Google Webfonts. Damit hat sich das Thema auch erledigt.

neues Spielzeug

Einige Probleme bleiben. “Flash-of-noch-nicht-geladene-Schriften”. Als deutscher Nutzer wird man oft vergeblich nach Umlauten suchen. Windows fehlende aktivierte Kantenglättung - in neuen Versionen ein geringeres Übel - lässt alles außer den üblichen Screenfonts ziemlich übel aussehen, besonders bei größeren Schriften. Noch ist die Auswahl begrenzt, was sich im Laufe der Zeit ändern wird…und trotzdem habe ich Google Webfonts hier im Blog nun schon integriert. Erstmal wird es sich auf individuell gestaltete Artikel beschränken. Wobei die Nobile ein verdammt guter Arial Ersatz in allen Überschriften wäre. Dies ist hier ist nur der obligatorische Test-Artikel und deshalb so hoffnunglos mit unpassenden Schriftkombinationen überladen. Musste einfach mal sein.

Feedback: 2 Kommentare

Je mehr Geräte wir nutzen um Text zu lesen, umso mehr verändert sich der Lesefluss. Der klassische Spaltensatz fühlt sich fast schon exotisch an und besonders die Idee, jenen Spaltensatz 1:1 online zu übertragem, wirkt befremdlich. Noch finden sich wenige Beispiele, auch weil es einfach sehr unangenehm ist, so dargestellte Texte zu lesen. Jener Lesefluss wird angenehmer, wenn man statt einer Maus, direkt mit den Fingern auf einer Oberfläche “scrollt”. Es ist präziser und schneller zum Scannen der Texte und ich gebe zu, es kommt der Haptik des Umblätterns einer Seite Papier näher, als die Nutzung einer Maus.

Es wird langfristig kein Dogma geben, wie längere Texte darzustellen sind, dafür existieren zu viele Plattformen und die Technologie entwickelt sich zu schnell fort. Umfang, Format und Plattform, werden Anpassungen erfordern. So war es immer und so wird es immer sein. Auch wenn uns Standards heute vieles erleichtern, die Suche nach dem einen heiligen Gral wird auch in Zukunft erfolglos sein. Außer Konkurrenz und damit das rettende Netz wir der ganz klassische 1-Spalten-Satz. Ein Spalte liest sich einfach egal mit welcher Steuerung, egal bei welcher Auflösung am einfachsten. Wenn es nur darum geht Text zu transportieren, dann bitte hiermit. Diese Art hat für mich aber zu viele Einschränkungen in der Gestaltung, weshalb ich hier immer wieder mal mehr als eine Spalte aufmache.

Ich versuche hier wieder und wieder den klassischen Lesefluss bekannt aus Zeitungen zu umgehen. Dieser Ansatz unterbricht mir das Lesen zu sehr. Weil man nicht nur mit dem Augen springen, sondern dabei auch scrollen muss. Ein Bildschirm ist kein fixes Format aus Papier. Was die Sache online erschwert, ist das Float-Modell von CSS. Statt sich vertikal anzuordnen, nehmen sich Text-Blöcke erstmal die Horizontale. Für das geschulte Online-Auge kein Problem, wir wissen wie der Text zu lesen ist, aber wer mehr Gedrucktes liest, dem wird ungewohnt sein Textblockzeile für Textblockzeile abzuarbeiten, statt Spalte für Spalte. Einige Artikel bei The Bold Italic wirken zwar eindrucksvoll gesetzt, erweisen sich doch aber leichter im RSS-Reader zu lesen.

Auf meiner Seite hier versuche ich immer zu tricksen, um das Auge möglichst eindeutig zum nächst richtigen Textblock zu führen. Alle “hängenden” Textblöcke sind optisch oft so gut separiert und inhaltlich so geschrieben, dass sie selbst in der falschen Reihenfolge gelesen Sinn ergeben. Das klingt jetzt seltsam, ist jedoch ein Aspekt, den ich hier im Blog immer wieder beachte. Solange keine wirklich gute Lösung für das Problem Spaltensatz existiert, ist es immer ein Mittelweg zwischen Augenwischerei, logischem Lesefluss und sinnvolle Nutzung des Raumes. Ich bin überzeugt, dass diverse Randspalten, also jene Klickfänger, die so gut beim Lesen stören, eigentlich praktisch sind, da sie die Seite füllen ohne was am Text verändern zu müssen. Eine schmale Textspalte sähe auch ziemlich verloren aus. Nicht alles was widerum schick aussieht, liest sich auch gut bzw. besser. Im Zweifel lieber die langweiligere aber sicher Variante, als ein Labyrinth aus Textblöcken, deren Navigation bzw. Lesefluss man in den letzten 10 Jahren verlernt haben mag.

Feedback: 0 Kommentare

Gibt es etwas aus Verdanagate zu lernen, also abgesehen davon, dass Verdana im Druck noch unansehnlicher wird? Wenn eine der bekanntesten Marken unserer Zeit, bei der Gestaltung der eigenen Marke spart, dann ist dies Zeichen einer neuen Philosophie von Gestaltung, selbst bei jenen, denen man eigentlich Sensibilität für das Thema attestieren könnte. Ich möchte an der Stelle überhaupt nicht werten, wie gut oder schlecht Ikea’s neue Hausschrift ist. Viel interessanter für mich ist der Ursprung des Wechsels vom Klassiker (Futura) zum Wegwerfartikel (Verdana).

“We’re surprised, but I think it’s mainly experts who have expressed their views, people who are interested in fonts. I don’t think the broad public is that interested. Verdana is a simple, cost-effective font which works well in all media and languages.” #

Design verliert als Handwerk langsam aber sicher an Wert. Seien wir mal wieder so richtig ehrlich. Hand aufs Herz, was zeichnete einen großen namenhaften Gestalter vor zwanzig Jahren im Vergleich zu heute aus? Der Zugang zur Technologie. Früher waren die Werkzeuge in der Hand einer kleinen Elite. Heute bekommt jeder der eine Kamera kauft gleich die passenden Werkzeuge zum Gestalten mit in die Hand. Der Wegfall des Techonologie-Monopols verwässert das Ansehen des Handwerks. Ob dies gut oder schlecht ist, möchte ich nicht werten. Fakt ist jedoch, dass jeder heute mit dem Begriff Photoshop was anfangen kann. Einst dem Wert eines Kleinwagen entsprechend, ist es mit dem Internet in die Hände jedes Anwenders gelandet und viele davon haben Blut geleckt.

Ich erlebe die Folgen dieser Entwicklung täglich. Der Markt für Gestaltung bei mittelständischen Unternehmen ist hier dominiert von Hobby-Gestaltern, die nicht nur die Preise, sondern auch die Qualität senken und das offensichtlich zur Freude der Klienten. Schaut man sich Ikea’s Reaktion an, dann scheint diese Mentalität nun auch bei den großen Marken angekommen zu sein. “Wieso dieser Trubel? Verdana kann man doch auch lesen?”

Das Argumentieren gegen diesen Trend ist der Kampf gegen die Windmühlen. Im Fall Verdanagate ist es unmöglich. Verdana ist lesbar wie Futura aber um einiges günstiger. Der Rest ist subjektive Wahrnehmung weniger. Es ist nicht verwunderlich, dass es sogar Stimmen gibt, die den Wechsel begrüßen.

Kurzfristig dürfte sich hier nichts ändern. Je stärker Online für Gestaltung an Gewicht gewinnt, umso mehr Verdanagate dürften wir sehen. Was langfristig irgendwann unvermeidlich sein sollte, ist der “Homer Simpsons Effekt”. In einer legendären Folge darf Homer ein Auto gestalten, welches den Hersteller in den Ruin treibt. Zwar eine überspitze Aussage, aber mit tagesaktuellem Wert. Manchmal ist die Expertise doch wichtiger als der Preis. Schade, dass diese Regel bei Gestaltung nur schwer zu vermitteln ist.

Feedback: 0 Kommentare

Typekit ist ein weiterer ambitionierter Versuch mehr Schriften als Arial und Georgia auf einer Website zu bieten. Seit einigen Tage ich ich einen Trial Account, weshalb ich davon ausgehe, dass Typekit kurz vor einem offiziellen Release steht. Was ich bisher gesehen und getestet habe gefällt, ist aber nicht die gottgleiche Lösung, die sich einige wohl hiervon versprechen. Bisherige Lösungen sind entweder nicht verlässlich genug (@font-face) oder zum umständlich in der Nutzung (sFIR, Cufon). Typekit möchte beide Schwächen ausbügeln und es gelingt im auch. Die Verwaltung und Einbindung der Schriften, könnte einfacher nicht sein, insofern hat man die Ziele eigentlich schon erreicht.

Auf meiner Test-Seite bekommt man einen Eindruck von Optik und Funktion Typekits. Man bekommt von der Seite ein Javaskript-Schnipsel, der im Kopf einer Seite platziert wird. Dies ist die einzige Zeile-Code, die man schreiben muss. Wahl der Schriften und Zuordnung zu jeweiligen HTML-Tags oder CSS-Klassen, findet auf der Typekit-Seite statt:

Hier wählt man Schriften aus und ordnet sie einem HTML-Element oder eine CSS-Klasse/ID zu. Erstaunlich intuitives UI Design an dieser Stelle. Abgesehen vom Einbinden des Javascripts gibt es sonst nichts zusätzliches zu verändern. Sehr schön auch direkt die Angabe der Dateigröße, die zusätzlich geladen werden muss.

Es ist so einfach wie es sich liest. Typekit bietet verschiedene Account-Varianten. Diese unterscheiden sich in Preis, Anzahl nutzbarer Fonts, Bandbreite, Anzahl einzusetzender Websites und Anzahl einzusetzbarer Fonts pro Website. Die Preise sind aktuell wohl noch reduziert, wobei ich davon ausgehe, dass es dabei bleiben wird. Es sind faire Preise. Nicht billig aber auch kein Wucher. Gibt es überhaupt was anzukreiden?

Nun Typekit scheint, eine komfortable Lösung für ein dann doch winziges Problem. Es ist ein tolles neues Werkzeug, mit dem sich aber auch weiterhin ohne arbeiten lässt. Trotzdem sollte es ein populäres Angebot werden, einfach weil die Integration so einfach ist.

Ich halte mich noch fern von Typekit. Gründe dafür sind schnell aufgezählt. Typekit ist eine externe Plattform. Wenn deren Server mal down sind, bezahlt man für einen nicht nutzbaren Service. Ich habe meine Schriften lieber direkt auf meinem Server. Mit @font-face hat man langfristig die bessere Lösung. Typekit geht den 100% legalen Weg der Lizensierung, aber es ist kein Geheimnis, dass es zu jeder kommerziellen Schrift, eine kostenlose Alternative gibt. Für den winzigen elitären Kreis der Designer mag Typekit ideal sein, für die restlichen 99% tut es auch die Arial statt der Helvetica.

Persönlich mag ich die bessere Dynamik der bisherigen Lösungen für Schrifteinbettung abseit der sicheren Fonts. Ich möchte auf Basis individueller Seiten Schriften austauschen und hierfür ist Typekit eher weniger gedacht. Wer seitenweit alle H2s in Helvetica setzen möchte, der braucht Typekit. Wer es nur auf ausgewählten wenigen Seiten ändern möchte, braucht Typekit nicht.

Abwarten und Tee trinken lautet meine Devise auch hier. Momentan fehlt mir sowieso ein sinnvoller Einsatz für Typekit, allerdings halte ich den Blick aber doch langfristig mehr auf @font-face gerichtet. Ich bin aber überzeugt, dass es für diese Lösung einen Markt gibt und wünsche Typekit viel Erfolg. Mehr als die üblichen Webfonts zu sehen, kann nur ein Schritt nach vorn sein und Typekit bietet dafür jetzt die einfachste und sicherste Lösung.

Feedback: 0 Kommentare

Ich mache gerade gute Forschritte beim Redesign dieser Seite. Dabei hat sich wieder ein Thema angeboten, dass ich schon lange vorstellen wollte. Mittlerweile gibt es für jedes System eine große Auswahl Browser und jeder hat bei mir irgendwie seine Daseinsberechtigung: Firefox zum Entwickeln, Chrome wenn es sicher sein soll und Safari lässt selbst auf einem Windows-PC Schriften endlich gut aussehen. Es braucht Apple um Webtypo auf Windowssystem endlich angemessen darzustellen. Bittere Ironie.

Windows selbst bietet seit der Version XP zwar eine Schriftenglättung, die aber veraltet und im System von Haus aus deaktiviert ist. Bei Vista bzw. bald 7 geht man den “mutigen” Schritt und aktiviert diese subtiomale Kantenglättung zumindestens automatisch, trotzdem bleiben Schriften damit immer noch unansehnlich, besonders im Vergleich zu dem was Apple hier liefert. Zwar mag Apple’s Lösung eigene Probleme haben (Schriften wirken auf OSX grundsätzlich immer einen Tick fetter) aber insgesamt deklassiert man auch hier Windows.

Optionsfenster zum Einstellen der Kantenglättung für Schriften im [Safari-Browser][1] für Windows. Zu finden unter Preferences > Appearance > Font Smoothing.

Die aktuelle Safari 4 Beta bringt jedoch nicht nur einen tollen Browser auf Windows-PCs, sondern eben auch die umfangreichste Auswahl für Kantenglättung bei Schriften. Ich empfehle mittlerweile jedem der auf PCs angewiesen ist, Safari zu benutzen. Erstaunlicherweise sieht selbst der Laie, den Vorteil bei der Schriftdarstellung. Der Unterschied ist wirklich so deutlich sichtbar:

Schriften bleiben eines der großen Ärgernisse im Webdesign. Safari für Windows ist zumindestens etwas Balsam auf die geplagte Gestalterseele. Ich empfehle jedem, Safari einfach mal eine Chance zu geben. Nach kurzer Zeit, sollte dieser Browser nicht nur für mich zum Standard auf Windows-PCs werden.

Feedback: 1 Kommentar

Gibt mal wieder einen empfehlenswerten Link von mir. The Art of the Title ist ein Blog rund um Titelsequenzen von Filmen. Zu diesem Thema gibt es auch unzählige andere Alternativen, keine andere Seite bietet die gleiche Qualität bei den entsprechenden Videos.

Alle Klassiker sind vorhanden. Nur etwas mehr von Saul Bass hätte es dann schon sein dürfen. Der Epos aller Titelsequenzen ist jedoch im Archiv. Das Juno-Intro gibt’s in hervorragender Qualität zu sehen. Für Alien existiert eine Zusammenfassung aller Teile, aber hier muss man nur die erste Sequenz anschauen. Eines von vielen Beispielen, wo die Titelsequenz den eigentlich Film übertrifft: Catch Me If You Can. Was mir fehlt ist mehr James Bond. Besonders die Filme der 80er haben so wunderschön kitschige Titel.

Mich persönlich beeindrucken die Titel der alten Filme noch stärker, da man hier noch mit einfachsten Mittel unvergessene Sequenzen produziert hat. Heute kann jeder Amateur, Typo mit Effekten penetrieren und das ganze eine Titelsequenz nennen.

Feedback: 1 Kommentar

Gefunden in einer Präsentations-PDF, bei der MIT-Studenten das Check-Karten-System öffentlicher Verkehrsmittel geknackt haben. Schon etwas älter aber gut.

Auch wenn ich vom Thema darin nichts verstehe, es ist immer wieder interessant, welche visuelle Ästhetik solche Präsentationen haben. Effiziens > all. Das mag ich.

Feedback: 1 Kommentar

Sehr nettes Piktogramm-Set zur Schattenseite einer Olympiade. Unbedingt im Detail anschauen, sind ein paar wirklich gelungene Zeichen dabei. Hier gibt’s die passende PDF. Via Fontblog

Feedback: 0 Kommentare

Während die Medien aktuell das Obama-Event wie ausgehungerte Wölfe eine Stück Fleisch behandeln, sollte man mal schauen, was im ganzen Hype wirklich erwähnenswert ist. Dies zum Beispiel, das Poster¹ zur Veranstaltung heute:

Wenn ich mich dran erinnere wie es damals großkotzig hieß: “Info-Typo niemals winkeln. Lesbarkeit ist alles”. Soviel zum Kampf zwsichen Theorie und Praxis.

Feedback: 3 Kommentare