Schriftenglättung mit Font Smoothing im Browser

Wie wahrscheinlich jeder andere Webdesigner stöber auch ich gerne mal in Code schöner Webseiten herum, um mir einfach ein paar neue Ideen oder Inspirationen zu holen. Dabei ist mir irgendwann die Schriftglättung -webkit-font-smoothing: über den Weg gelaufen. Beim ein- und ausschalten im Inspektor ist mir dann aufgefallen, dass die Schrift von Schön in nicht so schön wechselt.

Schriftenglättung funktioniert nicht in jedem Browser

Durch die Schriftglättung mit CSS sahen die Fonts auf den Webseiten teilweise viel schöner aus. Leider funktioniert -webkit-font-smoothing nicht in jedem Browser und ich weiss auch das nicht jeder ein Freund der Schriftenglättung mit css ist. Wer dennoch den Effekt auf seiner Webseite testen möchte, der kopiert die folgenden Zeilen einfach in seine Styles.

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
  • HTML
  • CSS

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

div.example-content {
	padding:24px;
}
div.font-smoothing-antialiased {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
div.example-text {
	padding: 20px 0px;
}
div.example-text+div.example-text {
	border-top: 1px solid #eee;
}
div.example-text h2 {
	font-size: 30px;
	line-height: 30px;
	padding: 0 0 10px 0;
}
div.example-text h3 {
	font-size: 20px;
	line-height: 20px;
	padding: 0 0 10px 0;
}
div.example-text h4 {
	font-size: 16px;
	line-height: 16px;
	padding: 0 0 10px 0;
}
div.example-text p {
	font-size: 16px;
	line-height: 20px;
	padding: 0 0 16px 0;
}

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Es gibt noch weitere Möglichkeiten der Schriftenglättung im Browser. Wer ein wenig rumspielen möchte, der kann die folgenden Varianten gerne an seiner Webseite ausprobieren.

Automatische Schriftglättung

-webkit-font-smoothing: auto
-moz-osx-font-smoothing: auto
  • HTML
  • CSS

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

div.example-content {
	padding:24px;
}
div.font-smoothing-auto {
	-webkit-font-smoothing: auto
	-moz-osx-font-smoothing: auto
}
div.example-text {
	padding: 20px 0px;
}
div.example-text+div.example-text {
	border-top: 1px solid #eee;
}
div.example-text h2 {
	font-size: 30px;
	line-height: 30px;
	padding: 0 0 10px 0;
}
div.example-text h3 {
	font-size: 20px;
	line-height: 20px;
	padding: 0 0 10px 0;
}
div.example-text h4 {
	font-size: 16px;
	line-height: 16px;
	padding: 0 0 10px 0;
}
div.example-text p {
	font-size: 16px;
	line-height: 20px;
	padding: 0 0 16px 0;
}

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

subpixel-antialiased

-webkit-font-smoothing: subpixel-antialiased
  • HTML
  • CSS

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

div.example-content {
	padding:24px;
}
div.font-smoothing-subpixel-antialiased {
	-webkit-font-smoothing: subpixel-antialiased
}
div.example-text {
	padding: 20px 0px;
}
div.example-text+div.example-text {
	border-top: 1px solid #eee;
}
div.example-text h2 {
	font-size: 30px;
	line-height: 30px;
	padding: 0 0 10px 0;
}
div.example-text h3 {
	font-size: 20px;
	line-height: 20px;
	padding: 0 0 10px 0;
}
div.example-text h4 {
	font-size: 16px;
	line-height: 16px;
	padding: 0 0 10px 0;
}
div.example-text p {
	font-size: 16px;
	line-height: 20px;
	padding: 0 0 16px 0;
}

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Keine Schriftglättung

In meinem Test reagierte Mozilla nicht auf diesen Befehl.

-webkit-font-smoothing: none;
  • HTML
  • CSS

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

div.example-content {
	padding:24px;
}
div.font-smoothing-none {
	-webkit-font-smoothing: none
}
div.example-text {
	padding: 20px 0px;
}
div.example-text+div.example-text {
	border-top: 1px solid #eee;
}
div.example-text h2 {
	font-size: 30px;
	line-height: 30px;
	padding: 0 0 10px 0;
}
div.example-text h3 {
	font-size: 20px;
	line-height: 20px;
	padding: 0 0 10px 0;
}
div.example-text h4 {
	font-size: 16px;
	line-height: 16px;
	padding: 0 0 10px 0;
}
div.example-text p {
	font-size: 16px;
	line-height: 20px;
	padding: 0 0 16px 0;
}

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.

Browser Support

Desktop

  • chrome iconChrome5*
  • opera iconOpera15*
  • firefox iconFirefox25*
  • safari iconSafari4*
  • internet_explorer iconInternet Explorer-
  • edge iconEdge-

Mobile / Tablet

  • ios_safari iconIos Safari-
  • opera_mobile iconOpera Mobile-
  • opera_mini iconOpera Mini-
  • android iconAndroid-
  • android_chrome iconAndroid Chrome-
  • android_firefox iconAndroid Firefox-

-webkit-font-smoothing funktioniert nur auf den Mac OS-Plattformen

oliver

Hinterlasse doch ein Kommentar zu Schriftenglättung mit Font Smoothing im Browser

Wenn dir der Beitrag Schriftenglättung mit Font Smoothing im Browser gefallen hat oder du Kritik bzw. Verbesserungsvorschläge hast, dann würde ich mich freuen, wenn Du ein Kommentar hinterlassen würdest.

Hinterlasse ein Kommentar zum Beitrag "Schriftenglättung mit Font Smoothing im Browser"

Deine E-Mail-Adresse wird nicht veröffentlicht.