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.

css

				-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

HTML
CSS

HTML

									<div class="example-content">

	<div class="example-text font-smoothing-antialiased">
		<h2>Lorem ipsum dolor sit amet</h2>
		<h3>Lorem ipsum dolor sit amet</h3>
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>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. </p>
	</div>

</div>

CSS

									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

css

				-webkit-font-smoothing: auto
-moz-osx-font-smoothing: auto

HTML
CSS

HTML

									<div class="example-content">
	
	<div class="example-text font-smoothing-auto">
		<h2>Lorem ipsum dolor sit amet</h2>
		<h3>Lorem ipsum dolor sit amet</h3>
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>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. </p>
	</div>
	
</div>

CSS

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

css

				-webkit-font-smoothing: subpixel-antialiased

HTML
CSS

HTML

									<div class="example-content">

	<div class="example-text font-smoothing-subpixel-antialiased">
		<h2>Lorem ipsum dolor sit amet</h2>
		<h3>Lorem ipsum dolor sit amet</h3>
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>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. </p>
	</div>
	
</div>

CSS

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

css

				-webkit-font-smoothing: none;

HTML
CSS

HTML

									<div class="example-content">
	
	<div class="example-text font-smoothing-none">
		<h2>Lorem ipsum dolor sit amet</h2>
		<h3>Lorem ipsum dolor sit amet</h3>
		<h4>Lorem ipsum dolor sit amet</h4>
		<p>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. </p>
	</div>

</div>

CSS

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