Schriftgöße und Co.

[Olaf]

Hallo zusammen,

bin immer noch etwas am probieren mit dem Thema Schriftgröße. Je mehr ich mich mit dem recht komplexen Thema Typografie beschäftige, desto unsicher bin ich mir.

Insgesamt empfinde ich die Schriftart auf meiner Website doch ein wenig zu groß.
Die Schwierigkeit ist natürlich von welchen Voraussetzungen man das betrachte (Größe des Monitors, individuelle Einstellungen des Browsers...)
Also gehe ich von der Mehrheit der User aus, die an ihrem Browser nichts ändern und vor einem 17-19 Zoll TFT Monitor sitzen.

Ich habe testweise die Schriftgröße

body {
/*  font-size: 100.01%; */ 
  font-size: 95%;
  padding-bottom: 50px; 
  font-family: 'Trebuchet MS', Arial, sans-serif; 
  background-color: #345c2f
}

beim Body geändert, aber wenn ich das z.B. auf 95% einstelle, sieht es einfach nur grausam aus.
Habe ich hier mal auf meiner Testseite: Klick so gemacht. Sieht irgendwie alles ziemlich gequetscht aus

Ich habe gelesen, dass man alles möglich (je nach gewählter Schriftart) "verbiegen" kann, aber ich stelle mir grundsätzlich die Frage, ob das der richtige Weg ist.
Oder sollte ich es einfach alles so lassen wie es jetzt ist? Was meint ihr?
Freue mich über jede Anregung!

[lig_80]

An Schriften verbiegen solltest du schon mal gar nichts.

Der Gesamteindruck und die Lesbarkeit ergibt sich nicht alleine aus der Schriftgröße, sondern aus dem Zusammenspiel von Faktoren wie:

» Schrift – Serif, Sans-Serif, X-Höhe, Ober- und Unterlängen, Laufweite, Kerning*Hintung (am Screen) etc.
» Schriftgröße
» Zeilenabstand
» Farbgebung
» etc.

Was die Angabe in Prozent angeht, so haben diese ominösen 100.01% einen simplen Grund: man schafft eine gemeinsame Referenz um dann ausgehend davon in den gängigsten Browsern per em Einfluss auf die Schriftgröße der einzelnen Elemente nehmen zu können.

Die muß man dann natürlich separat definieren. Momentan nimmst du z.B. durch das fehlende Semikolon überhaupt keinen kontrollierten Einfluss auf die Schriftgröße der Absätze.

Dazu kommt der Einfluss der Strukturierung von Texten durch Absätze, Texteinschübe, Zwischentitel etc. auf das Gesamtbild.

Trennungen per <br> erschweren eine saubere Textformatierung ungemein. Das kommt alles zusammen.

[Olaf]

Hi Daniel,

Danke für den Hinweis, das Semikolon ist mir wohl beim Testen abhanden gekommen (korrigiert)

Bei Jendryschik hatte ich gelesen, dass wohl die meisten Webautoren die Schriftgröße über diesen Body-Wert verändern.

Ich bin mir eben nicht sicher, ob ich überhaupt die richtige Schriftart mitgebe, damit ich die Schriftart kleiner gestalte
Für mich ist der Buchstabenabstand auf der Testseite jetzt einfach zu klein und wenn es da nicht ratsam ist an der Schrift etwas zu ändern, wäre ich vermutlich mit einer anderen Schriftart besser beraten

[lig_80]

Schriften werden in der Regel von Typografen gestaltet, die oft Wochen und Monate mit der Arbeit an der Zurichtung verbringen. Und dann kommt immer wieder mal ein Laie daher und meint er wüsste es besser.

Das führt dann zu grauenvoller Typografie weil an der Laufweite rumgespielt wird, etc. ohne auch nur grundlegende Kenntnisse über die Materie zu haben.

Auch Jendryschik behauptet nirgendwo man solle nur in den CSS-Deklarationen für den body die Schriftgröße definieren. Man setzt dort nur den »Nullpunkt«.

Das momentan in der Tat gruselige Schriftbild liegt in Faktoren wie einer unvorteilhaft großen Basisgröße ungeeigneten Zeilenabständen, Kontrast etc. begründet.
Jetzt womöglich wie der dafür so berühmte Typopfuscher Ingo an Laufweite und Wortabständen rumzuspielen ist Verschlimmbesserung der übelsten Sorte. Bis heute ist mir wenig untergekommen, was so scheiße aussieht. Und warum? Weil an Parametern rumgespielt wird, ohne grundlegende Fachkenntnis zu besitzen.

Also erstmal die grundlegenden Parameter anpassen. Schriftgröße runter, Texte besser strukturieren, und ggf. den Zeilenabstand anpassen. Und wie ich in der Vergangenheit schonmal angemerkt hatte: bei den vielen extrem langen Wörtern sollte eine Silbentrennung integriert werden.


edit: mal eine ganz fix zusammengebratene Demo – nur für die Schriftformatierung: http://huepenbecker-design.de/stuff/olaf_text.htm

[Olaf]

Hallo Daniel,

Danke für Deine Mühe! Ich habe mal die Größenordnungen übernommen: Testseite. Von der Lesbarkeit finde ich schon gut. Der Text ist natürlich jetzt klein, aber wenn ich ihn etwas vergrößere (z.B. font-size: 0.9em statt jetzt 0.85) ist es eher schlechter zu lesen.

Das mit dem Verlaufs-Kasten finde ich sehr schön, darf ich das übernehmen (wenn ich das denn dann so hin bekomme )?

Mit dem Strukturieren hast Du sicherlich recht und auch das mit der Silbentrennung habe ich nicht vergessen. Ich wollte aber erst nach der richtigen Schrift und Größe suchen.

[lig_80]

Ein Text wird nicht automatisch besser lesbar, wenn man ihn größer macht. Das ist ein verbreiteter Irrglaube.
Die Schriftgröße entspricht absolut gesehen einer üblichen Lesegröße aus dem Printbereich. Da ist nichts zu klein.

[Olaf]

Hallo Daniel,

ich habe das erst einmal so übernommen (kann mir auch nicht vorstellen, dass ich es verbessern könnte ).

Der Unterschied ist wirklich verblüffend. Mit recht einfachen Mitteln genau das richtige gemacht!
Neu (Testseite) gegen Alt (aktuelle Seite)

Der Verlauf ist bei mir aber nicht so fließend wie bei Deinem Testbeispiel, obwohl ich ja nichts an der "bg_repeater_olaf_text.png" verändert habe. Da weiß ich nicht warum das so ist
Auch mit der Silbentrennung klappt noch etwas nicht. Die Sprachabfrage hast Du ja in Deinem Beispiel auch, aber ich bekomm noch einen Java-Error hinterher.

Hättest Du für die Beiden Dinge vielleicht auch noch einen Tipp?

[Olaf]

So, bin leider jetzt erst wieder dazu gekommen mich mit dem Thema wieder zu beschäftigen.
Ich wollte zunächst mit dem Hintergrundverlauf des Textes beginnen, den Daniel vorgeschlagen hat und den ich sehr schön passende finde.

Bei der Umsetzung stoße ich allerdings auf ein Problem. Meine einzelnen Webseiten haben durch mehr oder weniger Inhalt unterschiedliche Längen. Ich fände es schön, wenn der Verlauf bis zum Ende der Seite noch (wenn auch sehr schwach) zu erkennen ist. Der Verlauf beginnt ja fast weiß und soll dann mit fast der Hintergrundfarbe (beige #e2e0d4) enden.

Umgesetzt ist es in der CSS zur Zeit so:

#content {
  padding: 30px; 
  float: left; 
  width: 500px; 
  color: #333; 
  height: auto;
  background-image:url(bg_repeater_olaf_text.png);
  background-repeat:repeat-x;
}

Wenn ich mir jetzt die Startdatei anschaue: Klick hier, ist es so wie ich es mir in etwa vorstelle.
Jetzt gibt es aber auch einzelne Webseiten, die weitaus länger sind: Klick hier. Andere, die ich noch nicht publiziert habe, sind noch länger. Der Verlauf hört dann schon in der ersten Hälfte auf.

Natürlich könnte ich jetzt die backround-Datei (bg_repeater_olaf_text.png) in der Höhe vergrößern, aber das hätte ja zur Folge, dass auf der Startseite kaum mehr ein Verlauf zu sehen wären, sondern überwiegend der Hintergrund weiß verbliebe.

Gibt es dafür eine Lösung? Müsste ich da für die einzelnen Webseiten mit unterschiedlich angepassten backround-image-Dateien arbeiten

Wäre schön wenn sich dazu jemand äußern könnte.