Schriftgrösse (font-size) - Webseitenbau

2.4.4 Schriftgrösse (font-size)

1 Allgemein
2 Angabe der Schriftgrösse in Punkten (pt)
3 Angabe der Schriftgrösse in em
4 Schriftgrösse in Schlüsselworten

1 Allgemein

Prinzip

Mit font-size wird die Schriftgrösse bestimmt.
Erlaubt sind numerische Angaben , Prozentangaben und absolute und relative Schlüsselworte.
Prozentwerte beziehen sich auf die Schriftgrösse des Elternelements.

SELFHTML: font-size (Schriftgrösse)
SELFHTML: Beispieltext

Workshops

W3Schools: Beispiel: Set the size of the font

Web Design Group: Syntax: font-size

CSS 4 You: Schriftgrösse (font-size)
CSS 4 You: Beispiel

Stichpunkt: Welche Massangabe sollte man für Schriften verwenden?
Stichpunkt: Testseite zur Zeilenbreite

HTML-Seminar: HTML-Tags für Schriftgrösse
HTML-Seminar: Punkt/Inch/Millimeter-Umrechner

2 Angabe der Schriftgrösse in Punkten (`pt`)

<p>
 <span style="font-size:6pt">Beispieltext
 mit Schriftgrösse 6pt</span><br>
 <span style="font-size:8pt">Beispieltext
 mit Schriftgrösse 8pt</span><br>
 <span style="font-size:10pt">Beispieltext
 mit Schriftgrösse 10pt</span><br>
 <span style="font-size:12pt">Beispieltext
 mit Schriftgrösse 12pt</span><br>
 <span style="font-size:14pt">Beispieltext
 mit Schriftgrösse 14pt</span><br>
 <span style="font-size:18pt">Beispieltext
 mit Schriftgrösse 18pt</span><br>
</p>

Beispieltext mit Schriftgrösse 6pt
Beispieltext mit Schriftgrösse 8pt
Beispieltext mit Schriftgrösse 10pt
Beispieltext mit Schriftgrösse 12pt
Beispieltext mit Schriftgrösse 14pt
Beispieltext mit Schriftgrösse 18pt

3 Angabe der Schriftgrösse in `em`

⇒ Diese Angaben werden auch im CSS-Stylesheet dieser Anleitung verwendet.

Beispiel der Formatierung einer Tabellenzeile im Quelltext:

<td style="font-size:10px">font-size:10px</td>
<td style="font-size:0.63em">font-size:0.63em</td>

Tabelle:

Basisschriftgrösse: 100.1% bei Browsereinstellung von 16px
font-size:10px	font-size:0.63em
font-size:11px	font-size:0.69em
font-size:12px	font-size:0.75em
font-size:13px	font-size:0.82em
font-size:14px	font-size:0.88em
font-size:15px	font-size:0.93em
font-size:16px	font-size:1em
font-size:17px	font-size:1.06em
font-size:18px	font-size:1.12em
font-size:19px	font-size:1.19em
font-size:20px	font-size:1.25em
font-size:21px	font-size:1.32em
font-size:22px	font-size:1.38em
font-size:23px	font-size:1.44em
font-size:24px	font-size:1.5em
font-size:25px	font-size:1.56em
font-size:26px	font-size:1.63em
font-size:27px	font-size:1.69em
font-size:28px	font-size:1.75em
font-size:29px	font-size:1.82em
font-size:30px	font-size:1.88em
font-size:31px	font-size:1.94em
font-size:32px	font-size:2.01em

Turski: "em" nicht nur für Schriftgrössen!
Turski: Stylesheet

Einfach für Alle: Mikroskopischer Text im MS IE

4 Schriftgrösse in Schlüsselworten

a) Absolute Schlüsselworte

<span style="font-size:xx-small">xx-small = winzig</span>

xx-small = winzig

<span style="font-size:x-small">x-small = sehr klein</span>

x-small = sehr klein

<span style="font-size:small">small = klein = kleiner als normal</span>

small = klein = kleiner als normal

<p>Normale Grösse</p>

Normale Grösse

<span style="font-size:medium">medium = mittel</span>

medium = mittel

<span style="font-size:big">big = big = grösser als normal</span>

big = big = grösser als normal

<span style="font-size:large">large = gross</span>

large = gross

<span style="font-size:x-large">x-large = sehr gross</span>

x-large = sehr gross

<span style="font-size:xx-large">xx-large = riesig</span>

xx-large = riesig

b) Relative Schlüsselworte

<span style="font-size:smaller">smaller = kleiner als im Elternelement</span>

smaller = kleiner als im Elternelement

<p>Normale Grösse</p>