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 weiß auch, dass 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, 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

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

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

Browser Support

Desktop

Chrome5*
Opera15*
Firefox25*
Safari4*
Internet Explorer-
Edge-

Mobile / Tablet

Ios Safari-
Opera Mobile-
Opera Mini-
Android-
Android Chrome-
Android Firefox-

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

Hinterlasse doch ein Kommentar

Schreibe 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.