Schriftformatierung CSS3
Die CSS- Eigenschaften für Schriftformatierung sind auf alle Elemente anwendbar und lauten:
color - Farbe
Mit der CSS Eigenschaft color wird die Schriftfarbe bestimmt.
body{color: #00a;}
Weitere Infos zu möglichen Farbwerten siehe CSS Tipp Farben & Effekte
font-family - Schriftart
font-family: Schriftart, "Schriftart 2", Schriftart3, sans-serif
Da eine Schriftart nur angezeigt werden kann, wenn Sie auf dem Betriebssystem vorhanden ist, kann man mehrere Schriftarten angeben und diese mit Kommata trennen. Der Browser geht die Schriftarten der Reihe nach durch und wählt die erste Schriftart, die vorhanden ist, zum Darstellen des Textes aus. Schriftartnamen in denen Leerzeichen vorkommen, sollten in einfachen oder doppelten, oberen Anführungszeichen eingeschlossen sein. Es gibt einige Werte, die man am Ende einsetzen kann:
- serif = Serifenschriftart (Füßchen)
- sans-serif = serifenlose Schrift
- monospace = Schreibmaschinenschriften, alle Zeichen haben die gleiche Breite
- cursive = kursive Schriftarten wie Zapf Chancery
- fantasy = z.B. die Schriftart "Western"
Folgende Reihenfolgen haben sich durchgesetzt:
Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
"Courir New", Courir, monospace
Schriftarten bereitstellen
siehe auch die ausführlichere Doku unter Selfhtml
Man kann Schriftarten bereitstellen. Achten Sie dabei auf die Lizenzbestimmungen / Copyright.
Achten sie auf die richtige URL relativ zur CSS Datei.
Die Dateien werden vom Server geladen, von daher muss man die Seite auch über einen Server im Browser laden.
@font-face{font-family: 'Laconic Regular'; src: url('Laconic_Regular.otf')}
p { font-family: 'Laconic_Regular', Arial, sans-serif; }
Verschiedene Sytsteme benötigen verschiedene Dateitypen. Sinnvollerweise sollte man die verschiedenen Arten bereit stellen. Es gibt folgende Formate: "woff", "woff2", "truetype", "opentype", "embedded-opentype", "svg".
Mit folgenden Tools kann man sich die verschiedenen Schrift-Dateitypen erstellen lassen.
Setze das richtige Format z.B.: format('embedded-opentype'). Hierbei sollte man sich nicht nur auf die Endung verlassen.
Gebe auch alternative Schriften an, die angezeigt werden sollen, falls die Schriftart nicht geladen oder angezeigt werden kann.
@font-face {
font-family: 'Fontomio';
src: url('font/fontomio.eot') format('opentype');
src:local('Fontomio'),
url('font/fontomio.woff') format('woff'),
url('font/fontomio.svg') format('svg'),
url('font/fontomio.ttf') format('truetype');
}
body{font-family: Fontomio, Futura, Arial, sans-serif;}
Google Webfonts
Google Webfonts bietet die Möglichkeit eine Vielzahl von Schriftarten zu nutzen. Auf der Seite http://www.google.com/fonts gibt es komfortable Möglickeiten Schriftarten auszuwählen. Der Code, der benötigt wird, um die Schriftart zu nutzen, wird auf der Google Seite generiert und bereitgestellt. Die Schriftart wird entweder mittels link Tag im Head Bereich der Seite eingebunden. Die Schriften liegen bei Google und brauchen nicht heruntergeladen zu werden.
<link href='https://fonts.googleapis.com/css?family=McLaren' rel='stylesheet' type='text/css'>
oder als alternative Lösung kann man die Schriftart auch in eine externe Style Sheet Datei importieren.
@import url(https://fonts.googleapis.com/css?family=McLaren);
Auch Zuweisung zur CSS Eigenschaft font-family kann man sich auf der Google Seite kopieren.
font-family: 'McLaren', cursive;
Achtung ! Leider gab es in 2022 eine Abmahnwelle auf Webseiten die Google Fonts integriert hatten. Mit diesem Tool kann man sich Google Fonts runterladen und integrieren
Mit diesem Google Fonts Checker kann man überprüfen, ob man Google Fonts nutzt.
Pictogramme mit Fontello.
Fontello ist ein übergeordnetes Projekt für Pictogramme. Hier werden mehrere Anbieter (Font-Awsome, Entypo, Typicons) von Pictogrammen vorgestellt. Pictogramme sind Vektordateien oder Icon-Schriften, die sich unter anderem mit CSS in die HTML-Seite einbinden lassen. Auf Fontello hat man die Möglichkeit nur die Pictogramme auszuwählen, die man benötigt, um sich daraus eine Datei zum Download zusammenzustellen. Diese Datei wird in mehreren Dateiformaten zur Verfügung gestellt.
Im Download Paket ist der Ordner "font" und "css" mit den Dateien, welche hochgeladen und im CSS eingebunden werden müssen.
In der beigefügten demo.html kann man den Code entnehmen wie die Schriftartendateien eingebunden werden.
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?69734495');
src: url('./font/fontello.eot?69734495#iefix') format('embedded-opentype'),
url('./font/fontello.woff?69734495') format('woff'),
url('./font/fontello.ttf?69734495') format('truetype'),
url('./font/fontello.svg?69734495#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
Desweiteren gibt es die Klasse .demo-icon
Hier muss die Schriftart font-family zugewiesen werden.
Weitere Eigenschaften wie user-select: none , speak:none , Farbe, Größe etc. sind möglich.
.demo-icon {
font-family: "fontello";
font-style: normal;
font-size: 4rem;
user-select: none;
color: red;
speak: none;
}
Macht man die demo.html im Browser auf kann man sich für jedes Zeichen den Code anzeigen lassen. Diesen bindet man wie folgt ein.
Aus 0xe800 wird 
<span class="demo-icon"></span>
Will man das Zeichen mit dem Pseudoelement :before oder :after einbinden muss man die Maskierung folgendermaßen einfügen.
Aus 0xe800 wird "\e800"
.menue:after{
font-family: "fontello";
content:"\e800";
}
Weitere Projekte sind
fontastic
icomoon
pictos
font-size Schriftgröße
siehe auch selfhtml siehe auch w3schools siehe auch CSS Zahlen und Einheiten
Als Dezimaltrennzeichen wird der Punkt eingesetzt. 1.5em
Die Schriftgröße kann man auf unterschiedliche Arten bestimmen. Welche Werte man benutzt ist auch abhängig vom Gerät, also der Darstellung auf Bildschirmen oder Printmedien.
- Schlüsselwörter (xx-small bis xx-large)
- relative Angaben (%, em, ex, rem)
- Punkte
- Pixel
| Einheiten | Wert | Bedeutung |
|---|---|---|
| Vererbbar | ja | |
| Anwendbar | Alle Elemente | |
| mm | Millimeter | Druck |
| cm | Zentimeter | |
| in | Inch = 2,54 cm | |
| pt | Punkt = 1/72 in = 0,353 | |
| pc | Pica = 12 pt = 1/6 in = 4,23 mm | |
| px | Pixel, da die Maßeinheit in älteren IE absolut angezeigt wird und sich durch die Browsereinstellungen nicht verändern lässt, wird von dieser Maßeinheit abgeraten. | Bildschirm |
| em | Hat man im Browser die mittlere Schriftgröße eingestellt, was standardmäßig der Fall ist, ist die Schriftgröße 16 Pixel. Das entsrpicht 1 em. Der Wert ist ein Vergrößerungsfaktor, 2 em bedeuted somit doppelt so groß. em ist die Größe des Buchstabens "M". Der Begriff kommt aus der Drucktechnik, weil das große M der größte Buchstabe ist. em bedeutet elastic M. Die Werte vererben sich. Das kann bei Verschachtelungen zu immer kleineren oder größeren Schriften führen. Außerdem bezieht sich em immer auf die am Element wirkende Schriftgröße. Soll heißen wenn man eine Schriftgröße in em setzt und auch bei width em setzt. Ändert sich die Breite bei width, wenn man die Schriftgröße em ändert. weitere Infos zu em | Relativ zum übergeordneten Element Umrechner px zu em noch ein Umrechner |
| rem | rem (root em) verhält sich ähnlich wie em nur dass sich hier die Größe immer auf das Basiselement bezieht. Das heißt auf die Standardeinstellung im Browser oder die Schriftgröße, die für das body Element definiert wurde. Im Gegensatz zu em wird rem nicht vererbt und führt somit bei einer Verschachtelung nicht zu immer kleineren oder größeren Schriften. | Relativ zur eingestellten Schriftgröße des Browsers |
| % | Prozentangaben bezogen auf die Standardgröße der Schrift. Standardmäßig ist die Schriftgröße 16 Pixel. 100% entspricht somit 16 Pixeln. Da wie bei em diese Größe vererbt wird bezieht sich die Größe auf das übergeordneten Elements. | Relativ zum übergeordneten Element |
| vw | 1% der Viewport Breite | Relativ zum Viewport |
| vh | 1% der Viewport Höhe | |
| vmin | 1% der kleineren Seite des Viewports, Wenn die Breite kleiner ist als die Höhe, orientiert es sich an der Breite, andernfalls an der Höhe. | |
| vmax | 1% der größern Seite des Viewports | |
| xx-small | winzig / 0.6rem | Schlüsselwörter relativ zur eingestellten Schriftgröße im Browser. |
| x-small | sehr klein / 0.75rem | |
| small | klein / 0.9rem | |
| medium | mittel / 1rem | |
| large | groß / 1.2rem | |
| x-large | sehr groß / 1.5rem | |
| xx-large | riesig / 2rem | |
| smaller | kleiner als im Elternelement | Schlüsselworte bezogen auf das Elternelement |
| larger | größer als im Elternelement | |
Schlüsselwörter
Es gibt 7 Schlüsselwörter. medium ist die Basisgröße, das entspricht in den meisten Browsern einer Größe von 16 Pixeln. Das erscheint, doch ein bisschen groß und somit ist small (ca. 13 Pixel) eine gute Wahl als Standardgröße. Die nächst größere Schrift wird um den Faktor 1,2 vergrößert (multipliziert). Die nächst kleinere Schrift wird um den Divisor 1,2 verkleinert (dividiert).
Relative Angabe
Bei relativen Angaben wird die Schriftgröße bei em und % auf das Elternelement bezogen. Von daher werden alle Schriftgrößen zueinander in Beziehung gesetzt, was eigentlich ein gutes Mittel ist die Seite zu gestalten und dem Benutzer die Möglichkeit zu lassen, die Größe generell an seine Wünsche anzupassen. Allerdings ist diese Art Stylesheets zu definieren nicht ganz einfach. Außerdem muss man aufpassen, dass mehrfach verschachtelte Schriften nicht zu klein oder zu groß werden.
<style type="text/css">
body{font-size: 0.8em;}
div{font-size: 0.8em;}
p{font-size: 0.8em;}
</style>
Wenn man im obigen Beispiel eine Standargröße von 13 Pixeln eingestellt hat, würde eine Schrift, die in einem Absatz p, der in einem div liegt um den den Faktor 0,512 verkleinert. Das ergäbe eine Größe von 6,656 Pixeln, was definitiv zu klein ist. Die Serifenschrift die kleiner ist als 8 Pixel ist kaum noch lesbar. Man sieht schon an diesem kleinen Beispiel die Problematik, hiermit ein funktionierendes Layout zu erstellen.
Weist man eine Schriftgröße in Prozent dem body Element zu, so wird eingestellte Standardschriftgröße des Browsers um diesen Prozentsatz skaliert. Weist man jedoch jedem einzelenen Element diese prozentuale Schriftgröße zu, so wird die Schrift immer größer, je tiefer die Elemente verschachtelt sind. Im folgenden 2 Beispiele mit gleichem HTML- Markup doch unterschiedlichem CSS Selektor.
*{font-size: 120%;} | body{font-size: 120%;}
rem & em
Die Einheit rem bietet das Beste aus beiden Welten. Sie ist einerseits eine relative Größe, aber sie bezieht sich nicht auf das Elternelement, sondern immer auf das Wurzelelement der Seite.
Wenn also die Basisschriftart 16 Pixel groß ist bedeutet 1rem immer 16 Pixel, egal an welcher Stelle die Schrift notiert ist. Im Zusammenhang mit dem 62,5% Trick bietet sich hier eine gute Möglichkeit die Schriftgrößen auf einfache Art zu definieren.
Im folgenden habe ich 2 gleiche Beispiele mit unterschiedlichem CSS formatiert. Hier wurde für div, p, span jeweils eine Schriftgröße von 0.8rem und im anderen Beispiel von 0.8em definiert. Die Elemente wurden ineinander verschachtelt <div><p><span></span></p></div>
CSS
<style type="text/css">
div{font-size: 0.8em;}
p{font-size: 0.8em;}
span{font-size: 0.8em;}
</style>
Punkte
Punkte kennt man aus dem Printbereich. Wenn man Punkte für die Bildschirmausgabe verwendet kommt der Umrechnungsfaktor für die Bildschirmauflösung ins Spiel, der zwischen 96 und mehr als 200 ppi liegen kann. Es ist also hiermit unmöglich eine einheitliches Layout für die Bildschirmausgabe zu erstellen. Für den Printbereich sind Punkte sehr wohl geeignet Stichwort Media Queries
Pixel
Alles was auf dem Bildschirm angezeigt wird, wird in Pixeln dargestellt. Im Internet Explorer 7 oder kleiner lassen sich so definierte Schriften über die Browserfunktion nicht verändern, das ist sehr schlecht für Sehbehinderte.
Von daher ist es besser man passt die Schriftgröße an die Voreinstellungen des Nutzers an.
Die Basisschriftgröße ist standardmäßig 16 Pixel. Wenn Ihnen das zu groß ist können Sie die Basisgröße auf 0.8em legen.
Wenn man Schriften innerhalb von Bereichen definiert, denen eine feste Größe in Pixeln zugewiesen wurde. Beispielsweise in Menüpunkten oder Bildunterschriften, kann es durchaus sinnvoll sein, die Schriftgröße in dem Fall auch in Pixeln anzugeben.
Der umgekehrte Fall ist in der Regel die bessere Lösung. Man definiert auch das Layout in em oder rem, denn so passt sich das Layout in jedem Fall auch der Schriftgröße an.
62.5% Trick
Richard Rutter hat sich folgenden Trick ausgedacht, um die Schriftgrößen einigermaßen nachvollziehbar anzulegen.
Die Basisgröße ist in den meisten Browsern eine Schriftgröße von 16 Pixeln. Wenn man diese Größe auf 62.5% verkleinert ist das eine Größe von 10 Pixeln.
html{font-size: 62.5%;}
In der Folge entspricht dann 1rem 10 Pixeln oder 1.2em 12 Pixeln und 2em entspricht 20 Pixeln. So hat man eine gute Möglichkeit mit den Umrechnungen zu arbeiten.
Schrifteigenschaften vererben
inherit Vererbung übernehmen
Vererbung bedeutet, dass das untergeordnete Element die Eigenschaft des übergeordneten Elternelements übernimmt.
div {font-family: serif;}
p{font-family: sans-serif;}
div p {font-family: inherit;}
Durch die dritte Zeile div p {font-family: inherit;} erbt das p im div die Schriftart serif vom Elternelement div.
Vererbung unterbrechen / Trick
Um auf unterschiedlichen Endgeräten lesbare Schriftgrößen zu erhalten, empfiehlt es sich relative Maßangaben zu verwenden. em ist besonders beliebt. Bei relativen Maßangaben können bestimmte Probleme in der Verbung auftreten, die es zu berücksichtigen gilt. Ein Beispiel:
Eine Schriftgröße von 12 Pixeln bei einer Standardgröße von 16 Pixeln lässt sich durch die Angabe 0.75 em erreichen.
p, li{font-size: 0.75em;}
Die prozentuale Angabe bezieht sich auf das Eltern-Element. Eine Schrift innerhalb eines Absatz p wäre somit kleiner als eine Schrift, die direkt im body Bereich aufgeführt wird. Auch li Elemente werden verkleinert.
Wenn man hier Listen ineinander verschachtelt, würde mit dieser CSS Anweisung die Schriftgröße in den verschachtelten Listen immer kleiner.
Man kann die Vererbung unterbrechen, indem man den Universalselektor als Nachfahrenselektor einsetzt und so mittels Vererbung allen Nachfahren dieselbe Schriftgröße zuweist.
p, li{font-size: 0.75em;}
li *{font-size: inherit;}
Bildschirmbreite, skalierbare Texte mit vw
Nimmt man die Größeneinheiten, die sich am Viewport orientieren, kann man beispielsweise Überschriften erstellen, die sich über die Bildschirmbreite oder die Breite eines Blocks erstrecken und die sich mit Änderung der Bildschirmgröße anpassen.
Man muss hierbei ein bisschen rumprobieren bis man die richtige Größe ermittelt hat. Wenn der Viewport zu klein wird, funktioniert der Effekt nicht mehr.
Damit der Effekt auch in älteren Browsern funktioniert, kann man mit dem jQuery Plugin Flow Type nachhelfen.
Eine andere Möglichkeit bietet Fit Text
Außerdem aktualisiert Safari die Größe nicht, wenn man die Größe des Browserfensters ändert. Auch híer gibt es eine Lösung mittels jQuery
elements = $("h1, h2, h3, p");
$(window).resize(function) {
elements.css("z-index", 1);
}
Schriftgrößen im Responsive Design
Zu den Anfangszeiten des Netzes wurden in der Regel kleinere Schriftgrößen verwendet (10 Pixel), während heute eher 16 Pixel als Standardgröße verwendet wird. Das liegt daran, das sich die Größen der Bildschirme geändert haben. Die kleinen Bildschirme 800 x 600 (oder 640 x 480) wurden abgelöst durch große Desktop Bildschirme, die von einem entfernteren Standpunkt angeschaut werden.
Desweitern gilt es zu beachten, dass die Notebooks, Tabletts und Smartphones von einem geringeren Betrachtungsabstand wahrgenommen werden und daher kleinere Schriftgrößen für diese Geräte angebracht sind. siehe Media Queries
Andrea Ertel und Kai Laborenz haben in ihrem Buch Responsive Webdesign: Anpassungsfähige Websites programmieren und gestalten (Galileo Computing)folgende Tabelle erstellt.
| Gerät | Abstand | Faktor | ppi | Schriftgröße |
| Desktopmonitor 22 Zoll | 60 cm | 1 | 96 | 16px |
| MacBook, 13 Zoll | 50 cm | 0,83 | 113 | 15- 16 px |
| Tablet (iPad 1) | 45 cm | 0, 75 | 132 | 16 -17 px |
| Smartphone (iPhone 5) | 25 cm | 0,42 | 163 | 11 px |
Schriftschnitt
Schriftschnitte sind die verschiedenen Arten einer Schrift, wie fett, kursiv, etc. Hierzu gibt es in CSS die beiden Eigenschaften font-weight und font-style. Es gibt wohl kaum eine Schriftart, die alle Wertzuweisungen ausführen kann, da es sich hierbei nicht um eine Schriftdatei handelt, sondern vielmehr um Schriftgruppen. Wenn beispielsweise die Schriftart Arial als normal, fett und kursiv angezeigt werden soll, müssen auf dem Rechner 3 Arial Schriften installiert sein.
font-weight
Schriftstärke
Mit font-weight wird die Stärke der Schrift festgelegt.
| Eigenschaft | Wert | Bedeutung |
|---|---|---|
| Standardwert | normal | |
| Vererbbar | ja | |
| Anwendbar | Alle Elemente | |
| font-weight | normal | normal entspricht 400 |
| bold | fett entspricht 700 | |
| 100-900 | in 100er Schritten (100 extra dünn) 400 ist normal. Die Angabe 700 entspricht bold | |
| bolder | stufenweise Erhöhung, fetter als die geerbte Schriftstärke | |
| lighter | stufenweise Verkleinerung, magerer als die geerbte Schriftstärke | |
font-style
Stil der Schrift
Der Stil der Schrift wird mittels font-style definiert.
Zwischen italic und oblique gibt es in der Regel keinen sichtbaren Unterschied. Der Unterschied besteht jedoch darin, dass italic eine installierte kursive Schriftart darstellt, während bei oblique die Schrift nachträglich vom Browser schräg gestellt wird.
| Eigenschaft | Wert | Bedeutung |
|---|---|---|
| Standardwert | normal | |
| Vererbbar | ja | |
| Anwendbar | Alle Elemente | |
| font-style | normal | normal |
| italic | kursiv (installierte Schrift) | |
| oblique | vom Browser schräg gestellt | |
font-variant
Kapitälchen
Wenn eine Schrift nur aus Großbuchstaben besteht, spricht man von Kapitälchen. In der Typografie nennt man auch die Kleinbuchstaben die Gemeinen während man die Großbuchstaben als Versalien bezeichnet.
Mit dem Wert "small-caps" werden alle Buchstaben zu Großbuchstaben gemacht, aber die Großbuchstaben sind etwas größer.
so sieht`s aus
Mit der CSS Eigenschaft text-transform kann man Groß- und Kleinbuchstaben erzeugen.
| Eigenschaft | Wert | Bedeutung |
|---|---|---|
| Standardwert | normal | |
| Vererbbar | ja | |
| Anwendbar | Alle Elemente | |
| font-variant | normal | normal |
| small-caps | Kapitälchen | |
font
Schriftschnitte zusammen in Kurzform angeben
Anstatt jeden Schriftschnitt einzeln zu definieren, kann man auch die Kurzform verwenden. Es gelten folgende Regeln. Die Werte werden mit Leerzeichen voneinander getrennt. Die zwingende Reihenfolge ist Schriftstil (mit Schriftstil, Kapitälchen, Stärke), Größe, Schriftart. Wenn in der Wertzuweisung Leerzeichen vorkommen, so wird der Wert in Anführungszeichen gesetzt.
Größe und Schriftfamilie müssen eingegeben werden. Die drei Eigenschafen font-style, font-variant und font-weight sind optional, bei denen Standardwerte genommen werden, wenn Sie nicht angegeben sind. Bei diesen 3 Eigenschaften ist die Reihenfolge nicht von Bedeutung, weil die Browser die Werte entsprechend der CSS Eigenschaften zuweisen. (Ich weiß allerdings nicht, wie sie das bei dem Wert normal machen wollen)
| Reihenfolge | 1. optional | 2. erforderlich | 3. erforderlich |
font: |
(font-style font-variant font-weight) |
(font-size) |
(font-family) |
Beispiele
h1{font: bold 1.2em Verdana, Arial, Helvetica, sans-serif}
p{font: 0.75em Verdana, Arial, Helvetica, sans-serif}
li{font: oblique bold 0.75em}
Zeilenhöhe in Kurzform
Es gibt die CSS Eigenschaft line-height, mit der man die Zeilenhöhe einer Schrift angeben kann. In der Kurzform kann man den Wert für die Zeilenhöhe eintragen, indem man hinter dem Wert für die Schriftgröße einen Schrägstrich (Slash) setzt gefolgt von dem Wert für die Zeilenhöhe.
p{font: 0.75em/1.4em Verdana, Arial, Helvetica, sans-serif}