Wenn Sie versuchen, die "ideale" Buchstabenanzahl pro Zeile zu erreichen, wie gleichen Sie Containergröße und Schriftgröße aus?

„Alles zwischen 45 und 75 Zeichen wird allgemein als zufriedenstellende Zeilenlänge für einen einspaltigen Seitensatz in einem Serifenschriftbild in einer Textgröße angesehen. Die 66-Zeichen-Zeile (Buchstaben und Leerzeichen zählend) wird weithin als ideal angesehen. Bei mehrspaltiger Arbeit liegt ein besserer Durchschnitt bei 40 bis 50 Zeichen.“

Quelle: Die auf das Web angewendeten Elemente des typografischen Stils

Wie balancieren Sie beim Entwerfen einer Website, hauptsächlich für den Desktop, eine angemessene Schriftgröße mit der Containergröße aus? Besonders in Teilen der Website, die ziemlich dicht mit Informationen sind.

Mit image lässt sich dies leicht erreichen, indem es als Haltepunkt verwendet wird:

Geben Sie hier die Bildbeschreibung ein

Aber ohne Bild wird es sehr dicht in der Erscheinung und es ist schwieriger, von einer Zeile zur nächsten zu folgen:

Geben Sie hier die Bildbeschreibung ein

Sollte ich für diese dichten Abschnitte die Breite des Inhaltswrappers reduzieren? Oder die Schriftgröße vergrößern? Im eigentlichen Dokument sind bereits einige Call-Out-Boxen, Listen und Bilder verstreut, was hilfreich ist. Aber für die Teile, in denen es nur Text ist, wie sollte damit umgegangen werden? Ich habe den Inhalt ein wenig aufgelockert, also möchte ich nicht wirklich die Breite oder Schriftgröße der gesamten Website anpassen, nur weil ein paar dichtere Abschnitte vorhanden sind, aber wenn jeder denkt, dass dies der einzig akzeptable Weg ist, dann werde ich es tun.

Antworten (2)

Zunächst einmal hängt diese Antwort ganz davon ab, welchen Inhalt der Text hat und welche Atmosphäre Sie erzeugen möchten. Aus Ihrer Frage geht hervor, dass es sich um eine Art Blog oder Informationsartikel handelt, aber nicht zu technisch. Meine Antwort wird diese Einstellung widerspiegeln.


Sollte ich für diese dichten Abschnitte die Breite des Inhaltswrappers reduzieren? Oder die Schriftgröße vergrößern?

Es ist wichtig, auf der gesamten Seite so konsistent wie möglich zu bleiben. Daher denke ich, dass diese Textabschnitte genauso gestylt werden sollten wie der andere Text, was bedeutet, dass wir das Styling im Allgemeinen ändern müssen.

Wenn ich darüber nachdenke, scheint es ein paar Dinge zu geben, die ich verbessern würde:

  • Bringen Sie mehr Polsterung auf dem Behälter an. Leerraum ist von entscheidender Bedeutung. Ich würde empfehlen, auf die Seite von zu viel zu gehen, anstatt nicht genug zu haben. Irgendwo um die 30-40px Seitenpolsterung scheint meiner Erfahrung nach am besten zu funktionieren.
  • Verwenden Sie eine etwas größere Schriftart. Es sieht so aus, als würden Sie ~ 14 Pixel verwenden. Ich würde stattdessen die Verwendung von etwa 16 Pixel empfehlen. Weitere Informationen finden Sie in diesem verwandten UX.SE- Beitrag .
  • Verwenden Sie eine größereline-height - dies ist der Hauptunterschied. Wenn Sie die Zeilenhöhe vergrößern, wird das Lesen großer Textblöcke viel einfacher.

ein Beispiel für die Vorschläge, die ich gemacht habe Hier ist eine Demo mit den angewendeten empfohlenen Änderungen, mit der Sie spielen können.

Abgesehen davon gelten diese Empfehlungen in erster Linie für eine Website, die auf einem Desktop angezeigt wird. Sie müssen wahrscheinlich alle drei der oben genannten Punkte für mobile Benutzer verkleinern. Auch hier kann der zugehörige UX-Beitrag weitere Informationen zu diesem Thema liefern.

Sie könnten Divs für die Textkopie erstellen. Auf diese Weise steuern Sie die Breite oder machen sie relativ zur Größe des Bildschirms, behalten aber kleinere Proportionen innerhalb der Divs bei. Für jedes von Ihnen erstellte div können Sie Breite, Farbe, Spanne usw. festlegen. Siehe diese Seite: http://www.w3schools.com/tags/tag_div.asp