Anzeige
Anzeige
UX & Design
Artikel merken

10 Fonts für den problemlosen Einsatz mit CSS

Mit CSS3 können Webworker modernen Browsern quasi alle Fonts 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.

Von Ilja Zaglov
2 Min. Lesezeit
Anzeige
Anzeige
Fonts für Webdesigner

Baskerville

baskerville_<a title=font" src="https://t3n.de/news/wp-content/uploads/2013/06/baskerville_font-595x59.jpg" width="595" height="59" />

Anzeige
Anzeige

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

Anzeige
Anzeige

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

Anzeige
Anzeige
  • 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.

Anzeige
Anzeige
  • 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

Anzeige
Anzeige

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.

Anzeige
Anzeige
  • 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

Anzeige
Anzeige

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

Anzeige
Anzeige

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

 

Mehr zu diesem Thema
Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
13 Kommentare
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Artur

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
Konrad

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
Kai

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
Brainer

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
Kai

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
Artur

@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
Kai

@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
Artur

@ 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
problemloser Einsatz

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 1920×1080 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
Kai

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
Abbrechen

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Anzeige
Anzeige