HTML-Schriften unter der Lupe / praegnanz HTML-Gestalter haben es nicht leicht: Das Angebot an verwendbaren Schriften ist klein, und man weiß nie so recht, was am Ende beim User ankommt. Dieses Essay wird diese Probleme zwar nicht lösen, zeigt aber, worauf man bei der Auswahl einer Schrift für das nächste Webprojekt achten kann. [Originalartikel vom 12.7.2004, Update am 22.7.2007] Warum sollte die Schriftwahl in auf HTML-basierten Websites eigentlich anderen Regeln folgen als die Schriftwahl für Print-Dokumente? Die Fragen bleiben die gleichen: Was soll gelesen werden? Das bedeutet jedoch nur, dass die Herangehensweise an die typografischen Entscheidungen sich nicht unterscheidet, wohl aber das Ergebnis. Im Folgenden nun also eine Reihe von Fragen, die man sich speziell beim Gestalten von HTML-Text stellen muss; danach sehen wir uns die einzelnen Schriftkandidaten einmal genauer an. Überschrift oder Fließtext? Von ganz entscheidener Bedeutung ist es, ob ich eine Schrift für Headlines oder für den Mengentext suche.
Die richtige Schrift im Internet :: Schriftgröße, Internet, Schrift, Größe, Lesbarkeit, Artikel, Zeilenbreite, Farbmischung :: Exanto In diesem Artikel fasse ich die Essenz zur Schriftformatierung im Internet zusammen. Am Ende des Artikels findet sich eine ausführliche Linkliste zu tiefergehenden Artikeln und Webseiten. Ich habe viele Aspekte wegfallen lassen und mich auf das (in meinen Augen) Wesentliche beschränkt. Wer meint daß ich etwas wichtiges vergessen habe, der möge sich in den Kommentaren austoben. Schriftgröße Die richtige Größe gibt es im Prinzip nicht, da je nach Auflösung, eingestelltem Schriftgrad und Sehvermögen des Betrachters andere Größen in Frage kommen. 16 * 62.5% ergibt somit 10 Pixel, und damit lässt sich ohne weiteres arbeiten. Zeilenhöhe Auch die Zeilenhöhe sollte relativ angegeben werden, und zwar mit mindestens dem 1,3 fachen der Schriftgröße. Zeilenbreite Die Breite des Textes trägt ebenfalls entscheidend zur Lesbarkeit bei. Farbe, Hintergrund und Kontrast Reines schwarz auf weiß bietet einen guten Kontrast, hat aber seine Nachteile. Schriftart Blocksatz oder Flattersatz Linkliste
Schriften im Internet Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden. Im zeitgemäßen standardkonformen Webdesign verfügen wir über eine ganze Reihe von interessanten Möglichkeiten, unsere Dokumente typografisch zu gestalten. Die durch das Medium World Wide Web und die darauf gründenden Webstandards gegebene Flexibilität und Dynamik ermöglicht uns, Webdokumente für unsere Leser optimal vorzubereiten und zu gestalten. Wenn wir diese Flexibilität im Sinne unserer Leser nutzen, so ermöglichen wir ihnen, unsere Dokumente ihrem eigenen Bedürfnis entsprechend – und nach Möglichkeit ihrer bevorzugten Software – darzustellen. Schauen wir uns einige Möglichkeiten an: Gestalterische Vielfalt mit Stylesheets Wir können mit Hilfe von Cascading Style Sheets (CSS) fein justierend Einfluss nehmen auf folgende Aspekte typografischer Gestaltung: Wir treffen eine geeignete Auswahl Serifenlose Schriften: Weiterführende Links
Webanalyse: Die aktuelle Verbreitung von Schriftarten bei Web-Usern - Design Die Webmasterpro Webanalyse erfasst diesmal erstmals in einer repräsentativen Statistik die Verbreitung von Schriftarten auf User-Seite im (deutschsprachigen) Netz und stellt neue Alternativen zu Verdana, Arial & Co vor. Jeder, der sich länger mit der Gestaltung von Webseiten beschäftigt, wird irgendwann einmal das Bedürfnis verspüren, vom vielbefahrenen Arial-Verdana-Highway abzuzweigen, um eine individuellere Route einzuschlagen. Dabei kommt er jedoch leider (noch) nicht umhin, sich zu fragen wie viele Benutzer die auserwählte Schriftart installiert haben und ob und für wen er eventuell Alternativen anbieten muss. Überraschenderweise gibt es hierzu sehr wenige aktuelle Zahlen. Zusätzlich haben wir für Interessierte eine komplette Liste der getesteten Schriftarten und ihre Verbreitung im deutschsprachigen Internet veröffentlicht. Verbreitung - Web Core Fonts (Microsoft) Verbreitung - Windows XP-Schriften Verbreitung - Windows Vista-Schriften Verbreitung - Andere Schriften Datengewinnung
Die richtige Schrift f r Ihren Internet-Auftritt Pahlke KunstWebDesign … nur, um welchen Buchstaben handelt es sich nun wirklich? Oder ist es vielleicht gar eine Ziffer? Ein kleines „l“ (sprich „el“),ein grosses „I“ (sprich „i“),eine (römische) „1“ (sprich „eins“)? Die Entscheidung fällt vermutlich nicht leicht. Zum Glück stehen Buchstaben nur selten alleine, sondern meist in Gruppen. Es ist deshalb alles andere als gleichgültig, welche Schrift für einen Text gewählt wird. Bekannte serifenbehaftete Schriften sind zum Beispiel: Den Gegenpart bilden serifenlose Schriften. Bei letzteren Schriften fehlen, wie unschwer zu erkennen ist, die kleinen Striche und Häkchen an den Buchstaben. Warum aber empfehlen viele Fachleute serifenbehaftete Schriften? Der Grund für ihre Beliebtheit bei Typographen ist die gute Lesbarkeit. Geübte Leser erfassen Texte nicht buchstabenweise, sondern in ganzen Textstücken von 10 bis 12 Zeichen. Am besten erfüllen diese Bedingung nach Überzeugung vieler Fachleute serifenbehaftete Schriften. Verloren in endlosen Zeilen.
Check Out The Alphabet, Redrawn By Spinning Letters Into 3-D They look like tops, bowls and funnels. But really? These are the letters of our alphabet in 3-D--not a hokey extrusion with a drop shadow--but actual, 360-degree perspective. It’s called Univers Revolved, and it’s a vintage project by now-Facebook designer Ji Lee. “Univers Revolved started as an experiment while I was learning a very basic 3-D software as a student at a design school,” Lee tells Co.Design. “The software had a tool that enabled revolving a geometric shape. Soon thereafter, Lee began playing with his new font, realizing that a 3-D letter could become a real physical object. Indeed, now that I’ve studied Univers Revolved’s alphabet a bit, lamp shades may always remind me of the letter “A,” while donuts are all “Os” (or maybe that should be, oooooohhhs). If you’re looking to put this sort of hurting on your own brain, Univers Revolved is actually a published book. Buy it here.
Lisboa Pro This product supports the following languages: Common languages: Danish Dutch English Finnish French German Spanish Other languages: Afrikaans Albanian Aragonese Arumanian Arvanitika (Latin) Asturian Basque Bats (Latin) Bislama Bosnian (Latin) Breton Catalan Chamorro Cook Islands Maori Crimean Tatar (Latin) Croatian Czech Esperanto Estonian Faroese Franco-Provencal Frisian Frisian, East Frisian, North Frisian, West Friulian Gagauz (Latin) Galician Greenlandic Hawaiian Hungarian Icelandic Indonesian Interlingua Irish Istro-Romanian Italian Juhuri (Latin) Karaim (Latin) Kashubian Kurdish (Latin) Kurmanji Ladin Ladino (Latin) Latin Latvian Lithuanian Low German Luxembourgian Malagasy Malay (Latin) Maltese Manx Gaelic Maori Marshallese Moldavian (Latin) Norwegian, Bokmål Norwegian, Nynorsk Occitan Polish
FF Meta Fonts | FontList We carry over 150,000 fonts in every style and category. Browse by the general type categories in this list or fine tune your search using the subcategories below. Subclass » Genre » Webfonts » Alternatives » New Fonts » Application » Period » Award Winners » Staff Picks » Curated by FontShop experts, FontLists help you find the type you need. See all FontLists Print-/Bildschirmschriften Neben der Annmutung, die bestimmte Schriftarten für bestimmte Verwendungszwecke nahe legt, spielt natürlich auch das Medium, in dem die Schrift eingesetzt wird eine maßgebliche Rolle. Generell gilt die Regel: Serifenschriften wie die Antiquaschriften (z. B. Auch wenn die Vorzüge der Serifenschriftarten wie Times eindeutig im Printbereich liegen, für den sie entwickelt worden sind, hat man auch bestimmte Serifenschriftarten speziell für den Computerbildschirm entwickelt (z. Bildschirmschriftarten und ihre Leistung Zwischen den untersuchten Schriften gab es keine signifikanten Unterschiede hinsichtlich der Leseeffizienz. Die Schriften zeigten jedoch deutliche Unterschiede bei der Lesegeschwindigkeit. Die Schriften Times und Arial werden schneller gelesen als Courier New, Century Schoolbook und Georgia Die Schriftgröße 10pt wird langsamer gelesen als Schriftgröße 12pt. Hinsichtlich der Lesbarkeit der Schrift wurde ermittelt: 10 Pt.
Alternativschriften Nase voll von Helvetica? Sattgesehen an Gotham? Der Prof empfiehlt immer nur Rotis? Typefacts hilft! Alternativen zu Helvetica Alternativen zu Gotham Alternativen zu Gill Sans Alternativen zu Garamond Wie bei den meisten alten Schriften gibt es nicht die eine Garamond, sondern sehr viele verschiedene Interpretationen. DTL Documenta – zeitgemäß und elegant (Frank E. Fabiol – ungeschliffen und charakterstark (Robert Strauch, 2005): FF Absara – kantig-modern (Xavier Dupré, 2006): Cronos – serifenlos-weich (Robert Slimbach, 1996): Siehe auch: Garamonds bis zum Abwinken: Auch die Leute von FontShop San Francisco haben eine Übersicht einiger Garamond-Varianten erstellt. Alternativen zu FF Dax Alternativen zu Univers
Die besten Fonts 2011 Neues Jahr – neue Schriften. Und zuletzt hieß das auch: Neues Jahr – immer mehr Schriften! Umso wichtiger, einen unabhängigen Überblick über die besten unter den vielen zu bekommen, und Typefacts leistet dies gewohnt leidenschaftlich, unsortiert und garantiert streng subjektiv. GenathFrançois Rappo [Optimo] – Auch als Webfont! In einem ertragreichen Jahr wie 2011 ist es oft ein Foto-Finish, welche Schrift in meine Bestenliste rutscht und welche dafür draußen bleiben muß. RealistMartin Wenzel [MartinPlusFonts] – Auch als Webfont! Wer (wie ich) Martin Wenzels unterschätzte FF Profile liebt, aber merkt, daß ihre Anmutung für manche Anwendungen zu organisch und warm ist, wird (wie ich) hellauf begeistert sein, nun ihre seriösere Schwester kennenzulernen. Bookmania [Mark Simonson Studio] – Auch als Webfont! Es gibt nicht wenige, die auf ein Revival einer Schrift verzichten könnten, die schon immer »häßlich und unnötig« (E. Nouvelle VagueElena Albertoni [Anatoletype] – auch als Webfont!
Typefacts | Typografie verstehen Die besten Fonts 2010 Da ist es also, das neue Jahr, und Typefacts möchte es sich nach einem erfolgreichen ersten Jahresrückblick nicht nehmen lassen, auch diesmal wieder einen Blick zurück durch die Brille des Schriftverrückten zu werfen und die zehn besten Schriften des Jahres zu küren. Der eigentliche Star des abgelaufenen Jahres war zwar die sich immer mehr durchsetzende Webfont-Technologie, die endlich – wenn auch noch mit großen Qualitätsunterschieden – immer mehr typografische Vielfalt im WWW möglich macht (Deshalb auch eine kleine Anmerkung bei den als Webfont erhältlichen Schriften). Und doch gab es letztes Jahr [mein Redaktionsschluß war November] auch wieder jede Menge wunderschöner brandneuer Schriften, von denen ich hier eine ganz und gar subjektive (und möglichst abwechselungsreiche) Top Ten vorstellen möchte, und zwar ohne wertende Reihenfolge: Eames Century ModernErik van Blokland & House Industries [House Industries] FF DIN RoundAlbert-Jan Pool [FontFont] – Auch als Webfont! Sans & Serif?
Webfonts “mieten” – Auswahl aktueller Webfont-Dienste Webfonts müssen auf Webseiten funktionieren, sprich, wenn der Betrachter des Webdokumentes gerade online ist. Der Gedanke liegt deshalb gar nicht so fern, dass man die Fonts gar nicht unbedingt auf dem eigenen Server zur Verfügung stellen muss, sondern sie als Webdienst von einem externen Anbieter einbinden kann. Dazu genügt es in der Regel, einen simplen CSS-Import-Befehl in die eigene Webseite aufzunehmen. Schriften durch eine fortwährende Bezahlung zu mieten, ohne die Fontdateien selbst zu erhalten, mag auf manchen Anwender zunächst befremdlich wirken, doch es bringt auch einige Vorteile mit sich. Verfügbarkeit ist kein Problem Die am meisten geäußerte Befürchtung gegenüber Webfont-Diensten bezieht sich übrigens auf die Verfügbarkeit. Fallback auf Systemschriften definieren Die Anbieter Zahlreiche Webfont-Dienste sind seit dem letzten Jahr gestartet und es kommen sicher noch einige hinzu. Google Font Directory Typekit Typotheque Fonts.com web fonts FontsLive Fontdeck WebINK Webtype Kernest Fazit