UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Weg frei für die Typografievielfalt

23. November 2010, von stephan

Mit dem Jahr 2010 dürfte die alleinige Herrschaft der Windows-Schriften in Browsern vorbei sein. Wer seine eigene Schrift entwickelt oder etwas anderes ausprobieren will, muss nun nicht mehr mühsam und wenig barrierefrei auf Bilder oder Flash ausweichen, sondern kann diese direkt im Browser darstellen.

Mehr als 95 Prozent der Browser im deutschsprachigen Raum beherrschen die Einbettung von Schriften mit der CSS-Funktion @font-face. Was das Format der Schriftdatei angeht, gab es aber lange Zeit keine einheitliche Vorgehensweise: Während der Internet Explorer 6 das Schriftformat Embedded Open Type (.eot) verwendet, setzen Firefox, Chrome, Safari und Opera auf die TrueType (.ttf) und OpenType (.otf), während der Safari am iPhone und iPad nur Schriften im svg-Format darstellte.

fonts

.woff macht es wieder gut

Im April 2010 haben nun alle großen Browserfirmen das Web Open Font Format (.woff) beim Gremium zur Standardisierung des World Wide Web, dem World Wide Web Konsortium (W3C) eingereicht. Aktuell gibt es dieses Format in Firefox und Chrome; Internet Explorer, Safari und Opera sollen bald folgen. Mit diesem neuen Standard kann jede Schriftdatei in das notwendige Schriftformat umgewandelt und in die Website eingebaut werden.

Aber Achtung: Nachdem das Darstellen auf einer Website einer Vervielfältigung gleichkommt, könnten gewisse Lizenzen notwendig sein, auch wenn es sich dabei um Freefonts handelt. Bei letzterem ist meistens als Voraussetzung für eine Nutzung die Erwähnung und Verlinkung auf die Website des Schriftenentwicklers Pflicht. Grundsätzlich gilt, sich vor der Verwendung jeder neuen Schrift die Lizenzbestimmungen genau anzusehen.

Fonts-Anbieter

Dieser Schritt fällt weg, wenn man sich mit seinen Seiten an Web Fonts-Anbieter wendet. Die zwei bekanntesten sind Google und Typekit.

Google http://code.google.com/intl/de-DE/apis/webfonts/

Das Google Font-Verzeichnis listet Schriftarten auf, die unter einer Open-Source-Lizenz verfügbar sind und hohe Qualität gewährleisten – derzeit sind es 18 Schriften. Per Klick erzeugt Google mittels des Font API ein HTML-Fragment, welches das Stylesheet von den Google-Servern lädt; dieses macht wiederum die Font-Datei auf der einbindenden Seite verfügbar. Je nach Browser serviert Google dann eine TTF- oder eine EOT-Datei. Sowohl CSS-Datei als auch Schriftdatei liegen dabei zentral auf Google-Servern, dass heißt sie befinden sich im Cache des Nutzers und müssen nicht mehr extra heruntergeladen werden.

Typekit http://typekit.com/

Für einen Betrag von bis zu 100 Dollar ist eine umfangreiche Sammlung von rund 4.000 unterschiedlichen Schriften unter TypeKit erhältlich. Sie reicht von Open Source-Fonts bis hin zu hochwertigen kommerziellen Schriftarten. Typekit war eines der ersten Services in diesem Bereich und ist mit rund 80 Millionen Unique Usern im Monat auch das beliebteste. Typekit ist sehr einfach konfigurierbar und erlaubt eine Integration binnen weniger Minuten. Die gesamte Schriftensammlung ist zu einem recht niedrigen Preis erhältlich (zwei Seiten, fünf Fonts per Seite um 24,99 Dollar pro Jahr), womit man als Entwickler unterschiedliche Schriften auf einer Seite, als auch auf mehreren Seiten ausprobieren kann. Der Nachteil ist, dass Typekit Javascript verlangt und die Fonts nicht für die Verwendung außerhalb des Browsers gedacht sind.

Einen guten Vergleich von zehn unterschiedlichen Schriftenservices findet ihr unter

Welche Fonts für welchen Zweck?

Nachdem es im Web eine Vielzahl von Schriften gibt, stellt sich natürlich immer die Frage, welche denn für welchen Zweck am besten geeignet ist. Während für Blog-Headlines eher auffällige Display-Fonts (wie zum Beispiel Code, FF Meta Web, Museo Sans) passen, sind klassische Firmen-Websiten mit einer dezenten Brotschrift mit dem gewissen Etwas (wie Proxima Nova, Vollkorn) gut beraten. Nutzt man eine Schrift nicht nur für Überschriften oder Menüs sondern auch für Fließtexte, ist ein gutes Hinting http://de.wikipedia.org/wiki/Hint wichtig. Damit werden die Buchstaben bei kleinerer Schrift nicht herunterskaliert, sondern sind auch bei niedriger Auflösung weiterhin gut lesbar. Geeignete Schriften sind zum Beispiel Calluna oder Droid Sans – letztere ist übrigens auch für mobile Seiten gut anwendbar. 

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
2 Kommentare.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
23. November 2010 um 12:17

Hey Dennis,
ich wollte eher einen Blick auf den aktuellen Status werfen, Cufon verwende ich noch immer sehr gerne (auch bei zukünftigen Projekten) & für „exotischere Varianten“ allerdings finde ich Typekit auch sehr praktikabel.
In Zukunft werden wir mehr mit Typekit arbeiten, Google Fonts hatte ich ehrlich gesagt noch nie im Einsatz.

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
23. November 2010 um 12:10

Typekit ist auch für mich damals meine erste Wahl gewesen. Mittlerweile gibt es ja noch ein paar andere Dienste wie die Web Fonts von fonts.com oder Kernest,
doch wird diesen Diensten bisher nur wenig Beachtung geschenkt.
Wieso hast du eigentlich nicht auch die von dir verwendete Technik Cufon (zumindest in einem Nebensatz) erwähnt? Setzt du immernoch auf Cufon für neue Webprojekte, oder setzt du lieber auf Anbieter wie Google Font oder typekit?

Jetzt antworten
Antwort verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Die Macht von PHPStan: Fehlererkennung und Codequalität in der PHP-Entwicklung

21. März 2024, von Daniel

In der Welt der Webentwicklung ist die Qualität des Codes von entscheidender Bedeutung. Schlecht geschriebener Code kann zu Bugs, Sicherheitslücken und ineffizienter Leistung führen. PHPStan ist ein leistungsstarkes statisches Analysetool, das dazu beitragen kann, die Codequalität zu erhöhen und Bugs frühzeitig zu erkennen. In diesem Beitrag werden wir uns genauer ansehen, welche Arten von Fehlern PHPStan erkennen kann und welche Aufgaben möglicherweise andere Tools übernehmen müssen.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close