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