Weil’s heute ins Tagesprogramm passt. Eine der besseren Friseur-Webseiten ist die von Rolf & Bernd. Die Preise sind auch Geschmacksache.

Thomas Scholz fasst nochmal zusammen, warum man im Web den Blocksatz vermeiden sollte.

Die Diskussion ist zwar schon etwas ein alter Hut. Aber da die Berufsbilder nach wie vor unscharf sind, verweise ich auch auf diesen Beitrag mit Tiefgang: Sollten (Web-)Designer HTML und CSS können?

Übersicht zu Schätzmethoden im (Web-) Projektmanagement: Spiel mit den Wahrscheinlichkeiten

Everything you Know about Clearfix is Wrong: Vielleicht nicht wirklich alles. Wichtig auch der Hinweis darauf, dass ohne Basiswissen eben alles ein bisschen schwerer ist.

Weak constructs are most often due to the fact that people do not know what block formatting contexts are and what they do.

Hier wird präsentiert, was HTML5, CSS3 und JS APIs zusammen bieten: This presentation is an HTML5 website

HTML 5, oder: Die Angst vor dem Flash-Ersatz. Premium-Videos weiterhin nur in Flash?

Und noch ein Tool-Tipp: CSSDesk ist ein Online HTML&CSS-Editor mit Live-Preview.

[...] (Website) schließlich kam aus Deutschland und bestand aus eng gesetzten Zeilen, die auf zwölf Seiten ein Phänomen behandelten, [...] Der Text wies einen bemerkenswerten Mangel an Absätzen auf und war eindeutig für Leute geschrieben, deren Vorstellung von Ekstase eine mit Formeln vollgekritzelte Schiefertafel war.

Hat der Autor, speziell bei deutschen Angeboten, etwa entsprechende Erfahrungen gemacht? Wir werden es nie erfahren. Aber trotzdem noch einmal der Hinweis auf zwei Artikel, hier aus dem Webzeugkoffer: Typografie ist das halbe Webdesign und Mehr Lesbarkeit im Web – Einfach.

Comic Sans, die bereits relativ flächendeckend verwendbar ist, wird dann ihre Verwandten und neuen Freunde rufen. Sie werden das Web mit einer Welle weiterer typografischer Schwerverbrechen erschüttern.

Bei aller Euphorie, die sich 2009 breit gemacht hat, sollte man eines nicht vergessen: Typografie ist das halbe Webdesign und mehr als die Wahl einer (passenden) Schriftart.

Wie man sich auf den Wechsel langsam aber sicher vorbereiten kann, hat Mark Boulton kurz vor Weihnachten beschrieben: Designing For The Switch.

Schlichtes aber eindrucksvolles Blogdesign von Trent Walton. Im konkreten Fall hier auch ein interessanter Artikel, der über Content is King hinausgeht.

Die Links der Woche beschäftigen sich schwerpunktmäßig mit Content, dessen Gestaltungsformen und Authentizität.

• Pionierarbeit in Sachen individuelle Artikelgestaltung: Für und Wider individuell gestalteter Blogposts
• Social Media Nutzung im Reality-Check: Dabeisein ist bei weitem nicht alles. Wie auch Michael Jendryschik feststellt: Warum jedes Unternehmen seine Online-Reputation stärken sollte
• Microsites im Wandel: Die Zukunft der (Social) Microsite
• Mit Web Font Specimen erhält man ein effektives Testsetup für Web-Typografie
• @font-face gehört die Zukunft in Sachen Web-Typografie. Es ist aber noch nicht ganz einfach flächendeckend einzusetzen: How to Achieve Cross-Browser @font-face Support
• An Hand schlechter Erfahrungen und Fehler lernt man immer noch am besten: Clients From Hell. Kommunikative Dissonanzen.

Typography is the backbone of good web designBrian Hoff

Aber oft endet Webdesign bereits kurz nach dem Header. Dabei kann man in keinem Bereich des Webdesigns mit wenig Mitteln (ein paar Zeilen CSS)  schon sehr viel erreichen.

Macht eine Website auf den ersten Blick noch einen guten Eindruck, kann dieser bei genauerem Hinsehen schnell dahin sein. Fehlende Abstände (margin) und Polster (padding), niedrige Zeilenhöhen (line-height) und mikroskopisch kleine Schrift sind nur ein paar Symptome der Typoritis.

Grundvoraussetzung: Lesbarkeit

Auch im Web geht es v.a. um Information in Textform. Neben einem gut strukturierten und ansprechenden Webdesign, steht außerdem die Lesbarkeit mit an oberster Stelle. Gefolgt von Design und Eleganz des Schriftbildes. Was nützt ein Feuerwerk an Transparenzen und Schattierungen, wenn die Besucher nichts lesen können oder wollen?

Oft wird auch explizit eine möglichst kleine Schriftgröße gefordert. „Weil’s einfach besser aussieht.“ Das mag sein – auf den ersten Blick. Dann wenn ich mir eine Website als Bild betrachte. Was sie aber nicht ist. Davon abgesehen, kann auch große Schrift, wenn sie geschickt in Szene gesetzt wird, ihren Reiz haben. Dann sieht’s nicht nur gut aus, sondern es ist auch gut lesbar.

Keiner muss Experte in Sachen Typografie sein. Aber wenn man sich die Mühe macht, die wichtigen Grundregeln zu beherzigen, hat man schon viel erreicht. Darüber hinaus kann man dann seine Leser auch durch gelungene typografische Gestaltung begeistern.

Grundlagen

• The Elements of Typographic Style Applied to the Web (Klassiker)
• Typefacts
• Korrekte Typografie für’s Web mit HTML
• Typographie im Web
• A guide to Web typography
• Typography
• typographie web (französisch)

Lesbarkeit, Design & Eleganz

• Typography is the backbone of good web design
• Make Your Texts More Readable
• The 100% Easy-2-Read Standard
• 20 Do’s and Don’ts of Effective Web Typography
• Elegant Web Typography (Slideshare Präsentation)
• Dan Rubin on Web Typography (Interview)

Ressourcen & Tools

• Web Font Specimen
• Typedia
• Typography tips from 7 top designers
• Typetester
• Typechart
• CSS Type Set

Mehr Vielfalt

Wer außerdem gerne auf eine Vielzahl von Schriften zurückgreifen möchte oder muss (Stichwort „Hausschrift“), dem stehen dann erweiternde Techniken und Tools zur Verfügung. Die drei Hauptrollen spielten dieses Jahr @font-face, Cufon und Typekit. Ein alter Bekannter ist außerdem sIFR.

Mehr Vielfalt kann aber auch noch so ihre Tücken haben, wie ein prominentes Beispiel zeigte: Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts.

@font-face

War bereits Bestandteil der CSS2-Spezifikation, wurde aber, auf Grund mangelnder Unterstützung durch die Browserhersteller, aus CSS2.1 wieder verbannt. Mit CSS3 erlebt diese Methode ihre Renaissance. Dazu noch etwas mehr bei Tobias Otte: @font-face im Einsatz.

Cufon

Hier erfolgt eine dynamische Schriftersetzung mit Hilfe von Javascript und bietet eine Flash freie Alternative zu sIFR. Mehr zu Cufon bei Cameron Moll: Exploring Cufón, a sIFR alternative for font embedding.

Typekit

Auch Typekit setzt auf Javascript zur Einbindung System unabhängiger Schriften. Ich habe selbst auch kurz auf Typekit geblickt. Es hat aber auch noch ein paar Macken im Rendering.

Allen drei erwähnten Ansätzen ist eines gemeinsam: Probleme. Man hat entweder noch nicht die absolute Vielfalt (Lizenzen und Unterschiede im Rendering) oder es bestehen noch Unterschiede in der Browserunterstützung und Uneinigkeit über unterstütze Formate einzubettender Schriftfamilien.

Wir sind zwar schon ziemlich nah dran an einer neuen Vielfalt in Sachen Web-Typografie. Aber es kann nicht schaden, wenn man sich erst mal auf die Grundlagen beschränkt und sich allgemein um bessere Lesbarkeit und ansprechende Schriftbilder bemüht.

Mein persönlicher Favorit der zurückligenden Woche: Ride Oregon. Dazu die Linkpackung, u.a. zu den Themen komische Kunden und Corporate Angst (vor Socialmedia).

• „Die zwölf Bilder muss ich Ihnen auf einer DVD schicken“: Content is King? Willkommen im Glücksbärchiland!
• Abschied von der Eine-Plattform-Strategie. Auch das Corporate Web ist überall: Die Plattform Strategie der Corporate Website
• Gemeinsam Typografie lernen und teilen: Typedia
• Eine schöne allgemeine Einführung in das Thema mobiles Webdesign: Create a Mobile Site
• Wer hat Angst vorm erfolgreichen Blog? Manche Veraltensweisen lassen sich nur durch Unweissenheit und Angst erklären: The Social Media Fear Factor
• Why Stylesheet Abstraction Matters

Typekit bleibt für mich eine Option. Wenn auch mit Abstrichen, was die kostenlose Version und Ladezeiten betrifft.

Wie man aktuell sehen kann, Es wird im unteren rechten Bereich meines Blogs der Website ein Hinweis und Link zu Typekit eingeblendet. Das ist das Manko der kostenlosen Version. Update: Aktuell setze ich Typekit nicht mehr ein. Der Test ist für mich zunächst mal beendet. Ich überlege noch und werde mich bald entscheiden, ob ich ein Upgrade auf die 1. kostenpflichtige Version mache. Für den Einsatz von bis zu 5 Schriften auf einer Domain werden $24,99/Jahr fällig.

Handhabung von Typekit

Typekit einzusetzen ist so einfach, wie es im Sommer angekündigt wurde. Ich habe es kurz ausprobiert und wende Typekit aktuell auf die Überschriften (Artikelüberschriften) angewendet. Zum Einsatz kommt kam die Schrift „Dustismo“. Aktuell stehen 66 Schriften zur Verfügung.

Schriftsatz auswählen

Man wählt sich eine Schrift und muss dann noch ein paar Kleinigkeiten anpassen.

• Selektoren auf die die Schrift angewendet wird
• Schriftstile, die man zur Verfügung haben will (die dann jeweils vom Typekitserver geladen werden)
• Fallback
• (Subsets kommen demnächst noch dazu)

Bearbeitung der Schriftsatzoptionen

Im Prinzip muss man dann nur noch die zwei Zeilen Javascript in den head-Bereich der Website einfügen und schon kann Typekit arbeiten. Je nachdem welche Selektorenmethode man gewählt hat, muss auch die CSS-Datei noch angepasst werden.

In jedem Fall hat man Typekit bereits nach wenigen Minuten einsatzbereit.

Einfluss auf die Performance

Der Einsatz von Typekit hat Einfluss auf die Ladezeiten. Das ist klar, hält sich aber noch in Grenzen. Bei meinem Blog, angewendet nur auf die Überschriften, macht das etwa eine halbe Sekunde extra aus. Exzessiver habe ich es nicht getestet. Es ist aber wohl damit zu rechnen, dass sich die Ladezeiten weiter erhöhen, je mehr Elemente angesprochen werden.

Fazit

Ich lass’ die Sache mal ein paar Tage weiterlaufen und entscheide mich dann entweder für das kleine o.g. kommerzielle Paket oder verzichte ganz auf Typekit. Die Einblendung des Typekit-Links ist dauerhaft keine Option für mich.

Die Handhabung von Typekit ist jedenfalls kinderleicht und eröffnet so auf bequeme Weise mehr Vielfalt im Schriftenwald. So viel bleibt bisher festzustellen. Die Frage ist, ob einem der Hinweislink oder eine Ivestition von $25/Jahr und etwas höhere Ladezeiten die Sache Wert sind.

Website der Schauspielerin Audrina Patridge. Das ist die aus der Burger-Werbung.

• Tutorial mal anders als Comic: Learning About Contrast in Design
• Wireframes sind gerade in: Using Wireframes to Streamline Your Development Process Bsp. 6 + 7 halte ich für weniger geeignet, da schon wieder zu detailliert. Kommt aber auch auf die Zielgruppe der Präsentation an.
• Mit SlickMap CSS lassen sich Sitemaps mit Hilfe einer Vorlage als Strukturbaum darstellen
• Neue Serie bei Sprungmarker: Mit Barrierefreiheit arbeiten (1): Überschriften
• TypeSelect – Javascript-based Selectable Typefaces
• Schöne neue Typowelt mit @font-face. Sehen was z.B. möglich ist: Nice Web Type

Mehr Links und Tipps täglich bei Twitter

Letzte Woche wurde Typekit vorgestellt. Der Ausblick, den uns Jeffrey Veen gibt, klingt vielversprechend.

Just add a line of JavaScript to your markup, tell us what fonts you want to use, and then craft your pages the way you always have. Except now you’ll be able to use real fonts.Introducing Typekit

Typekit dürfte mehr als eine Alternative zu sIFR, Cufón oder typeface.js sein. Mittlerweile haben sich viele Webdesigner und andere dazu geäußert und teilen ihre Einschätzungen zu diesem sehr vielversprechenden Ansatz.

Die Meinungen und Einschätzungen sind nicht immer nur rein euphorisch. Was auch angemessen ist, da es in zwei Bereichen leichte Abzüge gibt.

• Typekit will ausgewählte Webfonts cross-browser-fähig machen
• Typekit, eine neue Möglichkeit für mehr Schriftenauswahl im Webdesign
• Web Fonts Get Real with Typekit
• Examining Typekit
• Why Typekit will change everything
• Typekit, Another Layer of Complexity?
• Typekit Hopes to Become the YouTube of Fonts
• Typekit – Web font licensing?

Oft diskutiert ist der notwendige Fallback. Was also passiert, wenn der Server auf dem die verfügbaren Schriften zentral abliegen, mal nicht kann oder sehr langsam reagiert. Diese technische Abhängigkeit muss gelöst werden. Wird auch. Im Notfall also muss man nur auf die bisher wenigen verfügbaren Schriftarten zurückgreifen. Das dürfte aber wohl die Ausnahme bleiben.

Typekit setzt außerdem auf ein teils kommerzielles Lizensierungssystem. Es wird nur in einer Basisversion kostenlos sein. Das bedeutet, dass viele Schriftarten nur dann genutz werden dürfen, wenn man dafür zahlt.

Insgesamt aber sieht es so aus, dass wohl ab diesem Sommer, mit einer nicht bekannten Schriftenvielfalt im Web gerechnet werden darf. Auch wenn Typekit immer noch nicht die absolut perfekte Lösung ist, so ist es doch (in der Theorie) sehr nah dran. Die gewonnene Rechtssicherheit, die neue Vielfalt und die Einfachheit der Implementierung, wiegen die negativen Kritikpunkte bisher auf.

Abbildung von flickr: Typekit

Eine persönliche Website. Nick Finck begrüßt seine Besucher sehr authentisch. Nach zwei Minuten weiß man, wer er ist, was er macht, welche Themen einen erwarten und wo man ihn findet.

Der Bithalter heute mit sieben kommentierten Links.

• Einführung in WAI ARIA (dt. Übersetzung)
• Was vom Web 2.0 übrig geblieben ist: Das Web 2.0 auf dem Weg zum Web 3.0, jenseits der Geeks und Nerds.
• Machen Patterns unflexibel? Welche Vor- und Nachteile bieten sie? Damit beschäftigt sich der Artikel “Thinking in patterns“
• Einfach ist nicht einfach: 7 Interface Design Techniques to Simplify and De-clutter Your Interfaces
• Graceful degradation versus progressive enhancement: Der kleine aber feine Unterschied
• Typografie ist ein wesentlicher Erfolgsfaktor in Design und Usability: 12 CSS Tools and Tutorials for Beautiful Web Typography
• Object Oriented CSS: Raus aus der Performance- und Effizienzfalle