Ist der Abstand um meine typografischen Elemente korrekt? [geschlossen]

Das folgende Bild ist ein mehr oder weniger standardmäßiges Absatzbeispiel für die Website, die ich zu entwerfen versuche. Es ist wahrscheinlich keine große Hilfe für die Frage, die ich stelle, aber ich werde versuchen, genauer zu beschreiben, was ich dort mache.

  • Die verwendete Schriftart ist Roboto Black and Regular
  • Der Abschnitt hat oben und unten einen Rand von 50 Pixel
  • die überschrift ist 36px
  • Die Überschrift hat einen unteren Rand von 30 Pixel, beginnend mit der Unterstreichung (gelbe Linie).
  • der Absatz ist 18px mit 27px Zeilenabstand (1,5 Zeilenhöhe)
  • Das Design basiert auf einem 1170-Pixel-Raster (Bootstrap), falls dies von Nutzen ist

Typografisches Beispiel

Um meine Frage ein wenig zu erweitern, würde ich gerne wissen, ob der Abstand zwischen der Überschrift und dem Absatz ausreicht oder mindestens so groß sein sollte wie die Lücke zwischen den beiden Absätzen (die 42 Pixel beträgt).

PS Ich fühle mich wie eine unmusikalische Person, die versucht zu singen, wenn ich Typografie mache, daher ist jede konstruktive Kritik sehr willkommen.

Auf den ersten Blick sehe ich keine offensichtlichen Fehler. Der gräuliche Haupttext ist möglicherweise etwas schwer zu erkennen (Buchstaben sind etwas dünn), aber insgesamt sind der Zeilenabstand, die Ränder, der Kontrast, die unregelmäßige rechte Seite usw. attraktiv; nichts wirkt eng. Beachten Sie, dass längere Linienbreiten (breite Spalten) etwas schwerer zu lesen sein können als schmalere, aber Ihre ist nicht übermäßig. Wir müssen wahrscheinlich mehr von der ganzen Seite sehen, um zu wissen, wie die Elemente zusammenarbeiten. Der gelbe Akzent lenkt die Aufmerksamkeit auf ein Merkmal, das bereits auffällt, die fette Überschrift, so etwas überflüssig – aber ich hasse es nicht.
Bitte lesen Sie unsere Richtlinien für kritische Fragen und bearbeiten Sie Ihre Frage entsprechend.
@user8356: Der Text hat ungefähr 90 Zeichen pro Zeile. Das halte ich für zu hoch.

Antworten (1)

Dies wird letztendlich immer auf das Auge des Betrachters hinauslaufen. Meiner Meinung nach sieht der vertikale Rhythmus (und das ist ein wichtiger Satz, und einer, den Sie googeln können, um viel mehr zu erfahren) im Allgemeinen gut aus, aber ich denke, die Unterstreichung unter der Überschrift sieht ein wenig eng aus. Ich würde das um etwa 5px öffnen. (dh fügen Sie 5px zu dem hinzu, auf was auch immer die Auffüllung der Überschrift derzeit eingestellt ist)

Die Zeilenlängen sind allerdings etwas lang. Streben Sie ungefähr 60 Zeichen an, während Sie auf den ersten Blick ungefähr 100 Zeichen haben (ich habe nicht gezählt!), also vergrößern Sie entweder Ihr Bild im Verhältnis zur Textspalte oder verkleinern Sie einfach die Textspalte und lassen Sie es (immer) Angst vor Leerzeichen haben.

Ein Tipp, um typografische Websites wirklich zum Klingen zu bringen, ist, sich ein jQuery-basiertes Silbentrennungs-Plugin und ein relevantes Silbentrennungswörterbuch anzusehen . Nur ein zufälliger Tipp :)

Danke! Die 5-Pixel-Polsterung hat es wirklich geschafft und jetzt sieht der vertikale Rhythmus viel besser aus, sogar für meine Augen. Ich habe auch die Zeilenlänge auf etwa 70 angepasst, aber jetzt nehmen der Text und das Bild jeweils 6 Spalten ein und das Bild verdunkelt den Text (aber ein helleres Bild mit weniger Kontrast könnte das beheben).
Freut mich, dass ich helfen konnte, viel Glück mit dem Projekt :)