Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » CSS: Textdarstellung optimieren mit Text-Rendering

CSS: Textdarstellung optimieren mit Text-Rendering

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • Keine Kommentare
Lesedauer: 2 Minuten
  • von Denis Potschien
  • 23. April 2012
Bookmarke mich
Share on pocket

Texte können dank CSS vielfältig gestaltet werden. Auch die Art und Weise, wie der Browser einen Text rendert, lässt sich mit der Eigenschaft „text-rendering“ festlegen. Dabei kann die Rendering-Methode auf Geschwindigkeit oder auf Lesbarkeit optimiert werden.

Rendering-Methoden mit sichtbaren Unterschieden

Die CSS-Eigenschaft „text-rendering“ kennt neben dem Wert „auto“ noch drei weitere Werte, mit denen die Rendering-Methode näher konfiguriert werden kann. „optimizeSpeed“ optimiert einen Text so, dass er möglichst schnell dargestellt wird. Buchstaben werden dabei nicht geometrisch präzise angezeigt. Das Kerning wird ausgeschaltet und Ligaturen werden nicht dargestellt.

Der Wert „optimizeLegibility“ sorgt für eine optimale Lesbarkeit von Texten.  Es findet ein Kerning zwischen den Buchstaben statt. Außerdem werden Ligaturen dargestellt, sofern die verwendete Schriftart sie zur Verfügung stellt. Der Wert „geometricPrecision“ sorgt für eine geometrisch präzise Anzeige des Textes.

 


oben: weder Kerning noch Ligaturen mit „optimizeSpeed“, unten: Kerning und Ligaturen mit „optimizeLegibility“

Standardmäßig wählt der Browser eine geeignete Rendering-Methode aus. Da derzeit nur Gecko- und Webkit-Browser die CSS-Eigenschaft kennen, können andere Browser nicht berücksichtigt werden. Gecko-Browser wählen bei Schriften, die kleiner als 20 Pixel sind, automatisch die Methode „optimizeSpeed“, für größere Fonts „optimizeLegibility“. Webkit-Browser wählen standardmäßig die Methode „optimizeSpeed“ und zwar unabhängig von der Schriftgröße.

Der Wert „geometricPrecision“ wird nur vom Chrome unterstützt. Die Einstellung sorgt im Chrome dafür, dass Schriften exakt in der angegebenen Größe dargestellt werden, auch wenn es sich um „krumme“ Schriftgrößen wie 12,9 Pixel handelt. Normalerweise werden Schriften immer auf die nächsthöhere oder niedrigere Schriftgröße skaliert. Gecko unterpretiert „geometricPrecision“ wie „optimizeLegibility“.

[Bildquellenangabe für das Foto auf der Magazinübersicht: Written language via Fotopedia]

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

DAZECON – Webdesign und Marketing

Dresden

Webagentur klickbeben

Innsbruck

Haurand Webdesign

Aachen

TIKAL Communication E-Commerce Agentur Hamburg

Hamburg

SEOlist.IO Frankfurt – SEO-Spezialist & SEO-Freelancer

Frankfurt am Main

Alle Agenturpartner

Jobs

Media Manager in München

München

Senior SEO Manager

München

SEO Manager – Vollzeit

Remote

System Engineer – Managed Service

Karlsruhe

Teamleiter Online Marketing

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung kann ganz schön knifflig werden, wenn du an eine umfassende Browser-Kompatibilität denkst. Wie gut, dass es fertige Code-Schnipsel und zahlreiche Beispiele dafür gibt. Und noch besser, dass wir heute die besten Beispiele auch gleich in diesem Beitrag präsentieren.

 →   

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.