Typographische Entwurfsmuster und beste Anwendung

WAM
Allgemein
Mittwoch - 16 . September . 2009

Von Michael Martin in Smashing Magazine Sogar mit einem relativ begrenzten Satz von Optionen in CSS variiert die Typografie enorm mit reinen CSS-Syntax. Serif oder sans-Serif? Große oder kleine Schriftart? Zeile Höhe „,“ Abstand „,“ Schriftgrad „und“ padding… Die Liste geht auf und auf.

Typographische Entwurfsmuster zu finden, die häufig in modernen Web-Design sind und einige allgemeine typographische Probleme zu lösen, wir umfangreiche Forschung auf 50 beliebten Webseiten auf welche Typografie Fragen mehr als üblich durchgeführt (oder mindestens mehr als üblich Materie sollte). Wir haben beliebte Zeitungen, Zeitschriften und Blogs sowie verschiedenen Typografie-bezogene Websites gewählt.

Wir haben sorgfältig analysiert Ihre Typografie und Style Sheets und Gemeinsamkeiten und Unterschiede gesucht. Wir haben auch eine Kalkulationstabelle der Studie zusammengestellt, die die Websites verschiedene Werte (z. B. das Verhältnis zwischen der Zeile Höhe und Länge) wird angezeigt.

Letztendlich, wir identifiziert 13 allgemeine typographische Probleme und Fragen im Zusammenhang mit typographische Design und versucht, Antworten auf diese durch unsere Forschung zu finden:

Wie beliebt sind Serif und sans-Serif-Schriftarten in Körper Kopie und Schlagzeilen?
Welche Schriftarten werden am häufigsten verwendet?
Was ist die durchschnittliche Schriftgröße?
Was ist das durchschnittliche Verhältnis zwischen den Schriftgrad der Überschriften und Körper-Kopie?
Was ist die durchschnittliche Zeile-Höhe der Körper Kopie?
Was ist das durchschnittliche Verhältnis zwischen Zeile Höhe und Schriftart Größe in Körper Kopie?
Was ist das durchschnittliche Verhältnis zwischen Zeile Höhe und Länge in Körper Kopie?
Was ist die durchschnittliche Höhe der Abstand zwischen Absätzen?
Was ist das durchschnittliche Verhältnis der Absatzabstand zu Zeile Höhe in Körper Kopie?
Wie sind Links Stil?
Wie viele Zeichen pro Zeile sind häufig in Körper Kopie?
Wie oft sind Links unterstrichen?
Wie oft wird Schriftart Ersatz (sIFR, etc.) verwendet?

Wir letztendlich mit soliden Daten, die wir ausgewertet und vorbereitet für diesen Artikel. Auf der Grundlage der Statistiken, haben wir mehrere „Faustregeln“ für das Arbeiten mit Typ identifiziert. Bitte beachten Sie, dass diese Regeln oft können, aber nicht immer, best Practice angesehen werden.

1. Serif vs. sans-serif

Ob Designer Serif verwenden sollten oder sans-Serif-Schriftarten für Körper Kopie ist einer der am häufigsten diskutiert und ungelösten Fragen Schriftsatz im Web. Einige Designer es vorziehen, verleihen, dass Ihre Schlagzeilen Serife (die kurze, dekorative Linien am Ende des Brief-Striche sind) Ihnen weitere Beschwerde geben. Der Hauptgrund, eine Serif-Schriftart für Ihren Schlagzeilen, eine große Größe, Serif-Schriftarten ist zu wählen sind leicht zu lesen und zu große suchen. Der Kontrast zwischen eine Serif-Schriftart für Überschriften und eine Schriftart sans-Serif für Körper-Kopie kann interessante, sein zu.

Einige Designer es Serif-Schriftarten für Körper Kopie vorziehen, weil Sie glauben, die Zeilen am Ende des Brief-Striche Handbuch Lesern aus einem Brief an die nächste, Scannen und lesen komfortabler machen zu helfen.

Unsere Studie sind sans-Serif-Schriftarten noch beliebter als Serif-Schriftarten für Überschriften, obwohl Sie scheinen in Popularität in den letzten Jahren gelöscht haben.

60 % der Websites verwenden sans-Serif-Schriftarten für Überschriften, meist Arial, Verdana, Lucida Grande und Helvetica. Unter Ihnen: CNN, ArsTechnica, Slate, BBC und NewScientist.
Nur 34 % der Websites verwenden ein Schriftbild Serif für Körper Kopie. Unter Ihnen: New York Times, Typographica, Zeit, AIGA und Newsweek.
Die beliebtesten Serif-Schriftarten für Überschriften sind Georgien (28 %) und Baskerville (4 %).
Die beliebtesten Serif-Schriftarten für Körper Kopie sind Georgien (32 %) und Times New Roman (4 %).
Die beliebtesten sans-Serif-Schriftarten für Überschriften sind Arial (28 %), Helvetica (20 %) und Verdana (8 %).
Die beliebtesten sans-Serif-Schriftarten für Körper Kopie sind Arial (28 %), Verdana (20 %) und Lucida Grande (10 %).

Zwei Drittel der befragten wir Websites verwendet sans-Serif-Schriftarten für Körper Kopie. Der Hauptgrund ist wahrscheinlich weil trotz der wachsenden Beliebtheit von erweiterten Schriftart Ersatz Techniken, wie z. B. Cufón, die meisten Designer an die Core-Web-Schriftarten halten, die im wesentlichen Ihnen nur zwei lebensfähige Möglichkeiten geben: Georgien und Times New Roman. Und wegen der die Stigmatisierung, Times New Roman (, dass es eine moderne Website, die veraltete aussehen oft macht) zugeordnet, sind Sie mit nur Georgien verlassen. Sans-Serif-Schriftarten bieten eine größere Vielzahl von Optionen für das Web.

2. In welche Typeface beliebteste ist?

Überraschend, verwendet trotz der wachsenden Beliebtheit von Schriftart-Ersatz-Techniken und wachsende Verfügbarkeit von neuen vorinstallierte Schriftarten (z. B. Windows Vista und Mac-Schriftarten), Entwürfe in unserer Studie vor allem die traditionellen, Core Web Schriftarten, die einzigen Ausnahmen Lucida Grande (die installierten nur auf Macs kommt), Helvetica und Baskerville.

Wie man erwarten würde, Arial, Georgien und Verdana für die Mehrheit der Körper Kopie heute dienen. In unserer Studie verwendet 80 % der Websites etwa eine dieser drei Schriftarten. Für die restlichen 20 %, Designer FavoritenHelvetica ist eine beliebte Wahl, wie Lucida Grande.

Mit Optionen wie z. B. Verdana und Arial als Herbst-Rücken verfügbar hat ein Designer wirklich keinen Grund nicht an andere nicht standardmäßigen Schriftarten um den besten Effekt zu erzielen. Sie erfahren mehr über erweiterte CSS-Schriftart-Stacks in Nathan Ford-ArtikelBessere CSS-Font-Stacks und des CodeStyleBessere CSS-Font-Stacks zu erstellen.
Jon Tan verwendet Serif Schriftbild Baskerville für Schlagzeilen und Serif Schriftbild Georgien für Körper Kopie.

Verdana ist minimal für Schlagzeilen verwendet. Nur 10 Websites verwenden es für Körper Kopie zunächst, und nur vier verwenden es für Schlagzeilen. Der Hauptgrund ist, dass Verdana viel Abstand zwischen Buchstaben, die es nicht als aufgeräumt bringt, eine große Größe zu lesen. Wenn Sie es für Schlagzeilen verwenden möchten, sollten Sie die CSS-Datei nutzen Zeichenabstand Eigenschaft. Sind am häufigsten verwendeten Schriftarten für Überschriften, Georgien und Arial.

Schließlich, wir beachten Sie, dass „alternative“ Schriftarten viel mehr für Schlagzeilen als für Körper Kopie verwendet werden. Designer scheinen mehr bereit, zu experimentieren mit ihren Überschriften als mit der Hauptteil. Wenn Sie einige typographische Variationen in Ihrer nächsten Design schalten möchten, möglicherweise Überschriften der einfachste Ort um zu starten.

3. Licht oder dunklen Hintergrund?

Wir waren gespannt, inwieweit lernen, dem Designer bereit, mit dunklen Hintergrundfarben zu experimentieren waren. Wir geprüft für alle Typografie-orientierte Websites, auf die hatte eine dunkle Farbschema und waren überrascht, kein einziges zu finden.
The New Yorker hat eine leichte Farbschema mit Times New Roman für Schlagzeilen und Körper-Kopie verwendet.

Reinen weißen Hintergrund für Körper-Kopie, die durch einen Erdrutsch gewonnen. Jedoch viele der Geschmacksmuster vermeiden den hohen Kontrast der reines Weiß auf reines Schwarz; Textfarbe erfolgt oft etwas heller als reines Schwarz. Designer eindeutig konzentrieren sich auf Lesbarkeit und vermeiden Sie Experimentieren mit Hintergrundfarben. Der Kontrast der Schwarz auf weiß ist leicht zu lesen und gehört, mindestens zu diesen Websites der Status Quo.

4. Durchschnittliche Schriftgröße für Überschriften

Die Wahl der Schlagzeile Schriftgrad hängt natürlich die Schriftart, die im Entwurf verwendet werden. In jedem Fall reichten in unserer Studie bei weitem die beliebtesten Schriftgrößen von 18 auf 29 Pixel, mit 18 bis 20 Pixel und 24 bis 26 Pixel werden die am häufigsten verwendeten Optionen.

Unsere Studie Ertrag keine klare Gewinner. Die durchschnittliche Schriftgröße für Überschriften ist 25.6 Pixel. Aber beachten Sie, dass beliebiger Größe zwischen 18 und 29 Pixel effektive; es sein könnte, denn schließlich hängt wie die Überschriften der Gesamtauslegung Ihrer Website passen. Immer noch, könnten Sie versuchen mit größeren, experimentieren, da zeigt immer größer, erhalten werden als Display-Auflösungen sind.

Eine offensichtliche Ausreißer ist Wilson Miner (Screenshot unten), wer verwendet eine massive Schriftgröße von 48 Pixeln für seine Schlagzeilen. Seine Website ist ein Sonderfall, aber, weil alle seine stellen extrem kurze Titel, nur ein paar Worte haben.

5. Durchschnittliche Schriftgrad für Body kopieren

Erinnern Sie vor sieben Jahren bei Web-Designs hatte winzigen, kaum lesbar Elemente, und Körper-Kopie wurde festgelegt, dass 8 Pixel in Tahoma? Kleine Schriftgrößen sind aus, und mehr und mehr moderner Designer entscheiden sich für große Schriftgrößen. Aus unserer Stichprobenumfang sahen wir eine klare Tendenz zur Größen zwischen 12 und 14 Pixel. Die beliebteste Schriftgröße (38 %) ist 13 Pixel, mit 14 Pixeln etwas beliebter als 12 Pixel. Insgesamt ist die durchschnittliche Schriftgröße für Körper Kopie 13 Pixel.

Wir zur Kenntnis genommen, (wie man erwarten würde) mehr und mehr Beachtung zu den kleinsten typographische Details. Bindestriche, Offerten, Fußnoten, Autornamen, einleitenden Text und Absätzen wurden sorgfältig, mit optimale Lesbarkeit in Geist festgelegt. Typ-Einstellung ist in der Regel sehr konsequent, mit viel Leerraum, führende und Auffüllung.
Typographica verwendet eine große Schriftgröße für den einleitenden Absätzen Artikel, und dann wird auf eine normale Größe für den Rest des Textes.

Rubrik to Body Font-Size-Ratio

Um die Beziehung zwischen Überschrift und Körper-Schriftgröße besser zu verstehen, unterteilt wir jede Website Überschrift Schriftgröße durch die Körper-Schriftgröße. Wir nahmen den Durchschnitt der diese Verhältnisse und eine Faustregel für Sie zum Arbeiten mit abgeleitet:

Rubrik Font Größe ÷ Body Kopie Font Size = 1,96

Der Gesamtwert ist dann 1,96. Das bedeutet, dass, wenn Sie eine Schriftgröße für ihre Körper-Kopie gewählt haben, müssen Sie es durch 2 Sie können um Ihre Überschrift-Schriftgröße zu erhalten. Dies, hängt natürlich von Ihrem Stil; die Faustregel wird nicht unbedingt geben Sie die optimale Größe für Ihre besondere Konstruktion. Eine andere Möglichkeit besteht darin, traditionelle Skala (6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72) oder der Fibonacci-Folge (z. B. 16 – 24 – 40 – 64 –-104) verwenden, um natürliche typographische Ergebnisse zu erhalten.

6. Optimale Linienstärke für Body kopieren

Führende (oder Zeile Höhe) wird immer auf dem gewählten Schriftart Größe und Maßnahme (oder Zeilenlänge) abhängen. Im Allgemeinen sollte je länger die Maßnahme, desto längere die führende. Daher wäre nicht die Präsentation ein Diagramm der am häufigsten verwendeten Optionen für führende in Pixel Sinn hier machen. Besser geeignet wäre, dass Sie eine relative Einheit, z. B. eine Em oder Prozentsatz-Wert zu verwenden, die bestimmt, die Beziehung zwischen führenden und Maßnahme und führende und Schriftgröße.

Gemäss unserer Studie:

Höhe (Pixel) ÷ Körper Kopie Schriftgrad (Pixel) Line = 1,48
Beachten Sie, dass 1.5 einen Wert, der häufig in klassischen typographische Büchern, empfohlen wird ist, damit unsere Studie dieser Faustregel sichert. Nur sehr wenige Websites verwenden etwas geringer als bei. Die Anzahl der Websites, die oben 1,48 verringert zu, gehen wie Sie weiter von dieser Wert erhalten.
Länge (Pixel) ÷ Zeile Höhe (Pixel) Line = 27,8
Die durchschnittliche Zeilenlänge beträgt 538.64 Pixel (ohne Ränder und-Leerstellen) die ziemlich groß ist, in Anbetracht, dass viele Websites noch 12 bis 13 Pixel für ihre Körper Kopie-Schriftgröße verwenden.
Abstand zwischen Absätzen (Pixel) ÷ Zeile Höhe (Pixel) = 0.754
Wir waren durch dieses Ergebnis überrascht. Es stellt sich heraus, dass Absatzabstand (d. h. den Abstand zwischen der letzten Zeile der einen Absatz und die erste Zeile des nächsten) nur selten entspricht den Zeilenabstand (was das wichtigste Merkmal der perfekte vertikale Rhythmus wäre). Absatzabstand ist mehr oft nur 75 % des Absatzes führt. Der Grund dafür kann sein, marktführend in der Regel verfügt über den Raum von Unterlänge aufgegriffen, und weil die meisten Zeichen keine Unterlängen haben, wird zusätzliche Leerzeichen unter der Zeile erstellt.

AIGA ist ein perfektes Beispiel für optimale führende. Die Schriftgröße ist 13.21 Pixel (konvertiert von Ems), und seine Zeile Höhe ist 19.833 Pixel (Umwandlung von Ems). In der Tat 19.8333 ÷ 13.2167 = 1.5011.

So, sobald Sie auf den Körper Kopie Schriftgrad entschieden haben, indem dieser Wert mit 1,5 die optimale Zeile Höhe erhalten Sie. Sobald Sie, die haben, können Sie diesen neuen Wert von 27,8 Ihre optimale Zeilenlänge zu multiplizieren. Beachten Sie, dass das Layout auch Dachrinnen, Ränder und Auffüllung, die Körper-Kopie atmen lassen muss.
The New Scientist hat 20 Pixel Abstand zwischen Absätzen.

7. Wie viele pro Line Zeichen?

Laut eine klassische Regel des Web Typografie ist 55 bis 75 eine optimale Anzahl von Zeichen pro Zeile. Überraschend, zeigt unsere Studie, dass es sich bei den meisten Websites um eine höhere Zahl haben. Wir gezählt, wie viele Zeichen auf eine Zeile mit der Design-Standardschriftgrad passen könnte. Das Ergebnis, die durchschnittlich 88.74 Zeichen pro Zeile (maximum), ist extrem hoch. Natürlich unterscheidet sich diese maximale Anzahl von die durchschnittliche Anzahl der Zeichen pro Zeile, die im Allgemeinen zwischen 75 und 85 Zeichen pro Zeile reicht. Der Bereich ist noch, Weg über die konventionelle Bereich – ganz eigentümlichen.

Zwischen 73 und 90 Zeichen pro Zeile ist eine beliebte Wahl zwischen den Designern, doch wir fanden auch Ausreißer: Monokel (47 Zeichen pro Zeile) und Boxen und Pfeile (125 Zeichen pro Zeile). Um eine genauere Lesung für jede Website zu erhalten, müssen Sie eine durchschnittliche Zeichen Anzahl von mehrere Zeilen zu nehmen.

Andere Ergebnisse

46 % der Websites unterstrichen die Links in Ihren Körper-Kopie, während die anderen nur mit Farbe oder einem Gewicht von Fett hervorgehoben.
6 % der Websites verwendet eine Art Bildersetzung für Überschriften oder Körper Kopie (z. B. MonokelNew Yorker, Newsweek).
96 % der Websites Text nicht rechtfertigen.
Websites gab ihrem Text eine linke Auffüllung von durchschnittlich 13.7 Pixeln (gezählt von der linken Content-Bereich-Grenze).

Abschluss

Die Studie zeigt eine eindeutige Gruppe von gemeinsamen Practices und Richtlinien zum Festlegen von Typ im Webdesign. Beachten Sie, allerdings, dass diese Ergebnisse nicht wissenschaftliche sind und sollte nur als grobe Richtlinien dienen:

Serif oder sans-Serif-Schriftarten sind eine gute Sache für Körper Kopie und Überschriften, aber sans-Serif-Schriftarten sind noch immer beliebter für beide.
Allgemeine Optionen für Schlagzeilen sind Georgien, Arial und Helvetica.
Allgemeine Optionen für Körper Kopie sind Georgien, Arial, Verdana und Lucida Grande.
Die beliebteste Schriftgröße für Überschriften ist ein Bereich zwischen 18 und 29 Pixel.
Die beliebteste Schriftgröße für Körper Kopie ist ein Bereich zwischen 12 und 14 Pixel.
Header Schriftart Größe ÷ Body Kopie Schriftgrad = 1,96.
Höhe (Pixel) ÷ Körper Kopie Schriftgrad (Pixel) Line = 1,48.
Länge (Pixel) ÷ Zeile Höhe (Pixel) Line = 27,8.
Abstand zwischen Absätzen (Pixel) ÷ Zeile Höhe (Pixel) = 0.754.
Die optimale Anzahl der Zeichen pro Zeile ist zwischen 55 und 75, aber zwischen 75 und 85 Zeichen pro Zeile ist beliebter,
Body Text ist linksbündig ausgerichtet, Bildersetzung wird nur selten verwendet und Links sind entweder unterstrichen oder hervorgehoben mit Fett oder Farbe.

Natürlich sind nicht dieser „Regeln“ in Stein festlegen. Vielmehr sind Sie eine Reihe von groben Leitlinien, die Sie als Grundlage verwenden können, für das Festlegen von Typografie. Jede Website ist einzigartig, und Sie können Ihre Auswahl auf jeder Stufe Ihres Designs entsprechend Ihrem Layout ändern möchten. Sie können auch schauen Sie sich die Tabelle der Studie und seine Daten zur weiteren Analyse exportieren.

* Übersetzt mit Bing Translator

Vorherigen Beitrag

Nächster Beitrag

Typographische Entwurfsmuster und beste Anwendung