Websiteentwicklung: CSS: Schriftgröße

Mit der Eigenschaft font-size kann die Schriftgröße angegeben werden, genauer die sogenannte Geviertgröße, die mit der CSS-Einheit em korrespondiert. Die Geviertgröße ist ein typisches Maß für einen Glyphen, sofern vorhanden oft gut repräsentiert durch die Breite des Großbuchstabens M. Allerdings können Glyphen sowohl weniger als auch mehr Platz benötigen als 1em, falls es sich um eine proportionale Schrift handelt. Das so festgelegte Maß bestimmt demzufolge also nicht nur die Schriftgröße, sondern auch Längen, die in der Maßeinheit em angegeben werden, zusammen mit der verwendeten Schriftart auch Längen, die in der Maßeinheit ex angegeben werden.

Der Wert ist ein Schlüsselwort für eine absolute Größenangabe oder eine relative Größenangabe oder eine Längenangabe oder ein Prozentwert oder das Schlüsselwort 'inherit'. Die Eigenschaft wird vererbt und ist auf alle Elemente bei visuellen Medien anwendbar. Der Initialwert ist das Schlüsselwort 'medium'.

Schlüsselwörter für absolute Größenangaben

Das Darstellungsprogramm stellt eine geordnete Liste von Schriftgrößen zusammen, ausgehend von der vom Nutzer eingestellten bevorzugten Schriftgröße 'medium'. Von dort aus werden in abnehmender Größe die Werte für die Schlüsselwörter 'small', 'x-small', 'xx-small' bestimmt und mit ansteigender Größe die Werte für die Schlüsselwörter 'large', 'x-large', 'xx-large'.

Mit dem Konzept kann also ausgehend von einer Größe, die festgelegt wird, bevor die CSS-Kaskade einsetzt, ein fester Bezugspunkt für Größenangaben in em oder ex für jede Stelle im Dokument verwendet werden, ohne dass es notwendig ist, die Größe als absolute Längenangabe festzulegen.

Zum Beispiel werden traditionell Überschriften größer präsentiert als normaler Text. Unabhängig von der Positionierung in der Kaskade kann so durch eine absolute Angabe erreicht werden, dass Überschriften gleichen Ranges gleichgroß präsentiert werden, unabhängig davon, wie groß etwa die Geviertgröße des Elternelementes gerade in der Kaskade ist.

Zu beachten ist zudem, dass der Nutzer eine minimale Schriftgröße am Darstellungsprogramm festlegen kann. Kleinere Geviertgrößen werden also automatisch auf diesen Wert gesetzt. Legt der Nutzer etwa fest, dass seine bevorzugte Schriftgröße (entspricht 'medium') auch die minimale ist, so werden auch Schlüsselwörter, die kleinere Größen repräsentieren, nicht kleiner als 'medium' dargestellt. Zudem sollten Darstellungsprogramme für Monitore generell vermeiden, dass eine Größe dieser Liste unterhalb von 9 Gerätepixeln liegt.

Historisch wurde in CSS1 ein Skalierungsfaktor zwischen den Listenpunkte von 1.5 empfohlen, in CSS2.0 einer von 1.2. Auch letzteres kann besonders bei den kleineren Größen noch immer zu Problemen führen, weswegen die Programme auch davon abweichen können, um bessere Lesbarkeit zu erreichen. CSS2.1 gibt deshalb keinen Skalierungsfaktor mehr als Empfehlung vor.

Beispiele für die Präsentation im aktuell verwendeten Darstellungsprogramm:

xx-small	winzig
x-small	sehr klein
small	klein
medium	mittel
large	groß
x-large	sehr groß
xx-large	riesig

Schlüsselwörter für relative Angaben

Als Schlüsselwörter für relative Angaben sind zudem 'smaller' und 'larger' verfügbar. Ausgehend von der aktuellen Größe wird bei 'smaller' dann von den absoluten Größen die nächstkleinere gewählt, bei 'larger' die nächstgrößere, sofern vorhanden. Entspricht die aktuelle Größe nicht einem der Schlüsselwörter für absolute Angaben, so wird anhand der Liste für absolute Angaben eine Einordnung und Schätzung vorgenommen, um ungefähr eine proportionale Größenänderung zu erreichen.

Längen und Prozente

Längenangaben und Prozente sind im Kapitel numerische Angaben erläutert. Für font-size sind negative Werte nicht erlaubt.

Prozentwerte beziehen sich auf die geerbte font-size, 100% entsprechen also dem Wert des Elternelementes. Entsprechend ist 1em der aktuelle Wert des Elternelementes - der berechnete Wert von font-size und 1ex bestimmt sich aus dem aktuellen 1em zusammen mit der verwendeten Schriftart. Beim Wurzelement entsprechen 100% oder 1em genau dem Schlüsselwort 'medium' oder der vom Nutzer eingestellten optimalen Schriftgröße - von dieser sollte der Autor im normalen Textfluß auch nicht abweichen. Relevant und üblich sind anderen Textgrößen natürlich für besondere Strukturen wie Überschriften.

Hinsichtlich der sinnvollen Verwendbarkeit der möglichen Einheiten kommt es stark darauf an, von wem die Stilvorlage stammt und um welchen Inhalt es sich handelt.

Weil der Nutzer volle Kontrolle und Kenntnis über das verwendete Gerät und das Darstellungsprogramm und seine eigenen Sehgewohnheiten hat, kann dieser natürlich sehr gut Einheiten wie mm, cm, pt, pc, in oder px verwenden, auch für die Stilvorlage des Darstellungsprogrammes kann das sinnvoll sein. Der Autor eines Textes wird hingegen keine Kontrolle oder Kenntnis über diese Dinge haben, daher sind diese Einheiten für ihn weitgehend ungeeignet, jedenfalls für die Präsentation von Text auf einem Monitor. Die Einheit px kann sich noch gut eignen, wenn eine Box nur Pixelgraphik und keinen Text enthält. Für Stilvorlagen zum Drucken können auch die Einheiten mm, cm, pt, pc oder in geeignet sein, sofern der Autor jedenfalls den Druck selbst vornimmt, also zwangsläufig entscheiden muß, wie groß der Text gedruckt werden soll. Werden Text und Stilvorlage hingegen nur bereitgestellt, damit sie vom Nutzer gedruckt werden können, ist es natürlich wesentlich sinnvoller, dass sich die Stilvorlage wie bei der Darstellung am Monitor auch an der vom Nutzer voreingestellten optimalen Größe orientiert, also entweder Schlüsselwörter für die absoluten oder relativen Angaben verwendet oder Einheiten wie em oder ex oder Prozentwerte.

Wie bereits im Kapitel numerische Angaben erläutert, ist zudem die Bedeutung der Einheiten mm, cm, pt, pc, in oder px in CSS2.1 korrumpiert und schon daher nicht verläßlich für Autoren, während die Nutzer immerhin noch direkt nachprüfen können, was das Darstellungsprogramm aus diesen Einheiten macht.

Als Faustformel für Autoren kann also gelten: Für Boxen, die Text enthalten, sind Schriftgrößen mit den Schlüsselwörtern anzugeben oder in Prozentwerten oder in den Einheiten em oder ex. Bei den anderen Einheiten ist eine Prognose über die Präsentation nur schwer möglich und kann beim Nutzer zudem zu Problemen mit der Lesbarkeit führen, was diesen dazu nötigen kann, die Interpretation von Stilvorlagen komplett zu deaktivieren. Ergibt sich aus der Kaskade eine Schriftgröße, die kleiner als die vom Nutzer angegebene minimale Schriftgröße ist, wird diese auf die minimale Schriftgröße korrigiert, folglich darf ein Autor nicht damit rechnen, dass die Angabe von Schriftgrößen garantiert den gewünschten Effekt hat, wenn diese kleiner als 1em für das Wurzelelement ist (ein direktes Maß für die eventuell kleinere minimale Schriftgröße hat der Autor nicht, diese ist jedenfalls nicht größer als 1em des Wurzelelementes).

Beispiele

p {
  font-size: 1em
}
.wichtig {
  font-size: 120%
}

h1 {
  font-size: xx-large
}
h2 {
  font-size: x-large
}
h3 {
  font-size: large
}
h4, h5, h6 {
  font-size: larger
}
sub, sup {
  font-size: small
}

Zurück zu Schriftart |

Hoch zu CSS |

Vor zu Schriftgewicht