Wer gelegentlich unterschiedliche Betriebssysteme verwendet weiß: Schrift ist nicht gleich Schrift. Trotz gleicher Schriftart und Schriftgröße stellen unterschiedliche Systeme Schrift unterschiedliche dar. Ein 12 Pixel großer Text in Arial wird auf dem Mac anders gerendert als unter Windows. Sogar zwischen Windows XP und Windows 7 bestehen deutliche Unterschiede. Wann, wie und welche Schriftzeichen vom Betriebssystem geglättet werden, ist sehr unterschiedlich. Die Darstellung schwankt daher oft zwischen pixelig und verschwommen.
Die folgende Grafik zeigt eine Collage aus Screenshots unter Ubuntu, Mac und Windows 7. In allen drei Fällen wurde der aktuelle Firefox verwendet. Unter Windows ist ClearType aktiviert, DirectWrite jedoch nicht. Dies entspricht der Standardeinstellung.
Screenshots: Font-Rendering unter Ubuntu, Mac OS und Windows 7
Die deutlichsten Mängel zeigen sich bei Windows 7 in der Darstellung der großen Serifenschrift (Droid Serif). Die Rundungen sind auffällig verpixelt, die Schrift sieht verknittert aus. Auch im Fließtext (Arial) sind bei genauem Hinsehen leichte Defizite erkennbar, etwa beim Doppel-S in »lassen«. In der rechten, grau hinterlegten Navigation fällt insbesondere das kleine »g« negativ auf.
Der Mac hat mit der Schriftglättung dagegen keine Probleme. Die Pixel-Problematik aus Windows wäre den vielen Mac nutzenden Designern auch kaum zumutbar. Ein für mich fast schon schwerwiegender Kritikpunkt: Der Arial-Fließtext wirkt leicht verschwommen. Beim Lesen längerer Texte kann das schnell ermüdend wirken.
Ubuntu vereint die ordentliche Glättung mit einer klaren, guten Lesbarkeit und ist in dieser Hinsicht aus meiner Sicht die beste Wahl. Neben der Auswahl der gezeigten Schriftarten spielt bei diesem Urteil unter Umständen aber auch meine persönliche Gewohnheit mit rein.
Insgesamt gilt: mit ein bisschen Recherche und Aufwand lässt sich aus jedem System eine bessere Darstellung herausholen. Wer viel am Rechner liest wird feststellen: es lohnt sich!
3. August 2011 — webdesign — 0 Kommentare
Wenn es gerade zwei Webdesign-Trends gibt, dann sind das Webfonts und “responsive Webdesign”. Über Webfonts lassen sich Schriftarten auf Websites nutzen, selbst wenn sie auf den Systemen der Besucher nicht installiert sind. Auch wenn Arial, Verdana, Helvetica, Times New Roman und Georgia nicht der Vergangenheit angehören werden, werden derzeit immer mehr Nicht-Standard-Fonts verwendet. Responsive Webdesign, also reagierendes Webdesign, bezeichnet Layouts, die sich dem Umfeld der Besucher anpasst. Was auf dem 21-Zoll-Monitor gut aussieht, kann auf einem kleinen Netbook oder gar auf dem Smartphone unbrauchbar sein. Gerrit van Aaken hat vorgemacht, wie ein sich anpassendes Layout funktionieren muss. Egal wie breit das Fenster ist, es wird stets das passende Layout angezeigt.
Beide Trends will ich in diesem neuen Layout anwenden. Als Schriftarten kommen neben der altbekannten Arial für den Fließtext zwei Android-Fonts zum Einsatz: Droid Sans und Droid Serif. Das Layout passt sich in drei Stufen der Breite des Browser-Fensters an. Ab 1044 Pixel Breite wird ein (nicht zu) breites Layout angezeigt. Von 750 Pixel bis 1043 Pixel wird die Breite der Seitenleiste eingeschränkt, damit mehr Platz für den Inhalt bleibt. Der Fließtext wechselt von Block- zu Flattersatz, da sich bei geringer Breite sonst große Lücken ergeben. Unter 820 Pixel wird das Layout ein-spaltig. Bilder werden per max-width automatisch angepasst, damit kein vertikales Scrollen notwendig ist (zu testen z.B. mit der IrfanView-Anleitung).
Die Sidebar habe ich zudem sehr viel schlichter gehalten. Social-Media-Buttons, Kategorie-Links und ähnlichen Kram braucht eigentlich niemand. Die für verschiedene Posts/Seiten jeweils unterschiedliche Bebilderung im Header ist dagegen geblieben: Abwechslung muss sein!
22. July 2011 — webdesign — 0 Kommentare
Um mein Chameleon-Theme mal ein wenig zu nutzen, binde ich einfach mal ein bisschen Farbe ein, um von der Artikel-Ebbe abzulenken. Das Bild habe ich über das Multicolr Search Lab gefunden.
20. April 2011 — Uncategorized, webdesign — 0 Kommentare
Das alte Design dieser Website war zwar noch nicht sonderlich alt, trotzdem war ich nicht ganz zufrieden. Es gab Probleme bei kleineren Auflösungen und auch technisch war nicht alles in Ordnung. Auch dieses Design ist zwar nicht genau so geworden, wie ich es mir vorgestellt habe, aber ich bin ganz zufrieden. Die Site wechselt ihre Farben wie ein Chameleon — zwar nicht wie ursprünglich geplant bei Mouse-Over über die oberen Menupunkte, aber immerhin nach dem Klick auf eben diese. Interessant wird der Effekt erst, wenn man ein paar Minuten rumklick. Also nur zu ;)
23. April 2010 — webdesign — 0 Kommentare
CC by-nc-nd