Schriftformatierung CSS3

Siehe auch Schrift - Selfhtml

Die CSS- Eigenschaften für Schriftformatierung sind auf alle Elemente anwendbar und lauten:


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:

Folgende Reihenfolgen haben sich durchgesetzt:

Georgia, "Times New Roman", Times, serif
Verdana, Arial, Helvetica, sans-serif
"Courir New", Courir, monospace

Schriftarten bereitstellen

Man kann Schriftarten bereitstellen. Achten Sie dabei auf die Lizenzbestimmungen / Copyright.

@font-face{font-family: 'Laconic Regular'; src: url('Laconic_Regular.otf')}

p { font-family: 'Laconic_Regular', 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='http://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(http://fonts.googleapis.com/css?family=McLaren);

Auch die Zuweisung in CSS kann man sich auf der Google Seite kopieren.

font-family: 'McLaren', cursive;

Sehr komfortabel.

Pictogramme mit Fontello.

Fontello ist ein übergeordnetes Projekt für Pictogramme. Hier werden mehrere Anbieter von Pictogrammen vorgestellt. Pictogramme sind Vektordateien, 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. Im Download Paket ist auch ein Beispiel als Vorlage enthalten.

Anhand der Demo Vorlage kann man sehen, wie man ein Pictogramm einbindet. Für jedes Icon gibt es eine Klasse, welche automatisch die entsprechende Grafik mit dem Pseudoelement :before anhängt.

<i class="icon-male"></i>

Selbstverständlich muss man die Dateien hochladen und außerdem sollte man nicht vergessen, die CSS Datei einzubinden.

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 Größe von Schrift wird auf verschiedenen Medien und Browsern unterschiedlich dargestellt. Das hängt von unterschiedlichen Betriebssystem- und Browsereinstellungen und untschiedlichen Monitoren ab. Die Unterschiede werden heutzutage immer größer (430x320 älteres Iphone oder 1920x 1200 Breitbildmonitor). Browser verfügen über verschiedene Systeme zum Skalieren. Von daher ist es eigentlich unmöglich als Webentwickler die Schriftgröße genau zu bestimmen.

Die Schriftgröße kann man auf unterschiedliche Arten bestimmen. Welche Werte man benutzt ist auch abhängig von der Darstellung auf Bildschirmen oder Printmedien.

font-size: Wert
Eigenschaft Wert Bedeutung
Vererbbar ja
Anwendbar Alle Elemente
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
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
em 1em ist die Größe des Buchstabens "m". Das ist in den Standardeinstellungen der Browser 16 Pixel. Mit em kann man einen Vergrößerungsfaktor angeben 1em. Der Faktor 1 entspricht 100%. Die Werte beziehen sich auf das Elternelement. Das kann bei Verschachtelungen zu immer kleineren Schriften führen. weitere Infos zu em Relativ zum übergeordneten Element
Umrechner px zu em
noch ein Umrechner
rem rem 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 führt das bei einer Verschachtelung nicht zu immer kleineren Schriften. Relativ zum Basis Element
% Prozentangaben bezogen auf die Größe des übergeordneten Elements. Relativ zum übergeordneten Element
vw 1% der Viewport Breite

Relativ zum Viewport

siehe auch Bildschirmbreite, skalierbare Texte

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. Schlüsselwörter absolut
x-small sehr klein
small klein
medium mittel
large groß
x-large sehr groß
xx-large riesig
smaller kleiner als im Elternelement Schlüsselworte relativ
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 kleiner 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 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 gutes Layout zu erstellen.

so sieht 's aus

rem

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>

Beispiel rem

Beispiel em

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.

so sieht 's aus

Schrifteigenschaften vererben

inherit Vererbung übernehmen

Vererbung bedeutet, das untergeordnete Elemente die Eigenschaften der übergeordneten Elemente übernehmen.

<style>
div {font-family: serif;}
p{font-family: sans-serif;}
div p {font-family: inherit;}
</style>

Würde man die dritte Zeile innerhalb des Style Blocks entfernen, würde die sans-serif in einem Absatz p innerhalb eines div angezeigt werden. Durch inherit hat die geerbete Eigenschaft Gültigkeit.

Siehe Beispiel

Vererbung unterbrechen

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 jedoch 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;}

Siehe Beispiel

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.

so sieht`s aus

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.

Schriftgrößen Responsive Design
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.

font-weight
Eigenschaft Wert Bedeutung
Standardwert normal
Vererbbar ja
Anwendbar Alle Elemente
font-weight normal normal
bold fett
100-900 in 100er Schritten (100 extra dünn) 500 ist normal (medium). Die Angabe 700 entspricht dem Begriff bold
bolder stufenweise Erhöhung
lighter stufenweise Verkleinerung

font-style

Stil der Schrift

Der Stil der Schrift wird mittels font-style definiert.

font-style
Eigenschaft Wert Bedeutung
Standardwert normal
Vererbbar ja
Anwendbar Alle Elemente
font-style normal normal
italic kursiv
oblique 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.
so sieht`s aus

Mit der CSS Eigenschaft text-transform kann man Groß- und Kleinbuchstaben erzeugen.

font-variant
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}