Artikelbewertung "Typographische Gestaltung und Layout mit CSS"

[DeWitt]

Hallo SELFHTML-Gemeinde,

Ich habe auf meiner Website einen Artikel zum Thema Typographische Gestaltung und Layout mit CSS verfasst. Ich würde mich freuen, wenn ihr ein paar Kommentare dazu abgeben würdet. Vor allem interessiert mich:

• Ist der Artikel verständlich geschrieben?
• Sind die behandelten Aspekte korrekt dargestellt?
• Fehlen wesentliche Dinge?
• Wie gefällt euch der Artikel?

Gerne könnt ihr die Kommentare auch gleich auf meiner Seite am Ende des Artikels (Rubrik "Diskussion") abgeben.

Ciao,
David //aka DeWitt

[Der Martin]

Hallo,

Typographische Gestaltung und Layout mit CSS

• Ist der Artikel verständlich geschrieben?

ja, unbedingt.

• Sind die behandelten Aspekte korrekt dargestellt?

Ob korrekt, kann ich nicht beurteilen, aber zumindest verständlich und plausibel. Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.

• Fehlen wesentliche Dinge?
• Wie gefällt euch der Artikel?

Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.

Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)

Schönen Tag noch,
 Martin

[e7]

HI,

Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil.

Dass Serifen die Lesbarkeit verbessern ist eine Tatsache aus dem letzten (bzw. noch eher) Jahrhundert, als die Schriften noch nicht die Qualität von heute hatten und die Zeichen überall hingen, nur nicht in der Zeile. Leider setzt sich diese Erkenntnis nur langsam durch... Interessant ist, dass man anhand ein paar Arbeiten häufig schon das Alter des Gestalters plus/minus 30 Jahre abschätzen kann *g*

Auch eine Frutiger hat Schrifttransport; dafür ist die Rotis z. B. auch als herkömmliche Antiqua nicht lesbarer als die Sans Serif-Version (nichts gegen die Rotis, sieht ganz gut aus). Kommt halt immer auf die Schrift an.

Serifen verwende ich auch nur, wenns zum Thema/Design passt, ansonsten so oft wie möglich serifenlos. Sollte ich jemals irgendwann ein Buch rausbringen, dann besteh ich auf jeden Fall auf eine serifenlose Schrift (btw, Web 2.0-Logos verwenden normalerweise auch serifenlose Schriften, sieht einfach moderner aus)...

Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.

/sign.

Sie sind einfach lesbarer, leichter erfassbar, da weniger Verschörkselungen (= Serifen) und weniger Linien.

Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.

Dann kann man den gelben Text überhaupt nicht mehr entziffern, wenn der Hintergrund noch heller ist. Ist sowieso schon kaum Kontrast auf der Seite.

Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)

So lange da nicht Standart steht :)

e7

[DeWitt]

[...]

Sie sind einfach lesbarer, leichter erfassbar, da weniger Verschörkselungen (= Serifen) und weniger Linien.

Hmm, ich denke ich werde diesen Absatz in meinem Artikel bei Gelegenheit etwas umschreiben, so dass er die Kontroverse, die da anscheinend herrscht (und die sich hier ja auch schon fast abzeichnet), besser verdeutlicht ;).

Ciao,
David //aka DeWitt

[Kai345]

[latex]Mae  govannen![/latex]

• Ist der Artikel verständlich geschrieben?

ja, unbedingt.

Stmme zu

• Sind die behandelten Aspekte korrekt dargestellt?

Ob korrekt, kann ich nicht beurteilen, aber zumindest verständlich und plausibel. Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.

Ich hingegen bevorzuge sehr oft eine Serifenschrift. Möglich, daß das an der im Artikel angesprochenen browserspezifischen Darstellung liegt.

• Fehlen wesentliche Dinge?
• Wie gefällt euch der Artikel?

Die farbliche Harmonie gefällt mir sehr gut, obwohl ich der Meinung bin, die Hintergrundfarbe ist noch einen Tick zu dunkel.

Sehe ich auch so. Ich kann den normalen Text ziemlich schlecht lesen, was ich vornehmlich an der Schriftfarme festmache. So ein dünner hellgelber Text auf dunklem Hintergrund ist für mich nicht so einfach.

Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)

Bei den heute fast überall anzutreffenden hochglänzenden Displays muß halt mal etwas mattes her ;)

Cü,

Kai

[DeWitt]

Und ein Rechtschreibfehler zieht sich konsequent durch die ganze Linie: Formatieren mit zwei 't' sieht einfach böse aus. ;-)

Oje oje, und ich hab mich immer als absolut sicher in der Rechtschreibung eingeschätzt *duck* - ist geändert :D

[Christian Seiler]

Hallo Martin,

Mal abgesehen davon, dass ich *nicht* die Meinung teile, Serifenschriften würden die Lesbarkeit verbessern, sondern eher im Gegenteil. Ich kann Texte in serifenlosen Schriften wesentlich besser erfassen und flüssiger lesen - auch im Printbereich.

Volle Zustimmung. Meine persönliche Präferenz sind auch serifenlose Schriftarten. Besonders lustig fand ich's, als sie vor einigen Jahren mal das Layout der c't geändert haben und plötzlich auch serifenlose Schriften verwendet haben - in den Leserbriefen gab's einen Aufschrei sondersgleichen und es wurde immer wieder die Aussage gebetsmühlenartig wiederholt, dass Serifen die Lesbarkeit erhöhen. Ich fand die neue (d.h. jetztige) Variante aber schon damals im direkten Vergleich besser als die vorige. Und offensichtlich ist der prophezeite Leserschwund nicht eingetreten, sonst hätten sie's inzwischen wieder zurückgestellt. ;-)

Viele Grüße,
Christian

[Samoht]

Gudn!

[...] Besonders lustig fand ich's, als sie vor einigen Jahren mal das Layout der c't geändert haben und plötzlich auch serifenlose Schriften verwendet haben - in den Leserbriefen gab's einen Aufschrei sondersgleichen und es wurde immer wieder die Aussage gebetsmühlenartig wiederholt, dass Serifen die Lesbarkeit erhöhen. Ich fand die neue (d.h. jetztige) Variante aber schon damals im direkten Vergleich besser als die vorige. Und offensichtlich ist der prophezeite Leserschwund nicht eingetreten, sonst hätten sie's inzwischen wieder zurückgestellt. ;-)

Zum Glück! :)
Hab das damals auch "live" miterlebt und war/bin froh, dass sich der Heise-Verlag dazu entschlossen hatte!

Gruß aus Fürth in Mittelfranken,
Samoht

[Beat]

Ich habe eine blöde Frage.

Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?

mfg Beat

[DeWitt]

Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?

Hmm, was meinst du?

[Beat]

Hat deine Kompetenz Google Adds mit einem Zitat und Link auf deine eigene Seite (statt eine reellen Quelle) notwendig?
Hmm, was meinst du?

<ZITAT>
Typographie definiert

Doch was genau bezeichnen nun eigentlich die Begriffe "Typographie" bzw. "Layout"? Ralf Janaszek schreibt auf seiner Website typo-info.de:[[1]]

[Typographie steht für die] Lehre von

* den einzelnen Buchstaben,
        * der Zusammenfügung einzelner Buchstaben,
        * der Zusammenfügung von Buchstaben zu Wörtern und von Wörtern zu gliedernden Elementen wie Zeilen, Absätzen, Textblöcken, Spalten.

Gegenstand des Layouts sind [...] Aspekte wie etwa

* Satzspiegel,
        * Positionierung von Texten, Bildern, Fotos, Illustrationen, Logos, Symbolen etc. auf der Seite.
</ZITAT>

[[1]] Das Ziel dieses Links ist die Seite auf welcher der ausführende Link steht.

mfg Beat

[DeWitt]

[[1]] Das Ziel dieses Links ist die Seite auf welcher der ausführende Link steht.

mfg Beat

Ah danke, da stand glatt ein leeres "href" ;)

Ciao,
David //aka DeWitt

[suit]

• Wie gefällt euch der Artikel?

du missbrauchst gleich einleitend ein fieldset als gestalterisches element - dafür ist es nicht da - und wagst es dann von layout mit css zu sprechen? ;)

visuell ist er nicht sonderlich ansprechend, die schrift- und hintergrundkombination ist etwas unglücklich, dieses gelb auf lila wirkt nicht sehr seriös - aber das ist geschmackssache

ich selbst bevorzuge schlicht weiss mit schwarzer bzw sehr dunkelgrauer schrift

[DeWitt]

visuell ist er nicht sonderlich ansprechend, die schrift- und hintergrundkombination ist etwas unglücklich, dieses gelb auf lila wirkt nicht sehr seriös - aber das ist geschmackssache

Ist ja auch "nur" eine Hobbyseite, und das Design ist schon paar Jährchen alt. Würde ich inzwischen selbst so nicht mehr gestalten, aber ich wollte damals einfach mal was neues/originelles basteln. Abgesehen davon bezog sich meine Frage sowieso mehr auf den Artikel-Inhalt als auf das Design der Website, aber trotzdem danke für die ehrliche Meinung.

du missbrauchst gleich einleitend ein fieldset als gestalterisches element - dafür ist es nicht da - und wagst es dann von layout mit css zu sprechen? ;)

Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)

Ciao,
David //aka DeWitt

[suit]

Ist ja auch "nur" eine Hobbyseite, und das Design ist schon paar Jährchen alt.

ist mir erst nachher aufgefallen, dass der artikel zur seite dazugehört und das design nicht artikelbezogen ist ;)

Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)

deine liste fürs inhaltsverzeichnis hast du ja schon - ein border hätte ja gereicht und die erste ebene der liste etwas negativ drüberschieben ;) - geht ohne viel murksen auch :D

[Patrick Andrieu]

Hallo suit!

Ich weiß, dass das ein semantischer Fehlgriff ist, aber ich finde die Darstellung in modernen Browsern recht ansprechend und hatte keine Lust, ein ähnliches Aussehen mit semantisch korrekten Elementen und viel CSS zurecht zu murksen ;)

Fieldset-Nachahmung-Variationen von Engin.

Viele Grüße aus Frankfurt/Main,
Patrick

[suit]

Fieldset-Nachahmung-Variationen von Engin.

ich weiss ja wies funzt :D

btw: das hier gehört nicht ins html ;)
.......:::::::::::::.......

[Patrick Andrieu]

Hallo suit!

ich weiss ja wies funzt :D

Ups, ich hätte schwören können, dass ich auf DeWitts Beitrag antworte. Da war ich wohl etwas très Witt beim Posten ;)

btw: das hier gehört nicht ins html ;)
.......:::::::::::::.......

Hm, ins CSS? ;)

Viele Grüße aus Frankfurt/Main,
Patrick

[suit]

Hm, ins CSS? ;)

idealerweise schon - aber zur not reicht ein schönes hintergrundbild ;)

der vollständigkeit halber:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after

[Malcolm Beck´s]

hi,

idealerweise schon - aber zur not reicht ein schönes hintergrundbild ;)

haben wir auch. :)

der vollständigkeit halber:
http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#before_after

Das ist aber jetzt ein schlechter Scherz? Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische, auf der anderen den vielleicht übersetzer ins Dürkische[1], und du verlinkst hier´n (fast) Basic....Tztztz....:)

grüße
[1] Dürkisch ist die kurzform für deutsch/türkisch, die Variante für halbtürke/halbdeutscher, die des türkischen nicht so mächtig sind

[Patrick Andrieu]

Hallo Malcolm!

Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische,

Zuviel der Ehre: Ich habe nur wenige Artikel übersetzt, Beispielkorrektur übernommen und auch so etwas Text Korrektur gelesen. Die Arbeit, zwei Versionen vollständig zu übersetzen, hatte sich Serge François gemacht.

Viele Grüße aus Frankfurt/Main,
Patrick

[Malcolm Beck´s]

hi Patrick,

Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische,

Zuviel der Ehre: Ich habe nur wenige Artikel übersetzt, Beispielkorrektur übernommen und auch so etwas Text Korrektur gelesen. Die Arbeit, zwei Versionen vollständig zu übersetzen, hatte sich Serge François gemacht.

Das weiss ich, dennoch, du bist in die Materie[1] gesprungen und wieder lebend raus gekommen, das kann man ja erwähnen. :)

grüße
[1] SELFHTML

[suit]

Das ist aber jetzt ein schlechter Scherz? Auf der einen Seite haben wir den Übersetzer von SELFHTML ins Französische, auf der anderen den vielleicht übersetzer ins Dürkische[1], und du verlinkst hier´n (fast) Basic....Tztztz....:)

natürlich weiss ich, dass ihr halbwegs ahnung von dem habt, was ihr schreibt (zu viel soll man euch ja nicht zugestehen, sonst werdet ihr übermütigt :D) - der "vollständigkeit halber" war so gemeint:

wenn jemand mit der forumsuche den beitrag hier findet und vorfindet "es geht", ist er sicher frustriert, wenn die eigentliche antwort nicht dabei steht - darum verlinkt

geht mir permanent irgendwo, du findest in einem forum einen beitrag der sich mit exakt deinem problem beschäftigt und nach vielen antworten kommt dann "danke, habs gelöst, war einfach" ohne genau zu wissen, was jetzt eigentlich falsch war oder es wird gesagt: "das geht eigentlich anders" und als antwort eben: "ja ich weiss, sonst mach ichs richtig - war nur zum testen" oder ählich - aber das entscheidende WIE fehlt leider oft

[Malcolm Beck´s]

hi,

natürlich weiss ich, dass ihr halbwegs ahnung von dem habt, was ihr schreibt (zu viel soll man euch ja nicht zugestehen, sonst werdet ihr übermütigt :D) - der "vollständigkeit halber" war so gemeint:

Darunter leide ich ja jetzt schon *G

wenn jemand mit der forumsuche den beitrag hier findet und vorfindet "es geht", ist er sicher frustriert, wenn die eigentliche antwort nicht dabei steht - darum verlinkt

geht mir permanent irgendwo, du findest in einem forum einen beitrag der sich mit exakt deinem problem beschäftigt und nach vielen antworten kommt dann "danke, habs gelöst, war einfach" ohne genau zu wissen, was jetzt eigentlich falsch war oder es wird gesagt: "das geht eigentlich anders" und als antwort eben: "ja ich weiss, sonst mach ichs richtig - war nur zum testen" oder ählich - aber das entscheidende WIE fehlt leider oft

FULL ACK! Du sprichst mir aus der Seele.
An sowas denk ich leider nie, vielleicht in Zukunft[1].

grüße
[1] Wenn ich ne neue Maus hab mach ich das auch! Mit meiner ist das Surfen derzeit ne Qual.

[CarstenP]

Hallo,

aus http://dh.drsnet.de/dh/v6/webdesign/article/typographie/4:

body {  
 font-size:87.5%;  
}

Ich persönlich finde so etwas extrem unglücklich. Ohne mein Standard-User-CSS, das für body eine Schriftgröße von 100 % festlegt, wäre mir die Schriftgröße für Deine Fließtexte zu klein.

Viele Grüße
Carsten

[at]

Hallo.
Falls der Beitrag morgen abend noch verfügbar ist, werde ich mich zu Wort melden. Jetzt bin ich müde und muss morgen früh raus.
MfG, at

[at]

Hallo.

• Ist der Artikel verständlich geschrieben?

Im Großen und Ganzen sicher. Schwierig finde ich den fortwährenden Bezug auf Pixelgrößen, obwohl du ja eigentlich im em arbeitest. Und ein Satz wie "Ein Absatz soll den Text visuell in semantische Absätze aufteilen." dürfte niemanden verständlich sein, der nicht bereits vorher wusste, was du meinst. Und den Absatz zur logischen Textauszeichnung verstehe ich nicht einmal, obwohl ich nicht gerade fachfremd bin.
Dem Verständlich zugute kommen natürlich sprechende Klassenamen, aber dabei sollte natürlich nicht unwähnt bleiben, dass "left" oder "right" besser nicht zu verwenden sind.

• Sind die behandelten Aspekte korrekt dargestellt?
• Fehlen wesentliche Dinge?

Auf diese Fragen würde ich gern ausführlicher eingehen. Daher dazu später mehr.

• Wie gefällt euch der Artikel?

Zunächst fallen mir einige formale Schwächen auf: So verwendest du leider keine sprechenden URI, und deine Vorliebe für überbordende Fußzeilen entspricht klar dem Gegenteil von guter Typographie. Nicht, dass das so wichtig wäre, aber es fällt eben auf jeder Seite aufs Neue unangenehem auf. Und zum sonstigen Layout deiner Seiten hast du dich ja bereits geäußert. Außerdem muss man sich kaum darum sorgen, denn du kennst ja offensichtlich das Handwerkszeug, um auch dort Abhilfe zu schaffen.
Interessant finde ich den Ansatz, ein vollständiges Dokument als Vorlage zu wählen und die bisherigen Arbeitsschritte jeweils am Seitenende zu resümieren.
Was von der Herangehensweise zu halten ist, sich aus vorhandenen Nachschlagewerken wesentliche Teile zusammen zu suchen, um sich daraus ein Best-of zu basteln, möge natürlich prinziell jeder für sich entscheiden, aber ich persönlich würde dann auch mehr Eigenleistung erwarten. Und damit meine ich natürlich nicht, den Text nur anders zu formulieren, sondern neue Aspekte aus dem Hut zu zaubern, die man nicht schon von den Seiten kennt, auf die du verweist. -- Nur um das nicht unerwähnt zu lassen: Dass du deine Quellen refenzierst, ist sehr anständig und leider nicht selbstverständlich. Danke dafür.
MfG, at

[at]

Hallo.
Ich stelle meinen Nachsatz besser gleich nach vorne, damit du die Kritik nicht in den falschen Hals bekommst: Ich halte deine Arbeit trotz ihrer Mängel für sehr gelungen. Sie wird dem Anspruch, ein Text eines interessierten Laien für andere interessierte Laien zu sein, in weiten Teilen gerecht. Überhaupt finde ich es schön, dass du dich für das Thema interessierst und sogar andere dafür gewinnen möchtest. Das verdient großen Respekt und das Ergebnis meinen Glückwunsch.

• Sind die behandelten Aspekte korrekt dargestellt?

Im Wesentlichen. Daher hier die aus meiner Sicht wichtigsten Ausnahmen:

• "In der Praxis des Webdesigns lässt sich das Thema jedoch stark vereinfachen, da viele Feinheiten, leider aber auch viele Kernelemente aufgrund diverser technischer Barrieren nicht sinnvoll umgesetzt werden können. Dieser Artikel beschränkt sich auf die Einstellungen, die allein mit HTML/CSS möglich sind." -- Er schränkt sich auf sehr viel weniger, doch dazu später mehr. Und deine Einleitung entschuldigt das auch nur vordergründig. Es geht viel, wenn man will.
• "die wichtigsten Fachwörter kurz zu erläutern" -- Guter Gedanke, aber wie soll die darauf folgende Liste diesem Charakteristum gerecht werden?
• "Der Text enthält alle typographisch relevanten Elemente" -- Siehe oben, siehe unten.
• "Um browserübergreifend die gleichen Grundeinstellungen zu haben, werden zu Beginn mittels einem "Reset-Stylesheet" sämtliche Browser-internen Formattierungen gelöscht." -- Das ist natürlich falsch, denn zum einen lassen sich bestimmte Werte nicht überschreiben -- wer einmal versucht hat, Mozilla beizubringen, wie ein <fieldset> anderswo aussehen kann, wird wissen, was ich meine --, zum anderen werden hier bestimmte Werte eben nicht überschrieben -- unter anderem die Angabe für die Schriftart!
• "An erster Stelle der Textgestaltung sollte also die Wahl der Schriftart stehen." -- Diese Ansicht halte ich für falsch und nur wichtig für die Dramaturgie deines Artikels. In einem Medium, das in Hinsicht auf Schriftarten derart minderbemittelt ist, darf die Wahl der Schriftart nicht an erster Stelle stehen, wenn man sein Haus nicht auf Sand bauen möchte. Dein darauf folgender Absatz verdeutlich diese Problematik nur wenig, sondern sagt mir hauptsächlich: "Die Auswahl der richtigen Schriftart ist erstens schwierig und zweitens eigentlich auch egal." -- @font-face existiert übrigens.
• "Es empfiehlt sich also, in jedem Fall eine konkrete Schriftart anzugeben - am besten eine mit hohem Verbreitungsgrad, denn dann sind nur in Ausnahmefällen Probleme zu erwarten." -- Falsch. Die Reihenfolge lautet: 1. Wunsch-Schriftart, 2. Alternative mit großer Ähnlichkeit, 3. Alternative mit geringerer Ähnlichkeit, aber größerer Verbreitung, 4. weit verbreitete Schriftart, die entfernt an die Wunsch-Schriftart erinnert, 5. generische Schriftart. Wer sich nicht an diese Reihenfolge hält oder mehr als zwei dieser Punkte zusammenfasst, sollte sich einem anderen Thema zuwenden.
• "Die wenigsten Schriftstücke verwenden durchgehend die gleiche Schrift." -- Diese Aussage halte ich für mindestens sehr gewagt, sie als Tatsache stehen zu lassen, mithin für falsch.
• "Aufgrund der Darstellung in Pixeln werden die Serifen bei auf dem Monitor klein dargestellten Buchstaben oft unscharf - und sind damit abhängig vom Monitor und der verwendeten Auflösung eines Besuchers besser oder schlechter zu lesen." -- Zum einen ist die letzte Aussage in diesem Zusammenhang unglücklich formuliert, denn der Leser könnte "besser oder schlechter zu lesen" fälschlich zu "besser oder schlechter als serifenlose Schriftarten zu lesen" vervollständigen. Zum anderen widerspricht deine ja im Prinzip nicht falsche These der unscharfen Darstellung der blockartigen Darstellung auf deinem Bildschirmfoto.
• "Serifen wirken oft edel und gediegen, allerdings dabei schnell auch streng und kühl, während serifenlose Schriftarten meist ein modernes, technisches Bild abgeben, aber manchmal auch einen eher unscheinbaren Eindruck bieten." -- Erklärst du mir kurz den Unterschied zwischen streng/kühl und modern/technisch? Und was nutzen solche Allgemeinplätze folglich?
• "Die folgende Aufzählung soll wichtige Charakteristika, Vor- und Nachteile gebräuchlicher Web-Schriftarten aufzeigen." -- Guter Gedanke, aber was dir dann etwa zur Times New Roma einfällt, wird dem nicht gerecht. Und selbst die Angaben zur Verbreitung wirken wenig konsistent.
• "In der Realität ist ein "M" jedoch unter Umständen um einiges größer, wie folgendes Beispiel mit CSS verdeutlicht:" -- Dein Beispiel verwirrt mehr als Klarheit zu schaffen.
• "body { font-size:87.5%; }" -- Für gute Lesbarkeit fehlen da mindestens 12,5 Prozentpunkte. Und von Pixel-Angaben für Schriftgrößen solltest du generell Abstand nehmen, ebenso wie von Umrechnungen der Einheiten. Könnte man sie so einfach umrechnen, bräuchte man sie ja gar nicht.
• "Gut formattierte Texte zeichen sich vor allem durch einen konsistenten, gleichmäßigen vertikalen Rhythmus aus. Das bedeutet, dass sämtliche Zeilenabstände und Absätze so gesetzt werden, dass der Abstand zwischen zwei Zeilen immer ein ganzzahliges Vielfaches des Grundabstands ist. Dementsprechend müssen nun sämtliche Angaben für line-height, margin und padding gesetzt werden." -- Entschuldige, aber musst du etwas gründlich missverstanden haben, denn ein guter visueller Rhytmus ergibt sich eben visuell und nicht durch pauschale Mathematik. Was für das Layout eines klassischen Romans gilt, ist für dein Thema schlicht falsch.
• "Als Standard-Richtwert für Printmedien gilt hier 1,2-fache der Schriftgröße" -- Zunächst fehlt da ein Wort vor "1,2-fache". Aber dieser Wert sowie der Begriff "Printmedien" sind zu pauschal, um richtig sein zu können.
• "Grundsätzlich gilt zudem, dass serifenloser Schriften ein größerer Zeilenabstand benötigen als Serifenschriften." -- Grundsätzlich gilt zudem die deutsche Grammatik.
• "Wollen wir alle sechs Überschriften (h1 bis h6) schon allein durch ihre Schriftgröße erkennbar auszeichnen, brauchen wir bereits sechs weitere Schriftgrößen und dementsprechend angepasste Zeilenabstände." -- Wollen wir aber nicht. Wenn du eine Fingerübung für die Berechnung der Zeilenabstände suchst, genügt ein einzelnes Beispiel mit runden Zahlen. Kommazahlen-Fetischismus nutzt niemandem und wirkt nur scheinbar professionell.
• "Bei den inline-Elementen code, dfn, kbd, samp und var ergibt sich das Problem, dass diese in Firefox und Opera das vertikale Raster sprengen, obwohl sie korrekte Größenangaben für Schriftgröße und Zeilenabstand bekommen. Dies liegt an der vertikalen Ausrichtung an der Mittellinie der aktuellen Zeile und kann behoben werden, indem man der vertikalen Ausrichtung einen anderen Wert als middle zuweist:" -- Da die Darstellung normalerweise korrekt funktioniert und durch einen sinnvollen Reset sichergestellt sein sollte, muss der eigentliche Fehler wohl anderswo liegen.
• "Meist liegt der normale Wortabstand bei ca. 0.25em. [...] es gilt jedoch, dass fette Schriften einen etwas größeren Wortabstand benötigen und große Schriften generell etwas enger gesetzt werden können." -- Das hängt zunächst vom Grauwert der Schriftart ab. So genügt einem fetten Schriftschnitt im Versalsatz zur Erzeugung eines sichtbaren Kontrastes zwischen Wort und Leerzeichen ein gerigerer Wortabstand als einem leichten Schriftschnitt. Weshalb rät man aber zu einem umgekehrten Vorgehen? Vielleicht weil es einfach besser aussieht. Insgesamt ist die Erklärung jedenfalls bestenfalls dürftig, und eigetlich auch überflüssig. Denn wenn man sich schon nicht sicher sein kann, welche Schrift überhaupt beim Nutzer dargestellt wird, sollte man sich schon sehr sicher sein, wenn man die Standardwerte für Zeichen- oder Wortabstände zum Zweck der besseren Lesbarkeit verändern möchte. An dieser Stelle tritt übrigens ein weiteres Problem von CSS auf: Man kann Eigenschaften nicht daran koppeln, dass tatsächlich die gewünschte Schrift zum Einsatz kommt.
• "Seitliche Abstände beeinflussen die Lesbarkeit eines Textes weit weniger als vertikale Abstände." -- Du kennst mehrspaltigen Satz?
• "Beschränkt man sich auf die reine Anwendung von CSS(2), sind dies die fundamentalen Einstellungen, die man vornehmen kann und sollte. Eine tiefgreifendere Textgestaltung erfordert meist zusätzliche Techniken wie Javascript oder reguläre Ausdrücke zur Textersetzung." -- Die Möglichkeiten von CSS sind hier bei weitem noch nicht ausgeschöpft. Wäre dem so, wäre CSS für auch nur halbwegs anspruchsvollen Satz nicht zu gebrauchen.
• "Abhilfe schafft hier eine Silbentrennung durch den Autor. Manuell wäre dies eine wahrlich undankbare Aufgabe" -- Da lange Wörter meist zusammengesetzte sind und auch den Flattersatz zerschießen können, empfiehlt es sich generell, ­ sinnvoll einzusetzen.
• "Es existieren auch diverse typographische Richtlinien zur Anpassung von Wort- und Zeichenabständen in Spezialfällen, beispielsweise die Größe des Leerzeichens nach einer Abkürzung, sowie zur korrekten Verwendung von Sonderzeichen, z.B. die Unterscheidung zwischen Gedanken- und Bindestrich. Die manuelle Formattierung dieser Vorgaben ist möglich, jedoch recht aufwendig, sinnvoller ist hier (sofern möglich) der Einsatz von regulären Ausdrücken." -- Man beachte aber auch, dass CSS im Zusammenspiel mit HTML weit größere Möglichkeiten hätte, wenn gleichzeitig die Hersteller der Webbrowser CSS besser unterstützen und die Autoren semantisches HTML zielgerichteter einsetzten.
  MfG, at

[at]

Hallo.

• Fehlen wesentliche Dinge?

Definitiv. Zum einen das große Ganze, zum anderen hunderte Kleinigkeiten, die die Typographie ausmachen. Und natürlich der Hinweis auf alternative Gestaltungsmöglichkeiten im Kontrast zu Konventionen sowie die Eigenheiten von CSS zur Gestaltung. Dazu nur jeweils ein, zwei Beispiele:

• Zeilenabstände sind wichtig, aber was nutzen sie, wenn nebeneinander liegende Textblöcke sich fast berühren. Du schreibst zu Beginn etwas von Layout und davon, es unter Typographie zu subsummieren, lässt aber fast den gesamten Bereich Layout einfach weg. Und nein, ein "vertikaler Rhythmus" macht auch noch kein Raster. Horror vacui, einmal anders.
• Typographie bedeutet Liebe zum Detail. Ein <abbr> mit einer gepunkteten Linie zu unterstreichen ist gut. Aber was nutzt das, wenn gleichzeitig bei eine Abkürzung wie "z. B." oder "d. h." [sic!] nicht einmal der Zeilenumbruch ausgeschlossen wird? white-space: nowrap; ist hier einfach Pflicht. Und ein verminderter Wortabstand ebenso. Wie gesagt: Nur ein Beispiel für unzählige, die du natürlich nicht vollständig anführen kannst, aber auch nicht gänzlich ignorieren solltest. Übrigens solltest du zumindest echte Gedankenstriche und Anführungszeichen verwenden.
• Lesbarkeit ist nur die eine Seite guter Typographie. Kreatives Gestalten hingegen bedeutet auch und gerade, mit Konventionen zu brechen, wo dies keinen großen Schaden anrichtet. Aber was ist ein großer Schaden? Nun, zum Beispiel überflüssige Klicks des Nutzers wegen durchgezogener Unterstreichungen von anderen Elementen als Verweisen. Absätze durch Einrückungen voneinander zu trennen, ist jedoch eine anerkannte Alternative zu vertikalen Abständen. Oder warum nicht etwas völlig anderes, etwa eine an den Fuß des Absatz plazierte Hintergundgrafik als Trenner?
  Ermutige deinen Leser zum kreativen Umgang mit dem Schriftbild, wo die Freiheiten bestehen. Weise nur auch auf die Gefahren hin. Dann nähern sich deine Leser etwas an, was man unter Design versteht.
  Außerdem befasst du dich nicht mit den speziellen Herausforderungen von CSS im Allgemeinen. So kennst dein Beispiel keine verschachtelten Elemente. Oder formatierst du <strong> innerhalb einer fett dargestellten Überschrift auch als fett oder <em> innerhalb eines kursiv formatierten Zitatblockes auch als kursiv? Natürlich nicht. Und das fehlt.
  Auf die Unzulänglichkeiten der Webbrowser gehst du auch hin und wieder ein, ohne jedoch die für Typographie wirklich wesentlichen Punkte aufzugreifen, etwa die Schwierigkeiten, browser-übergreifend Zitatzeichen zu automatisieren oder nur Folgeabsätze einzurücken -- von drei Nachkommastellen bei Schriftgrad-Angaben ganz zu schweigen.
  Sicher erwarte ich insgesamt sehr viel von dir, vielleicht auch zu viel. Aber wenn du einen bleibenden Wert schaffen willst, liegt noch ein wenig Arbeit vor dir.
  MfG, at

[DeWitt]

Sicher erwarte ich insgesamt sehr viel von dir, vielleicht auch zu viel. Aber wenn du einen bleibenden Wert schaffen willst, liegt noch ein wenig Arbeit vor dir.
MfG, at

Wow, danke für diesen wirklich ausführlichen Kommentar. Den möchte ich jetzt nicht nur so überfliegen, sondern mir wirklich bei Gelegenheit die Zeit nehmen und mich intensiv mit dem beschäftigen, was du angemerkt hast. In Kürze folgt also mehr ;)

Ciao,
David //aka DeWitt

[at]

Hallo.

Wow, danke für diesen wirklich ausführlichen Kommentar.

Ich freue mich, dass du dich freust. Ein wenig hatte ich ja schon befürchtet, dich vergrault zu haben, aber dazu wäre wahrscheinlich doch mehr nötig gewesen.

In Kürze folgt also mehr ;)

Prima. Wenn du zwischenzeitlich weitere Hilfe benötigst, weißt du ja, wo du sie bekommen kannst. Bei mir dauert das zwar immer ein Weilchen, weil ich ja hier nur den Keller betreue, aber ich bin ja auch nicht der einzige hier, der sich mit der Materie auskennt.
Ich wünsche dir weiterhin viel Spaß.
MfG, at