Überarbeitete Font-Stack


Revised awayback.com
Copyright © By
For original English text, go to: http://www.awayback.com/revised-font-stack/

Revised Font Stack

Stack und Schriften

Ernsthafte Bemühungen werden unternommen, um weitere Schrift Entscheidungen über das Internet zu bekommen, um Web-Typografie zu verbessern. Dennoch bevorzugen die meisten von uns Web-Safe-Fonts wie: Verdana , Georgia , Times New Roman und Arial . Obwohl Entscheidungen sind begrenzt, aber die Zahl kann durch die Erforschung andere vorinstallierte Schriften.


… font-Stacks sind letztlich Design Faktoren ab und sollte als solches hinterfragt werden. -Nathan Ford, Better CSS font-Stacks

Pre-installierten Schriftarten

<p Font-Stacks sind Listen von Fonts, in der CSS-Attribut font-family definiert, dass der Browser durchläuft, bis es findet eine Schriftart, die auf dem System des Benutzers installiert ist. priorisiert -Nathan Ford, Better CSS font-Stacks

Baskerville , Garamond und Palatino wurden bereits verwendet ein paar Mal zu schaffen font-Stacks, die begeistern . Aber es gibt noch ein paar andere Schriften, die nicht schon früher ausprobiert. Code-style font-Umfrage enthüllt einige andere gängige Schriftarten auf Mac und Windows installiert, die effektiv genutzt.

I 10 beliebtesten Schriften, serif und sans-serif, die jeweils aus der Umfrage ausgewählt haben. Durch die Berücksichtigung der font-Anteil in% Statistiken in der nachfolgenden Tabelle, können wir versuchen einige andere Schriften, aber mit Bedacht.


96,23

99,71

98,55

94,20

98,84

98,60

99,30

93,62

99,13

98,04

99,15

88,70

97,10

86,09

99,00

88,60

96,81

86,24

98,25

87,72

94,74

54,51

97,89

85,10

94,20

53,81

54,76

79,71

91,52

51,30

54,31

64,90

91,01

49,10

51,74

23,84

90,14

47,89

45,04

Mac Windows
Serif % Sans-serif % Serif % Sans-serif %
Times Helvetica Georgia Verdana 99,40
Georgia Genf Times New Roman Tahoma
Times New Roman Lucida Grande Palatino Linotype Arial
Hoefler Text Arial Book Antiqua Trebuchet MS
Baskerville Verdana Garamond Lucida Sans Unicode
Didot Helvetica Neue Cambria Franklin Gothic Medium
Big Caslon Trebuchet MS Constantia Calibri
Palatino Gill Sans Goudy Old Style Candara
Lucida Bright Futura Baskerville Old Face Gill Sans MT
Garamond Optima Bodoni MT Segoe UI

Font Stacks-Reviewed

  1. Microsoft

    Tahoma, Verdana, Segoe, sans-serif;

    Microsoft.com werden (in den meisten Fällen) gemacht in Verdana auf Mac und in Tahoma auf Windows. Segoe (45,04%) hat weniger font Anteil in% als Tahoma und Verdana auf Windows und wird nur selten eine Chance zu machen. So, ich glaube es ist besser zu verlagern Segoe auf der Vorderseite des Stapels. .: Ich habe Genf (98,84% am Mac), um die überarbeitete font-Stack, der sehr ähnlich ist Tahoma

    Vorschlag font-Stapel hinzugefügt

    “Segoe UI”, Segoe, Tahoma, Geneva, sans-serif;

  2. Yahoo

    Arial, Helvetica, sauber, sans-serif

    Nach Jens Meiert mit Arial vor Helvetica nicht macht viel Sinn, und er schlage die Verwendung Helvetica vor Arial .

    <p Viele stark frequentierte Webseiten wie: Adobe , LinkedIn , Aol , ebay , You Tube , CNN.com und Mapquest verwenden: Arial, Helvetica, sans-serif;

    <p 99,71% Macs vorinstalliert Helvetica und 99,15% PCs haben Arial . Beim Bau unserer font-Stack sollten wir jede dieser Plattformen, bevor zeigen unsere Finger zum ursprünglichen sans oder sans-serif Schrift zu betrachten. Viele Designer einig, dass Helvetica schaut auf Windows (aber nur, wenn wir es unten angeben 16px) schrecklich. Hier ist ein Vergleich der Erskine Design auf Mac und Windows, wo Helvetica wird an 12px gerendert wird.

    Vorschlag font-Stack:

    Arial, sans-serif;

  3. Facebook

    "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;

    <p Facebook , Twitter , WordPress , Newswine und Basecamp haben Lucida Grande als ihre erste Wahl für Mac gesetzt, aber verpasst Lucida Sans Unicode für Windows und Lucida Sans für Linux.

    <p Lucida Grande (99.13% Anteil am Mac) ist eine häufige Wahl in diesen Tagen. Für Windows und Linux, Lucida Sans Unicode (mit 98,25% Anteil) und Lucida Sans (mit 77,78% Anteil) kann verwendet werden, aber sie fehlen (absichtlich oder unabsichtlich) in Facebook ist font-Stack. So wie die font-Stack, bestehend aus Lucida zu stärken, sollten wir beide Lucida Sans Unicode verwenden und Lucida Sans für Windows und Linux jeweils.

    Mit Arial nach Verdana und Times New Roman nach Georgia ist eine sehr gängige Praxis. In beiden Fällen ist x-Höhe anders und der Text variiert in einem bestimmten font-size. Richard Rutter -Production Director bei Clearleft gab die folgende Erklärung bei Skillswap 09 zu diesem Thema.

    Verdana viel größer als Arial angezeigt wird, so Arial ist nicht geeignet Back-up für Verdana. Wenn es nicht geeignet, nicht angeben, es

    <p Suggested font-Stack:.

    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, Tahoma, sans-serif;

  4. I Love Typography

    Georgia, Cambria, "Times New Roman", Times, serif;

    Cambria ist ein Teil der Sammlung von Schriften , die mit Microsoft Windows Vista, Windows 7, Microsoft Office 2007 und Microsoft Office 2008 für Mac wurde speziell für Lesen am Bildschirm entworfen wurden. Mit 54,51% der Anteile an Windows, Cambria kann eine gute Wahl über Georgien und Times New Roman . Allerdings macht es keinen Sinn zu verwenden Cambria nach Georgia , die hat Anteil 94,20% und 98.55%, auf Mac-und Windows-bzw.. Nun, wenn ILT ist ernst über die Verwendung Cambria als erste Wahl, dann die überarbeitete font-Stack sollte:

    Cambria, Georgia, serif;

  5. Jon Tangerine

    Baskerville, Palatino, "Palatino Linotype", georgia, serif;

    Jon Tan-Experte Web-Designer für seine schöne Web bekannt Typografie-Anwendungen Baskerville als erste Wahl für seine Blog-Überschrift (Mark & ​​Zellstoff ...), gefolgt von Palatino und Georgia . Ich habe Garamond hinzugefügt (23,84% am Mac, 86,24% auf Windows), Hoefler Text (88,70% am Mac) und Times New Roman (93,62% am Mac, 98,60% auf Windows), um seinen font-Stack und getestet in Firefox auf Mac um so die bestmögliche Wahl.

    Im Folgenden werden die Ergebnisse in der Reihenfolge abnehmender Ähnlichkeit in Größe und finden Gewicht (Ergebnisse sind die besten meiner Entscheidung ausgesprochen).

    <p Baskerville

    Garamond

    Times New Roman

    Palatino

    Hoefler Text

    Georgia

    <p Aus dem obigen Vergleich und unter Berücksichtigung der font-Anteil in%, können wir wählen Baskerville (88,60 % auf Mac), Baskerville Old Face (49,10% auf Windows), Hoefler Text (88,70% am Mac), Garamond (23,84% auf Mac, 86,24% auf Windows), Book Antiqua (86,09% auf Windows), Palatino (79,71% am Mac, 98,04% auf Windows) und Times New Roman (93,62% am Mac, 98,60% auf Windows). Georgia ist weggelassen und ersetzt durch Times New Roman als generische Schriftart, weil Times New Roman ist eindeutig eine bessere Ersatz für Baskerville unter Berücksichtigung der x-height und Gewicht

    Also das überarbeitete FS werden:

    Baskerville, Garamond, Palatino, "Palatino Linotype", "Hoefler Text", "Times New Roman", serif;

  6. Sushi & Robots

    "Hoefler Text", Baskerville, Garamond, "Palatino Linotype", Georgia, "Times New Roman", serif;

    Sushi & Robots ist mit eine schöne font-Stack mit Hoefler Text gekrönt (88,70% am Mac), die schön macht und die Seite sieht auf Mac erstaunlich. Garamond und Palatino Linotype sind eine gute Wahl für Windows. Doch die Schriften in oben verwendeten font-Stack unterscheidet basierend auf x-height . Z.B. Hoefler Text , Basekerville und Garamond hat comparitivly weniger x-Höhe als Palatino und Georgia . Basierend auf den Unterschied in der x-Höhe, ich habe diese Schriften in zwei Gruppen zu halten Hoefler Text in Fahrersitz unterteilt. Die folgenden Bilder werden dazu beitragen, die Angelegenheit weiter zu klären.

    SushiandRobots-Hoefler_Text Hoefler Text
    SushiandRobots-Hoefler_Text Hoefler Text
    SushiandRobots-Constantia Constantia
    SushiandRobots-Garamond Garamond
    SushiandRobots-Palatino Palatino
    SushiandRobots-Baskerville Baskerville
    SushiandRobots-Georgia Georgia
    Times New Roman

    <p Wenn wir die oben Schnappschüsse von Sushi & Robots 'zu Seite genommen schauen, werden wir feststellen, dass Palatino und Georgien haben verschiedene x- Höhe (und Gewicht) als Baskerville und Garamond. Also habe ich die grundlegenden font-Stack in zwei getrennten Gruppen, die verwendet werden und dabei Hoefler Text am Fahrersitz kann unterteilt. Sie können die Schriftart-Stack zwischen diesen beiden wählen.

    "Hoefler Text", Constantia, Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;

    oder

    "Hoefler Text", Garamond, Baskerville, "Baskerville Old Face", "Times New Roman", serif;

<p " Vergewissern Sie sich, font-Stacks sinnvoll und nützlich sind. " - Richard Rutter , [ Skillswap 09 ]

Revised Font Stacks

<p I . habe ein font-Stack für jedes Schriftbild erstellt unter Berücksichtigung der font Aktien Tabellenstatistiken

Notes:
  • Einige der Schriften, wie zB: Garamond , Baskerville und Didot sind nicht so gut lesbar auf dem Bildschirm als Georgien. Fühlen Sie sich frei, um Ihre eigene Auswahl
  • Durch kleinere x-Höhe machen;. Caslon , Didot , Garamond , Baskerville und Hoefler Text sollte bei mindestens 14 Pixel oder höher.
  • Lucida Grande , Futura gesetzt werden und Tahoma sind mechanisch zu fälschen einer kursiven obliqued.
  • Genf , Baskerville Old Face und Big Caslon hat keine fett und kursiv. Sie sind fett und kursiv.
  • Vermeiden Sie die Verwendung Helvetica oder Helvetica Neue für Fließtext, insbesondere unterhalb von 14px.
  • gefälscht Futura , Gill Sans und Franklin Gothic Medium sind sorgfältig gestapelt werden und wegen ihrer ungewöhnlichen Gewicht verwendet.

Serif font-Stack

  1. Garamond

    <p (23,84% am Mac, 86,24% auf Windows) Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text "," Times New Roman ", serif;

  2. Lucida Bright

    <p (64,90% am Mac, 33,84% auf Windows) Huge x Höhe "Lucida Bright", Georgia, serif;

  3. Palatino

    <p (79,71% am Mac, 98,04% auf Windows ) Palatino "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

  4. Big Caslon

    <p ( 85,10% auf Mac) "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;

  5. Didot

    <p ( 87,72% auf Mac) Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

  6. Baskerville

    (88,60% am Mac, 49,10% auf Windows) Baskerville "Baskerville altes Gesicht", "Hoefler Text", Garamond, "Times New Roman", serif;

  7. Hoefler Text

    <p (88,70% am Mac, 1,16% auf Windows) "Hoefler Text", "Baskerville altes Gesicht", Garamond, "Times New Roman", serif;

  8. Bodoni

    <p (47,89% auf Windows) "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond " Times New Roman ", serif;

  9. Goudy Old Style

    <p (51.30% auf Windows) " Goudy Old Style ", Garamond," Big Caslon "," Times New Roman ", serif;

  10. Constantia

    <p (53,81% auf Windows) Constantia, Palatino," Palatino Linotype " "Palatino LT STD", Georgia, serif;

  11. Cambria

    <p (54,51% auf Windows)

    Cambria , Georgia, serif;

  12. Book Antiqua

    <p (86,09% auf Mac) "Book Antiqua", Palatino, "Palatino Linotype", " Palatino LT STD ", Georgia, serif;

Sans-serif font-Stack

  1. Optima

    <p (90,14% auf Mac) Optima, Segoe "Segoe UI", Candara, Calibri, Arial, sans-serif;

  2. Futura

    <p (91.01% auf Mac) Futura "Trebuchet MS", Arial, sans-serif;

  3. Gill Sans

    <p (91,52% am Mac, 51,74% auf Windows)

    "Gill Sans", "Gill Sans MT ", Calibri, sans-serif;

  4. Trebuchet

    <p (94,20% am Mac, 99% auf Windows)

    "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

  5. Helvetica Neue

    (94.74% auf Mac)

    "Helvetica Neue", Helvetica, Arial, sans-serif;

  6. Verdana

    (96,81% am Mac, 99,40% auf Windows)

    Verdana, Geneva, sans-serif;

  7. Lucida Grande

    <p (99.13% auf Mac, 98,25% auf Windows)

    "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Genf, Verdana, sans-serif;

  8. Genf

    <p (98,84% auf Mac)

    Geneva, Tahoma, Verdana, sans-serif;

  9. Segoe

    <p (45,04% auf Windows)

    Segoe "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  10. Candara

    <p (54,31% auf Windows)

    Candara, Calibri, Segoe "Segoe UI ", Optima, Arial, sans-serif;

  11. Calibri

    <p (54,76% auf Windows)

    Calibri , Candara, Segoe "Segoe UI", Optima, Arial, sans-serif;

  12. Franklin Gothic Medium

    <p (97.89% auf Windows)

    "Franklin Gothic Medium", Arial, sans-serif;

  13. Tahoma

    <p (99,30% auf Windows)

    Tahoma, Geneva, Verdana, sans-serif;

<p " Denken Sie darüber nach Schriften über den Kernbereich Web-Fonts. " - Richard Rutter , [ Skillswap 09 ]

Es ist Zeit ... überarbeiten Sie Ihre font-Stacks

<p Diese font-Stacks sind unter Berücksichtigung der font-Stimmrechtsanteil auf Mac und Windows-Plattformen erstellt und dann geprüft, in Browser für x-Höhe und andere Fragen (wie: Lesbarkeit). Diese font-Stacks sind nach meinem eigenen Verständnis geschaffen und können von Designer zu Designer variieren je nach ihrer Wahl, Urteilsvermögen und Präferenzen. Haben Sie Vorschläge oder Verbesserungen sind wir dankbar. Ich würde gerne einige <sehen
aber sinnvolle , font-Stacks auf meine Forschung zu bauen. Best of luck!

Dank Phil Shaw für Code Style und Font-Umfrage .

Referenzen

<p Einige der wertvollen Artikel, Blogbeiträge und Kommentare, die mich zu konstruieren diesem Beitrag.

  • Combined Results-Code Style
  • Better CSS font-Stacks-Unit Interactive
  • Die neue Typografie-Clagnut
  • Steigern Sie Ihre font-Stacks mit font-Matrix-24 Ways
  • Font-Matrix-24 Ways
  • Luxus-Typ-Jeff Croft
  • Web-Schriften-A Padded Cell
  • 8 Schriftarten, die Sie vermutlich nicht den Einsatz in CSS sollte aber-3 Punkt 7 Designs
  • Font-Ergebnisse Visibone
  • Striking Websites mit font-Stacks, die inspirieren-Inspiration Bit
  • Ein vollständiger Reiseführer von CSS font-Stacks-Smashing Magazine
  • CSS font-Stacks-Nizza Web Type
  • <p Update: weißrussischen Übersetzung für den überarbeiteten Font-Stack