Kategorien
Linktipps

Linkscheucher – 29.05.2010 bis 30.05.2010

Folgende Dinge las und fand ich in letzter Zeit gut:

Apple iPad: Erste Eindrücke » Pottblog
Jens über seine ersten Eindrücke zum Apple iPad

DIY “Plants vs. Zombies” Plüschfiguren : misterhonk.de
Plüschfiguren aus dem beliebten iPhone-Spiel Plants vs Zombies (Plants vs. Zombies).

ClearType For All | Blog | FontShop

What the iPad is Missing (No, it’s not a Camera) | The FontFeed
“Yet it’s exactly that part of media consumption, reading, that reveals what’s missing on the iPad: good typography.”

Maxvoltar – What does 320dpi mean to designers?
“So the next iPhone (which I’m betting will be called iPhone HD) will almost definitely1 have a screen with a resolution of 640 by 960 pixels, at 320 dots per inch. This is double of what the iPhone 3GS has today (163dpi), and two and a half times the pixel density of the iPad (132dpi), giving you a total playground of 614,400 pixels.”

minimalistisch » » Nils Guadagnin und das pinke Hoverboard.
Oh cool, das Hoverboard aus Zurück aus der Zukunft. In Echt.

How to Get Your Camera Back When You Lose It
Ha, Photograph lässt immer ein paar Bilder mit E-Mail-Adresse und so auf seiner Kamera. Falls sie mal verloren geht, sieht sie der Finder vielleicht :)

VerfickteScheisse.com » Astra Bier – Werbeplakate
Sehr geile Werbeplakate von Astra Bier

Fairbloggt.de – Hää!? » Katerkiller. » Prime Serum, Prime, Killerkater, Fruchtsuppe, Alkohol, Bernsteinsäure, Mineralstoffmatrix, Anti-dehydrierend, Ascorbinsäure, Mittel gegen Kater, prime-serum.de
Oha, was für den Kater danach.

Warum ich Apple gelegentlich hasse. Ein Rant über angebliche Bildrechte
“Unfortunately your promotion plans to include iPad which does not fit with our marketing strategy at this time, so we would ask you to remove the competition.”

Ignoranter Webdesigner » CSS, HTML, Webdesign, Webstandards » ononlinework
Stefan David schreibt einem Webdesign-Kollegen, welche Fehler dessen Websites beinhalten und hat ziemlich recht.

Meine delicious-Links vom 29.05.2010 bis 30.05.2010:

Kategorien
Linktipps

Linkscheucher – 28.05.2010

Folgende Dinge las und fand ich in letzter Zeit gut:

Meine delicious-Links vom 28.05.2010

Kategorien
Typographie

Typographische Flachwitze, Teil 2

(Hatte ich drüben schon mal, nur in schlechter.)

Kategorien
Gestaltung und Design Typographie Webdesign/Gestaltung

Tipps zu hellem Text auf dunklem Grund

In Light text on dark background vs. readability von Roger Johansson geht’s mal wieder um die Probleme und Tipps zu weißem/hellen Text auf schwarzen/dunklen Hintergrund. Besonders im Hinblick auf die Lesbarkeit. Oftmals verwischen sich die hellen Buchstaben zu einem nicht lesbaren Brei. Die wichtigsten Regeln einmal zusammengefasst:

Schriftgröße

Als allererstes sollte man eine ausreichende Schriftgröße verwenden. Mini-Texte jenseits der 10px sollten generell vermieden werden, lesbar wird es so ab 12px. Auf eine geeignete Schriftart ist wie immer auch zu achten!

Beispiel zur Schriftgröße ansehen.

Zeilenabstand vergrößern

Um die Lesbarkeit zu steigern und keinen Textbrei zu erhalten, sollte der Zeilenabstand vergrößert werden. Am einfachsten geht dies mit der CSS-Anweisung line-height: Ein Beispiel: line-height: 1.4em;. Dies würde den Zeilenabstand um 40 % der Schriftgröße erhöhen.

Beispiel zum erhöhten Zeilenabstand ansehen.

Wie man sieht, hat die Lesbarkeit enorm zugenommen. [Feed-Abonnenten sollten einfach mal die Original-Seite anschauen und das Stylesheet neu laden (F5 drücken).]

Laufweite erhöhen (sperren)

Zusätzlich zum Zeilenabstand kann man auch noch die Abstände zwischen den Buchstaben vergrößern: letter-spacing: 0.03em;. Hierbei ist es wichtig, das ganze nicht zu übertreiben! Außerdem sollte man hier auch die Wortabstände per word-spacing vergrößern, da es bei hohen Werten sonst schwer werden könnte, Zwischenräume und Leerzeichen auseinanderzuhalten. Dieser Wert sollte über dem Buchstaben-Abstand liegen.

Beispiel zur erhöhten Laufweite ansehen.

Kontrast

Der Kontrast zwischen Hintergrund- und Textfarbe sollte ausreichend genug sein, beide voneinander zu unterscheiden, aber auch nicht zu groß oder auch grob ausfallen, da dies auf Dauer schwer für die Augen werden kann. Wählt man für den Hintergrund die Farbe Schwarz #000 und gibt dem Text ein dunkles grau wie #666, dann ist der Text kaum zu erkennen. Färbt man den Text allerdings weiß (#FFF) wird es wieder besser mit der Lesbarkeit.

Beispiel zum Kontrast ansehen.

Natürlich gelten diese Regeln auch bei dunkel-auf-hell-Webseiten. Vielen Dank nochmal an Christoph für seine Hinweise in den Kommentaren.

Weitere Infos