Was sind Standardverhältnisse für Typografie im Web?


25

Bei der Gestaltung eines Webdesigns versuche ich oft sicherzustellen, dass meine Typografie verhältnismäßig und konsistent ist. Es ist mir jedoch nicht gelungen, endgültige Artikel oder Ressourcen zu den zu verwendenden Verhältnissen und Größen zu finden. Was sind die empfohlenen oder Standardpraktiken für:

  • Schriftgröße
  • Zeilenhöhe
  • Linienbreite
  • Zeilenabstand

Bitte beachten Sie sowohl Absatz- als auch Überschriftentext in Ihren Antworten. Auch Studien zur Wirksamkeit verschiedener Kennzahlen oder Kennzahlen wären sehr hilfreich.

Antworten:


18

Robert Bringhursts Elements of Typographic Style ist eine gründliche und wunderbare Referenz für solche Dinge. Es ist lang, aber sehr wertvoll.

Viele Designer empfehlen ein Standard-Linienraster, sodass eine Linie + Auffüllung immer in z. B. 16 Pixel passt. Alles, was darunter liegt, hätte eine Linienhöhe von 16, alles, was darüber liegt, hätte eine Linienhöhe von 32.

Die ideale Länge einer Zeile zum Lesen von Text wird von einigen mit 45 Zeichen und von anderen mit 55-75 Zeichen angegeben.

Es gibt einige gebräuchliche Durchschnittswerte für Websites: Typografische Entwurfsmuster und Best Practices


1

Ich würde sagen, beginnen Sie mit dem Absatz bei 16px und verwenden Sie die Fibonacci-Sequenz, um den Rest zu berechnen. Es sieht so aus, als würden die großen Browser diese Logik verwenden. Im Laufe der Jahre (für zukünftige Forschungen unter Verwendung der „Elemente typografischen Stils: Version 4.0“ von Robert Bringhurst, Hartley und Marks) wurde der Abstand für eine 10-Punkte-Schriftart auf 12pt festgelegt.

Wenn wir 12pt in Pixel konvertieren, erhalten wir eine Grundschrift von 16px.

Die meisten Standard-Stylesheets des Browsers verwenden 16 Pixel für ihren Absatztext, da Sie diese im DOM selbst oder durch Lesen der Listen https://www.w3.org/TR/CSS21/sample.html und http: // einsehen können. w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.html

Das Problem, das wir heute haben, ist genau, dass wir über eine neue Art von Typografie sprechen. Die aktuelle Web-Typografie, die in verschiedene Geräte passt, unterscheidet sich grundlegend von früheren Konzepten wie denjenigen, die in Robert Bringhursts Elements of Typographic Style abgebildet sind. Obwohl dies ein ausgezeichnetes Buch ist, ist die Realität, dass der moderne Designer Code benötigt. Normalerweise betrachte ich eine Standardmatrix aus den wichtigsten Browser-Stylesheets, indem ich ein Grundgerüst einer HTML-Datei mit den grundlegenden Elementen h1, h2, h3, h4, h5, h6, Absatz und Fußzeile erstelle. Ich überprüfe das Browser-Stylesheet, um die Größe der verwendeten Standardpixelgröße, die Zeilenhöhe und die Hierarchie der Überschriften zu ermitteln. Bevor die Größe der Web-Typografie durch den beweglichen Typ Metall / Holz geregelt wurde, begannen sich ab 1985 mit der Einigung zwischen Adobe und Apple die Dinge zu ändern. Ich bin der Meinung, dass heute die wichtigsten Regulierungsbehörden für die Typografiekonzepte Apple, Safari, Windows, Internet Explorer, Chrome, Firefox ... sind. Sie müssen sich ihre Browser-Stylesheets ansehen, um Ihre Typografie an das anzupassen, was tatsächlich gerendert wird verschiedene Geräte. Befolgen Sie weiterhin die Übungen aus Robert Bringhursts Elements of Typographic Style, einem hervorragenden Buch, oder folgen Sie dem Fibonacci-Sequenzsystem. Normalerweise halte ich mich über die Änderungen in den Stylesheets des Browsers auf dem Laufenden und lese die w3-Spezifikationen hier: Befolgen Sie weiterhin die Übungen aus Robert Bringhursts Elements of Typographic Style, einem hervorragenden Buch, oder folgen Sie dem Fibonacci-Sequenzsystem. Normalerweise halte ich mich über die Änderungen in den Stylesheets des Browsers auf dem Laufenden und lese die w3-Spezifikationen hier: Befolgen Sie weiterhin die Übungen aus Robert Bringhursts Elements of Typographic Style, einem hervorragenden Buch, oder folgen Sie dem Fibonacci-Sequenzsystem. Normalerweise halte ich mich über die Änderungen in den Stylesheets des Browsers auf dem Laufenden und lese die w3-Spezifikationen hier:https://www.w3.org/TR/html401/struct/global.html#h-7.5.5 Ich denke jedoch, dass das Design-Feld dies berücksichtigen muss und ich finde, dass die Ausbildung in der Praxis nicht mit aktualisiert wird aktuelle Realitäten. Sie können hier auch mehr auf meinem Blog lesen: https://road-to-resilience.blog/2019/11/21/the-typographic-thing/


Hallo @EstelaG und herzlich willkommen bei GD.SE! Wir haben strenge Regeln für Spam und Antworten in Links. Ich würde es hassen, wenn Ihre Antwort markiert würde. Sie sollten Ihre Frage bearbeiten, um die Hauptpunkte des Artikels zusammenzufassen.
neugierig
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.