Textauszeichnungen
Fließtext
In der traditionellen Typografie werden für Fließtext die Textauszeichungen Fettsatz, Kursivsatz, Kapitälchensatz und Sperrsatz verwendet. Erlaubt die Darstellung auch Graustufen oder Farbe, kann Text auch durch die Schriftfarbe oder eine Hinterlegung ausgezeichnet werden.
Weiterhin kann Text auch durch eine andere Schriftart oder eine unterschiedliche Schriftgröße hervorgehoben werden.
Typografisch missbilligte oder veraltete Auszeichungen sind Unterstreichungen und Versalsatz.
HMTL 5 stellt für das Webdesign noch weitere Auszeichnungsmöglichkeiten zur Verfügung. Dazu gehören die Kennzeichnungen von Computercode
, Kurzzitaten
und Werktiteln.
Satzzeichen, auch am Ende eines ausgezeichneten Textteils, werden in der Regel mit ausgezeichnet. Bindestrich, Gedankenstrich und Gleichheitszeichen werden in Verbindung mit Auszeichnungen immer mit ausgezeichnet. Ist der Text zwischen Anführungszeichen oder Klammern komplett ausgezeichnet, so werden auch die ihn umschließenden Zeichen ausgezeichnet gesetzt. Ist nur ein Teil des Textes ausgezeichnet, so werden die umschließenden Zeichen nicht ausgezeichnet – auch wenn ein ausgezeichnetes Wort am Anfang oder Ende steht.
Wilhelm Raabe schrieb „Das Odfeld“, einen historischen Roman.
Wilhelm Raabe schrieb „Das Odfeld“, einen historischen Roman.
Der Roman „Das Odfeld“ (von Wilhelm Raabe) spielt im Siebenjährigen Krieg.
Wilhelm Raabes bester Roman (Das Odfeld) spielt im Siebenjährigen Krieg.
Übliche Textauszeichnungen
Fettsatz
Fettsatz gehört zu den sogenannten lauten, optischen oder visuellen Schriftauszeichnungen, die auf den ersten Blick erkannt werden können, weil sie den Grauwert verändern und sich vom Fließtext abheben.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Das Element „strong“ kennzeichnet wichtigen Text, welcher standardmäßig fett dargestellt wird.
<strong>
XFettX</strong>
Derselbe visuelle Effekt kann in HTML5 auch mit dem Attribut „style“ und der Eigenschaft „font-weight“ erreicht werden.
<span style="font-weight: bold">
XFettX</span>
Mögliche Werte sind neben anderen bold
und normal
.
In älteren HTML-Versionen wurde das Element „b“ genutzt.
Kursivsatz
Kursivsatz gehört zu den sogenannten leisen Schriftauszeichnungen, weil der Grauwert des Textbildes nicht verändert wird, und damit weniger auffällt.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Das Element „em“ (für englisch „emphasised“, betont) kennzeichnet betonten Text, welcher standardmäßig kursiv dargestellt wird.
<em>
XKursivX</em>
Derselbe visuelle Effekt kann in HTML5 auch mit dem Attribut „style“ und der Eigenschaft „font-style“ erreicht werden.
<span style="font-style: italic">
XKursivX</span>
Mögliche Werte sind neben anderen italic
und normal
.
In älteren HTML-Versionen wurde das Element „i“ genutzt.
Kapitälchensatz
Kapitälchen haben die Form von Großbuchstaben, sind aber in Größe, Strichstärke und Grauwert an Kleinbuchstaben angepasst. Dadurch ergibt sich ein ruhiges, elegantes Schriftbild. Echte Kapitälchen sind speziell für eine Schriftart entworfene Zeichen, falsche Kapitälchen hingegen nur verkleinerte Großbuchstaben.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Diese Auszeichnung wird mit dem Attribut „style“ und der Eigenschaft „font-variant“ vorgenommen. Sie ist nur optisch und hat keine weitere Bedeutung.
<span style="font-variant-caps: small-caps">
XKapitälchenX</span>
Mögliche Werte sind neben anderen normal
oder small-caps
(Kapitälchen).
Sperrsatz
Sperren, auch spationieren, ist die Textauszeichnung durch Vergrößerung der Buchstabenabstände.
Beim Sperren werden traditionell Leerzeichen vor und nach dem gesperrten Text mitgesperrt, Satzzeichen außer Punkt und Anführungszeichen ebenfalls. Ziffern werden nicht gesperrt. Sperren wird üblicherweise mit einem Achtelgeviert (0,125 Geviert) durchgeführt. Beim Webdesign allerdings scheint ein Fünftelgeviert (0,2 Geviert) eine bessere optische Wirkung zu haben. Aufgrund der erschwerten Lesbarkeit sollten nicht mehr als drei bis fünf Wörter gesperrt werden. Früher häufiger angewandt, speziell bei Frakturschriften, wird die Sperrschrift heute meist durch Fett- oder Kursivschrift ersetzt. Im Fraktursatz werden die Ligaturen ch, ck und tz nicht mitgesperrt. Sperren war, neben dem Unterstreichen, eine der beiden einzigen Auszeichnungsarten, welche bei mechanischen Schreibmaschinen zur Verfügung stand.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Diese Auszeichnung wird mit dem Attribut „style“ und der Eigenschaft „letter-spacing“ vorgenommen. Sie ist nur optisch und hat keine weitere Bedeutung.
<span style="letter-spacing: 0.2em">
XSperrsatzX</span>
Mögliche Werte sind Längeneinheiten und normal
.
Hinterlegung
Diese Auszeichnung kann auch für Absätze genutzt werden.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Das Element „mark“ kennzeichnet Text als markiert oder hervorgehoben, welcher standardmäßig in schwarzer Schriftfarbe auf gelbem Hintergrund dargestellt wird.
<mark>
XHinterlegungX</mark>
Alternativ kann das Attribut „style“ genutzt werden. Es wirkt nur optisch und hat keine weitere Bedeutung.
<span style="background-color: gold">
XHinterlegungX</span>
Farbwerte können mit vordefinierten Farbnamen (mediumslateblue
) oder als RGB-Farben in Dezimal- (rgb(255, 99, 71)
) oder Hexadezimalschreibweise (#ff6347
) angegeben werden. Der Standardwert für die Hintergrundfarbe ist transparent
.
Farbauszeichnung
Textfarben zur Auszeichnung sollten im Internet nur eingesetzt werden, wenn klar von Links unterschieden werden kann. Diese Auszeichnung kann auch auch für Absätze genutzt werden.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Farbauszeichnung wird mit dem Attribut „style“ und der Eigenschaft „color“ vorgenommen. Sie ist nur optisch und hat keine weitere Bedeutung.
<span style="color: green">
XTextfarbeX</span>
Farbwerte können mit vordefinierten Farbnamen (mediumslateblue
) oder als RGB-Farben in Dezimal- (rgb(255, 99, 71)
) oder Hexadezimalschreibweise (#ff6347
) angegeben werden. Der Standardwert für die Textfarbe ist black
.
Typografisch unübliche Textauszeichnungen
Unterstreichen
Unterstreichungen sind ein Überbleibsel aus der Schreibmaschinenzeit und werden für gute Typografie nicht verwendet.
Beim Unterstreichen werden Wortzwischenräume und Satzzeichen der unterstrichenen Wörter mit unterstrichen (nicht aber Leerzeichen vor und nach unterstrichenen Textteilen). Im Internet sollten Unterstreichungen nur eingesetzt werden, wenn klar von Links unterschieden werden kann.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Diese Auszeichnung wird mit dem Attribut „style“, der Eigenschaft „text-decoration“ und dem Wert „underline“ vorgenommen. Sie ist nur optisch und hat keine weitere Bedeutung.
<span style="text-decoration: underline">
XUnterstreichenX</span>
Mögliche Werte sind neben anderen none
, underline
(unterstreichen), overline
(überstreichen) und line-through
(durchstreichen).
In älteren HTML-Versionen wurde das Element „u“ genutzt.
Versalsatz
Versalsatz ist das Schreiben in Großbuchstaben. Versalsatz wird für gute Typografie im Fließtext aufgrund der schlechten Lesbarkeit und des störenden Textbildes nicht verwendet. Häufig wird Versalsatz auch als aufdringlich empfunden. Für Schlagzeilen und Werbezwecke wird Versalsatz benutzt, um Aufmerksamkeit zu erzielen. Aufgrund der schlechten Lesbarkeit sollten nicht mehr als drei bis fünf Wörter in Großbuchstaben gesetzt werden.
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Versalsatz wird mit dem Attribut „style“, der Eigenschaft „text-transform“ und dem Wert „uppercase“ vorgenommen. Er ist nur optisch und hat keine weitere Bedeutung.
<span style="text-transform: uppercase">
XVersalsatzX</span>
Mögliche Werte sind neben anderen none
, uppercase
(Versalsatz), lowercase
(Minuskelsatz) und capitalize
.
Bedeutungstragende Textformatierung
Hochstellung
Hochgestellte Zeichen werden von der Schriftlinie erhöht und meist etwas verkleinert dargestellt.
Beispiel: Die Formel E = m ⋅ c2 stammt von Einstein.
Webdesign/HTML5
Das Element „sup“ (kurz für „superscript“, englisch für Hochstellung) kennzeichnet höhergestellten Text, welcher standardmäßig hochgestellt und in einer kleineren Schriftgröße dargestellt wird.
<sup>
XHochstellungX</sup>
Hochgestellter Text wird mit dem CSS-Wert „smaller“ dargestellt, welcher die Schriftgröße um ⅙ reduziert, also Text mit etwa 83,33 Prozent der Größe des Elternelements darstellt.
Tiefstellung
Tiefgestellte Zeichen werden von der Schriftlinie nach unten versetzt und meist etwas verkleinert dargestellt.
Beispiel: Die Formel H20 steht für Wasser.
Webdesign/HTML5
Das Element „sub“ (kurz für „subscript“, englisch für Tiefstellung) kennzeichnet tiefergestellten Text, welcher standardmäßig tiefgestellt und in einer kleineren Schriftgröße dargestellt wird.
<sub>
XTiefstellungX</sub>
Tiefgestellter Text wird mit dem CSS-Wert „smaller“ dargestellt, welcher die Schriftgröße um ⅙ reduziert, also Text mit etwa 83,33 Prozent der Größe des Elternelements darstellt.
Durchstreichen
Durchstreichen eines Textes gilt als Tilgung oder Löschung, es zeigt eine ältere oder korrigierte Textversion an.
Beispiel: Raabe wurde in Braunschweig in Eschershausen geboren.
Webdesign/HTML5
Das Element „del“ (kurz für „delete“, englisch für tilgen) kennzeichnet gelöschten Text, welcher standardmäßig durchgestrichen dargestellt wird.
<del>
XDurchstreichenX</del>
Spezielle Textauszeichnungen in HTML 5
Computercode
HTML 5 stellt eine spezielle Kennzeichnung für Computercode bereit.
Beispiel: Mit dem Befehl print
kann man drucken.
Webdesign/HTML5
Das Element „code“ kennzeichnet Computercode, welcher standardmäßig in einer nichtproportionalen Schriftart dargestellt wird.
<code>
XComputercodeX</code>
Werktitel
–
Beispiel: Raabe hat den Roman Das Odfeld geschrieben.
Webdesign/HTML5
Das Element „cite“ (englisch für zitieren) kennzeichnet den Titel eines Werkes, welcher standardmäßig kursiv dargestellt wird.
<cite>
XWerktitelX</cite>
Kurzzitat
Zitate werden üblicherweise in Anführungszeichen eingeschlossen. HTML 5 bietet ein semantisches Element, um Zitate zu markieren. Die Anführungszeichen werden dadurch zwar angezeigt, sind aber im Quelltext nicht vorhanden, wodurch das Kopieren von Text erschwert wird.
Beispiel: Das Zitat Frei durchgehen!
stammt von Wilhelm Raabe.
Webdesign/HTML5
Das Element „q“ (kurz für „quote“, englisch für Zitat) kennzeichnet ein Zitat, welches standardmäßig mit umschließenden Anführungszeichen dargestellt wird.
<q>
XKurzzitatX</q>
Längeres Zitat
Längere Zitate, die in einem eigenen Absatz dargestellt werden, können zur Kennzeichnung eingerückt werden.
Beispiel: Absätze können als Langzitate speziell gekennzeichnet werden.
Webdesign/HTML5
Das Element „blockquote“ kennzeichnet ein längeres Zitat, welches standardmäßig als eingerückter Absatz dargestellt wird. Innerhalb dieses Blockelements können verschiedene Absätze enthalten sein, die mit „p“ voneinander abgegrenzt werden. „Blockquote“-Elemente innerhalb von „p“-Absatzelementen sind nicht zulässig.
<blockquote>
XSchriftgrößeX</blockquote>
Standardmäßig sind rechts und links Ränder von 40 Pixeln eingestellt.
Absatzauszeichnungen
Absatzausrichtung
Absätze können zentriert (mittig), linksbündig, rechtsbündig oder im Blocksatz dargestellt werden.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Absätze werden mit dem Attribut „style“ und der Eigenschaft „text-align“ ausgerichtet, welches nur eine optische Bedeutung hat.
<p style="text-align: justify">
XAbsatzX</p>
Werte können center
(zentriert), justify
(Blocksatz), left
(linksbündig) und right
(rechtsbündig) sein.
Einzug
Ein Einzug ist ein Leerraum zu Beginn der ersten Zeile eines Absatzes. Laut Wikipedia galten früher im Werksatz zwei Gevierte als größter zulässiger Einzug, heute ist ein Geviert üblich.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Einzüge werden mit dem Attribut „style“ und der Eigenschaft „text-indent“ definiert, welches nur eine optische Bedeutung hat.
<p style="text-indent: 1.5em">
XEinzugX</p>
Größenangaben können auch in Pixeln (px), Gevierten (em), Prozent (%), Zentimetern (cm), Millimeter (mm), Punkten (pt) und anderen Einheiten gemacht werden. Schriftgrößenstandard ist 100% = 16px = 1em.
Einrücken
Absätze können eingerückt werden, das heißt mit einem größeren Absatz zum linken Rand dargestellt werden.
Beispiel: Raabe hat den Roman „Das Odfeld“ geschrieben.
Webdesign/HTML5
Absätze werden mit dem Attribut „style“ und der Eigenschaft „margin-left“ eingerückt, welches nur eine optische Bedeutung hat.
<p style="margin-left: 1.5em">
XEinrückenX</p>
Größenangaben können auch in Pixeln (px), Gevierten (em), Prozent (%), Zentimetern (cm), Millimeter (mm), Punkten (pt) und anderen Einheiten gemacht werden. Schriftgrößenstandard ist 100% = 16px = 1em.
Schriftart und Schriftgröße
Schriftart
–
Beispiel: Text kann in unterschiedlichen Schriftarten dargestellt werden.
Webdesign/HTML5
Die Schriftart wird mit dem Attribut „style“ und der Eigenschaft „font-family“ festgelegt, welches nur eine optische Bedeutung hat.
<span style="font-family: Helvetica, Arial, sans-serif">
XSchriftartX</span>
Generische Schriftfamilien sind serif
, sans-serif
, monospace
(Festbreitenschrift), cursive
(Schreibschrift) und fantasy
.
Als im Internet sicher verfügbare Schriftarten gelten: Arial, Verdana, Tahoma, 'Trebuchet MS' (alle serifenlos), 'Times New Roman', Georgia, Garamond (alles Serifenschriften), 'Courier New' (nichtproportional) und 'Brush Script MT' (handschriftlich).
Für Schriftarten können ein einziger Wert oder mehrere durch Kommas getrennte Werte angegeben werden. Die erste verfügbare Schriftart aus der Auflistung wird angezeigt. Zur Sicherheit sollte am Ende der Aufzählung eine generische Schriftfamilie stehen.
Schriftgröße
–
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Die Schriftgröße wird mit dem Attribut „style“ und der Eigenschaft „font-size“ festgelegt, welches nur eine optische Bedeutung hat.
<span style="font-size: large">
XSchriftgrößeX</span>
Mit den Werten xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
können sieben verschiedene Schriftgrößen gesetzt werden. Zudem können Größenangaben auch in Gevierten (em oder rem), Prozent (%), Pixeln (px) und anderen Einheiten gemacht werden.
Schriftgrößenstandard ist medium = 1 em = 100% = 16px.
Kleine Schriftgröße
Auf einfache Art kann Text in kleinerer Schriftgröße gesetzt werden.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Das Element „small“ kennzeichnet kleinere Schrift, wie Randkommentare oder andere Hinweise.
<small>
XKleinschriftX</small>
Mit dem Element „small“ gekennzeichneter Text wird mit dem CSS-Wert „smaller“ dargestellt, welcher die Schriftgröße um ⅙ reduziert, also Zeichen mit etwa 83,33 Prozent der Größe des Elternelements darstellt.
CSS-Längeneinheiten
Absolute Längeneinheiten
Absatzausrichtung
Absätze können zentriert (mittig), linksbündig, rechtsbündig oder im Blocksatz dargestellt werden.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Absätze werden mit dem Attribut „style“ und der Eigenschaft „text-align“ ausgerichtet, welches nur eine optische Bedeutung hat.
<p style="text-align: justify">
XAbsatzX</p>
Werte können center
(zentriert), justify
(Blocksatz), left
(linksbündig) und right
(rechtsbündig) sein.
Einzug
Ein Einzug ist ein Leerraum zu Beginn der ersten Zeile eines Absatzes. Laut Wikipedia galten früher im Werksatz zwei Gevierte als größter zulässiger Einzug, heute ist ein Geviert üblich.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Einzüge werden mit dem Attribut „style“ und der Eigenschaft „text-indent“ definiert, welches nur eine optische Bedeutung hat.
<p style="text-indent: 1.5em">
XEinzugX</p>
Größenangaben können auch in Pixeln (px), Gevierten (em), Prozent (%), Zentimetern (cm), Millimeter (mm), Punkten (pt) und anderen Einheiten gemacht werden. Schriftgrößenstandard ist 100% = 16px = 1em.
Einrücken
Absätze können eingerückt werden, das heißt mit einem größeren Absatz zum linken Rand dargestellt werden.
Beispiel: Raabe hat den Roman „Das Odfeld“ geschrieben.
Webdesign/HTML5
Absätze werden mit dem Attribut „style“ und der Eigenschaft „margin-left“ eingerückt, welches nur eine optische Bedeutung hat.
<p style="margin-left: 1.5em">
XEinrückenX</p>
Größenangaben können auch in Pixeln (px), Gevierten (em), Prozent (%), Zentimetern (cm), Millimeter (mm), Punkten (pt) und anderen Einheiten gemacht werden. Schriftgrößenstandard ist 100% = 16px = 1em.
Schriftart
–
Beispiel: Text kann in unterschiedlichen Schriftarten dargestellt werden.
Webdesign/HTML5
Die Schriftart wird mit dem Attribut „style“ und der Eigenschaft „font-family“ festgelegt, welches nur eine optische Bedeutung hat.
<span style="font-family: Helvetica, Arial, sans-serif">
XSchriftartX</span>
Generische Schriftfamilien sind serif
, sans-serif
, monospace
(Festbreitenschrift), cursive
(Schreibschrift) und fantasy
.
Als im Internet sicher verfügbare Schriftarten gelten: Arial, Verdana, Tahoma, 'Trebuchet MS' (alle serifenlos), 'Times New Roman', Georgia, Garamond (alles Serifenschriften), 'Courier New' (nichtproportional) und 'Brush Script MT' (handschriftlich).
Für Schriftarten können ein einziger Wert oder mehrere durch Kommas getrennte Werte angegeben werden. Die erste verfügbare Schriftart aus der Auflistung wird angezeigt. Zur Sicherheit sollte am Ende der Aufzählung eine generische Schriftfamilie stehen.
Schriftgröße
–
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Die Schriftgröße wird mit dem Attribut „style“ und der Eigenschaft „font-size“ festgelegt, welches nur eine optische Bedeutung hat.
<span style="font-size: large">
XSchriftgrößeX</span>
Mit den Werten xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
können sieben verschiedene Schriftgrößen gesetzt werden. Zudem können Größenangaben auch in Gevierten (em oder rem), Prozent (%), Pixeln (px) und anderen Einheiten gemacht werden.
Schriftgrößenstandard ist medium = 1 em = 100% = 16px.
Kleine Schriftgröße
Auf einfache Art kann Text in kleinerer Schriftgröße gesetzt werden.
Beispiel: Schrift kann in unterschiedlichen Größen dargestellt werden.
Webdesign/HTML5
Das Element „small“ kennzeichnet kleinere Schrift, wie Randkommentare oder andere Hinweise.
<small>
XKleinschriftX</small>
Mit dem Element „small“ gekennzeichneter Text wird mit dem CSS-Wert „smaller“ dargestellt, welcher die Schriftgröße um ⅙ reduziert, also Zeichen mit etwa 83,33 Prozent der Größe des Elternelements darstellt.
CSS-Längeneinheiten
Absolute Längeneinheiten
Die Basislängeneinheit für die Formatvorlagensprache CSS ist der Pixel. Andere absolute Längeneinheiten werden im Webdesign normalerweise nicht verwendet.
- px (Pixel)
- cm (Zentimeter) ≈ 37,8 Pixel (exakt 96 / 2,54)
- mm (Millimeter) ≈ 3,78 Pixel (exakt 96 / 25,4)
- q (Viertelmillimeter) ≈ 0,94 Pixel (exakt 24 / 25,4)
- in (Zoll) = 96 Pixel
- pt (Punkt) ≈ 1,33 Pixel (exakt 1⅓)
- pc (Pica) = 16 Pixel
Weitere absolute Längeneinheiten für Schriftgrößen
Für die CSS-Eigenschaft Schriftgröße sind sieben benannte Werte definiert:
<span style="font-size: large">
XSchriftgrößeX</span>
Wert | Pixel px | Geviert em | Prozent % |
---|---|---|---|
xx-small | 9px | 0.5625em | 56.25% |
x-small | 10px | 0.6250em | 62.50% |
small | 13px | 0.8125em | 81.25% |
medium | 16px | 1.0000em | 100.00% |
large | 18px | 1.1250em | 112.50% |
x-large | 24px | 1.5000em | 150.00% |
xx-large | 32px | 2.0000em | 200.00% |
Relative Längeneinheiten
Als relative Längeneinheit eignet sich das Geviert, welches sich auf die Schriftgröße bezieht. Gevierte können relativ zum eigenen oder Elternelement in em angegeben werden, oder relativ zum Grundelement in rem.
- em (Geviert)
- Relativ zur Schriftgröße des jeweiligen Elternelements (parent element); bei Größenangaben für andere Eigenschaften allerdings relativ zum jeweils eigenen Element. Eine Größenangabe von 1 Geviert (
1em
) ist identisch mit der Elternelement-Schriftgröße, größere oder kleinere Wertangaben verändern die Größe im gleichen Verhältnis. Als Beispiel erhöht 1,5 Geviert (1.5em
) die Schriftgröße um 50 Prozent. Als Maßeinheit sind Gevierte ideal für ein skalierbares Layout nach den Bedürfnissen des Nutzers.
Ein Geviert (englisch: em) ist eine typografische Maßeinheit für die Schriftgröße aus der Zeit des Bleisatzes. Es beschreibt die Schriftkegelgröße des Großbuchstabens M. - rem (Grundelement-Geviert)
- Relativ zur Schriftgröße des Grundelements (root element), also der für das HTML-Element (
<html>
) definierten Schriftgröße. Standardmäßig liegt diese bei 16 Pixel oder einem Geviert (16px
=1em
=100%
=medium
). Als Maßeinheit sind Gevierte ideal für ein skalierbares Layout nach den Bedürfnissen des Nutzers. - lh (Zeilenhöhe)
- Relativ zum Zeilenabstand des jeweiligen Elternelements (root element).
- rlh (Grundelement-Zeilenhöhe)
- Relativ zum Zeilenabstand des Grundelements (root element), also der für das HTML-Element (
<html>
) definierten Zeilenhöhe. Standardmäßig liegt diese bei dem CSS-Wert „normal“ (line-height: normal
). Der Standardwert hängt von der jeweiligen Schriftart und dem Browser ab, meist liegt er bei oder knapp unter 1,2 Geviert (1.2em
). - % (Prozent)
- Relativ zur Größe des jeweiligen Elternelements. Für die CSS-Schriftgrößen-Eigenschaft ist ein Wert von 100 Prozent (
100%
) identisch mit der Elternelement-Schriftgröße, größere oder kleinere Wertangaben verändern die Größe im gleichen Verhältnis. Als Beispiel erhöht 150 Prozent (150%
) die Schriftgröße um 50 Prozent.
Weitere relative Längeneinheiten für Schriftgrößen
- smaller (kleiner)
- Reduziert die Schriftgröße des Elternelements um ein Sechstel, also auf etwa 83,33 Prozent (
83.33%
). - larger (größer)
- Erhöht die Schriftgröße des Elternelements um ein Fünftel, also auf 120 Prozent (
120%
).
CSS-Schriftgrößen
Pixel | Geviert | Prozent | Wert | Beispiel | Kommentar |
---|---|---|---|---|---|
1px | 0.0625em | 6.25% | – | Eschershausen | |
2px | 0.1250em | 12.50% | – | Eschershausen | |
3px | 0.1875em | 18.75% | – | Eschershausen | |
4px | 0.2500em | 25.00% | – | Eschershausen | |
5px | 0.3125em | 31.25% | – | Eschershausen | |
6px | 0.3750em | 37.50% | – | Eschershausen | |
7px | 0.4375em | 43.75% | – | Eschershausen | |
8px | 0.5000em | 50.00% | – | Eschershausen | |
9px | 0.5625em | 56.25% | xx-small | Eschershausen | |
10px | 0.6250em | 62.50% | x-small | Eschershausen | |
11px | 0.6875em | 68.75% | – | Eschershausen | Ungefährer Standardwert für Überschrift sechster Ordnung <h6> (exakt 0.67em). |
12px | 0.7500em | 75.00% | – | Eschershausen | |
13px | 0.8125em | 81.25% | small | Eschershausen | Ungefährer Standardwert für Überschrift fünfter Ordnung <h5> (exakt 0.83em). |
14px | 0.8750em | 87.50% | – | Eschershausen | |
15px | 0.9375em | 93.75% | – | Eschershausen | |
16px | 1.0000em | 100.00% | medium | Eschershausen | Standardschriftgröße. |
17px | 1.0625em | 106.25% | – | Eschershausen | |
18px | 1.1250em | 112.50% | large | Eschershausen | |
19px | 1.1875em | 118.75% | – | Eschershausen | Ungefährer Standardwert für Überschrift dritter Ordnung <h3> (exakt 1.17em). |
20px | 1.2500em | 125.00% | – | Eschershausen | |
21px | 1.3125em | 131.25% | – | Eschershausen | Ungefährer Standardwert für Überschrift vierter Ordnung <h4> (exakt 1.33em). |
22px | 1.3750em | 137.50% | – | Eschershausen | |
23px | 1.4375em | 143.75% | – | Eschershausen | |
24px | 1.5000em | 150.00% | x-large | Eschershausen | Standardwert für Überschrift zweiter Ordnung <h2> . |
25px | 1.5625em | 156.25% | – | Eschershausen | |
26px | 1.6250em | 162.50% | – | Eschershausen | |
27px | 1.6875em | 168.75% | – | Eschershausen | |
28px | 1.7500em | 175.00% | – | Eschershausen | |
29px | 1.8125em | 181.25% | – | Eschershausen | |
30px | 1.8750em | 187.50% | – | Eschershausen | |
31px | 1.9375em | 193.75% | – | Eschershausen | |
32px | 2.0000em | 200.00% | xx-large | Eschershausen | Standardwert für Überschrift erster Ordnung <h1> . |
33px | 2.0625em | 206.25% | – | Eschershausen | |
34px | 2.1250em | 212.50% | – | Eschershausen | |
35px | 2.1875em | 218.75% | – | Eschershausen | |
36px | 2.2500em | 225.00% | – | Eschershausen | |
48px | 3.0000em | 300.00% | – | Eschershausen |
– | 1 Pixel px | 1 Geviert em | 1 Prozent % |
---|---|---|---|
= Pixel | 1.00px | 16.00px | 0.16px |
= Geviert | 0.0625em | 1.0000em | 0.0100em |
= Prozent | 6.25% | 100.00% | 1.00% |
Testbereich
style="font-variant-caps: small-caps"
Kapitälchen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
style="font-variant-caps: all-small-caps"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
style="font-variant-caps: petite-caps"
Kleine Kapitälchen. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
style="font-variant-caps: all-petite-caps"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
style="font-variant-caps: unicase"
Unikameral. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.
style="font-variant-caps: titling-caps"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ac maximus magna, pharetra efficitur urna. Quisque pellentesque dolor in lorem porta elementum. In hac habitasse platea dictumst. Nam rutrum risus erat, accumsan tincidunt erat egestas vel. Curabitur nibh libero, dapibus at libero at, vestibulum viverra lorem. In vehicula ornare metus, non commodo felis efficitur rutrum. Ut varius ipsum ipsum, et accumsan ligula semper vel. Nunc elementum vel dui a imperdiet. Integer rhoncus dignissim urna, vitae gravida mauris. Pellentesque laoreet eget dui nec eleifend. Donec ac mattis sapien. Vestibulum quis diam hendrerit, faucibus neque ut, vehicula mauris.
In in rutrum odio, quis condimentum mauris. Ut nibh ante, imperdiet non fringilla vel, dictum sit amet diam. Nullam non volutpat mi, id consequat massa. Phasellus in purus ante. Sed blandit tortor eu pharetra volutpat. Fusce cursus, velit ut tristique imperdiet, ex libero egestas eros, sit amet euismod ligula elit vel dolor. Nam aliquet orci sit amet urna ultricies, a commodo velit bibendum. In justo ex, euismod non urna sit amet, suscipit feugiat nulla. Quisque ac nunc mauris. Vivamus sit amet hendrerit leo. Sed lobortis quam nec nulla porta, ac elementum arcu luctus. Donec tristique sem mi, auctor lobortis justo interdum in. Nullam metus nisl, tempus hendrerit imperdiet sed, maximus et risus. Mauris mattis rutrum turpis ac venenatis. Phasellus tortor arcu, tincidunt sit amet laoreet a, bibendum vitae neque. Praesent vitae massa non justo accumsan efficitur a sit amet mi.