7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Web Typography

Kurzer Tipp: Konsistente browserübergreifende Darstellung von Schriften

Read Time: 1 min

German (Deutsch) translation by Jaques Donnez (you can also view the original English article)

In diesem Kurztipp zeige ich Ihnen, wie Sie CSS je nach Text-Rendering-Engine des jeweiligen Browsers anwenden können.

Screencast ansehen

Die Sache ist die: Je nach Browser und Betriebssystem wird der von Ihrem Browser angezeigte Text unterschiedlich wiedergegeben. Das kann für Designer problematisch sein, insbesondere für diejenigen, die sich auf die Perfektionierung typografischer Details wie Schriftart, Größe, Gewicht, Abstände usw. konzentrieren.

Browser type renderBrowser type renderBrowser type render
Dieselbe Seite wird angezeigt auf (von links nach rechts) Chrome Mac OS, Internet Explorer, Microsoft Edge

Wenn Sie mehr Konsistenz in Ihren Designs anstreben, hilft Ihnen eine JavaScript-Bibliothek namens Type Rendering Mix von den lebenden Typografie-Legenden Tim Brown und Bram Stein weiter.

Diese Bibliothek erkennt den vom Browser verwendeten Text-Rasterizer und die Antialiasing-Methode und fügt dem html-Element Klassen hinzu, die die Ergebnisse widerspiegeln, zum Beispiel:

In unserem obigen Beispiel möchten wir vielleicht das Gewicht des Blocksatzes in Chrome reduzieren. Nachdem wir Type Rendering Mix in die Seite geladen haben, zeigt ein kurzer Blick, dass die Klasse tr-coretext in Chrome angewendet wurde, was die Tatsache widerspiegelt, dass Core Text (Mac OS und iOS) für die Rasterung verwendet wird.

Wir könnten dann unseren schwereren Text gezielt einsetzen, indem wir eine Regel wie die folgende zu unserem CSS hinzufügen:

Schlussfolgerung

Type Rendering Mix gibt es schon seit einigen Jahren, aber es ist ein einfaches und solides Werkzeug, das Designern, die die Darstellung ihrer Schriften in verschiedenen Browsern optimieren wollen, zuverlässig hilft.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.