Vorheriger Artikel Nächster Artikel

10 Fonts für den problemlosen Einsatz mit CSS

Mit können Webworker modernen Browsern quasi alle zur Darstellung ihrer Inhalte zur Verfügung stellen. Doch auch Schriften tragen einen nicht unwesentlichen Teil zur Gesamtgröße einer Webseite bei. Wer Webseiten mit schnellen Ladezeiten und mehreren Schriftarten gestalten möchte, sollte auf im System verfügbare Fonts zurückgreifen. Wer dabei nicht bei Arial, Helvetica und Times stecken bleiben möchte, kann auf diese 10 Schriften zurückgreifen, die für viele Benutzer verfügbar sind.

10 Fonts für den problemlosen Einsatz mit CSS
Fonts für Webdesigner

Baskerville

baskerville_font

Baskerville ist eine klassische Schriftart aus dem Jahre 1754, die mit leicht abgerundeten Serifen sehr elegant wirkt.

  • Verfügbarkeit Windows: 60,3%
  • Verfügbarkeit Mac: 93,3%

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

Palatino

palatino_font

Palatino ist eine Renaissance-Antiqua, die 1949 von Designer Hermann Zapf auf Basis seiner eigenen Kalligraphie entwickelt wurde.

  • Verfügbarkeit Windows: 99.3%
  • Verfügbarkeit Mac: 83.1%

font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

Garamond

garamond_fonts

Garamond ist eine Gruppe von Schriftarten, die seit dem 16. Jahrhundert verwendet werden und von Claude Garamond geschaffen wurden oder auf diesen aufbauen.

  • Verfügbarkeit Windows: 86,47%
  • Verfügbarkeit Mac: 49,91%

font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;

Georgia

georgia_font

Viele Designer wählen Georgia um eine möglichst hohe Lesbarkeit auf ihrer Webseite zu erreichen.

  • Verfügbarkeit Windows: 99,4%
  • Verfügbarkeit Mac: 97,5%

font-family: Georgia, Times, "Times New Roman", serif;

Century Gothic

century_gothic_font

Century Gothic ist eine serifenlose Schrift, die 1991 entworfen wurde. Das Wechselspiel zwischen Rundungen und Geraden verleiht der Schrift einen modernen Look.

  • Verfügbarkeit Windows: 87,6%
  • Verfügbarkeit Mac: 53,2%

font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;

Tahoma

tahoma_font

Tahoma ist eine serifenlose Schrift, die speziell für den Bildschirmeinsatz entwickelt wurde und auch in sehr kleinen Schriftgrößen gut lesbar bleibt.

  • Verfügbarkeit Windows: 97,8%
  • Verfügbarkeit Mac: 91,7%

font-family: Tahoma, Verdana, Segoe, sans-serif;

Arial Narrow

arial_narrow_font

Arial dürfte nicht zu den Lieblingsschriftarten von Designern gehören. Im Narrow-Schriftschnitt wirkt die Arial jedoch relativ elegant.

  • Verfügbarkeit Windows: 88,4%
  • Verfügbarkeit Mac: 94,8%

font-family: "Arial Narrow", Arial, "Helvetica Condensed", Helvetica, sans-serif;

Trebuchet MS

trebuchet_ms_font

Trebuchet ist die Standardschrift der Titelleisten in Windows XP. Die serifenlose Schrift wurde 1996 speziell für Microsoft von Vincent Connare, dem Designer der Comic Sans entwickelt.

  • Verfügbarkeit Windows: 97,7%
  • Verfügbarkeit Mac: 97,1%

font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif;

Lucida Sans Typewriter

Lucida Sans Typewriter ist eine serifenlose Monospace-Schrift, die sich durch sehr gute Bildschirmlesbarkeit auszeichnet.

  • Verfügbarkeit Windows: 74,8%
  • Verfügbarkeit Mac: 99,6%

font-family: "Lucida Sans Typewriter", "Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;

Consolas

consolas_ms_font

Consolas ist eine Monospace-Font, die 2007 mit Windows Vista eingeführt wurde und sich insbesondere für die Darstellung von Code-Schnippseln eignen dürfte.

  • Verfügbarkeit Windows: 83%
  • Verfügbarkeit Mac: 34,8%

font-family: Consolas, monaco, monospace;

Wem diese Fonts nicht reichen, kann sich bei CSS Font Stack über weitere Schriften und deren statistische Verfügbarkeit auf Windows und MacOS Systemen informieren.

Weiterführende Links

 

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
11 Antworten
  1. von Artur am 18.06.2013 (09:12 Uhr)

    Problemlos einsetzen? Entweder bin ich blind, oder der Titel suggeriert etwas, was aber nicht Tatsache ist.

    Beispiel: Baskerville auf Windows ca. 60%. Das sind grad mal 3/5 aller Windows-Nutzer und das ist bei weitem NICHT PROBLEMLOS. Wir können Sie einfach die 40% über Board werfen? Sie haben zwar Fallbacks eingebaut, aber im Sinne von guten Webdesign, sollte eine Webseite in jedem Browser und möglichst für jeden Nutzer gleich aussehen.

    Wer will heutzutage denn bitte noch mit diesen Fallbacks arbeiten, und man nicht weiß, wann welches Fallback zutragen kommt?

    Eher mäßig der Artikel vom Inhalt! Riecht für mich nach einem Klick-Artikel und keinen im Sinne von gutem Journalimus.

    Antworten Teilen
  2. von Konrad am 18.06.2013 (09:30 Uhr)

    Sehe es ähnlich wie Artur. Die z.B. Palatino ist eine der Fonts die noch relativ gut auf MAC und WIN funzt. Bei mobilen Geräten hingegen siehts teils anders aus. Auch die Arial Narrow gibt es lustigerweise nicht auf jedem Rechner. Wenn man schon auf embed-fonts verzichten will dann sollte man eben bei den Core-Fonts bleiben.

    Antworten Teilen
  3. von Kai am 18.06.2013 (09:58 Uhr)

    Wo ist denn das Problem mit Fallbacks, wenn es einen Schrift gibt die sehr gut zur Seite passt dann nimmt man diese an erster Stelle und setzt ähnlichere Fonts als Fallback, damit ein Font verwendet wird der am ähnlichsten zum gewünschten Font ist, den der User auf dem Rechner hat. Wenn es dir darum geht dass das Layout bricht weil manche Fonts zum Beispiel breiter sind als andere oder ähnliches, dann bin ich der Meinung das man sein Design etwas flexibler entwickeln sollte. Zum Beispiel sollte deine Seite ja auch einigermaßen funktionieren (wenns auch dann nicht mehr ganz so schön aussieht) wenn jemand seinem Browser eingestellt hat das die font-größe gezwungenermaßen erhöht wird, weil er zum Beispiel Probleme mit den Augen hat.


    Linux wurde hier zum Beispiel komplett außer vor gelassen <.<

    Antworten Teilen
  4. von Brainer am 18.06.2013 (10:32 Uhr)

    Hallo Kai,

    dafür das auf deiner Seite ne Menge Fähigkeiten stehen, hast du eigentlich nichts weiter konstruktives zum Artikel beigetragen.

    ps: lies mal mehr Artikel über Webdesign.

    Antworten Teilen
  5. von Kai am 18.06.2013 (10:51 Uhr)

    Hallo Brainer,

    Ich bin auch weniger auf den Artikel und mehr auf den Kommentar vom Arthur eingegangen.

    Der Artikel ist ganz in Ordnung, er listet vor allem Statistiken auf, und die font-stacks find ich sinnvoll, weil ein Fallback kann nie schaden, zur Not wirds halt nicht perfekt sondern dafür noch annehmbar dargestellt. Mit den Fallbacks definiert man quasi vom passendsten Font hin zum unpassendsten, aber man gibt sich so die Möglichkeit, falls jemand nicht den passendsten Font hat zumindest etwas zu benutzen was sehr änhlich ist . Beispiel Verdana: Windows Nutzer werden höchst wahscheinlich "Verdana", haben. Linux Nutzer zum Beispiel vielleicht nicht, aber diese werden wahrscheinlich "DejaVu Sans" haben, der von den Dimensionen und Stil her fast identisch ist mit Verdana, dann definiert man seinen font-stack:

    font-family: "DejaVu Sans", "Verdana", sans-serif;

    "DejaVu Sans" für Linux user
    "Verdana" für Windows user
    sans-serif damit falls beides nicht verfügbar ist, zumindest en sans-serif font verwendet wird der dann zumindest eine gewisse Ähnlichkeit zu den anderen beiden zeigt.

    Und diese persönlichen Anspielungen sind glaube ich nicht nötig.

    Antworten Teilen
  6. von Artur am 18.06.2013 (10:57 Uhr)

    @Kai - Sie haben wohl noch nicht verstanden, was den Beruf ausmacht. Es geht nicht darum Sachen dem "Zufall" zu überlassen - vor allem nicht mit den Stand der Dinge heute.

    Wir, als Webdesigner, müssen mit einer gewissen Qualität die Projekte umsetzen. Wenn ich meinem Kunden sagen würde "Die Schrift könnte bei Person X/Y aber anders aussehen", dann würde der mir nur angucken und sagen: ich solle das Problem lösen.

    Eine Firma, die ein Corporate Design hat, kann es sich nicht erlauben, einfach mal Fallbacks einzubauen und schauen dass dabei was gescheites dabei rauskommt.

    Außerdem hat jeder Schrift einen eigenen Duktus (Schriftcharakter), denn nur weil die Fallbacks Serifen haben, heißt es nicht, dass die Schriften repräsentativ für die Schriften die aufgelistet werden dort stehen dürfen.

    Ich verstehe, dass es früher nicht Möglichkeiten gab sowas vernünftigt umzusetzen, doch heute gibt es Möglichkeiten und jeder Webdesigner sollte sich an die Nase fassen und die Projekte mit Feingefühl (vor allem für TYPOGRAFIE) umsetzen.

    Antworten Teilen
  7. von Kai am 18.06.2013 (11:19 Uhr)

    @Arthur: Da haben Sie sicherlich, und wenn man einen bestimmten Font verweden will gibt's ja mit @font-face und anderen Lösungen, via Canvas etc., durchaus die Möglichkeit einen bestimmten Font zuverlässig zu verwenden. Die Unterstützung ist ja heutzutage nahezu kein Problem mehr. Und der Ladezeiten-Nachteil fällt durch die heutzutage großen und immernoch größer werdenden Bandbreiten nahezu weg.

    Obwohl ich persönlich die Ladezeiten mancher Seiten trotz meiner schnellen Internetverbindung immer noch nervig finde, und finde das viele Seiten mit unnötigen Features und Schmuck überladen sind, aber das ist glaube ich eine anderes Thema.

    Aber falls man sogar da noch etwas Ladezeiten rausquetschen will oder es für ein Projekt nicht für Nötig hält mit einem bestimmten Font zu arbeiten sind Lösungswege wie in diesem Artikel beschrieben doch garnicht so übel oder?

    BTW, ob der Titel und der Artikel an sich irreführend oder ähnliches ist will ich gerade garnicht diskutieren, verteidigen oder sonstiges.

    Und wieder direkte Anspielungen auf mich sind nicht nötig <.<

    Antworten Teilen
  8. von Artur am 18.06.2013 (13:07 Uhr)

    @ Kai - in meiner Kommentar gehe ich auf keine Anspielungen rein, sondern rede generell über das Thema.

    @ Sven - Hat für mich keine Basis. Eine Aussage von ein Webseite X ändert meine Meinung nicht. Anscheinend wurde hier noch nie für Kunden gearbeitet, die Wert auf ein Corporate Design legen und ich kenne auch keinen Kunden der Abweichungen haben will je nachdem welcher Browser kommt.

    Natürlich muss ich hier aber zugeben, dass ich nicht meine dass von ie6 bis ie 9/10, über Safari, Firefox 3, Chrome 13-20 etc etc alles funktionieren. Natürlich muss man sich hier entscheiden, welche Browser und Browserversionierungen für den Kunden relevant sind und diese Crossbrowser umsetzen - denn das wird erwartet und dafür bezahlen die Leute Geld.

    Generell ging es mir nicht darum jemanden abzuwerten, sondern mal auf Basis des Artikels zu diskutieren, dass der Artikel so dünn vom Inhalt ist und die Überschrift leider das falsche suggeriert - ergo Klickartikel, ergo kein guter Journalismus (imo).

    Antworten Teilen
  9. von problemloser Einsatz am 18.06.2013 (16:55 Uhr)

    Das erste Posting hätte möglicherweise freundlicher sein können, aber Kunden die pingelig sind bzw. ein pixelgenaues Design wollen, gibt es halt genug wie in #9 beschrieben wird. Dank der Antworten sieht man ja auch, das Artur seine Kritik auch begründet.

    Für pixelgenaue Kunden ist der Artikel also eher nichts (und bisher blieb unbeantwortet, ob man es hätte besser machen können) aber eine gewisse Trägheit ist in der Branche nicht unüblich. Ich vermute beispielsweise auch, das die fliessend brechenden Texte in E-Journal-PDFs eher nicht durch aktive Verlags-Anordnung der Verlags-Bosse entstehen sondern vielleicht eher durch Updates in den Adobe-Programmen automatisch aktiviert sind.

    Eine Frage ist, ob man bessere Prozente für die Fonts hinbekommt oder beispielsweise Tools hat um eine Seite beispielsweise in den verschiedenen Fonts auszudrucken um Probleme zu erkennen oder die Alternativen nebeneinander zu legen um zu erkennen ob die Fonts gleichartig genug sind. Fortschrittlichere Ideen kann man ja nebenbei äussern um Folgeaufträge zu bekommen wenn ein Kunde mal seine eigene Webseite auf dem SmarTV oder einem Android-Pad oder groß-Handy oder Mini-Handy anschaut und erkennt, das Abstraktion besser ist... .

    Gehören zu einem definierten Corporate Design nicht eigentlich dann auch festgelegte Fonts welche dann sowieso durchgängig überall verwendet werden und dann heruntergeladen werden können und hoffentlich gecached werden weil Safari/WebKit/... gerne alles ständig neu lädt auch unter GSM am Handy ? Sowas wäre ein Update oder zweiten Artikel wert.


    Jedes Auto sollte auch nicht gleich schnell fahren und gleich sein. Jede Webseite sollte auch nicht gleich aussehen (4:3, 3:4(Ipad aufrecht), 16:9, 9:16(7"-Android-pad aufrecht), Eink, Glänzend, Non-Glare, 46"(SmarTV),...) Viele Seiten nutzen bis heute kein 1920x1080 16:9 und 16:10 gibts ja auch noch und Handy von 2,5"(?) bis 4-6" und dann die 7",9",10",... Table-PCs(27"?), Desktop-Monitore (20"-30"), Fernseher (30"-50"), Laptop/Netbook-Monitore mit und ohne Touch. D.h. schon die Bedienung (Touch, Stift, Maus, Tastatur, Fernsteuerung,...) ist unterschiedlich.

    Leider nutzen die Leute viel zu wenig verschiedene Browser auf ihren paar Geräten um zu erkennen das Abstrakt meist besser ist. Und wenn man nach sowas sucht, findet sich wenig weil es den meisten Webseiten egal ist und dort pixelgenaue Chefs das sagen haben und ich als Webdesigner auch nicht aufmucken würde. Aber ich würde dem Chef die Webseite vielleicht mal in 2-3 Browsern auf 2-4 Geräten zeigen. Danach optimiert man auf die gängigen Screen-Größen.
    Je mehr Tablets verkauft werden, desdo eher ändert sich hoffentlich die Denkweise zugunsten Responsive Design.

    Antworten Teilen
  10. von Kai am 18.06.2013 (19:08 Uhr)

    Schöner Text, danke für die Mühe :3

    Naja, mit "fließenden Seiten", erspart man sich mit oft sehr kleinen Einbußen über die Kontrolle enorme Arbeit bei der skalierung der Webseite auf verscheidene Größen, weil sie dann für den größten Teil einfach von einer Größe in die Andere fließen.

    Noch mal danke für die Mühe, ist ein schöner Kommentar :3

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Font
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet
Kinderleicht zu CSS3-Animationen mit diesem Stylesheet

Mit dem CSS3 Animations Cheat Sheet, gibt es ein praktisches Stylesheet, mit dessen Hilfe ihr ohne großen Aufwand Seitenelemente animieren könnt. » weiterlesen

beyond tellerrand: Fail again, fail better – gelebt in CSS
beyond tellerrand: Fail again, fail better – gelebt in CSS

Zoe Mickley Gillenwater ist UX-Designerin und Buchautorin rund um Responsive Webdesign und CSS3. Auf der „beyond tellerrand // BERLIN“ hat sie darüber gesprochen, wie sie scheitert und aus … » weiterlesen

CSS3: Coole Animationen für im Grid angeordnete Bilder
CSS3: Coole Animationen für im Grid angeordnete Bilder

Mit HTML5 und CSS3 stehen Webworkern viele Möglichkeiten zur Verfügung, um ihre Webseiten noch spannender und interaktiver zu machen. Wir stellen dir einige nette Effekte vor, mit denen du dein … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen